gem-hunter

rollup-plugin-sass

Installation

npm install rollup-plugin-sass -D

Usage

// rollup.config.js
import sass from 'rollup-plugin-sass';

export default {
  input: 'index.js',
  output: {
    file: 'bundle.js',
    format: 'cjs',
  },
  plugins: [sass()],
};

rollup.config.ts

{
  "compilerOptions": {
    "esModuleInterOp": true
  }
}

// rollup.config.ts
import sass from 'rollup-plugin-sass';

// ...

Options

output

sass({
  // Default behavior disable output
  output: false,

  // Write all styles to the bundle destination where .js is replaced by .css
  output: true,

  // Filename to write all styles
  output: 'bundle.css',

  // Callback that will be called on generate bundle with two arguments:
  // - styles: the concatenated styles in order of imported
  // - styleNodes: an array of style objects:
  //  [
  //    { id: './style1.scss', content: 'body { color: red };' },
  //    { id: './style2.scss', content: 'body { color: green };' }
  //  ]
  output(styles, styleNodes) {
    writeFileSync('bundle.css', styles);
  },
});

insert

sass({
  insert: true,
});

processor

import autoprefixer from 'autoprefixer';
import postcss from 'postcss';

sass({
  // Processor will be called with two arguments:
  // - style: the compiled css
  // - id: import id
  processor: (css) =>
    postcss([autoprefixer])
      .process(css)
      .then((result) => result.css),
});

sass({
  processor(code) {
    return {
      css: '.body {}',
      foo: 'foo',
      bar: 'bar',
    };
  },
});

import style, { foo, bar } from 'stylesheet';

Create CSS modules using processor cssModules output

import postcss from 'postcss';
import postcssModules from 'postcss-modules';

sass({
  async processor(css, id) {
    let cssModules = {};
    const postcssProcessResult = await postcss([
      postcssModules({
        getJSON: (_, json) => {
          if (json) cssModules = json;
        },
      }),
    ]).process(css, { from: id });

    return { css: postcssProcessResult.css, cssModules };
  },
});

import style from 'stylesheet';

style['some-classes'];

Exporting sass variable to *.js

const config = {
  input: 'test/fixtures/processor-promise/with-icss-exports.js',
  plugins: [
    sass({
      processor: (css) => {
        const pcssRootNodeRslt = postcss.parse(css);
        const extractedIcss = extractICSS(pcssRootNodeRslt, true);
        const cleanedCss = pcssRootNodeRslt.toString();
        const out = { css: cleanedCss, ...extractedIcss.icssExports };
        // console.table(extractedIcss);
        // console.log(out);
        return out;
      },
    }),
  ],
};

runtime

api

sass(); // default to legacy

sass({ api: 'modern' });

sass({
  api: 'modern',
  options: {
    style: 'compressed',
  },
});

options

Note

The content of options is sensible to the value specified in api option

sass({
  options: {
    data: '$color: #000;',
  },
});

Tip

If your are working with npm packages, consider to use NodePackageImporter

import * as sass from 'sass';

sass({
  options: {
    importers: [new sass.NodePackageImporter()],
  },
});

include

sass({
  include: ['**/*.css', '**/*.sass', '**/*.scss'],
});

exclude

sass({
  exclude: 'node_modules/**',
});

License