Complex selectors in '.peer:focus ~ :is(.dark .peer-focus\:dark\:text-blue-500)' can not be transformed to an equivalent selector without ':is()'.

dimaslanjaka commented 1 year ago

[x] I have searched the Issues to see if this bug has already been reported
[x] I have tested the latest version

Steps to reproduce

https://github.com/dimaslanjaka/webpack-boilerplate/tree/b03ccaf

my scss stylesheet just

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

Current behavior

Just start dev server after yarn add flowbite-react and got errors:

Module Warning (from ./node_modules/postcss-loader/dist/cjs.js):
(1:1) from "postcss-is-pseudo-class" plugin: Complex selectors in '.peer:focus ~ :is(.dark .peer-focus\:dark\:text-blue-500)' can not be transformed to an equivalent selector without ':is()'.

Code:
  .peer:focus ~ :is(.dark .peer-focus\:dark\:text-blue-500){--tw-text-opacity:1;color:rgba(63, 131, 248, 1);color:rgba(63, 131, 248, var(--tw-text-opacity))}

Expected behavior

webpack server started when using "flowbite-react": "^0.4.9" but not when using "flowbite-react": "^0.6.4"

Context

all webpack config https://github.com/dimaslanjaka/webpack-boilerplate/tree/b03ccaf/config
dev webpack config https://github.com/dimaslanjaka/webpack-boilerplate/blob/b03ccaf/config/webpack.dev.js

console output web output

rluders commented 1 year ago

@dimaslanjaka what happens if you update the flowbite package to "flowbite": "^1.6.6"?

dimaslanjaka commented 1 year ago

@dimaslanjaka what happens if you update the flowbite package to "flowbite": "^1.6.6"?

same

dimaslanjaka commented 1 year ago

when using

{
    "flowbite": "^1.6.6",
    "flowbite-react": "^0.5.0"
}

works

ishigami commented 1 year ago

Hi guys,

I'm experiencing the same issue.

I'm using:

{
   "flowbite": "^2.0.0",
    "flowbite-react": "^0.6.4",
}

rluders commented 11 months ago

@ishigami @dimaslanjaka I have no idea what happens here, but... try to update to @beta and check if it still happening.

tulup-conner commented 10 months ago

This seems like it's out of scope for the project, but feel free to correct me if I'm wrong

thomasrea0113 commented 9 months ago

This seems like it's out of scope for the project, but feel free to correct me if I'm wrong

how would this be outside the scope of the project? Admittedly I know very little about the implementation, but the error indicates that the selector cannot be transformed to not use the :is() selector. seems pretty clear that it's an issue with one of the component classes. I'm wondering how this doesn't affect every build? I thought maybe specifying a browserlist that requires the latest version would resolve it, but it doesn't. Is there a way to disable the postcss-is-pseudo-class plugin altogether? I don't plan to support older browsers anyway.