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

import styles from './Component.scss'
 
export default Component = () => (
  <div>
    <style jsx>{styles}</style>
  </div>
)

rollup.config.js

import sassStyledJsx from 'rollup-plugin-sass-styled-jsx'
import babel from 'rollup-plugin-babel'
 
export default {
  plugins: [
    sassStyledJsx(),
    babel({
      plugins: ['styled-jsx/babel']
    })
  ],
  external: id => /^styled-jsx/.test(id),
})

With extra css processing

For example, post-css

rollup.config.js

import sassStyledJsx from 'rollup-plugin-sass-styled-jsx'
import babel from 'rollup-plugin-babel'
import autoprefixer from 'autoprefixer'
import postcss from 'postcss'
 
const postCssProcessor = postcss([autoprefixer])
const processor = async (css) => (await postCssProcessor.process(css)).css
 
export default {
  plugins: [
    sassStyledJsx({ processor }),
    babel({
      plugins: ['styled-jsx/babel']
    })
  ],
  external: id => /^styled-jsx/.test(id),
})

Custom include pattern

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

rollup.config.js

import sassStyledJsx from 'rollup-plugin-sass-styled-jsx'
import babel from 'rollup-plugin-babel'
 
export default {
  plugins: [
    sassStyledJsx({
      include: ['**/*.scss']
    }),
    babel({
      plugins: ['styled-jsx/babel']
    })
  ],
  external: id => /^styled-jsx/.test(id),
})

Custom exclude pattern

Default patterns: none

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

rollup.config.js

import sassStyledJsx from 'rollup-plugin-sass-styled-jsx'
import babel from 'rollup-plugin-babel'
 
export default {
  plugins: [
    sassStyledJsx({
      exclude: ['**/*.scss']
    }),
    babel({
      plugins: ['styled-jsx/babel']
    })
  ],
  external: id => /^styled-jsx/.test(id),
})

node-sass options

rollup.config.js

import sassStyledJsx from 'rollup-plugin-sass-styled-jsx'
import babel from 'rollup-plugin-babel'
 
export default {
  plugins: [
    sassStyledJsx({
      options: { outputStyle: 'compact' }
    }),
    babel({
      plugins: ['styled-jsx/babel']
    })
  ],
  external: id => /^styled-jsx/.test(id),
})