diff --git a/.changeset/social-groups-beg.md b/.changeset/social-groups-beg.md new file mode 100644 index 000000000000..58288226c2ab --- /dev/null +++ b/.changeset/social-groups-beg.md @@ -0,0 +1,5 @@ +--- +"@biomejs/biome": patch +--- + +The [noUnknownProperty](https://biomejs.dev/linter/rules/no-unknown-property/) now only ignores `composes` property when `cssModules` is enabled in parser settings diff --git a/crates/biome_css_analyze/src/lint/correctness/no_unknown_property.rs b/crates/biome_css_analyze/src/lint/correctness/no_unknown_property.rs index 6455d92772d4..e1db1f494227 100644 --- a/crates/biome_css_analyze/src/lint/correctness/no_unknown_property.rs +++ b/crates/biome_css_analyze/src/lint/correctness/no_unknown_property.rs @@ -79,9 +79,6 @@ impl Rule for NoUnknownProperty { let property_name = node.name().ok()?.to_trimmed_text(); let property_name_lower = property_name.to_ascii_lowercase_cow(); if !property_name_lower.starts_with("--") - // Ignore `composes` property. - // See https://github.com/css-modules/css-modules/blob/master/docs/composition.md for more details. - && property_name_lower != "composes" && !is_known_properties(&property_name_lower) && !vendor_prefixed(&property_name_lower) { diff --git a/crates/biome_css_analyze/tests/specs/correctness/noUnknownProperty/invalid.css b/crates/biome_css_analyze/tests/specs/correctness/noUnknownProperty/invalid.css index 969a15b6e8ed..02ec75fc4c22 100644 --- a/crates/biome_css_analyze/tests/specs/correctness/noUnknownProperty/invalid.css +++ b/crates/biome_css_analyze/tests/specs/correctness/noUnknownProperty/invalid.css @@ -5,3 +5,14 @@ a { a { my-property: 1; } + +/* Composition is only valid when css-modules is enabled */ +.classA { + color: green; + background: red; +} + +.classB { + composes: classA; + color: yellow; +} diff --git a/crates/biome_css_analyze/tests/specs/correctness/noUnknownProperty/invalid.css.snap b/crates/biome_css_analyze/tests/specs/correctness/noUnknownProperty/invalid.css.snap index 3c05c0510026..6f880ed880c8 100644 --- a/crates/biome_css_analyze/tests/specs/correctness/noUnknownProperty/invalid.css.snap +++ b/crates/biome_css_analyze/tests/specs/correctness/noUnknownProperty/invalid.css.snap @@ -13,6 +13,17 @@ a { my-property: 1; } +/* Composition is only valid when css-modules is enabled */ +.classA { + color: green; + background: red; +} + +.classB { + composes: classA; + color: yellow; +} + ``` # Diagnostics @@ -51,3 +62,21 @@ invalid.css:6:3 lint/correctness/noUnknownProperty ━━━━━━━━━ ``` + +``` +invalid.css:16:3 lint/correctness/noUnknownProperty ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ + + × Unknown property is not allowed. + + 15 │ .classB { + > 16 │ composes: classA; + │ ^^^^^^^^ + 17 │ color: yellow; + 18 │ } + + i See CSS Specifications and browser specific properties for more details. + + i To resolve this issue, replace the unknown property with a valid CSS property. + + +``` diff --git a/crates/biome_css_analyze/tests/specs/correctness/noUnknownProperty/valid.css b/crates/biome_css_analyze/tests/specs/correctness/noUnknownProperty/valid.css index d1852febfeb1..659acd21e397 100644 --- a/crates/biome_css_analyze/tests/specs/correctness/noUnknownProperty/valid.css +++ b/crates/biome_css_analyze/tests/specs/correctness/noUnknownProperty/valid.css @@ -57,17 +57,6 @@ a { --custom-property: 10px; } -/* Composition */ -.classA { - color: green; - background: red; -} - -.classB { - composes: classA; - color: yellow; -} - /* View Transition navigation property (should not be flagged) */ view-transition { navigation: auto; diff --git a/crates/biome_css_analyze/tests/specs/correctness/noUnknownProperty/valid.css.snap b/crates/biome_css_analyze/tests/specs/correctness/noUnknownProperty/valid.css.snap index d02b0357477c..b63f06aeccdf 100644 --- a/crates/biome_css_analyze/tests/specs/correctness/noUnknownProperty/valid.css.snap +++ b/crates/biome_css_analyze/tests/specs/correctness/noUnknownProperty/valid.css.snap @@ -63,17 +63,6 @@ a { --custom-property: 10px; } -/* Composition */ -.classA { - color: green; - background: red; -} - -.classB { - composes: classA; - color: yellow; -} - /* View Transition navigation property (should not be flagged) */ view-transition { navigation: auto; diff --git a/crates/biome_css_analyze/tests/specs/correctness/noUnknownProperty/validCssModulesComposition.css b/crates/biome_css_analyze/tests/specs/correctness/noUnknownProperty/validCssModulesComposition.css new file mode 100644 index 000000000000..8265a7d7e925 --- /dev/null +++ b/crates/biome_css_analyze/tests/specs/correctness/noUnknownProperty/validCssModulesComposition.css @@ -0,0 +1,11 @@ +/* should not generate diagnostics */ +/* Composition */ +.classA { + color: green; + background: red; +} + +.classB { + composes: classA; + color: yellow; +} diff --git a/crates/biome_css_analyze/tests/specs/correctness/noUnknownProperty/validCssModulesComposition.css.snap b/crates/biome_css_analyze/tests/specs/correctness/noUnknownProperty/validCssModulesComposition.css.snap new file mode 100644 index 000000000000..3c3e0476ca03 --- /dev/null +++ b/crates/biome_css_analyze/tests/specs/correctness/noUnknownProperty/validCssModulesComposition.css.snap @@ -0,0 +1,19 @@ +--- +source: crates/biome_css_analyze/tests/spec_tests.rs +expression: validCssModulesComposition.css +--- +# Input +```css +/* should not generate diagnostics */ +/* Composition */ +.classA { + color: green; + background: red; +} + +.classB { + composes: classA; + color: yellow; +} + +``` diff --git a/crates/biome_css_analyze/tests/specs/correctness/noUnknownProperty/validCssModulesComposition.options.json b/crates/biome_css_analyze/tests/specs/correctness/noUnknownProperty/validCssModulesComposition.options.json new file mode 100644 index 000000000000..aa3813c03861 --- /dev/null +++ b/crates/biome_css_analyze/tests/specs/correctness/noUnknownProperty/validCssModulesComposition.options.json @@ -0,0 +1,7 @@ +{ + "css": { + "parser": { + "cssModules": true + } + } +}