v5.0.0: Update rules to match HTML Academy codeguide

[meritt]

Major update of Stylelint config aligned with htmlacademy/codeguide#75.

Config format migrated from .stylelintrc (JSON) to stylelint.config.js (ESM). extends: "stylelint-config-htmlacademy" keeps working — resolved through package.json#exports.

Dependencies

Package	Before	After
@stylistic/stylelint-plugin	4.0.0	^5.1.0
stylelint-order	—	^8.1.1
postcss-less	6.0.0	^6.0.0
postcss-scss	4.0.9	^4.0.9
stylelint (peer)	^16.25.0	>=17
Node.js	—	>=24

Added

Rule	Value	Catches
order/order	[custom-properties, declarations, rules]	declaration after nested rule
order/properties-order	7 semantic groups, ~430 properties	mis-ordered declarations (auto-fix)
selector-no-deprecated	true	:-webkit-any
selector-anb-no-unmatchable	true	:nth-child(0)
selector-no-invalid	true	[0foo], :nth-child(2n+)
no-unknown-custom-media	true	typo in @custom-media
at-rule-disallowed-list	["import"]	@import in CSS
declaration-block-single-line-max-declarations	0	single-line blocks
selector-max-compound-selectors	2	.a.b.c
selector-max-class	2	.a.b.c class chains
selector-max-combinators	2	.a .b .c .d
selector-max-type	2	.x section article p
time-min-milliseconds	100	transition: 50ms
color-function-alias-notation	"without-alpha"	rgba(), hsla()
alpha-value-notation	"percentage"	opacity: 0.5, rgb(0 0 0 / 0.5) (auto-fix)
lightness-notation	"percentage"	oklch(0.6 ...)
media-feature-range-notation	"context"	(min-width: 768px) syntax (auto-fix)
keyframes-name-pattern	kebab-case	@keyframes slideIn
custom-media-pattern	kebab-case	@custom-media --bpMobile
custom-property-pattern	kebab-case	--colorPrimary
selector-id-pattern	kebab-case	#mainContent
selector-nested-pattern	"&"	nested selectors without & (native CSS Nesting + SCSS/LESS)

Property order

7 semantic groups (custom-properties → positioning → box-model → typography → decoration → animation → interactivity) covering ~430 modern CSS properties: container queries, anchor positioning, view transitions, full logical properties, scroll API, masks, field-sizing, corner-shape. Lives in a separate properties-order.js.

Changed

Rule	Before	After
selector-class-pattern	^[a-z0-9-_]+$	strict BEM block__element--modifier with resolveNestedSelectors: true
selector-not-notation	"simple" (:not(.a):not(.b))	"complex" (:not(.a, .b)) (auto-fix)
color-function-notation	null	"modern" (rgb(255 0 0) instead of rgb(255, 0, 0))
declaration-no-important	error	warning
font-family-no-duplicate-names	true	ignoreFontFamilyNames: ["monospace"]

Removed

• value-keyword-case option camelCaseSvgKeywords: true — fixed false positives in color-mix(in srgb, ...) and similar modern CSS functions.

[meritt]

@nikolai-shabalin вот вам ещё один

[nikolai-shabalin]

@meritt , давай в прод?

[firefoxic]

В CSS файле?

[meritt]

В CSS файле?

@firefoxic не, тут промахнулся. Надо под widely available перепроверить тесты.

[firefoxic]

Я даже не про available скорее, а про разрезание класса — в CSS не работает же так)

А на счёт widely — добавьте к нему в конфиге отсечку почти нулевой аудитории:

# .browserslistrc

baseline widely available and > 0.05%

Тогда хром и сафари почти все 2.5 года так и остаются, а вот у лисы ESR только (сейчас 140), а на версиях старше нет пользователей — ждать не зачем ≈полтора года. К примеру сейчас @property без отсечки нельзя, с ней можно. Та же история скоро (или уже) будет со @scope, anchor positioning, style queries и тд.

[firefoxic]

А и ещё: widely нестингу не страшен же, если lightningcss использовать — он грамотно раскладывает его в :is(), если есть версии без поддержки.