PostCSS plugin and import globs

[cgwrench]

I'm trying to combine Lume and it's PostCSS plugin with a custom includes directory and support for import globs (using the postcss-import-ext-glob package from NPM), and am hoping that someone can provide some guidance on how to get this working.

Here's how I've got the PostCSS plugin configured:

import postcss from "lume/plugins/postcss.ts";

import postcssImport from "npm:postcss-import";
import postcssImportExtGlob from "npm:postcss-import-ext-glob";
import postcssPresetEnv from "npm:postcss-preset-env";
import postcssReporter from "npm:postcss-reporter";
import postcssUrl from "npm:postcss-url";

// […]

site.use(postcss({
    includes: "/assets/css/", // trailing slash is required
    plugins: [
        postcssImportExtGlob(), // must be placed before `postcss-import`
        postcssImport({
            plugins: [
                stylelint()
            ]
        }),
        postcssUrl,
        postcssPresetEnv({ stage: 0 }), // polyfill all features
        postcssReporter({ clearReportedMessages: true })
    ],
    useDefaultPlugins: false,
}));

Note that where I've set my includes folder, I've had to use a trailing slash. Removing this mean that no CSS got copied to the _site directory at all, which was surprising and took me a little time to figure out.

I've got a main stylesheet assets/css/index.css:

@import "_reset.css";

@import-glob "components/*.css";

All the files I'd like to include are in subdirectories of assets/css/.

With this setup, the imported file _reset.css is copied into my output (i.e. _site/assets/css/index.css includes whatever is in my source assets/css/_reset.css).

However, the line @import-glob "components/*.css"; doesn't result in anything being included in the output.

If I remove the includes option from the PostCSS plugin, the @import "_reset.css"; throws an error: Error: File /_layouts/base/_reset.css not found. Commenting this line out does then allow the @import-glob "components/*.css"; line to work as expected.

How can I get the includes option, postcss-import, and postcss-import-ext-glob to play nicely with one another?

[oscarotero]

Lume automatically use the postcssImport if the includes option is defined.
If the glob plugin must be defined before, you must disable the includes option, so this plugin is not added automatically:

site.use(postcss({
    includes: false, // disable the postcss-import plugin
    plugins: [
        postcssImportExtGlob(), // must be placed before `postcss-import`
        postcssImport({
            plugins: [
                stylelint()
            ]
        }),
        postcssUrl,
        postcssPresetEnv({ stage: 0 }), // polyfill all features
        postcssReporter({ clearReportedMessages: true })
    ],
    useDefaultPlugins: false,
}));

Keep in mind that an imported file doesn't prevent the file to be also copied to the output. If you don't want the files in /assets/css are copied, you must configure Lume to ignore this folder:

site.ignore("/assets/css");

[cgwrench]

Amazing, that's done the trick. Thanks!