@jgarber/postcss-easy-import

A PostCSS plugin adding support for glob importing CSS files.

Forked from the original postcss-easy-import project.

Usage

First, add the plugin as a development dependency to your project's package.json file:

npm install --save-dev @jgarber/postcss-easy-import

Next, add the plugin to your project's PostCSS configuration. The example below demonstrates usage in a postcss.config.js configuration file:

import postcssEasyImport from "@jgarber/postcss-easy-import";

export default {
  plugins: [postcssEasyImport],
};

Finally, in your project's CSS files, add @import rules tailored to your needs:

/* Import the default export from a locally-installed package. */
@import "@jgarber/cosmic-latte";

/* Glob import a set of files from a locally-installed package. */
@import "@jgarber/cosmic-latte/*.css";

/* Import a CSS file using a relative path. */
@import "./theme.css";

/* Glob import a set of files from a relative path. */
@import "./components/**/*.css";

[!NOTE] This project extends postcss-import and supports the same @import notations.

Options

| Name | Type(s) | Default | |:-------------|:------------------|:-----------| | extensions | Array<String> | [".css"] | | prefix | false, String | false |

import postcssEasyImport from "@jgarber/postcss-easy-import";

export default {
  plugins: [
    postcssEasyImport({
      extensions: [".pcss", ".postcss"],
      prefix: "_",
    }),
  ],
};

The prefix option allows for matching file names with the provided string. Using the configuration above, an @import rule like @import "./components/index.css"; would match a file at ./components/_index.css.

[!NOTE] If a prefix is configured and both a prefixed and non-prefixed file of the same name exists, the file with the prefixed filename (e.g. ./components/_index.css) takes priority.

License

This project is freely available under the MIT License.