Могу ли я сгенерировать файлы уровня компонента css, используя Rollup Js для моей библиотеки компонентов?

Question

Я сталкиваюсь с некоторыми проблемами при попытке создать библиотеку компонентов с помощью Rollup JS.

Я создаю библиотеку компонентов реагирования для использования в других проектах. Библиотека использует css -модули для оформления компонентов. В настоящее время у меня есть базовая c версия библиотеки компонентов, но когда я использую ее в проекте Gatsby, я получаю FOU C (потому что js вводится в голову с javascript). Это заставило меня извлечь CSS и вставить его в голову потребляющего приложения, но я не думаю, что это путь к go.

Что я хотел бы сделать sh заключается в том, что каждый компонент предоставляет свою собственную таблицу стилей, поэтому приложение-потребитель может импортировать только тот стиль компонентов, который ему необходим. (Еще лучший подход заключается в том, что нам нужно импортировать только тот компонент, который нам нужен, и он предоставит CSS приложению, но это этап 2)

Структура моего проекта выглядит следующим образом

- src
  - components
    - component_1
        * index.js
        * styles.module.scss
    - component_2
        * index.js
        * styles.module.scss

Чтобы иметь возможность ссылаться на стили каждого компонента по отдельности, я (думаю) мне понадобится структура вывода, например

- dist
  - modules
    - components
      - component_1
        * … (files generated by rollup)
        * styles.css
      - component_2
        * … (files generated by rollup)
        * styles.css

Я возился с настройкой свертывания и пришел к этому пункт: приведенная ниже конфигурация дает мне один большой индексный файл CSS, но в зависимости от того, как будет расти библиотека, я не думаю, что это хорошая практика - всегда включать все стили компонентов (даже те, которые не не используется)

import babel from "rollup-plugin-babel";
import peerDepsExternal from "rollup-plugin-peer-deps-external";
import postcss from "rollup-plugin-postcss";
import resolve from "rollup-plugin-node-resolve";
import prettier from "rollup-plugin-prettier";

export default {
    input: "src/index.js",
    output: [
        {
            dir: "build/modules",
            format: "esm",
            exports: "named",
            sourcemap: true,
        },
        {
            dir: "build/common",
            format: "cjs",
            exports: "named",
            sourcemap: true,
        },
    ],
    plugins: [
        peerDepsExternal(),
        resolve(),
        prettier({ parser: "babel" }),
        postcss({
            modules: true,
            extract: true,
        }),
        babel({
            exclude: "node_modules/**",
        }),
    ],
    external: ["react", "react-dom"],
    preserveModules: true,
};

Кто-нибудь знает, как я мог go разрешить накопительному пакету создавать файлы CSS на уровне компонентов, а не на уровне библиотек? Я рассмотрел варианты, которые могут предложить rollup и rollup-plugin-post css, но я не вижу решения этой проблемы.