☂️ 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

• [x] #2512
• [x] font-family-no-duplicate-names
  • [x] https://github.com/biomejs/biome/pull/2308
• [x] #2572
• [x] #2530
• [x] #2523
• [x] #2536
• [x] #2626
• [x] #2627
• [x] #2625
• [x] #2624
• [x] #2515
• [x] #2543
• [x] #3263
• [x] #3264

Medium

• [x] #2805
• [x] #2807
• [x] #2808
• [x] #2809
• [x] #2709
• [x] #2708
• [x] #2524

Hard

• [x] #2810

Waiting for semantic model

• [ ] #2514
• [x] #2806
• [x] #2784

Under discussion

see: https://github.com/biomejs/biome/discussions/2422

• [ ] at-rule-no-unknown
• [ ] 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 https://github.com/biomejs/biome/pull/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