1.0.0-beta.1 • Published 2 years ago
postcss-splitinator v1.0.0-beta.1
postcss-splitinator
Splits custom properties organized by classes into named tokens
Installation
npm install postcss-splitinator
postcss -u postcss-splitinator -o dist/index.css src/index.css
Options
options.getName = function(selector, prop)
Customize the creation of variable names. By default, as SUIT naming convention is assumed and variable names are created accordingly.
options.processIdentifier = function(identifierValue, identifierName)
Customize the selectors that variables are placed in. Passed the value and key of the variable that was passed to the container, i.e. identifierValue = spectrum
and identifierName = system
for the example below. By default, identifierName
is used as-is.
options.noFlatVariables = false
Whether to avoid including flat variables in the output.
options.noSelectors = false
Whether to avoid including selectors that use the flat variables in the output.
Usage
This plugin turns this:
@container(--system: spectrum) {
.component {
--background-color: blue;
}
.component.is-selected {
--background-color: darkblue;
}
.component .icon {
--color: gray;
}
}
@container(--system: express) {
.component {
--background-color: purple;
}
.component.is-selected {
--background-color: darkpurple;
}
.component .icon {
--color: white;
}
}
Into this:
.spectrum {
--system-component-background-color: blue;
--system-component-selected-background-color: darkblue;
}
.spectrum--express {
--system-component-background-color: purple;
--system-component-selected-background-color: darkpurple;
}
.component {
--background-color: var(--system-component-background-color);
}
.component.is-selected {
--background-color: var(--system-component-selected-background-color);
}
1.0.0-beta.1
2 years ago
1.0.0-beta.0
2 years ago