[Angular + Tailwind] Tailwind css imports does not behave the same as before in newest Angular version

[tom-vism]

Command

serve

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

14

Description

Note: Recreating the issue with a repro scenario.

Starting from Angular 15 tailwind does not work as before regarding imports (on the newest Angular version 17 too).

Previously, tailwind-specific CSS definitions were put in a separate file and then imported into the styles.css but that does not work anymore. I need to put everything together. This is not something I want because I like to keep my CSS files separately.

If you try with a fresh Angular 14 project then it works without errors.

Minimal Reproduction

Reproduction

1. Setup simple (css) empty angular project https://angular.io/guide/setup-local (^17.1.0)
2. Setup tailwind https://tailwindcss.com/docs/guides/angular
3. replace app.component.html content with:

<h1 class="underline">Hello Angular</h1>

4. create headers.css file with the following content:

@layer base {
    h1 {
        @apply text-red-100;
    }
}

5. import it in the styles.css like so:

/* You can add global styles to this file, and also import other style files */
@import "./assets/headers.css";

@tailwind base;
@tailwind components;
@tailwind utilities;

Note: this worked without errors in Angular version 14. Try generating with Angular cli 14.

Exception or Error

[ERROR] `@layer base` is used but no matching `@tailwind base` directive is present. [plugin angular-css]

Your Environment

Angular CLI: 17.1.1
Node: 18.18.2
Package Manager: npm 9.8.1
OS: win32 x64

Angular: 
... 

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.1701.1 (cli-only)
@angular-devkit/core         17.1.1 (cli-only)
@angular-devkit/schematics   17.1.1 (cli-only)
@schematics/angular          17.1.1 (cli-only)

Anything else relevant?

{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"my-app": {
"projectType": "application",
"schematics": {},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:application",
"options": {
"outputPath": "dist/my-app",
"index": "src/index.html",
"browser": "src/main.ts",
"polyfills": [
"zone.js"
],
"tsConfig": "tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.css"
],
"scripts": []
},
"configurations": {
"production": {
"budgets": [
{
"type": "initial",
"maximumWarning": "500kb",
"maximumError": "1mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "2kb",
"maximumError": "4kb"
}
],
"outputHashing": "all"
},
"development": {
"optimization": false,
"extractLicenses": false,
"sourceMap": true
}
},
"defaultConfiguration": "production"
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"configurations": {
"production": {
"buildTarget": "my-app:build:production"
},
"development": {
"buildTarget": "my-app:build:development"
}
},
"defaultConfiguration": "development"
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"buildTarget": "my-app:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"polyfills": [
"zone.js",
"zone.js/testing"
],
"tsConfig": "tsconfig.spec.json",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.css"
],
"scripts": []
}
}
}
}
}
}

[alan-agius4]

Hi @tom-vism, I am unable to replicate the problem with the steps provided. But putting css files that intent to be process by the build system is discourage as this would cause the CSS file to be bundled as part of style.css and also redundantly copied in the dist/project/browser/assets. The assets directory should only contain files that are meant to be copied as are.

[tom-vism]

I see the error in my repro steps.

@layer { ... should have been @layer base { ...

@import "./assets/headers.css"; is just a simple minimal example.

In my case, I use NX repo. The CSS file (style.css that combines multiple css) comes from the library and is picked up in project.json of the app (previously angular.json) like so

          {
            "glob": "**/*.css",
            "input": "libs/shared-lib/src/assets/styles",
            "output": "/assets/styles/"
          },

[alan-agius4]

So what is happening is that when using CSS, postcss is being executed on each file individual instead of the concatenated stylesheet. This is caused because it is being executed here:

angular-cli/packages/angular_devkit/build_angular/src/tools/esbuild/stylesheets/stylesheet-plugin-factory.ts

Line 161 in 944cbcd

return processStylesheet(