Babel plugin to transform import with type css to fetch resolve expressions
npm install babel-plugin-transform-import-css-stylesheetsTransform 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.
``bash`
npm install --save-dev @babel/core babel-plugin-transform-import-css-stylesheets
babel.config.js
`js`
export default {
plugins: ["babel-plugin-transform-css-stylesheets"];
}
`js`
import stylesheet from "./styles.css" with { type: "css" };
will be transformed to
`js``
const stylesheet = await fetch(import.meta.resolve("./styles.css"))
.then((response) => response.text())
.then((text) => new CSSStyleSheet().replace(text));