rollup-plugin-minlinecss

A very basic Rollup plugin to minify CSS in string templates, for users of inline CSS packages e.g. Goober and Styled JSX.

Usage

Install this package in your project:

# via npm
npm add -D rollup-plugin-minlinecss

# or pnpm
pnpm add -D rollup-plugin-minlinecss

# or yarn
yarn add -D rollup-plugin-minlinecss

Add the plugin to your Rollup config:

// rollup.config.js
import minlinecss from "rollup-plugin-minlinecss";

export default {
  plugins: [minlinecss()],
};

Available plugin options are given in plugin options.

The plugin can minify any string templates that contain CSS:

// works-with.ts

// with top-level selectors
const globalStyles = `
  div:hover {
    color: blue;
  }
  .example {
    color: red;
    & a {
      color: white;
    }
  }
`;

// no top-level selectors (block styles)
const Icon = styled("div")`
  color: white;
  &:hover {
    color: red;
  }
`;

// with template substitutions
const Dynamic = styled("div")`
  .${class} {
    color: ${color};
  }
`;

// the method styled() came from Goober for demonstration
// the plugin will work without it too

The plugin keeps all ending semi-colons, even if they are not technically needed, for compatability with mainstream packages.

The plugin will TRY to minimize as much as it can, but due to the reliance on RegExp but not AST, it WILL miss some.

Options

With full TypeScript typing and autocompletion support.

Property	Description
exclude	Files to exclude from minification, for cases that the plugin somehow broke certain code. This is usually not required because the plugin will skip template strings that are not CSS. Though a possible case is if you included sensitive symbols in CSS string values, e.g. content: "}" will become content:";}" (ending semi-colon insertion), due to the use of RegExp but not AST.
lightningcss	LightningCSS options, for browser compatibility etc., do note that the feature flag CSS nesting is always enabled.

---

Have fun with this stupid little plugin.