Tailwind + Parcel: @parcel/transformer-css: Unsupported pseudo class or element: global

[benlau]

🐛 bug report

Using parcel (2.10.3) and tailwindcss(3.3.6) together may result in the following error: @parcel/transformer-css: Unsupported pseudo-class or element: global if the :global operator is found in the module CSS. In such cases, it cannot be used.

Disabling Tailwind (by removing the .postcssrc file) will allow the :global operator to be handled without encountering the error.

The error message:

% parcel ./index.html --port=4000
Server running at http://localhost:4000

@parcel/transformer-css: Unsupported pseudo class or element: global

🎛 Configuration

.postcssrc

{
  "plugins": {
    "tailwindcss": true
  }
}

tailwindcss.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: [
      "./**/*.{html,js,ts,jsx,tsx}",
    ],
    theme: {
      extend: {},
    },
    plugins: [],
  }

package.json

{
  "name": "parcel-tailwind",
  "version": "1.0.0",
  "description": "",
  "source": "index.html",
  "scripts": {
    "start": "parcel ./index.html --port=4000"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@parcel/transformer-sass": "^2.10.3",
    "parcel": "^2.10.3",
    "postcss": "^8.4.32",
    "postcss-modules": "^4.3.1",
    "process": "^0.11.10",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "tailwindcss": "^3.3.6"
  }
}

🤔 Expected Behavior

No warning and it should able to handle :global operator to use with tailwindcss

😯 Current Behavior

It show warning and it can not use the :global operator

💁 Possible Solution

no idea. sorry.

🔦 Context

I have a project using CSS module and would like to migrate to tailwind but it is not a single pass process. I am seeking a solution to run tailwind and CSS module together in a period and migrate step by step.

💻 Code Sample

Download the example project at : parcel-tailwind.zip

Uncompress the file and then run :

% cd parcel-tailwind
% npm install
% npm start

> parcel-tailwind@1.0.0 start
> parcel ./index.html --port=4000

Server running at http://localhost:4000

@parcel/transformer-css: Unsupported pseudo class or element: global

  /Users/benlau/tmp/parcel-tailwind 2/styles.module.scss:6:3
    5 | 
  > 6 | :global .text2 {
  >   |   ^
    7 |     font-size: 1.25rem; /* 20px */
    8 |     line-height: 1.75rem; /* 28px */

Remove the .postcssrc will complains Unknown at rule: @tailwind but the :global works.

🌍 Your Environment

Software	Version(s)
Parcel	2.10.3
Node	v16.17.0
npm/Yarn	8.15.0
Operating System	MacOS Sonoma 14

[benlau]

Instead of writing in

:global .text2 {

just write it in

:global(.text2) {

could fix the issue.