24 rules skipped due to selector errors: .prose ol[type="A" s] -> Malformed attribute selector: type="A" s]

[bojjakaseenadhreddy]

Hi all, I just installed tailwind css in my angular application.

When i run my project in DEV i am getting Warning in console.

Warning: 24 rules skipped due to selector errors:
.prose ol[type="A" s] -> Malformed attribute selector: type="A" s]
.prose ol[type="a" s] -> Malformed attribute selector: type="a" s]
.prose ol[type="I" s] -> Malformed attribute selector: type="I" s]
.prose ol[type="i" s] -> Malformed attribute selector: type="i" s]
.sm:prose ol[type="A" s] -> Malformed attribute selector: type="A" s]
.sm:prose ol[type="a" s] -> Malformed attribute selector: type="a" s]
.sm:prose ol[type="I" s] -> Malformed attribute selector: type="I" s]
.sm:prose ol[type="i" s] -> Malformed attribute selector: type="i" s]
.md:prose ol[type="A" s] -> Malformed attribute selector: type="A" s]
.md:prose ol[type="a" s] -> Malformed attribute selector: type="a" s]
.md:prose ol[type="I" s] -> Malformed attribute selector: type="I" s]
.md:prose ol[type="i" s] -> Malformed attribute selector: type="i" s]
.lg:prose ol[type="A" s] -> Malformed attribute selector: type="A" s]
.lg:prose ol[type="a" s] -> Malformed attribute selector: type="a" s]
.lg:prose ol[type="I" s] -> Malformed attribute selector: type="I" s]
.lg:prose ol[type="i" s] -> Malformed attribute selector: type="i" s]
.xl:prose ol[type="A" s] -> Malformed attribute selector: type="A" s]
.xl:prose ol[type="a" s] -> Malformed attribute selector: type="a" s]
.xl:prose ol[type="I" s] -> Malformed attribute selector: type="I" s]
.xl:prose ol[type="i" s] -> Malformed attribute selector: type="i" s]
.\32xl:prose ol[type="A" s] -> Malformed attribute selector: type="A" s]
.\32xl:prose ol[type="a" s] -> Malformed attribute selector: type="a" s]
.\32xl:prose ol[type="I" s] -> Malformed attribute selector: type="I" s]
.\32xl:prose ol[type="i" s] -> Malformed attribute selector: type="i" s]

Here are my project configurations,

Angular CLI: 12.0.5
Node: 14.16.1
Package Manager: npm 6.14.12
OS: linux x64

Angular: 12.0.4
... animations, common, compiler, core, forms, platform-browser
... platform-browser-dynamic, router

Package Version

@angular-devkit/architect 0.1200.4
@angular-devkit/build-angular 12.0.4
@angular-devkit/core 12.0.4
@angular-devkit/schematics 12.0.5
@angular/cli 12.0.5
@angular/compiler-cli 12.0.5
@schematics/angular 12.0.5
rxjs 6.6.7
typescript 4.2.4

{
"name": "simple-bus-ui",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"build": "ng build",
"watch": "ng build --watch --configuration development",
"test": "ng test",
"start": "ng serve --configuration=dev -o",
"build:prod": "ng build"
},
"private": true,
"dependencies": {
"@angular/animations": "~12.0.4",
"@angular/common": "~12.0.4",
"@angular/compiler": "~12.0.4",
"@angular/compiler-cli": "^12.0.5",
"@angular/core": "~12.0.4",
"@angular/forms": "~12.0.4",
"@angular/platform-browser": "~12.0.4",
"@angular/platform-browser-dynamic": "~12.0.4",
"@angular/router": "~12.0.4",
"@ngx-translate/core": "^13.0.0",
"@ngx-translate/http-loader": "^6.0.0",
"@tailwindcss/aspect-ratio": "^0.2.1",
"@tailwindcss/forms": "^0.3.3",
"@tailwindcss/line-clamp": "^0.2.1",
"@tailwindcss/typography": "^0.4.1",
"autoprefixer": "^10.2.6",
"moment": "^2.29.1",
"ngx-cookie-service": "^12.0.0",
"ngx-pipes": "^2.7.5",
"postcss": "^8.3.5",
"rxjs": "~6.6.0",
"tslib": "^2.1.0",
"zone.js": "~0.11.4"
},
"devDependencies": {
"@angular-devkit/build-angular": "~12.0.4",
"@angular/cli": "^12.0.5",
"@types/jasmine": "~3.6.0",
"@types/node": "^12.11.1",
"jasmine-core": "~3.7.0",
"karma": "~6.3.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.0.3",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "^1.5.0",
"tailwindcss": "^2.2.2",
"typescript": "~4.2.3"
}
}

