rollup-plugin-sass-styled-jsx-component

Rollup plugin for transpiling sass files into styled-jsx component

Reasoning

We want to use styled-jsx as a method of delivery stylesheets to documnet

Advantages:

• Claims to be blazingly fast
• Supports dynamic styles -> themability
• Only loads css used by the components on the page
• Does not repeat css for resusable components
• Cleans up after itself
• Plays well with isomorphic app

Disadvantages:

• no stylesheet bundles -> stylesheets are not cached (however, js bundles that include css can still be cached)

We do not want to write css in string literals in javascript files

Onle language per file. Syntax highlighting.

We want to take advantage of SASS pre-processing

We want to inject themes into css

We use BEM methodology

All styles are applied by class names. Therefore, we have no need for scoping styles.

Installation

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

Peer Dependencies

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

Usage

Component.jsx

1import Styles from './Component.scss'
2const theme = {
3  primaryColor: '#ff0000'
4}
5
6export default Component = () => (
7  <div className='component'>
8    <Styles theme={theme}/>
9  </div>
10)

Component.scss

1.component {
2  color: -var(--theme-primaryColor);
3}

rollup.config.js

1import resolve from 'rollup-plugin-node-resolve'
2import babel from 'rollup-plugin-babel'
3import scssStyledJsxComponentPlugin from 'rollup-plugin-sass-styled-jsx-component'
4
5export default {
6  input: 'src/index.js',
7  plugins: [
8    resolve({
9      jsnext: true,
10      main: true,
11      extensions: [ '.js', '.jsx' ]
12    }),
13    scssStyledJsxComponentPlugin(),
14    babel({
15      ignore: 'node_modules/**',
16      presets: [
17        ['env', { modules: false, loose: true }],
18        'react'
19      ],
20      plugins: [
21        'styled-jsx/babel'
22      ],
23      babelrc: false
24    })
25  ],
26  output: [
27    { file: 'dist/lib/index.js', format: 'cjs', exports: 'named' },
28    { file: 'dist/es/index.js', format: 'es', exports: 'named' }
29  ],
30  external: id => Object.keys(peerDependencies).includes(id) || /^styled-jsx/.test(id),
31}
32

With extra css processing

rollup.config.js

1import resolve from 'rollup-plugin-node-resolve'
2import babel from 'rollup-plugin-babel'
3import scssStyledJsxComponentPlugin from 'rollup-plugin-sass-styled-jsx-component'
4const processor = (css) => `${css} div { color: red; }`
5
6export default {
7  input: 'src/index.js',
8  plugins: [
9    resolve({
10      jsnext: true,
11      main: true,
12      extensions: [ '.js', '.jsx' ]
13    }),
14    scssStyledJsxComponentPlugin({ processor }),
15    babel({
16      ignore: 'node_modules/**',
17      presets: [
18        ['env', { modules: false, loose: true }],
19        'react'
20      ],
21      plugins: [
22        'styled-jsx/babel'
23      ],
24      babelrc: false
25    })
26  ],
27  output: [
28    { file: 'dist/lib/index.js', format: 'cjs', exports: 'named' },
29    { file: 'dist/es/index.js', format: 'es', exports: 'named' }
30  ],
31  external: id => Object.keys(peerDependencies).includes(id) || /^styled-jsx/.test(id),
32}
33

Custom include pattern

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

rollup.config.js

1scssStyledJsxComponentPlugin({
2  include: ['**/*.scss']
3})

Custom exclude pattern

Default patterns: none

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

rollup.config.js

1scssStyledJsxComponentPlugin({
2  exclude: ['**/*.scss']
3})

node-sass options

rollup.config.js

1scssStyledJsxComponentPlugin({
2  options: { outputStyle: 'compact' }
3})

Notes

• We also use webpack for storybook dev environment for ui components - https://github.com/360incentives/webpack-loader-css-styled-jsx-component