@chialab/esbuild-plugin-css-import
TypeScript icon, indicating that this package has built-in type declarations

0.18.0 • Public • Published

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.

Dependents (0)

Package Sidebar

Install

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

Weekly Downloads

174

Version

0.18.0

License

MIT

Unpacked Size

4.94 kB

Total Files

5

Last publish

Collaborators

  • chialab-admin
  • chialab-developers