rollup-plugin-sass-styled-jsx

Rollup plugin for transpiling sass files into css-tagged template literal to be consumed by styled-jsx.

Reasoning

We want to use styled-jsx. We want to take advantage of sass. We do not want to write css in string literals in javascript files.

Inspired by rollup-plugin-sass and styled-jsx-css-loader

Installation

npm i -D rollup-plugin-sass-styled-jsx

Peer Dependencies

• node-sass
• rollup-plugin-babel
• styled-jsx

Usage

Basic

Component.jsx

1import styles from './Component.scss'
2
3export default Component = () => (
4  <div>
5    <style jsx>{styles}</style>
6  </div>
7)

rollup.config.js

1import sassStyledJsx from 'rollup-plugin-sass-styled-jsx'
2import babel from 'rollup-plugin-babel'
3
4export default {
5  plugins: [
6    sassStyledJsx(),
7    babel({
8      plugins: ['styled-jsx/babel']
9    })
10  ],
11  external: id => /^styled-jsx/.test(id),
12})

With extra css processing

For example, post-css

rollup.config.js

1import sassStyledJsx from 'rollup-plugin-sass-styled-jsx'
2import babel from 'rollup-plugin-babel'
3import autoprefixer from 'autoprefixer'
4import postcss from 'postcss'
5
6const postCssProcessor = postcss([autoprefixer])
7const processor = async (css) => (await postCssProcessor.process(css)).css
8
9export default {
10  plugins: [
11    sassStyledJsx({ processor }),
12    babel({
13      plugins: ['styled-jsx/babel']
14    })
15  ],
16  external: id => /^styled-jsx/.test(id),
17})

Custom include pattern

Default patterns: [ '**/*.sass', '**/*.scss' ]

rollup.config.js

1import sassStyledJsx from 'rollup-plugin-sass-styled-jsx'
2import babel from 'rollup-plugin-babel'
3
4export default {
5  plugins: [
6    sassStyledJsx({
7      include: ['**/*.scss']
8    }),
9    babel({
10      plugins: ['styled-jsx/babel']
11    })
12  ],
13  external: id => /^styled-jsx/.test(id),
14})

Custom exclude pattern

Default patterns: none

Note: Another sass pluging must process excluded resources. Otherwise, rollup will fail.

rollup.config.js

1import sassStyledJsx from 'rollup-plugin-sass-styled-jsx'
2import babel from 'rollup-plugin-babel'
3
4export default {
5  plugins: [
6    sassStyledJsx({
7      exclude: ['**/*.scss']
8    }),
9    babel({
10      plugins: ['styled-jsx/babel']
11    })
12  ],
13  external: id => /^styled-jsx/.test(id),
14})

node-sass options

rollup.config.js

1import sassStyledJsx from 'rollup-plugin-sass-styled-jsx'
2import babel from 'rollup-plugin-babel'
3
4export default {
5  plugins: [
6    sassStyledJsx({
7      options: { outputStyle: 'compact' }
8    }),
9    babel({
10      plugins: ['styled-jsx/babel']
11    })
12  ],
13  external: id => /^styled-jsx/.test(id),
14})