styled-jsx-plugin-root-theme-provider
Plugin to use var
and :root
css power to build themed styled-jsx with older browser support. Under the hood it uses postcss-preset-env, so it will also enable latest css features.
Install
npm install --save styled-jsx-plugin-root-theme-provider
Next, add styled-jsx-plugin-root-theme-provider
to the styled-jsx
's plugins
in your
babel configuration:
For Next.js
Usage
Create a css file
./theme.css
Configure this file as theme file in .bablerc using themeFilePath
option
Make sure ./theme.css is part of your global css
Now in your styled-jsx use any var
or latest css feature supported by postcss-preset-env.
In browser this css will be translated to
Notes
styled-jsx-plugin-root-theme-provider uses styled-jsx's plugin system which is supported from version 2. Read more on their repository for further info.
Options
themeFilePath [Optional] : To configure theme css file path
postcssPresetEnvOptions [Optional] : To configure postcss-preset-env
Default stage for postcss-preset-env is 0
Contributing
PR's are welcome!
Thanks to all the contributors!