@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:

1npm 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:

1import postcssEasyImport from "@jgarber/postcss-easy-import";
2
3export default {
4  plugins: [postcssEasyImport],
5};

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

1/* Import the default export from a locally-installed package. */
2@import "@jgarber/cosmic-latte";
3
4/* Glob import a set of files from a locally-installed package. */
5@import "@jgarber/cosmic-latte/*.css";
6
7/* Import a CSS file using a relative path. */
8@import "./theme.css";
9
10/* Glob import a set of files from a relative path. */
11@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

1import postcssEasyImport from "@jgarber/postcss-easy-import";
2
3export default {
4  plugins: [
5    postcssEasyImport({
6      extensions: [".pcss", ".postcss"],
7      prefix: "_",
8    }),
9  ],
10};

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.