styled-jsx-plugin-root-theme-provider v1.1.1
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:
{
"plugins": [
[
"styled-jsx/babel",
{
"plugins": [
[
"styled-jsx-plugin-root-theme-provider",
{
"themeFilePath": "./theme.css"
}
]
]
}
]
]
}
For Next.js
{
"presets": [
[
"next/babel",
{
"styled-jsx": {
"plugins": [
[
"styled-jsx-plugin-root-theme-provider",
{
"themeFilePath": "./theme.css"
}
]
]
}
}
]
]
}
Usage
Create a css file
./theme.css
:root {
--red: red,
--blue: #000032;
}
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.
<style jsx>
.a {
background: var(--red);
}
</style>
In browser this css will be translated to
.a {
background: red;
background: var(--red);
}
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!