postcss-theme - Proper theming for PostCSS
Super lightweight, straight-forward and written with performance in mind. Can be used with Webpack, JSPM/System.js or anywhere else where you use PostCSS!
What is it able to do?
You have a user interface and a bunch of CSS files / fancy CSS modules to style it. You want to be able to customize this styling. Let's say you have this CSS file:
/* header.css */ @// /* ../theme/colors.css */ @@/* ../theme/components/menu.css */
We are using the postcss-modules-values
plugin here, so we can declare variables and import variables from other files
using @value
.
And we use postcss-modules-extract-imports
so we can merge classes from different files into the current class using
composes: some-other-class from './other-file.css'
.
But you want to be able to change the styling! You could just overwrite all these style rules with your own ones, but that is a lot of work and you must adapt it everytime these rules change.
So we use postcss-theme and do this:
/* header.css */ /* `theme(colors)` will be re-written to `"./path/to/theme/colors.css"` */@);
When configuring the PostCSS plugins in your webpack config or JSPM CSS loader:
/* postcss plugins: */ /* all other plugins go here */
Ta-da! You are now able to specify the path to the directory containing your theme's CSS files during your build process. Just change it to a directory containing another theme if you want to change the styling.
Installation
npm install postcss-theme --save
Usage
Just add this plugin to your array of PostCSS plugins and pass it an options
object like { themePath: './path/to/theme-folder' }
.
Webpack
In your webpack config:
moduleexports = module: loaders: test: /\.css$/ loader: 'style-loader!css-loader!postcss-loader' { return // all other postcss plugins go here }
JSPM (jspm-loader-css)
In your css loader file (css.js
):
const fetch bundle = PluginslocalByDefault PluginsextractImports Pluginsscope Pluginsvalues // or any other postcss plugins __moduleName
Vanilla postcss call
// ...
Changelog
Version 1.1.1
Pass css.source
to custom file path resolvers.
Version 1.1.0
Allow passing a custom file path resolver function (options.themeFileResolver
).
Version 1.0.1
Windows fix. See this issue.
Version 1.0.0
Initial release.
License
This plugin is released under the terms of the MIT license. See LICENSE for details.