Извлечение разницы CSS для стилей с учетом темы

Question

У меня есть проект, где CSS генерируется из Sass через веб-пакет. У меня есть несколько переменных Sass, которые используются для их создания: $ color-primary, $ color-bg, ...

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

Проблема в том, что и у app-light.css, и у app-dark.css есть большинство общих стилей, так как они не учитывают темы.

ЧтоЯ хочу, чтобы извлекал все селекторы и свойства, которые поддерживают тему , и сохранял его в app-dark.css, поэтому он содержит только данные, относящиеся к теме.

Пример diff (app-light.css и app-dark.css бок о бок):

Мне нужно найти инструмент или способ создания app-dark.css, который бысгенерируйте следующее для показанного diff:

h1 { color:#fff; }

Вот и все, потому что это единственное свойство и селектор, поддерживающее тему.

Answer 1

Вы можете сделать чистое разделение с помощью глобальных переменных Sass и миксина.

Я предполагаю, что ваша отправная точка - это два отдельных файла и, вероятно, некоторые партиции Sass, которые импортированы и скомпилированы в этих двухfiles.

Сначала выберите ваших чемпионов в каждом из файлов, например:

/* In app-light.scss */
$globalTheme: light !global;

/* In app-dark.scss */
$globalTheme: dark !global;

Затем создайте @mixin, который возвращает содержимое, только если ваша глобальная переменная И аргумент mixin либо light или dark , например:

/* @mixin onlyInTheme() */
@mixin onlyInTheme($theme: null) {
    @if (global-variable-exists(globalTheme)) {
        @if ($theme == light and $globalTheme == light) {
            @content;
        }
        @if ($device == dark and $globalTheme == dark) {
            @content;
        }
    } @else {
        @warn "Global $appTheme variable does not seem to exist. No mixin for you!";
    }
}

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

h1 {
    font-weight: 400; 
    margin: 0 0 3rem;
    line-height: 1.3;

    @include onlyInTheme(light) {
        color: #000;
    }

    @include onlyInTheme(dark) {
        color: #fff;
    }
}

Это должно дать вам разницу между двумя файлами.