@chialab/esbuild-plugin-css-import

Resolve CSS imports using the node resolution algorithm and the style field in package.json.

Usage no npm install needed!

<script type="module">
  import chialabEsbuildPluginCssImport from 'https://cdn.skypack.dev/@chialab/esbuild-plugin-css-import';
</script>

README

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

NPM


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.