Skip to content

Commit 61d4250

Browse files
committed
docs: README
1 parent 1ef167b commit 61d4250

File tree

1 file changed

+13
-6
lines changed

1 file changed

+13
-6
lines changed

README.md

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ Stylelint plugin that validates CSS custom properties in CSS modules to ensure t
2929

3030
## Why?
3131

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.
3333

3434
For example, if your CSS module is named `Button.module.css`, all custom properties should be prefixed with `--Button-`:
3535

@@ -40,15 +40,22 @@ For example, if your CSS module is named `Button.module.css`, all custom propert
4040
}
4141
```
4242

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:
44+
45+
```css
46+
.button {
47+
background-color: var(--Button-primary-color, #007bff);
48+
}
49+
```
50+
51+
See [how it works](#how-it-works) for more
52+
4353
This convention helps with:
4454

4555
- **Consistency**: All custom properties follow the same naming pattern
4656
- **Clarity**: It's immediately clear which component a custom property belongs to
4757
- **Avoiding conflicts**: Prevents naming collisions when components are nested or used together, since CSS custom properties inherit through the DOM tree
4858

49-
In the future it's likely that this plugin can also be extended to optionally support the
50-
[SUIT CSS naming conventions](https://github.com/suitcss/suit/blob/master/doc/naming-conventions.md#variables).
51-
5259
## Installation
5360

5461
```bash
@@ -95,7 +102,7 @@ Validates only that custom properties match the component name from the filename
95102

96103
### SUIT CSS validation
97104

98-
Enforces [SUIT CSS naming conventions](https://github.com/suitcss/suit/blob/master/doc/naming-conventions.md#variables):
105+
Validates [SUIT CSS naming conventions](https://github.com/suitcss/suit/blob/master/doc/naming-conventions.md#variables):
99106

100107
```json
101108
{
@@ -109,7 +116,7 @@ Enforces [SUIT CSS naming conventions](https://github.com/suitcss/suit/blob/mast
109116
```
110117

111118
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
113120

114121
### Custom pattern validation
115122

0 commit comments

Comments
 (0)