pleas help me on this. I am thinking this warning might have impact on Browser Breakpoints.

thanks in advance

[sebastienbarre]

I'm experiencing this as well, this seems new and is only triggered at build time (for me).

My gut feeling is that you are using @tailwindcss/typography
You can solve this by reverting to 0.4.0, I just tested it:

yarn add "@tailwindcss/typography@v0.4.0"

@adamwathan @neupauer @RobinMalfait @brennanangel : I'm not entirely sure what's going on here, but the change introduced in Release v0.4.1 · tailwindlabs/tailwindcss-typography, which addressed Fix ordered list style type s modifier position by neupauer · Pull Request #137 · tailwindlabs/tailwindcss-typography introduced this strange artefact. It's not breaking the build per se, but creates a huge, 64K+ warning output (mostly containing the unoptimized, unpruned Tailwind css stylesheet), and we noticed it because our prod machine was choking creating it.

Thanks

[sebastienbarre]

Yes, I honestly don't think there is a bug in 0.4.1, but while researching who else was experiencing my issue on Github, I only found two other instances, and both were recent issues in the Tailwind CSS repo only.

My own app is pretty classic Snowpack + Tailwind CSS + PostCSS. My gut feeling is that one tool that is part of the usual arsenal people leverage for Tailwind-powered apps has been causing this as of recently, and I wanted to give you a heads up in case you see more of them reported, and a starting point should you decide to investigate.

Thanks

[sebastienbarre]

To be more specific, this happens for me during the snowpack optimization it seems:

[18:40:31] [snowpack] ! optimizing build...
 > build/_dist_/Css/tailwind.output.css:3:8007: warning: Expected "]" but found "s"
    3 │ ...ose ol[type=a]{--list-counter-style:lower-alpha}.prose ol[type=A s]{--list-counter-style:upper-alpha}.prose ol[type=a s]{--list-cou...

And the optimizer snowpack uses in this pass is esbuild. Now if memory serves me well, there was another very specific bug that postcss -> esbuild -> snowpack had to fix that only manifested itself when used with Tailwind, because of the advanced CSS stuff you guys are doing :) Something related to the ring- utilities, can't remember exactly, but there is a precedent to this type of situation...

Found it:

• var(--tw-empty,/!/ /!/) could be wrongly processed by externals preprocessors · Issue #2889 · tailwindlabs/tailwindcss
• CSS "/!/ /!/" Incorrectly Processed during Optimize (Tailwind CSS) · Discussion #2503 · snowpackjs/snowpack

At the moment I'm not seeing any issue related to "list type" or "sensitive" in the PostCSS issue tracker.

[adamwathan]

Got it, thanks for tracing it down! I've opened an issue on esbuild:

evanw/esbuild#1397

[sebastienbarre]

For those of you landing here because of the same error, an issue was opened by Adam: Warns incorrectly on CSS attribute selector case sensitivity flag · Issue #1397 · evanw/esbuild, which was promptly fixed today, so it's likely to land in esbuild v0.12.10. Or you can revert to typography@v0.4.0 for the moment.

[sebastienbarre]

For those of you using Snowpack, this issue is not solved, since as of today Snowpack is still enforcing esbuild v0.9. That's unfortunate, more on that in [FEATURE] Upgrade esbuild · Issue #3402 · snowpackjs/snowpack. If you are using yarn, you can the following in your package.json to force an esbuild version, but that's not ideal and may be breaking other things.

  "resolutions": {
    "esbuild": "^0.12"
  }