Provides saas like markup, color-mod function, custom @import resolvers and theme support
npm install postcss-qute
This plugin is powered by the following plugins (in this order):
- postcss-extend-rule
- postcss-advanced-variables
- postcss-atroot
- postcss-property-lookup
- postcss-nested
- postcss-color-mod-function
The plugin also provides a way to define themes, by replacing the default @import resolver of the postcss-advanced-variables plugin with a custom resolver implementation which uses the npm resolve resolver to resolve imported files.
Theme files should be placed inside a themes/{themeName} folder in the root of the project. The default theme name is default and will be used if no other theme is explicitly set.
In your CSS files where you want to import the current theme you should write:
``css`
@import "%theme"
This will import the index.css file located in the current theme directory: themes/{themeName}/index.css
To import other files from the theme directory, you should specify the path to the file:
`css`
@import "%theme/variables.css"
This will import the file themes/{themeName}/variables.css
To change the default theme (which name is default) you should pass the theme option to the postcss-qute plugin:
`javascriptpostcss
import postcss from ;postcss-qute
import quteCss from ;
postcss([
quteCss({
theme: 'redish'
})
])
``
The options object passed to postcss-qute will be passed to each nested plugin.