feat(css/parser): Implement error reporting for @value of CSS Modul…

…es (#8547)

crates/swc_css_parser/src/error.rs

@@ -72,6 +72,7 @@ impl Error {
                 format!("{} is not valid name for keyframes", s).into()
             }
             ErrorKind::InvalidScopeAtRule => "Invalid @scope at-rule".into(),
+            ErrorKind::ValueAtRule => "@value at-rule is deprecated".into(),
         }
     }
 
@@ -119,4 +120,6 @@ pub enum ErrorKind {
     InvalidScopeAtRule,
 
     UnknownAtRuleNotTerminated,
+
+    ValueAtRule,
 }

crates/swc_css_parser/src/parser/at_rules/mod.rs

@@ -419,6 +419,19 @@ where
 
                 Some(prelude)
             }
+
+            "value" => {
+                if self.config.css_modules {
+                    let span = self.input.cur_span();
+                    let _: ComponentValue = self.parse()?;
+
+                    self.errors.push(Error::new(span, ErrorKind::ValueAtRule));
+
+                    self.input.skip_ws();
+                }
+
+                return Err(Error::new(Default::default(), ErrorKind::Ignore));
+            }
             _ => {
                 return Err(Error::new(Default::default(), ErrorKind::Ignore));
             }

crates/swc_css_parser/tests/fixture.rs

@@ -628,6 +628,24 @@ fn recovery(input: PathBuf) {
     stylesheet_recovery_test_tokens(input, Default::default());
 }
 
+#[testing::fixture("tests/recovery-cssmodules/**/input.css")]
+fn recovery_2(input: PathBuf) {
+    stylesheet_recovery_test(
+        input.clone(),
+        ParserConfig {
+            css_modules: true,
+            ..Default::default()
+        },
+    );
+    stylesheet_recovery_test_tokens(
+        input,
+        ParserConfig {
+            css_modules: true,
+            ..Default::default()
+        },
+    );
+}
+
 #[testing::fixture("tests/fixture/**/input.css")]
 #[testing::fixture("tests/recovery/**/input.css")]
 fn span_visualizer(input: PathBuf) {

crates/swc_css_parser/tests/recovery-cssmodules/value/input.css

@@ -0,0 +1,8 @@
+@value blue: #0c77f8;
+@value red: #ff0000;
+@value green: #aaf200;
+
+.button {
+  color: blue;
+  display: inline-block;
+}