Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

☂️ stylelint recommended rules #2511

Open
25 of 34 tasks
Tracked by #2409
togami2864 opened this issue Apr 18, 2024 · 14 comments
Open
25 of 34 tasks
Tracked by #2409

☂️ stylelint recommended rules #2511

togami2864 opened this issue Apr 18, 2024 · 14 comments
Labels
A-Analyzer Area: analyzer A-Linter Area: linter

Comments

@togami2864
Copy link
Contributor

togami2864 commented Apr 18, 2024

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

Medium

Hard

Waiting for semantic model

Under discussion

see: #2422

@Mouvedia
Copy link

Mouvedia commented Apr 24, 2024

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
Copy link
Member

chansuke commented May 9, 2024

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

@togami2864
Copy link
Contributor Author

@chansuke Thank you! #2784

@togami2864
Copy link
Contributor Author

togami2864 commented May 20, 2024

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
Copy link

noCssEmptyBlock

Shouldn't it be noEmptyBlock instead?

@togami2864
Copy link
Contributor Author

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

@Conaclos
Copy link
Member

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

Could we remove the option? Or deprecate it?

@togami2864
Copy link
Contributor Author

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
Copy link
Member

@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
Copy link
Member

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

@freiserg
Copy link

freiserg commented Jul 1, 2024

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

@ematipico
Copy link
Member

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
Copy link
Member

ematipico commented Jul 2, 2024

@chansuke I'll have a look at #3333

We can definitely have the logic in a common place.

@freiserg
Copy link

freiserg commented Jul 2, 2024

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
A-Analyzer Area: analyzer A-Linter Area: linter
Projects
None yet
Development

No branches or pull requests

6 participants