Skip to content

Re-throw errors from PostCSS nodes #18373

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 6 commits into
base: main
Choose a base branch
from

Conversation

thecrypticace
Copy link
Contributor

Fixes #18370

@thecrypticace
Copy link
Contributor Author

thecrypticace commented Jun 23, 2025

As far as I can tell from the original reproduction in #17295 this still doesn't help.

From this comment angular/angular-cli#29789 (comment)

This issue was related to us not throwing a PostCSS error but even if we do that it doesn't work.

This will take some more investigation.

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nice work

If we import `postcss` there’s a chance that our code is using a different version than the one the plugin was provided to. This can cause checks like `instanceof` in external tools to fail.
@thecrypticace thecrypticace force-pushed the feat/postcss-error-handling branch from b7c3671 to 4a0d761 Compare June 30, 2025 18:22
@thecrypticace
Copy link
Contributor Author

I found the Angular bug.

Leaving me a note with the reduced CSS plugin so I can file a bug report:

/*
 * Commentary:
 * This plugin demonstrates a rebuild bug in Angular 19
 *
 * The setup consists of three files:
 *
 * File 1: styles.css:
 * ```css
 * @import "./imported.css";
 * ```
 *
 * File 2: imported.css:
 * ```css
 * @--throw-me;
 * ```
 *
 * File 3: This plugin
 *
 * Reproduction:
 *
 * # Build
 * - `npm run start`
 *
 * # Cause an error
 * - `gsed -i 's/@--throw-me/@throw-me/' src/imported.css`
 *
 * # Revert the error and see it's still broken
 * - `gsed -i 's/@throw-me/@--throw-me/' src/imported.css`
 *
 * # Try editing it again and see that it doesn't rebuild
 * - `gsed -i 's/@--throw-me/@--throw-me-2/' src/imported.css`
 *
 * # To recover you *must* edit the "root" stylesheet
 *
 * - `echo '\n.test{}' > src/styles.css`
 */

module.exports = function tailwindcss() {
  return {
    postcssPlugin: "tailwindcss",
    async Once(root, { result }) {
      console.log("postcss called for", result.opts.from);

      // Precondition:
      //
      // We only care about compiles to `styles.css` for this bug report
      if (!result.opts.from?.endsWith("styles.css")) return;

      // Note:
      //
      // Removing the `@import` prevents this plugin from being called for
      // `imported.css` too. This does not affect reproduction of the bug.
      root.removeAll();

      // Requirement 1:
      //
      // `styles.css` must emit a dependency on a file that it also `@import`s
      // during a successful build.
      let path = require("path");
      let importedPath = path.resolve(path.dirname(result.opts.from), "./imported.css");
      result.messages.push({
        type: "dependency",
        plugin: "my-plugin",
        parent: result.opts.from,
        file: importedPath,
      });

      // Requirement 2:
      //
      // `styles.css` must throw an error after a successful rebuild due to
      // a change in an `@import`-ed stylesheet.
      //
      // We'll do this by checking the content directly as we're not using
      // `postcss-import` or anything like that here.
      //
      // Trigger the error by changing `@--throw-me` to `@throw-me`.
      let fs = require("fs");
      let importedFile = fs.readFileSync(importedPath, "utf-8");
      if (importedFile.includes("@throw-me")) throw root.error("ohno");
    },
  };
};

module.exports.postcss = true;

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Angular: Error in PostCSS + tailwind 4 doesn't break the build
2 participants