@chialab/esbuild-plugin-css-import

Esbuild Plugin CSS Import • Resolve CSS imports using the node resolution algorithm and the `style` field in package.json.

---

Install

npm i @chialab/esbuild-plugin-css-import -D

yarn add @chialab/esbuild-plugin-css-import -D

Usage

This plugin enables the node resolution algorithm for CSS files. That means that @import and @url() statements can refer to both relative files and NPM packages. CSS modules must have the style field in their pakcage.json in order to correctly pickup the CSS entrypoint.

import esbuild from 'esbuild';
import cssImportPlugin from '@chialab/esbuild-plugin-css-import';

await esbuild.build({
    plugins: [
        cssImportPlugin(),
    ],
});

Example

node_modules/css-framework/package.json

{
    "name": "css-framework",
    "style": "index.css"
}

node_modules/css-framework/index.css

:root {
    --accent-color: #000;
}

src/main.css

@import 'css-framework';

body {
    color: var(--accent-color);
}

---

License

Esbuild Plugin CSS Import is released under the MIT license.