@apply leads to different chunks' content after each build

[hivokas]

Describe the problem:

I've noticed an issue in the project I'm working on right now.

A couple of things about the project:

• we store compiled assets in the repo;
• we use GitHub Actions to automatically compile assets once changes are pushed to the PR;
• we use Laravel Mix to compile assets;
• we use TailwindCSS 2, Vue.js 2,
• we use code-splitting (via import()) to split the code into small chunks.

The problem is that once assets are compiled, every Vue component that contains @apply leads to changes in 2 files: [chunkname].chunk.js & [chunkname].chunk.js.map. We have many components with @apply statements that lead to ~120 changed files in each PR that contains front-end changes (it makes the code-review process harder).

Here is what I've noticed so far. When we use @apply in the styles of the component, the resulting chunk is different after each build.

And the difference lays here:

Looks like this string is Input#id generated by PostCSS (https://postcss.org/api/#input-id) and is different after each build.

Is that something that can be fixed on the TailwindCSS side?

Link to a minimal reproduction:

I've created a repository to demonstrate the problem.

https://github.com/hivokas/laravel-mix-playground-random-postcss-input-id

Use mix --production to build assets.

[hivokas]

I think the reason for random input ID for each build leads here:

tailwindcss/src/lib/substituteClassApplyAtRules.js

Lines 352 to 354 in 3fa7a22

	.process(requiredTailwindAtRules.map((rule) => `@tailwind ${rule};`).join('\n'), {
	from: undefined,
	})