☂️ stylelint recommended rules

[togami2864]

Description

This is an umbrella issue to track the implementation of CSS linting rules from stylelint-config-recommended.

Difficulties are based on my own perspective

Easy

• 📎 Implement block-no-empty #2512
• font-family-no-duplicate-names
  • feat(biome_css_analyze): implement noDuplicateFontNames #2308
• 📎 Implement font-family-no-missing-generic-family-keyword #2572
• 📎 Implement function-no-unknown #2530
• 📎 Implement keyframe-block-no-duplicate-selectors #2523
• 📎 Implement keyframe-declaration-no-important #2536
• 📎 Implement media-feature-name-no-unknown #2626
• 📎 Implement no-duplicate-at-import-rules #2627
• 📎 Implement selector-pseudo-class-no-unknown #2625
• 📎 Implement selector-pseudo-element-no-unknown #2624
• 📎 Implement unit-no-unknown #2515
• 📎 Implement selector-type-no-unknown #2543
• 📎 Implement comment-no-empty #3263
• 📎 Implement stylelint/no-irregular-whitespace #3264
• 📎 Implement stylelint/at-rule-no-unknown #4688

Medium

• 📎 Implement stylelint/custom-property-no-missing-var-function #2805
• 📎 Implement declaration-block-no-shorthand-property-overrides #2807
• 📎 Implement function-linear-gradient-no-nonstandard-direction #2808
• 📎 Implement named-grid-areas-no-invalid #2809
• 📎 Implement no-invalid-position-at-import-rule #2709
• 📎 Implement property-no-unknown #2708
• 📎 Implement selector-anb-no-unmatchable #2524

Hard

• 📎 Implement stylelint/no-descending-specificity #2810

Waiting for semantic model

• 📎 Implment no-duplicate-selectors #2514
• 📎 Implement declaration-block-no-duplicate-custom-properties #2806
• 📎 Implement stylelint/declaration-block-no-duplicate-properties #2784

Under discussion

see: #2422

• no-invalid-double-slash-comments
• annotation-no-unknown
• color-no-invalid-hex
• function-calc-no-unspaced-operator
• no-empty-source
• string-no-newline
• media-query-no-invalid

[Mouvedia]

However, Biome has its own naming convention for its rules […] Moreover, Biome has often chosen to use different names to better convey the intent of its rules.

Just my 2 cents, you should rename some properties for consistency sake and add aliases to ease the migration.

e.g.

• no-invalid rules

alias	new name
named-grid-areas-no-invalid	named-grid-areas-no-invalid
media-query-no-invalid	media-query-no-invalid
no-invalid-double-slash-comments	comment-no-invalid
color-no-invalid-hex	color-no-invalid-hex
string-no-newline	string-no-invalid-newline
no-invalid-position-at-import-rule	at-import-rule-no-invalid-position
no-invalid-position-var-function	var-function-no-invalid-position

(only 4 renames out of that category)

keyframe-declaration-no-important is not part of that category because it's a cross-browser issue and technically not invalid.
cf https://caniuse.com/mdn-css_at-rules_keyframes_ignore_important_declarations

• max rules

selector-max-combinators > selector-max-combinator
selector-max-compound-selectors > selector-max-compound-selector

to be in line with selector-max-attribute, selector-max-class, selector-max-id, selector-max-pseudo-class, selector-max-specificity, selector-max-type and selector-max-universal which are all singular.

disclaimer: I am a maintainer of Stylelint

[chansuke]

@togami2864
Can I work on declaration-block-no-duplicate-properties?

[togami2864]

@chansuke Thank you! #2784

[togami2864]

Update: 2024/06/22

Thanks to the contributors, many new rules have been implemented in the biome. Here is the latest list of rules.

Important

• Skip implementing options for now, as we will assess whether users actually want them later.
• Ignore extended CSS language cases, such as sass and less.

stylelint	biome	note
no-duplicate-at-import-rules	noDuplicateAtImportRules
keyframe-block-no-duplicate-selectors	noDuplicateSelectorsKeyframeBlock
block-no-empty	noCssEmptyBlock noEmptyBlock	This rule supports the option since we implemented it before the direction was decided 😅 #2945
keyframe-declaration-no-important	noImportantInKeyframe
function-linear-gradient-no-nonstandard-direction	noInvalidDirectionInLinearGradient
no-invalid-position-at-import-rule	noInvalidPositionAtImportRule
declaration-block-no-shorthand-property-overrides	noShorthandPropertyOverrides
function-no-unknown	noUnknownFunction
property-no-unknown	noUnknownProperty
selector-pseudo-class-no-unknown	noUnknownPseudoClassSelector
selector-pseudo-element-no-unknown	noUnknownSelectorPseudoElement
unit-no-unknown	noUnknownUnit
selector-anb-no-unmatchable	noUnmatchableAnbSelector
named-grid-areas-no-invalid	useConsistentGridAreas
font-family-no-missing-generic-family-keyword	useGenericFontNames

[Mouvedia]

noCssEmptyBlock

Shouldn't it be noEmptyBlock instead?

[togami2864]

@Mouvedia Good point. I initially thought there was already a rule called noEmptyBlock for js, but I was mistaken😢 I will rename it.

[Conaclos]

This rule supports the option since we implemented it before the direction was decided 😅

Could we remove the option? Or deprecate it?

[togami2864]

I think it's okay to remove it because the rule is still in nursery and the linter enabling it hasn't been released yet.

[ematipico]

@Mouvedia Good point. I initially thought there was already a rule called noEmptyBlock for js, but I was mistaken😢 I will rename it.

That's the intention... one rule can have the same name in multiple languages.

[chansuke]

@togami2864
I'd like to work on comment-no-empty and no-irregular-whitespace.
I will create the issue.

[freiserg]

Do you plan to add selector-class-pattern? Or what kind of property like useNamingConvention?

[ematipico]

Do you plan to add selector-class-pattern? Or what kind of property like useNamingConvention?

@freiserg I don't have an explicit answer, but we will initially focus on more essential lint rules that will first catch bugs. Naming convention isn't critical compared to other rules.

[ematipico]

@chansuke I'll have a look at #3333

We can definitely have the logic in a common place.

[freiserg]

@ematipico Thanks. I realized that this rule is used in stylelint-config-standard and that it is a different set of rules