Rollup Plugin LitElement SCSS

rollup-plugin-lit-scss.js

import sass from 'node-sass';
import { resolve, extname } from 'path';
import { processString } from 'uglifycss';
import stringToTemplateLiteral from 'string-to-template-literal';
import nodeSassImporter from 'node-sass-package-importer';

const importer = nodeSassImporter();

function transform(css) {
  return `import { css } from 'lit-element';
  export default css${stringToTemplateLiteral(css)};`;
}

function isScss(id) {
  return extname(id) === '.scss';
}

export default function css() {
  return {
    name: 'lit-scss',
    load(id) {
      if (isScss(id)) {
        this.addWatchFile(resolve(id));
      }
    },
    transform(data, id) {
      if (!isScss(id)) {
        return;
      }
      const output = sass.renderSync({
        data,
        importer,
      }).css;
      const css = processString(output.toString(), {});
      const code = transform(css);
      return { code, map: { mappings: '' } };
    },
  };
}