babel-plugin-transform-import-css-stylesheets

Transform CSS Stylesheet imports (import "..." with { type: "css" }) to a fetch(import.resolves("...")) call which will return the results wrapped in a CSSStyleSheet.

⚠CAUTION: This plugin can only work when compiling to modules

⚠CAUTION: This plugin only transforms import decalarations and not dynamic import() calls.

Install

npm install --save-dev @babel/core babel-plugin-transform-import-css-stylesheets

Usage

babel.config.js

export default {
  plugins: ["babel-plugin-transform-css-stylesheets"];
}

Examples

import stylesheet from "./styles.css" with { type: "css" };

will be transformed to

const stylesheet = await fetch(import.meta.resolve("./styles.css"))
  .then((response) => response.text())
  .then((text) => new CSSStyleSheet().replace(text));

References

• WHATWG CSS Modules
• WHATWG modules
• CSSStyleSheets