https://github.com/farefirst/styled-jsx-plugin-root-theme-provider
Plug-in to use :root selector power to build themed Styled-JSX
https://github.com/farefirst/styled-jsx-plugin-root-theme-provider
postcss-preset-env styled-jsx styled-jsx-plugin theme-provider
Last synced: about 1 year ago
JSON representation
Plug-in to use :root selector power to build themed Styled-JSX
- Host: GitHub
- URL: https://github.com/farefirst/styled-jsx-plugin-root-theme-provider
- Owner: FareFirst
- License: gpl-3.0
- Created: 2018-08-31T21:25:54.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2022-12-30T18:27:18.000Z (over 3 years ago)
- Last Synced: 2025-04-02T15:05:35.090Z (about 1 year ago)
- Topics: postcss-preset-env, styled-jsx, styled-jsx-plugin, theme-provider
- Language: JavaScript
- Homepage:
- Size: 151 KB
- Stars: 5
- Watchers: 3
- Forks: 0
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# styled-jsx-plugin-root-theme-provider
[](https://travis-ci.org/FareFirst/styled-jsx-plugin-root-theme-provider)
[](https://www.npmjs.com/package/styled-jsx-plugin-root-theme-provider)
Plugin to use `var` and `:root` css power to build themed [styled-jsx](https://github.com/zeit/styled-jsx) with older browser support. Under the hood it uses **postcss-preset-env**, so it will also enable latest css features.
## Install
```bash
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:
```json
{
"plugins": [
[
"styled-jsx/babel",
{
"plugins": [
[
"styled-jsx-plugin-root-theme-provider",
{
"themeFilePath": "./theme.css"
}
]
]
}
]
]
}
```
**For Next.js**
```json
{
"presets": [
[
"next/babel",
{
"styled-jsx": {
"plugins": [
[
"styled-jsx-plugin-root-theme-provider",
{
"themeFilePath": "./theme.css"
}
]
]
}
}
]
]
}
```
## Usage
Create a css file
./theme.css
```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**.
```html
.a {
background: var(--red);
}
```
In browser this css will be translated to
```css
.a {
background: red;
background: var(--red);
}
```
#### Notes
[styled-jsx-plugin-root-theme-provider](https://github.com/nawaf331/styled-jsx-plugin-root-theme-provider) uses [styled-jsx](https://github.com/zeit/styled-jsx#css-preprocessing-via-plugins)'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](https://github.com/nawaf331/styled-jsx-plugin-root-theme-provider/graphs/contributors)!