Могу ли я использовать css-модули с LESS + nesting?

Документация на css-modules довольно редкая, поэтому я не уверен, могу ли я это сделать или нет.

В этой статье говорится, что стиль стилизации кнопки с состояниями normal и error будет выглядеть следующим образом:

.common { /* font-sizes, padding, border-radius */ }
.normal { composes: common; /* blue color, light blue background */ }
.error { composes: common; /* red color, light red background */ }

Но я бы предпочел написать его вот так:

.common {
    /* font-sizes, padding, border-radius */
    &.normal { /* blue color, light blue background */ }
    &.error { /* red color, light red background */ }
}

Как я всегда делал, не вводя новый синтаксис composes. Я думаю, что более ясно, какие стили строятся поверх других стилей, если я действительно могу их вставить в код.

Но я не знаю, что это будет экспортироваться как css-modules? Единственными примерами, которые они дают, являются простые селектора классов. Я понятия не имею, что относительно .common.normal будет экспортироваться как, или что .common > .normal ~ .strange? Я вообще не должен использовать какой-либо селектор CSS, если я использую css-модули?

Ответ 1

Я также использую меньше с модулями css, но я не думаю, что они используют "&". подходит для целей модулей css. По моему мнению, "составы" более похожи на @import, чем &, и я только нахожу себя использующим и для psuedo-классов.

Вы можете определенно делать то, что у вас есть, но не удивительно, что вам нужно указывать как "обычные", так и "нормальные" классы в HTML? Гораздо лучше, на мой взгляд, просто указать "нормальный" и позволить нормальному наследовать общие стили, используя "compose".

Ответ 2

.common {
    /* font-sizes, padding, border-radius */
    :global {
        &.normal { /* blue color, light blue background */ }
        &.error { /* red color, light red background */ }
    }
}

Это мое решение. Если вы используете styles.common, css будет:

.ramdomStrings {
    /* I'm not sure if this exists, but it doesn't matter */
}
.ramdomStrings.normal { /* blue color, light blue background */ }
.randomStrings.error { /* red color, light red background */ }

Ответ 3

Если вы используете загрузчик webpack для css-модулей, вы можете использовать postcss загрузчик и добавлять различные плагины для получения желаемого поведение.

Существует, например, плагин postcss-nested, который позволяет писать вложенные правила.