Skip to content

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;

@thecrypticace thecrypticace marked this pull request as ready for review September 18, 2025 15:48
@thecrypticace thecrypticace requested a review from a team as a code owner September 18, 2025 15:48
Copy link
Member

@RobinMalfait RobinMalfait left a comment

Choose a reason for hiding this comment

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

Looking good, but I think this small API would make it even better.

Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
@thecrypticace thecrypticace merged commit 5b8136e into main Sep 18, 2025
7 checks passed
@thecrypticace thecrypticace deleted the feat/postcss-error-handling branch September 18, 2025 16:03
ch4og pushed a commit to csmplay/csm-mapban that referenced this pull request Nov 18, 2025
This PR contains the following updates:

| Package | Change | Age | Confidence |
|---|---|---|---|
| [@tailwindcss/postcss](https://tailwindcss.com) ([source](https://github.com/tailwindlabs/tailwindcss/tree/HEAD/packages/@tailwindcss-postcss)) | [`4.1.12` -> `4.1.17`](https://renovatebot.com/diffs/npm/@tailwindcss%2fpostcss/4.1.12/4.1.17) | [![age](https://developer.mend.io/api/mc/badges/age/npm/@tailwindcss%2fpostcss/4.1.17?slim=true)](https://docs.renovatebot.com/merge-confidence/) | [![confidence](https://developer.mend.io/api/mc/badges/confidence/npm/@tailwindcss%2fpostcss/4.1.12/4.1.17?slim=true)](https://docs.renovatebot.com/merge-confidence/) |

---

### Release Notes

<details>
<summary>tailwindlabs/tailwindcss (@&#8203;tailwindcss/postcss)</summary>

### [`v4.1.17`](https://github.com/tailwindlabs/tailwindcss/blob/HEAD/CHANGELOG.md#4117---2025-11-06)

[Compare Source](tailwindlabs/tailwindcss@v4.1.16...v4.1.17)

##### Fixed

- Substitute `@variant` inside legacy JS APIs ([#&#8203;19263](tailwindlabs/tailwindcss#19263))
- Prevent occasional crash on Windows when loaded into a worker thread ([#&#8203;19242](tailwindlabs/tailwindcss#19242))

### [`v4.1.16`](https://github.com/tailwindlabs/tailwindcss/blob/HEAD/CHANGELOG.md#4116---2025-10-23)

[Compare Source](tailwindlabs/tailwindcss@v4.1.15...v4.1.16)

##### Fixed

- Discard candidates with an empty data type ([#&#8203;19172](tailwindlabs/tailwindcss#19172))
- Fix canonicalization of arbitrary variants with attribute selectors ([#&#8203;19176](tailwindlabs/tailwindcss#19176))
- Fix invalid colors due to nested `&` ([#&#8203;19184](tailwindlabs/tailwindcss#19184))
- Improve canonicalization for `& > :pseudo` and `& :pseudo` arbitrary variants ([#&#8203;19178](tailwindlabs/tailwindcss#19178))

### [`v4.1.15`](https://github.com/tailwindlabs/tailwindcss/blob/HEAD/CHANGELOG.md#4115---2025-10-20)

[Compare Source](tailwindlabs/tailwindcss@v4.1.14...v4.1.15)

##### Fixed

- Fix Safari devtools rendering issue due to `color-mix` fallback ([#&#8203;19069](tailwindlabs/tailwindcss#19069))
- Suppress Lightning CSS warnings about `:deep`, `:slotted`, and `:global` ([#&#8203;19094](tailwindlabs/tailwindcss#19094))
- Fix resolving theme keys when starting with the name of another theme key in JS configs and plugins ([#&#8203;19097](tailwindlabs/tailwindcss#19097))
- Allow named groups in combination with `not-*`, `has-*`, and `in-*` ([#&#8203;19100](tailwindlabs/tailwindcss#19100))
- Prevent important utilities from affecting other utilities ([#&#8203;19110](tailwindlabs/tailwindcss#19110))
- Don’t index into strings with the `theme(…)` function ([#&#8203;19111](tailwindlabs/tailwindcss#19111))
- Fix parsing issue when `\t` is used in at-rules ([#&#8203;19130](tailwindlabs/tailwindcss#19130))
- Upgrade: Canonicalize utilities containing `0` values ([#&#8203;19095](tailwindlabs/tailwindcss#19095))
- Upgrade: Migrate deprecated `break-words` to `wrap-break-word` ([#&#8203;19157](tailwindlabs/tailwindcss#19157))

##### Changed

- Remove the `postinstall` script from oxide (\[[#&#8203;19149](https://github.com/tailwindlabs/tailwindcss/issues/19149)])([#&#8203;19149](https://github.com/tailwindlabs/tailwindcss/pull/19149))

### [`v4.1.14`](https://github.com/tailwindlabs/tailwindcss/blob/HEAD/CHANGELOG.md#4114---2025-10-01)

[Compare Source](tailwindlabs/tailwindcss@v4.1.13...v4.1.14)

##### Fixed

- Handle `'` syntax in ClojureScript when extracting classes ([#&#8203;18888](tailwindlabs/tailwindcss#18888))
- Handle `@variant` inside `@custom-variant` ([#&#8203;18885](tailwindlabs/tailwindcss#18885))
- Merge suggestions when using `@utility` ([#&#8203;18900](tailwindlabs/tailwindcss#18900))
- Ensure that file system watchers created when using the CLI are always cleaned up ([#&#8203;18905](tailwindlabs/tailwindcss#18905))
- Do not generate `grid-column` utilities when configuring `grid-column-start` or `grid-column-end` ([#&#8203;18907](tailwindlabs/tailwindcss#18907))
- Do not generate `grid-row` utilities when configuring `grid-row-start` or `grid-row-end` ([#&#8203;18907](tailwindlabs/tailwindcss#18907))
- Prevent duplicate CSS when overwriting a static utility with a theme key ([#&#8203;18056](tailwindlabs/tailwindcss#18056))
- Show Lightning CSS warnings (if any) when optimizing/minifying ([#&#8203;18918](tailwindlabs/tailwindcss#18918))
- Use `default` export condition for `@tailwindcss/vite` ([#&#8203;18948](tailwindlabs/tailwindcss#18948))
- Re-throw errors from PostCSS nodes ([#&#8203;18373](tailwindlabs/tailwindcss#18373))
- Detect classes in markdown inline directives ([#&#8203;18967](tailwindlabs/tailwindcss#18967))
- Ensure files with only `@theme` produce no output when built ([#&#8203;18979](tailwindlabs/tailwindcss#18979))
- Support Maud templates when extracting classes ([#&#8203;18988](tailwindlabs/tailwindcss#18988))
- Upgrade: Do not migrate `variant = 'outline'` during upgrades ([#&#8203;18922](tailwindlabs/tailwindcss#18922))
- Upgrade: Show version mismatch (if any) when running upgrade tool ([#&#8203;19028](tailwindlabs/tailwindcss#19028))
- Upgrade: Ensure first class inside `className` is migrated ([#&#8203;19031](tailwindlabs/tailwindcss#19031))
- Upgrade: Migrate classes inside `*ClassName` and `*Class` attributes ([#&#8203;19031](tailwindlabs/tailwindcss#19031))

### [`v4.1.13`](https://github.com/tailwindlabs/tailwindcss/blob/HEAD/CHANGELOG.md#4113---2025-09-03)

[Compare Source](tailwindlabs/tailwindcss@v4.1.12...v4.1.13)

##### Changed

- Drop warning from browser build ([#&#8203;18731](tailwindlabs/tailwindcss#18731))
- Drop exact duplicate declarations when emitting CSS ([#&#8203;18809](tailwindlabs/tailwindcss#18809))

##### Fixed

- Don't transition `visibility` when using `transition` ([#&#8203;18795](tailwindlabs/tailwindcss#18795))
- Discard matched variants with unknown named values ([#&#8203;18799](tailwindlabs/tailwindcss#18799))
- Discard matched variants with non-string values ([#&#8203;18799](tailwindlabs/tailwindcss#18799))
- Show suggestions for known `matchVariant` values ([#&#8203;18798](tailwindlabs/tailwindcss#18798))
- Replace deprecated `clip` with `clip-path` in `sr-only` ([#&#8203;18769](tailwindlabs/tailwindcss#18769))
- Hide internal fields from completions in `matchUtilities` ([#&#8203;18820](tailwindlabs/tailwindcss#18820))
- Ignore `.vercel` folders by default (can be overridden by `@source …` rules) ([#&#8203;18855](tailwindlabs/tailwindcss#18855))
- Consider variants starting with `@-` to be invalid (e.g. `@-2xl:flex`) ([#&#8203;18869](tailwindlabs/tailwindcss#18869))
- Do not allow custom variants to start or end with a `-` or `_` ([#&#8203;18867](tailwindlabs/tailwindcss#18867), [#&#8203;18872](tailwindlabs/tailwindcss#18872))
- Upgrade: Migrate `aria` theme keys to `@custom-variant` ([#&#8203;18815](tailwindlabs/tailwindcss#18815))
- Upgrade: Migrate `data` theme keys to `@custom-variant` ([#&#8203;18816](tailwindlabs/tailwindcss#18816))
- Upgrade: Migrate `supports` theme keys to `@custom-variant` ([#&#8203;18817](tailwindlabs/tailwindcss#18817))

</details>

---

### Configuration

📅 **Schedule**: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied.

♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

🔕 **Ignore**: Close this PR and you won't be reminded about this update again.

---

 - [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check this box

---

This PR has been generated by [Renovate Bot](https://github.com/renovatebot/renovate).
<!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiI0MS4xNDguNCIsInVwZGF0ZWRJblZlciI6IjQyLjAuMyIsInRhcmdldEJyYW5jaCI6Im1haW4iLCJsYWJlbHMiOltdfQ==-->

Reviewed-on: https://git.in.csmpro.ru/csmpro/csm-mapban/pulls/28
Co-authored-by: Renovate Bot <renovate@csmpro.ru>
Co-committed-by: Renovate Bot <renovate@csmpro.ru>
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

4 participants