You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+13-6Lines changed: 13 additions & 6 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -29,7 +29,7 @@ Stylelint plugin that validates CSS custom properties in CSS modules to ensure t
29
29
30
30
## Why?
31
31
32
-
When working with CSS modules, it's common to use custom properties (CSS variables) that are scoped to a specific component. This plugin enforces a naming convention where custom properties must be prefixed with the component name derived from the CSS module filename.
32
+
When working with CSS modules, it's common to use custom properties that are scoped to a specific component. This plugin enforces a naming convention where custom properties must be prefixed with the component name derived from the CSS module filename.
33
33
34
34
For example, if your CSS module is named `Button.module.css`, all custom properties should be prefixed with `--Button-`:
35
35
@@ -40,15 +40,22 @@ For example, if your CSS module is named `Button.module.css`, all custom propert
40
40
}
41
41
```
42
42
43
+
The validation is also applied to declaring custom properties with a fallback as this is seen as providing an API that is designed to be overridden:
-**Consistency**: All custom properties follow the same naming pattern
46
56
-**Clarity**: It's immediately clear which component a custom property belongs to
47
57
-**Avoiding conflicts**: Prevents naming collisions when components are nested or used together, since CSS custom properties inherit through the DOM tree
48
58
49
-
In the future it's likely that this plugin can also be extended to optionally support the
Due to the potential ambiguity of the validation pattern in SUIT CSS this option prefers to lean on being more relaxed rather than incorrectly
112
-
flagging properties as invalid.
119
+
flagging properties as invalid. See [the unit tests](https://github.com/simonsmith/stylelint-custom-property-prefix/blob/e8022cc57466d91de8d868781816a080855d17dd/src/validate.test.ts#L21-L43) for what it covers currently
0 commit comments