fix(lint/noUnknownProperty): ignore composes for noUnknownProperty (#…

…3217)

Co-authored-by: Ze-Zheng Wu <zezhengwu@proton.me>

CHANGELOG.md

@@ -122,6 +122,8 @@ our [guidelines for writing a good changelog entry](https://github.com/biomejs/b
 
  Contributed by @Sec-ant
 
+- The [noUnknownProperty](https://biomejs.dev/linter/rules/no-unknown-property/) rule now ignores the `composes` property often used in css modules. [#3000](https://github.com/biomejs/biome/issues/3000) Contributed by @chansuke
+
 ### Parser
 
 ## v1.8.1 (2024-06-10)

crates/biome_css_analyze/src/lint/nursery/no_unknown_property.rs

@@ -71,6 +71,9 @@ impl Rule for NoUnknownProperty {
  let node = ctx.query();
  let property_name = node.name().ok()?.text().to_lowercase();
  if !property_name.starts_with("--")
+ // Ignore `composes` property.
+ // See https://github.com/css-modules/css-modules/blob/master/docs/composition.md for more details.
+ && property_name != "composes"
  && !is_known_properties(&property_name)
  && !vendor_prefixed(&property_name)
  {

crates/biome_css_analyze/tests/specs/nursery/noUnknownProperty/valid.css

@@ -55,3 +55,14 @@ a {
 a {
  --custom-property: 10px;
 }
+
+/* Composition */
+.classA {
+ color: green;
+ background: red;
+}
+
+.classB {
+ composes: classA;
+ color: yellow;
+}

crates/biome_css_analyze/tests/specs/nursery/noUnknownProperty/valid.css.snap

@@ -62,4 +62,15 @@ a {
  --custom-property: 10px;
 }
 
+/* Composition */
+.classA {
+ color: green;
+ background: red;
+}
+
+.classB {
+ composes: classA;
+ color: yellow;
+}
+
 ```