CSS переменные в storybook 7?

Версия Storybook 7 представляет новое и улучшенное API для поддержки CSS переменных. Это отличное обновление, так как CSS переменные предлагают более гибкий и модульный подход к стилизации веб-приложения.

Для использования CSS переменных в Storybook 7 вам следует выполнить следующие шаги:

1. Установите Storybook 7 с помощью команды npx sb@next init, если вы не установили его ранее.

2. В файле main.js вашего Storybook-приложения добавьте следующий код для глобального импорта и определения CSS переменных:

module.exports = {
  ...
  "stories": [
    ...
  ],
  "addons": [
    ...
  ],
  "webpackFinal": async (config) => {
    config.module.rules.push({
      test: /.css$/,
      use: [
        {
          loader: 'postcss-loader',
          options: {
            plugins: [
              require('postcss-import'),
              require('postcss-css-variables'),
              require('autoprefixer')
            ]
          },
        },
      ],
    });

    return config;
  },
};

Этот код добавляет PostCSS-лоадер со следующими плагинами:

- postcss-import - позволяет импортировать другие CSS-файлы.
- postcss-css-variables - обрабатывает CSS переменные.
- autoprefixer - добавляет автопрефиксы для обеспечения совместимости с различными браузерами.

3. Создайте новый CSS-файл (например, variables.css) и определите в нем свои CSS переменные:

:root {
  --primary-color: #ff0000;
  --secondary-color: #00ff00;
}

4. В вашем компоненте или файле стилей вы можете использовать объявленные переменные следующим образом:

.my-component {
  color: var(--primary-color);
  background-color: var(--secondary-color);
}

Теперь вы можете использовать CSS переменные вместо статических значений в стилях ваших компонентов Storybook. Это позволяет вам более гибко настраивать внешний вид ваших компонентов и легко менять значения переменных по мере необходимости.

Кроме того, вы можете использовать CSS переменные в parameters.js вашего Storybook-приложения для настройки значений переменных для определенных сторибук-компонентов.

Например:

export const parameters = {
  cssVariables: {
    '--primary-color': '#ff0000',
    '--secondary-color': '#00ff00',
  },
};

Затем вы можете использовать эти значения в ваших стилях:

.my-component {
  color: var(--primary-color);
  background-color: var(--secondary-color);
}

Эти переменные будут применены только к компонентам, показываемым в Storybook, и не затронут другие части вашего приложения.

В заключение, использование CSS переменных в Storybook 7 позволяет вам значительно упростить и централизовать управление стилями в ваших компонентах. Благодаря этому ваш код становится более модульным, понятным и легким для обслуживания.