Next.js 14.1.4 - Selector ":root" is not pure

[DKeken]

Description

When working in development mode (dev mode) with a Next.js project version 14.1.4, a syntax error occurs related to importing styles from @xelene/tgui/dist/styles.css into index.module.css. The error message indicates that the :root selector is not pure, implying it lacks a local class or ID, which appears to be a requirement in this context.

Steps to Reproduce

1. Initialize a Next.js project using version 14.1.4.
2. Add @xelene/tgui@2.0.6 as a dependency.
3. Import @xelene/tgui/dist/styles.css into index.module.css.
4. Run next dev to operate in development mode.

Expected Behavior

The project launches without any CSS-related syntax errors.

Actual Behavior

The launch process fails with the following syntax error:

./node_modules/.pnpm/@xelene+tgui@2.0.6_@types+react-dom@18.2.24_@types+react@18.2.75_react-dom@18.2.0_react@18.2.0/node_modules/@xelene/tgui/dist/styles.css:148:2
Syntax error: Selector ":root" is not pure (pure selectors must contain at least one local class or id)

  146 | 
  147 | @supports (padding-top: constant(safe-area-inset-bottom)) {
> 148 |   :root {
      |  ^
  149 |     --tgui--safe_area_inset_bottom: constant(safe-area-inset-bottom);
  150 |   }

Environment

• Next.js version: 14.1.4
• @xelene/tgui version: 2.0.6
• Operating System: Windows
• Node.js version: 21.5.0

[mainsmirnov]

Thank you, the issue was fixed in version 2.1.0 here

Be aware that importing in the .module.css file might lead to unintended side effects due to Next.js's default configuration. Specifically, it automatically prefixes class names, which will disrupt library styles. To circumvent this, you might need to tweak your setup. If altering the basic configuration is not your preference, we advise importing styles within JavaScript, TypeScript, or plain CSS files instead.