Leveraging style container queries to create an abstraction layer for supporting multiple theming systems.
Add the dependency to your project:
npm install postcss-add-theming-layer
or
yarn add -DW postcss-add-theming-layer
Use the plugin in your PostCSS configuration:
module.exports = {
plugins: {
"postcss-add-theming-layer": {},
},
};
or as part of your CLI command:
postcss -u postcss-add-theming-layer -o dist/index.css src/index.css
This optional input will prefix the new theming layer selector with the provided string. This can be useful if you want to namespace the injected selectors for the new theming layer to avoid conflicts.
Skip the mapping of the variables to the system variables. This can be useful if you only want to extract the variables and not map them to the system variables.
When used with skipMapping
, this option will preserve the variables defined inside the container query in the output by injecting them to the root selector.
This option will only output those variables that are referencing the newly created system variables and not the system variables themselves. This can be used as a bridge between an old and new implementation for the component.
This option will remove the local selectors (those that map to system variables) from the output leaving only the system definitions.
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.
This plugin turns this:
@container style(--system: legacy) {
.component {
--background-color: blue;
}
.component.is-selected {
--background-color: darkblue;
}
.component .icon {
--color: gray;
}
}
@container style(--system: modern) {
.component {
--background-color: purple;
}
.component.is-selected {
--background-color: darkpurple;
}
.component .icon {
--color: white;
}
}
Into this:
.legacy {
--system-component-background-color: blue;
--system-component-selected-background-color: darkblue;
}
.modern {
--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);
}
This plugin will ignore any underscore-prefixed variables, as they are considered private and not part of the theming layer.