rollup-plugin-css-lit/lib/index.cjs

Rollup plugin for importing CSS sources as constructable stylesheets to projects using lit (lit-html and lit-element) or fast-element.

'use strict';

var pluginutils = require('@rollup/pluginutils');
var node_path = require('node:path');
var rollupCopyTransformCss = require('rollup-copy-transform-css');

function escapeTaggedTemplate(source) {
  return source
    .replaceAll('\\', '\\\\')
    .replaceAll('`', '\\`')
    .replaceAll('$', '\\$')
}

function cssToModule(css, tag, specifier) {
  return `import { ${tag} } from '${specifier}';
export default ${tag}\`${escapeTaggedTemplate(css)}\`;`
}

function handleError({ message, reason, column, line }) {
  if (reason) {
    this.error(reason,{ column, line });
  /* c8 ignore next 3 */
  } else {
    this.error(message);
  }
}

/**
 * lit CSS rollup plugin
 *
 * @param {Object} opts Options
 * @param {string[]} [opts.include] Pattern to match files which will be processed by the plugin.
 * @param {string[]} [opts.exclude] Pattern to match files which will be ignored by the plugin.
 * @param {Object} [opts.options] Options for the Sass compiler. Use any options supported by the `compileString`
 *  method from the Sass package.
 * @param {boolean|Object} [opts.minify] Enables minifying of the transformed CSS output. If an object is specified, it
 *  will be passed to the cssnano plugin.
 * @param {boolean|Object} [opts.inline] Enables inlining of stylesheets and other assets. If an object is specified,
 *  it will have to include two properties pointing to objects: { stylesheets, assets }. The stylesheets objects will
 *  be passed to the postcss-import plugin. The assets objects will be passed to the postcss-url plugin.
 * @param {Object[]} [opts.plugins] An array of PostCSS plugins to fully customise the transformation of the CSS input.
 * @param {string} [opts.tag='css'] The tag used for the tagged template literal exported from the generated module.
 *  Use 'css' (default) with both lit-html and fast-element.
 * @param {string} [opts.specifier='lit'] The import specifier used in the import declaration of the tag above. Use
 *  'lit' (default) with lit-html and '@microsoft/fast-element' with fast-element.
 * @returns {import('rollup').Plugin}
 */
function litCss({
  include = ['**/*.css'], exclude, minify, inline, plugins,
  tag = 'css', specifier = 'lit'
} = {}) {
  const filter = pluginutils.createFilter(include, exclude);
  if (!(minify || plugins)) {
    inline = true;
  }
  const processor = rollupCopyTransformCss.createProcessor({ minify, inline, plugins });

  return {
    name: 'lit-css',

    load(id) {
      if (filter(id)) {
        this.addWatchFile(node_path.resolve(id));
      }
    },

    async transform(source, id) {
      if (filter(id)) {
        try {
          const { css } = await processor.process(source, { from: id, map: false });
          return { code: cssToModule(css, tag, specifier), map: { mappings: '' } }
        } catch (err) {
          handleError.call(this, err);
        }
      }
    }
  }
}

exports.litCss = litCss;
//# sourceMappingURL=index.cjs.map