0.1.0 • Published 6 years ago
rollup-plugin-sass-styled-jsx-component v0.1.0
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
Usage
Component.jsx
import Styles from './Component.scss'
const theme = {
primaryColor: '#ff0000'
}
export default Component = () => (
<div className='component'>
<Styles theme={theme}/>
</div>
)
Component.scss
.component {
color: -var(--theme-primaryColor);
}
rollup.config.js
import resolve from 'rollup-plugin-node-resolve'
import babel from 'rollup-plugin-babel'
import scssStyledJsxComponentPlugin from 'rollup-plugin-sass-styled-jsx-component'
export default {
input: 'src/index.js',
plugins: [
resolve({
jsnext: true,
main: true,
extensions: [ '.js', '.jsx' ]
}),
scssStyledJsxComponentPlugin(),
babel({
ignore: 'node_modules/**',
presets: [
['env', { modules: false, loose: true }],
'react'
],
plugins: [
'styled-jsx/babel'
],
babelrc: false
})
],
output: [
{ file: 'dist/lib/index.js', format: 'cjs', exports: 'named' },
{ file: 'dist/es/index.js', format: 'es', exports: 'named' }
],
external: id => Object.keys(peerDependencies).includes(id) || /^styled-jsx/.test(id),
}
With extra css processing
rollup.config.js
import resolve from 'rollup-plugin-node-resolve'
import babel from 'rollup-plugin-babel'
import scssStyledJsxComponentPlugin from 'rollup-plugin-sass-styled-jsx-component'
const processor = (css) => `${css} div { color: red; }`
export default {
input: 'src/index.js',
plugins: [
resolve({
jsnext: true,
main: true,
extensions: [ '.js', '.jsx' ]
}),
scssStyledJsxComponentPlugin({ processor }),
babel({
ignore: 'node_modules/**',
presets: [
['env', { modules: false, loose: true }],
'react'
],
plugins: [
'styled-jsx/babel'
],
babelrc: false
})
],
output: [
{ file: 'dist/lib/index.js', format: 'cjs', exports: 'named' },
{ file: 'dist/es/index.js', format: 'es', exports: 'named' }
],
external: id => Object.keys(peerDependencies).includes(id) || /^styled-jsx/.test(id),
}
Custom include pattern
Default patterns: [ '**/*.sass', '**/*.scss' ]
rollup.config.js
scssStyledJsxComponentPlugin({
include: ['**/*.scss']
})
Custom exclude pattern
Default patterns: none
Note: Another sass pluging must process excluded resources. Otherwise, rollup will fail.
rollup.config.js
scssStyledJsxComponentPlugin({
exclude: ['**/*.scss']
})
node-sass options
rollup.config.js
scssStyledJsxComponentPlugin({
options: { outputStyle: 'compact' }
})
Notes
- We also use webpack for storybook dev environment for ui components - https://github.com/360incentives/webpack-loader-css-styled-jsx-component