eleventy-plugin-postcss incompatible with --ignore-initial

[sentience]

Operating system

macOS Ventura 13.1

Eleventy

2.0.0-beta.1

Describe the bug

eleventy-plugin-postcss is designed to apply PostCSS post-processing to CSS files included in an Eleventy build with addPassthroughCopy:

/* .eleventy.js */
module.exports = (eleventyConfig) => {
  eleventyConfig.addPlugin(require("eleventy-plugin-postcss"));

  // assets/styles/main.css will be processed with PostCSS (e.g. to generate TailwindCSS classes)
  eleventyConfig.addPassthroughCopy("assets");

  return {};
};

In Eleventy 2.0.0-beta.1, if you run a full build and then launch a dev server with --ignore-initial, the dev server will serve assets/styles/main.css without PostCSS processing – instead it serves the raw source file (and replaces the correctly-built file with it in the _site output directory).

It may be that this is expected behaviour, but if so it should probably be documented as a breaking change, or at least a limitation of --ignore-initial. Ideally, plugins like eleventy-plugin-postcss can be updated to work with --ignore-initial.

Reproduction steps

1. Clone demo branch: https://github.com/sentience/kevinyank.com/tree/11ty-2.0-beta-ignore-initial-bug-demo
2. npm i
3. npx @11ty/eleventy – note _site/assets/styles/main.css contains TailwindCSS output
4. npx @11ty/eleventy --ignore-initial --serve – note _site/assets/styles/main.css is overwritten with the unprocessed source file, and the site's styles are broken

Expected behavior

Ideally, Eleventy 2.0.0 would be backwards-compatible with eleventy-plugin-postcss, and the plug-in would post-process any CSS files served by the dev server running with --ignore-initial.

Reproduction URL

https://github.com/sentience/kevinyank.com/tree/11ty-2.0-beta-ignore-initial-bug-demo

Screenshots

No response

[Snapstromegon]

Just checking in: Your reproduction step 4 uses the flags --ignore-initial --serve --incremental. Is the --incremental flag needed for this problem to occur, or does it happen the same way with just --ignore-initial --serve?

[sentience]

Good question! It happens with or without --incremental. Updated repro steps above.

[zachleat]

I’m not quite clear: is there an issue to fix in Eleventy here?

It seems like the plugin author is waiting on 2.0 to fix this: https://github.com/whoisvadym/eleventy-plugin-postcss/issues/11#issuecomment-1407922839

[sentience]

I'm not quite clear either. I don't know if the plugin broke because --ignore-initial breaks an expected contract with plugins, or if the plugin needs to be updated to support --ignore-initial because it intentionally places new demands on plugins. 🤷🏻

My expectation as an outsider is that --ignore-initial would not change Eleventy's behaviour on successive builds, only skip the initial build. But something about skipping the initial build seems to be preventing this plugin from responding in the same way to successive builds.

[zachleat]

When you say “broke”, what exactly happens? Can you walk me through a single postcss file example?

Given this code I think your use of addPassthroughCopy is conflicting with how the plugin works: https://github.com/whoisvadym/eleventy-plugin-postcss/blob/ccb46ae1155006cc4a8f881275ae8d668daea6f3/.eleventy.js#L30-L33

The two should be distinct—remove the addPassthroughCopy method and see if it operates how you would expect

[zachleat]

It does beg the question though: We do have error messages for conflicting template output and conflicting passthrough copy targets, but do we have an error message when a permalink and passthrough copy both attempt to write to the same spot?

[zachleat]

Filed at #2794.

[sentience]

Thanks for the pointer, @zachleat! The conflicting outputs were indeed the source of my problem. After removing the unnecessary addPassthroughCopy, eleventy-plugin-postcss works perfectly with --ignore-initial.