Styled-jsx-plugin-root-theme-provider NPM

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.