rollup-plugin-import-css-classes

Published to npm.

A Rollup plugin to import CSS classes in Javascript. Inspired by rollup-plugin-import-css but that one returns a CSSStyleSheet and this one exports class names to use in your app.

For ideas or if the docs are unclear, you are welcome to open an issue.

Usage

Let's take these files:

MyDiv.css

.blue-colour { /* Correct Great British spelling 🇬🇧 */
  color: blue;
}

MyDiv.tsx

import { blueColour } from "./MyDiv.css" assert { type: "css" };

export const MyDiv = () => (
  <div className={blueColour}>
    Blue text
  </div>
);

It's OK to use the same class names across different .css files.

Installation

npm

npm i rollup-plugin-import-css-classes

Deno

Use the specifier npm:rollup-plugin-import-css-classes.

Config

Example rollup.config.js:

import css from "rollup-plugin-import-css-classes";

export default {
  input: "index.js",
  output: { file: "dist/index.js", format: "esm" },
  plugins: [
    // Default options shown below
    // You can leave them all out and just use `css()`
    css({
      // Apply transformations to the CSS code
      transform: (cssCode) => cssCode,

      // Choose which files to process, default:
      filter: (filePath) => filePath.endsWith(".css"),

      // Vite doesn't support checking import attributes
      // so you can disable the "type": "css" check
      checkAttributes: false,

      // Minify the CSS code
      minify: true,
    }),
  ]
};