Norvell, Please Merge

    rollup-plugin-sass-styled-jsx-component

    0.1.0 • Public • Published

    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

    Install

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

    DownloadsWeekly Downloads

    0

    Version

    0.1.0

    License

    MIT

    Unpacked Size

    9.35 kB

    Total Files

    5

    Last publish

    Collaborators

    • antonrublev