fix(turbopack): Improve error message for PURE selector error (#80068)

### What?

Use CSS string for CSS errors instead of Rust debug representation, and remove `lightningcss` text from the error message.

### Why?

We don't need them.

Author: kdy1

test/development/acceptance-app/ReactRefreshLogBox.test.ts

@@ -464,7 +464,7 @@ describe('ReactRefreshLogBox app', () => {
          "label": "Build Error",
          "source": "./index.module.css
        Parsing css source code failed
-       Selector is not pure (pure selectors must contain at least one local class or id), (lightningcss, Selector(button, specificity = 0x1))
+       Selector "button" is not pure. Pure selectors must contain at least one local class or id.
        Example import traces:
          #1:
            ./index.module.css [app-client]

test/development/acceptance/ReactRefreshLogBox.test.ts

@@ -602,7 +602,7 @@ describe('ReactRefreshLogBox', () => {
          "label": "Build Error",
          "source": "./index.module.css
        Parsing css source code failed
-       Selector is not pure (pure selectors must contain at least one local class or id), (lightningcss, Selector(button, specificity = 0x1))
+       Selector "button" is not pure. Pure selectors must contain at least one local class or id.
        Example import traces:
          client:
            ./index.module.css

test/integration/css-features/test/css-modules.test.js

@@ -58,9 +58,7 @@ describe('Custom Properties: Fail for global element in CSS Modules', () => {
         expect(code).not.toBe(0)
         if (process.env.IS_TURBOPACK_TEST) {
           expect(stderr).toContain('pages/styles.module.css')
-          expect(stderr).toContain(
-            'Selector is not pure (pure selectors must contain at least one local class or id)'
-          )
+          expect(stderr).toContain('Selector "h1" is not pure')
         } else {
           expect(stderr).toContain('Failed to compile')
           expect(stderr).toContain('pages/styles.module.css')

turbopack/crates/turbopack-css/src/process.rs

@@ -5,6 +5,7 @@ use lightningcss::{
     css_modules::{CssModuleExport, CssModuleExports, Pattern, Segment},
     stylesheet::{ParserOptions, PrinterOptions, StyleSheet, ToCssResult},
     targets::{Features, Targets},
+    traits::ToCss,
     values::url::Url,
     visit_types,
     visitor::Visit,
@@ -523,8 +524,11 @@ impl CssError {
             CssError::CssSelectorInModuleNotPure { selector } => {
                 ParsingIssue {
                     file,
-                    msg: format!("{CSS_MODULE_ERROR}, (lightningcss, {selector})").into(),
-
+                    msg: format!(
+                        "Selector \"{selector}\" is not pure. Pure selectors must contain at \
+                         least one local class or id."
+                    )
+                    .into(),
                     source: None,
                 }
                 .resolved_cell()
@@ -534,9 +538,6 @@ impl CssError {
     }
 }
 
-const CSS_MODULE_ERROR: &str =
-    "Selector is not pure (pure selectors must contain at least one local class or id)";
-
 /// We only visit top-level selectors.
 impl lightningcss::visitor::Visitor<'_> for CssValidator {
     type Error = ();
@@ -578,8 +579,14 @@ impl lightningcss::visitor::Visitor<'_> for CssValidator {
         }
 
         if is_selector_problematic(selector) {
+            let selector_string = selector
+                .to_css_string(PrinterOptions {
+                    minify: false,
+                    ..Default::default()
+                })
+                .expect("selector.to_css_string should not fail");
             self.errors.push(CssError::CssSelectorInModuleNotPure {
-                selector: format!("{selector:?}"),
+                selector: selector_string,
             });
         }