styled-jsx-plugin-sass-2

Use Sass with styled-jsx 💥

This is a fixed/updated version of styled-jsx-plugin-sass by @giuseppeg, made because that package seems to be unmaintained.

This SUPERKODERS version is forked from commit 1223475.

What's the difference?

This plugin works with indented sass and dart sass too, neither of those were possible with the old package. It also includes code from pull requests that weren't merged in the original repo.

Credits to @giuseppeg, @xhuz and @jamestalmage.

Usage

Install the package and the node-sass (or dart-sass) version you need (it is a peer dependency).

npm install --save-dev node-sass @styled-jsx/plugin-sass

with yarn

yarn add -D node-sass @styled-jsx/plugin-sass

Next, add @styled-jsx/plugin-sass to the styled-jsx's plugins in your babel configuration (e.g. .babelrc):

{
  "presets": [
    [
      "next/babel",
      {
        "styled-jsx": {
          "plugins": ["@styled-jsx/plugin-sass"]
        }
      }
    ]
  ]
}

Node-sass options

Node-sass can be configured using sassOptions. This is useful for setting options such as includePaths or precision.

{
  "presets": [
    [
      "next/babel",
      {
        "styled-jsx": {
          "plugins": [
            ["@styled-jsx/plugin-sass", {
                "sassOptions": {
                  "includePaths": ["./styles"],
                  "precision": 2
                }
              }
            ]
          ]
        }
      }
    ]
  ]
}

Indented syntax

To use indented sytax, you will need to update your sassOptions inside your babel configuration file.

{
  "presets": [
    [
      "next/babel",
      {
        "styled-jsx": {
          "plugins": [["@styled-jsx/plugin-sass", { "sassOptions": { "indentedSyntax": true } }]]
        }
      }
    ]
  ]
}

Dart sass

If you want to use Dart sass instead of node-sass, your install command should look like this:

npm install --save-dev sass @styled-jsx/plugin-sass

with yarn

yarn add -D sass @styled-jsx/plugin-sass

Notes

@styled-jsx/plugin-sass uses styled-jsx's plugin system which is supported from version 2.

Read more on their repository for further info.

License

MIT