CSS-модули и накопительный пакет - создание отдельных CSS-файлов («тем») с одинаковыми хешами

Question

Я использую модули CSS (Sass) с накопительным пакетом в проекте библиотеки компонентов, который работает хорошо.Каждый компонент заканчивается папкой dist, содержащей один файл комплекта JS, и соответствующим файлом CSS с классами CSS с определенной областью, поэтому пользователям компонента не нужно беспокоиться о конфликтах имен классов CSS.Все, что они делают, это включают в себя JS-комплект и CSS-файл, и все отлично.Yay CSS Модули.

Проблема, с которой я сейчас сталкиваюсь, заключается в том, что некоторым компонентам действительно нужны отдельные «темы» - в идеале, отдельные файлы CSS, по одному на тему.Таким образом, потребители могут продолжать в том же духе: включая пакет JS, но теперь выбирать, какой CSS-файл включить для выбора темы.

Я не уверен, как добиться этого с помощью модулей и сводок CSS, и является ли этот подход даже другим подходом.Из того, что я вижу, накопительный пакет всегда обрабатывает вещи вместе, тогда как я хочу отдельные CSS-файлы, каждый из которых переименовывает свои классы одинаково на этапе сборки.Таким образом, если в моем JS я ссылаюсь на styles.myclass, если myclass был переименован в scoped-myclass модулями CSS для исходного файла CSS, то для второго файла CSS он также получит то же имя.

Это позволит максимально упростить потребление компонента - просто включить другой файл CSS.

Есть предложения?

Answer 1

Если я правильно понял, рассмотрите плагин SCSS: rollup-plugin-scss .Он захватывает все запасные .css файлы, импортированные в компоненты, а затем обрабатывает их через базовый node-sass.Суть в том, что, кажется, вы можете написать собственную функцию обратного вызова, которая будет обрабатывать ваши CSS по-разному в зависимости от условий, которые вы добавляете.

На основе примера со страницы плагина:

import scss from 'rollup-plugin-scss'
...

export default {
  input: 'src/index.tsx',
  output: [...],
  plugins: [
    ...
    output: function (styles, styleNodes) {
      // replace this with conditioned outputs as needed:
      writeFileSync('bundle1.css', styles)
      writeFileSync('bundle2.css', styles)
    },
  ]
}