Nicely Pruned Marigolds

    rollup-plugin-sass-styled-jsx

    1.0.3 • Public • Published

    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

    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),
    })

    Install

    npm i rollup-plugin-sass-styled-jsx

    DownloadsWeekly Downloads

    9

    Version

    1.0.3

    License

    MIT

    Unpacked Size

    6.8 kB

    Total Files

    5

    Last publish

    Collaborators

    • antonrublev