stylelint-plugin-grid 1.0.2 → 1.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +30 -30
- package/docs/rules/configs/grid-all.md +23 -23
- package/docs/rules/configs/grid-recommended.md +16 -16
- package/docs/rules/configs/index.md +23 -23
- package/docs/rules/consistent-area-naming.md +5 -5
- package/docs/rules/getting-started.md +8 -8
- package/docs/rules/no-conflicting-placement.md +11 -11
- package/docs/rules/no-dense-auto-flow.md +8 -8
- package/docs/rules/no-ineffective-container-properties.md +13 -13
- package/docs/rules/no-invalid-areas.md +11 -11
- package/docs/rules/no-invalid-auto-repeat.md +8 -8
- package/docs/rules/no-invalid-minmax.md +8 -8
- package/docs/rules/no-invalid-repeat-count.md +8 -8
- package/docs/rules/no-invalid-span.md +8 -8
- package/docs/rules/no-mismatched-template-rows.md +8 -8
- package/docs/rules/no-overlapping-areas.md +4 -4
- package/docs/rules/no-reversed-placement-lines.md +9 -9
- package/docs/rules/no-unknown-areas.md +4 -4
- package/docs/rules/no-unused-areas.md +5 -5
- package/docs/rules/no-zero-grid-lines.md +8 -8
- package/docs/rules/prefer-gap-properties.md +10 -10
- package/docs/rules/prefer-minmax-zero-fr.md +7 -7
- package/docs/rules/require-explicit-rows-with-column-flow.md +10 -10
- package/docs/rules/require-explicit-tracks-with-areas.md +22 -22
- package/docs/rules/validate-area-shapes.md +10 -10
- package/docs/rules/validate-track-counts.md +10 -10
- package/package.json +15 -7
package/README.md
CHANGED
|
@@ -25,7 +25,7 @@ Or use the subpath config:
|
|
|
25
25
|
|
|
26
26
|
```js
|
|
27
27
|
export default {
|
|
28
|
-
|
|
28
|
+
extends: ["stylelint-plugin-grid/configs/grid-recommended"],
|
|
29
29
|
};
|
|
30
30
|
```
|
|
31
31
|
|
|
@@ -33,12 +33,12 @@ Enable individual rules directly:
|
|
|
33
33
|
|
|
34
34
|
```js
|
|
35
35
|
export default {
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
36
|
+
plugins: ["stylelint-plugin-grid"],
|
|
37
|
+
rules: {
|
|
38
|
+
"grid/no-invalid-areas": true,
|
|
39
|
+
"grid/validate-area-shapes": true,
|
|
40
|
+
"grid/validate-track-counts": true,
|
|
41
|
+
},
|
|
42
42
|
};
|
|
43
43
|
```
|
|
44
44
|
|
|
@@ -69,29 +69,29 @@ export default {
|
|
|
69
69
|
- [🟢](./docs/rules/configs/grid-recommended.md) — `gridPluginConfigs["grid-recommended"]`
|
|
70
70
|
- [🟣](./docs/rules/configs/grid-all.md) — `gridPluginConfigs["grid-all"]`
|
|
71
71
|
|
|
72
|
-
| Rule
|
|
73
|
-
|
|
|
74
|
-
| [`consistent-area-naming`](https://nick2bad4u.github.io/stylelint-plugin-grid/docs/rules/consistent-area-naming)
|
|
75
|
-
| [`no-conflicting-placement`](https://nick2bad4u.github.io/stylelint-plugin-grid/docs/rules/no-conflicting-placement)
|
|
76
|
-
| [`no-dense-auto-flow`](https://nick2bad4u.github.io/stylelint-plugin-grid/docs/rules/no-dense-auto-flow)
|
|
77
|
-
| [`no-ineffective-container-properties`](https://nick2bad4u.github.io/stylelint-plugin-grid/docs/rules/no-ineffective-container-properties)
|
|
78
|
-
| [`no-invalid-areas`](https://nick2bad4u.github.io/stylelint-plugin-grid/docs/rules/no-invalid-areas)
|
|
79
|
-
| [`no-invalid-auto-repeat`](https://nick2bad4u.github.io/stylelint-plugin-grid/docs/rules/no-invalid-auto-repeat)
|
|
80
|
-
| [`no-invalid-minmax`](https://nick2bad4u.github.io/stylelint-plugin-grid/docs/rules/no-invalid-minmax)
|
|
81
|
-
| [`no-invalid-repeat-count`](https://nick2bad4u.github.io/stylelint-plugin-grid/docs/rules/no-invalid-repeat-count)
|
|
82
|
-
| [`no-invalid-span`](https://nick2bad4u.github.io/stylelint-plugin-grid/docs/rules/no-invalid-span)
|
|
83
|
-
| [`no-mismatched-template-rows`](https://nick2bad4u.github.io/stylelint-plugin-grid/docs/rules/no-mismatched-template-rows)
|
|
84
|
-
| [`no-overlapping-areas`](https://nick2bad4u.github.io/stylelint-plugin-grid/docs/rules/no-overlapping-areas)
|
|
85
|
-
| [`no-reversed-placement-lines`](https://nick2bad4u.github.io/stylelint-plugin-grid/docs/rules/no-reversed-placement-lines)
|
|
86
|
-
| [`no-unknown-areas`](https://nick2bad4u.github.io/stylelint-plugin-grid/docs/rules/no-unknown-areas)
|
|
87
|
-
| [`no-unused-areas`](https://nick2bad4u.github.io/stylelint-plugin-grid/docs/rules/no-unused-areas)
|
|
88
|
-
| [`no-zero-grid-lines`](https://nick2bad4u.github.io/stylelint-plugin-grid/docs/rules/no-zero-grid-lines)
|
|
89
|
-
| [`prefer-gap-properties`](https://nick2bad4u.github.io/stylelint-plugin-grid/docs/rules/prefer-gap-properties)
|
|
90
|
-
| [`prefer-minmax-zero-fr`](https://nick2bad4u.github.io/stylelint-plugin-grid/docs/rules/prefer-minmax-zero-fr)
|
|
91
|
-
| [`require-explicit-rows-with-column-flow`](https://nick2bad4u.github.io/stylelint-plugin-grid/docs/rules/require-explicit-rows-with-column-flow) |
|
|
92
|
-
| [`require-explicit-tracks-with-areas`](https://nick2bad4u.github.io/stylelint-plugin-grid/docs/rules/require-explicit-tracks-with-areas)
|
|
93
|
-
| [`validate-area-shapes`](https://nick2bad4u.github.io/stylelint-plugin-grid/docs/rules/validate-area-shapes)
|
|
94
|
-
| [`validate-track-counts`](https://nick2bad4u.github.io/stylelint-plugin-grid/docs/rules/validate-track-counts)
|
|
72
|
+
| Rule | Fix | Preset key | Description |
|
|
73
|
+
| ------------------------------------------------------------------------------------------------------------------------------------------------ | :-: | ------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------ |
|
|
74
|
+
| [`consistent-area-naming`](https://nick2bad4u.github.io/stylelint-plugin-grid/docs/rules/consistent-area-naming) | — | [🟣](./docs/rules/configs/grid-all.md) | Require consistent naming for `grid-template-areas` and single-name `grid-area` identifiers. |
|
|
75
|
+
| [`no-conflicting-placement`](https://nick2bad4u.github.io/stylelint-plugin-grid/docs/rules/no-conflicting-placement) | — | [🟢](./docs/rules/configs/grid-recommended.md) [🟣](./docs/rules/configs/grid-all.md) | Disallow same-block CSS Grid placement declarations that write the same placement slot. |
|
|
76
|
+
| [`no-dense-auto-flow`](https://nick2bad4u.github.io/stylelint-plugin-grid/docs/rules/no-dense-auto-flow) | — | [🟣](./docs/rules/configs/grid-all.md) | Disallow `grid-auto-flow: dense` because it can reorder auto-placed grid items visually. |
|
|
77
|
+
| [`no-ineffective-container-properties`](https://nick2bad4u.github.io/stylelint-plugin-grid/docs/rules/no-ineffective-container-properties) | — | [🟢](./docs/rules/configs/grid-recommended.md) [🟣](./docs/rules/configs/grid-all.md) | Disallow CSS Grid container declarations in blocks whose final literal display value is not grid-capable. |
|
|
78
|
+
| [`no-invalid-areas`](https://nick2bad4u.github.io/stylelint-plugin-grid/docs/rules/no-invalid-areas) | — | [🟢](./docs/rules/configs/grid-recommended.md) [🟣](./docs/rules/configs/grid-all.md) | Disallow malformed `grid-template-areas` declarations. |
|
|
79
|
+
| [`no-invalid-auto-repeat`](https://nick2bad4u.github.io/stylelint-plugin-grid/docs/rules/no-invalid-auto-repeat) | — | [🟢](./docs/rules/configs/grid-recommended.md) [🟣](./docs/rules/configs/grid-all.md) | Disallow definitely invalid CSS Grid auto-repeat track sizes. |
|
|
80
|
+
| [`no-invalid-minmax`](https://nick2bad4u.github.io/stylelint-plugin-grid/docs/rules/no-invalid-minmax) | — | [🟢](./docs/rules/configs/grid-recommended.md) [🟣](./docs/rules/configs/grid-all.md) | Disallow flexible `fr` values as the minimum argument in CSS Grid `minmax()` track sizes. |
|
|
81
|
+
| [`no-invalid-repeat-count`](https://nick2bad4u.github.io/stylelint-plugin-grid/docs/rules/no-invalid-repeat-count) | — | [🟢](./docs/rules/configs/grid-recommended.md) [🟣](./docs/rules/configs/grid-all.md) | Disallow invalid fixed repeat counts in CSS Grid track templates. |
|
|
82
|
+
| [`no-invalid-span`](https://nick2bad4u.github.io/stylelint-plugin-grid/docs/rules/no-invalid-span) | — | [🟢](./docs/rules/configs/grid-recommended.md) [🟣](./docs/rules/configs/grid-all.md) | Disallow non-positive `span` counts in CSS Grid placement declarations. |
|
|
83
|
+
| [`no-mismatched-template-rows`](https://nick2bad4u.github.io/stylelint-plugin-grid/docs/rules/no-mismatched-template-rows) | — | [🟢](./docs/rules/configs/grid-recommended.md) [🟣](./docs/rules/configs/grid-all.md) | Require `grid-template-rows` track count to match `grid-template-areas` row count. |
|
|
84
|
+
| [`no-overlapping-areas`](https://nick2bad4u.github.io/stylelint-plugin-grid/docs/rules/no-overlapping-areas) | — | [🟣](./docs/rules/configs/grid-all.md) | Disallow multiple selectors assigning the same single-name `grid-area` value in one stylesheet. |
|
|
85
|
+
| [`no-reversed-placement-lines`](https://nick2bad4u.github.io/stylelint-plugin-grid/docs/rules/no-reversed-placement-lines) | — | [🟢](./docs/rules/configs/grid-recommended.md) [🟣](./docs/rules/configs/grid-all.md) | Disallow reversed or zero-width numeric CSS Grid placement line ranges. |
|
|
86
|
+
| [`no-unknown-areas`](https://nick2bad4u.github.io/stylelint-plugin-grid/docs/rules/no-unknown-areas) | — | [🟢](./docs/rules/configs/grid-recommended.md) [🟣](./docs/rules/configs/grid-all.md) | Disallow single-name `grid-area` references that do not match any named area declared in the same stylesheet. |
|
|
87
|
+
| [`no-unused-areas`](https://nick2bad4u.github.io/stylelint-plugin-grid/docs/rules/no-unused-areas) | — | [🟣](./docs/rules/configs/grid-all.md) | Disallow named template areas that are never referenced by a single-name `grid-area` declaration in the same stylesheet. |
|
|
88
|
+
| [`no-zero-grid-lines`](https://nick2bad4u.github.io/stylelint-plugin-grid/docs/rules/no-zero-grid-lines) | — | [🟢](./docs/rules/configs/grid-recommended.md) [🟣](./docs/rules/configs/grid-all.md) | Disallow line `0` in CSS Grid placement declarations. |
|
|
89
|
+
| [`prefer-gap-properties`](https://nick2bad4u.github.io/stylelint-plugin-grid/docs/rules/prefer-gap-properties) | 🔧 | [🟢](./docs/rules/configs/grid-recommended.md) [🟣](./docs/rules/configs/grid-all.md) | Prefer modern `gap`, `row-gap`, and `column-gap` properties over legacy grid gap aliases. |
|
|
90
|
+
| [`prefer-minmax-zero-fr`](https://nick2bad4u.github.io/stylelint-plugin-grid/docs/rules/prefer-minmax-zero-fr) | — | [🟣](./docs/rules/configs/grid-all.md) | Prefer `minmax(0, <flex>)` for bare flexible CSS Grid column tracks. |
|
|
91
|
+
| [`require-explicit-rows-with-column-flow`](https://nick2bad4u.github.io/stylelint-plugin-grid/docs/rules/require-explicit-rows-with-column-flow) | — | [🟣](./docs/rules/configs/grid-all.md) | Require explicit row sizing when a rule uses `grid-auto-flow: column`. |
|
|
92
|
+
| [`require-explicit-tracks-with-areas`](https://nick2bad4u.github.io/stylelint-plugin-grid/docs/rules/require-explicit-tracks-with-areas) | — | [🟣](./docs/rules/configs/grid-all.md) | Require explicit track sizing alongside CSS Grid named area templates. |
|
|
93
|
+
| [`validate-area-shapes`](https://nick2bad4u.github.io/stylelint-plugin-grid/docs/rules/validate-area-shapes) | — | [🟢](./docs/rules/configs/grid-recommended.md) [🟣](./docs/rules/configs/grid-all.md) | Require every named grid template area to form one contiguous rectangle. |
|
|
94
|
+
| [`validate-track-counts`](https://nick2bad4u.github.io/stylelint-plugin-grid/docs/rules/validate-track-counts) | — | [🟢](./docs/rules/configs/grid-recommended.md) [🟣](./docs/rules/configs/grid-all.md) | Require template row and column track counts to match `grid-template-areas` dimensions. |
|
|
95
95
|
|
|
96
96
|
## Documentation
|
|
97
97
|
|
|
@@ -25,26 +25,26 @@ split grid containers and items across files may prefer
|
|
|
25
25
|
|
|
26
26
|
**Fix legend:** 🔧 = autofixable · — = report only
|
|
27
27
|
|
|
28
|
-
| Rule
|
|
29
|
-
|
|
|
30
|
-
| [`consistent-area-naming`](../consistent-area-naming.md)
|
|
31
|
-
| [`no-conflicting-placement`](../no-conflicting-placement.md)
|
|
32
|
-
| [`no-dense-auto-flow`](../no-dense-auto-flow.md)
|
|
33
|
-
| [`no-ineffective-container-properties`](../no-ineffective-container-properties.md)
|
|
34
|
-
| [`no-invalid-areas`](../no-invalid-areas.md)
|
|
35
|
-
| [`no-invalid-auto-repeat`](../no-invalid-auto-repeat.md)
|
|
36
|
-
| [`no-invalid-minmax`](../no-invalid-minmax.md)
|
|
37
|
-
| [`no-invalid-repeat-count`](../no-invalid-repeat-count.md)
|
|
38
|
-
| [`no-invalid-span`](../no-invalid-span.md)
|
|
39
|
-
| [`no-mismatched-template-rows`](../no-mismatched-template-rows.md)
|
|
40
|
-
| [`no-overlapping-areas`](../no-overlapping-areas.md)
|
|
41
|
-
| [`no-reversed-placement-lines`](../no-reversed-placement-lines.md)
|
|
42
|
-
| [`no-unknown-areas`](../no-unknown-areas.md)
|
|
43
|
-
| [`no-unused-areas`](../no-unused-areas.md)
|
|
44
|
-
| [`no-zero-grid-lines`](../no-zero-grid-lines.md)
|
|
45
|
-
| [`prefer-gap-properties`](../prefer-gap-properties.md)
|
|
46
|
-
| [`prefer-minmax-zero-fr`](../prefer-minmax-zero-fr.md)
|
|
47
|
-
| [`require-explicit-rows-with-column-flow`](../require-explicit-rows-with-column-flow.md) |
|
|
48
|
-
| [`require-explicit-tracks-with-areas`](../require-explicit-tracks-with-areas.md)
|
|
49
|
-
| [`validate-area-shapes`](../validate-area-shapes.md)
|
|
50
|
-
| [`validate-track-counts`](../validate-track-counts.md)
|
|
28
|
+
| Rule | Fix | Description |
|
|
29
|
+
| ---------------------------------------------------------------------------------------- | :-: | ------------------------------------------------------------------------------------------------------------------------ |
|
|
30
|
+
| [`consistent-area-naming`](../consistent-area-naming.md) | — | Require consistent naming for `grid-template-areas` and single-name `grid-area` identifiers. |
|
|
31
|
+
| [`no-conflicting-placement`](../no-conflicting-placement.md) | — | Disallow same-block CSS Grid placement declarations that write the same placement slot. |
|
|
32
|
+
| [`no-dense-auto-flow`](../no-dense-auto-flow.md) | — | Disallow `grid-auto-flow: dense` because it can reorder auto-placed grid items visually. |
|
|
33
|
+
| [`no-ineffective-container-properties`](../no-ineffective-container-properties.md) | — | Disallow CSS Grid container declarations in blocks whose final literal display value is not grid-capable. |
|
|
34
|
+
| [`no-invalid-areas`](../no-invalid-areas.md) | — | Disallow malformed `grid-template-areas` declarations. |
|
|
35
|
+
| [`no-invalid-auto-repeat`](../no-invalid-auto-repeat.md) | — | Disallow definitely invalid CSS Grid auto-repeat track sizes. |
|
|
36
|
+
| [`no-invalid-minmax`](../no-invalid-minmax.md) | — | Disallow flexible `fr` values as the minimum argument in CSS Grid `minmax()` track sizes. |
|
|
37
|
+
| [`no-invalid-repeat-count`](../no-invalid-repeat-count.md) | — | Disallow invalid fixed repeat counts in CSS Grid track templates. |
|
|
38
|
+
| [`no-invalid-span`](../no-invalid-span.md) | — | Disallow non-positive `span` counts in CSS Grid placement declarations. |
|
|
39
|
+
| [`no-mismatched-template-rows`](../no-mismatched-template-rows.md) | — | Require `grid-template-rows` track count to match `grid-template-areas` row count. |
|
|
40
|
+
| [`no-overlapping-areas`](../no-overlapping-areas.md) | — | Disallow multiple selectors assigning the same single-name `grid-area` value in one stylesheet. |
|
|
41
|
+
| [`no-reversed-placement-lines`](../no-reversed-placement-lines.md) | — | Disallow reversed or zero-width numeric CSS Grid placement line ranges. |
|
|
42
|
+
| [`no-unknown-areas`](../no-unknown-areas.md) | — | Disallow single-name `grid-area` references that do not match any named area declared in the same stylesheet. |
|
|
43
|
+
| [`no-unused-areas`](../no-unused-areas.md) | — | Disallow named template areas that are never referenced by a single-name `grid-area` declaration in the same stylesheet. |
|
|
44
|
+
| [`no-zero-grid-lines`](../no-zero-grid-lines.md) | — | Disallow line `0` in CSS Grid placement declarations. |
|
|
45
|
+
| [`prefer-gap-properties`](../prefer-gap-properties.md) | 🔧 | Prefer modern `gap`, `row-gap`, and `column-gap` properties over legacy grid gap aliases. |
|
|
46
|
+
| [`prefer-minmax-zero-fr`](../prefer-minmax-zero-fr.md) | — | Prefer `minmax(0, <flex>)` for bare flexible CSS Grid column tracks. |
|
|
47
|
+
| [`require-explicit-rows-with-column-flow`](../require-explicit-rows-with-column-flow.md) | — | Require explicit row sizing when a rule uses `grid-auto-flow: column`. |
|
|
48
|
+
| [`require-explicit-tracks-with-areas`](../require-explicit-tracks-with-areas.md) | — | Require explicit track sizing alongside CSS Grid named area templates. |
|
|
49
|
+
| [`validate-area-shapes`](../validate-area-shapes.md) | — | Require every named grid template area to form one contiguous rectangle. |
|
|
50
|
+
| [`validate-track-counts`](../validate-track-counts.md) | — | Require template row and column track counts to match `grid-template-areas` dimensions. |
|
|
@@ -25,19 +25,19 @@ after checking the same-file assumptions documented in
|
|
|
25
25
|
|
|
26
26
|
**Fix legend:** 🔧 = autofixable · — = report only
|
|
27
27
|
|
|
28
|
-
| Rule
|
|
29
|
-
|
|
|
30
|
-
| [`no-conflicting-placement`](../no-conflicting-placement.md)
|
|
31
|
-
| [`no-ineffective-container-properties`](../no-ineffective-container-properties.md) |
|
|
32
|
-
| [`no-invalid-areas`](../no-invalid-areas.md)
|
|
33
|
-
| [`no-invalid-auto-repeat`](../no-invalid-auto-repeat.md)
|
|
34
|
-
| [`no-invalid-minmax`](../no-invalid-minmax.md)
|
|
35
|
-
| [`no-invalid-repeat-count`](../no-invalid-repeat-count.md)
|
|
36
|
-
| [`no-invalid-span`](../no-invalid-span.md)
|
|
37
|
-
| [`no-mismatched-template-rows`](../no-mismatched-template-rows.md)
|
|
38
|
-
| [`no-reversed-placement-lines`](../no-reversed-placement-lines.md)
|
|
39
|
-
| [`no-unknown-areas`](../no-unknown-areas.md)
|
|
40
|
-
| [`no-zero-grid-lines`](../no-zero-grid-lines.md)
|
|
41
|
-
| [`prefer-gap-properties`](../prefer-gap-properties.md)
|
|
42
|
-
| [`validate-area-shapes`](../validate-area-shapes.md)
|
|
43
|
-
| [`validate-track-counts`](../validate-track-counts.md)
|
|
28
|
+
| Rule | Fix | Description |
|
|
29
|
+
| ---------------------------------------------------------------------------------- | :-: | ------------------------------------------------------------------------------------------------------------- |
|
|
30
|
+
| [`no-conflicting-placement`](../no-conflicting-placement.md) | — | Disallow same-block CSS Grid placement declarations that write the same placement slot. |
|
|
31
|
+
| [`no-ineffective-container-properties`](../no-ineffective-container-properties.md) | — | Disallow CSS Grid container declarations in blocks whose final literal display value is not grid-capable. |
|
|
32
|
+
| [`no-invalid-areas`](../no-invalid-areas.md) | — | Disallow malformed `grid-template-areas` declarations. |
|
|
33
|
+
| [`no-invalid-auto-repeat`](../no-invalid-auto-repeat.md) | — | Disallow definitely invalid CSS Grid auto-repeat track sizes. |
|
|
34
|
+
| [`no-invalid-minmax`](../no-invalid-minmax.md) | — | Disallow flexible `fr` values as the minimum argument in CSS Grid `minmax()` track sizes. |
|
|
35
|
+
| [`no-invalid-repeat-count`](../no-invalid-repeat-count.md) | — | Disallow invalid fixed repeat counts in CSS Grid track templates. |
|
|
36
|
+
| [`no-invalid-span`](../no-invalid-span.md) | — | Disallow non-positive `span` counts in CSS Grid placement declarations. |
|
|
37
|
+
| [`no-mismatched-template-rows`](../no-mismatched-template-rows.md) | — | Require `grid-template-rows` track count to match `grid-template-areas` row count. |
|
|
38
|
+
| [`no-reversed-placement-lines`](../no-reversed-placement-lines.md) | — | Disallow reversed or zero-width numeric CSS Grid placement line ranges. |
|
|
39
|
+
| [`no-unknown-areas`](../no-unknown-areas.md) | — | Disallow single-name `grid-area` references that do not match any named area declared in the same stylesheet. |
|
|
40
|
+
| [`no-zero-grid-lines`](../no-zero-grid-lines.md) | — | Disallow line `0` in CSS Grid placement declarations. |
|
|
41
|
+
| [`prefer-gap-properties`](../prefer-gap-properties.md) | 🔧 | Prefer modern `gap`, `row-gap`, and `column-gap` properties over legacy grid gap aliases. |
|
|
42
|
+
| [`validate-area-shapes`](../validate-area-shapes.md) | — | Require every named grid template area to form one contiguous rectangle. |
|
|
43
|
+
| [`validate-track-counts`](../validate-track-counts.md) | — | Require template row and column track counts to match `grid-template-areas` dimensions. |
|
|
@@ -29,26 +29,26 @@ config after confirming they match your project's file boundaries.
|
|
|
29
29
|
|
|
30
30
|
**Config legend:** ✅ = enabled · — = not enabled
|
|
31
31
|
|
|
32
|
-
| Rule
|
|
33
|
-
|
|
|
34
|
-
| [`consistent-area-naming`](../consistent-area-naming.md)
|
|
35
|
-
| [`no-conflicting-placement`](../no-conflicting-placement.md)
|
|
36
|
-
| [`no-dense-auto-flow`](../no-dense-auto-flow.md)
|
|
37
|
-
| [`no-ineffective-container-properties`](../no-ineffective-container-properties.md)
|
|
38
|
-
| [`no-invalid-areas`](../no-invalid-areas.md)
|
|
39
|
-
| [`no-invalid-auto-repeat`](../no-invalid-auto-repeat.md)
|
|
40
|
-
| [`no-invalid-minmax`](../no-invalid-minmax.md)
|
|
41
|
-
| [`no-invalid-repeat-count`](../no-invalid-repeat-count.md)
|
|
42
|
-
| [`no-invalid-span`](../no-invalid-span.md)
|
|
43
|
-
| [`no-mismatched-template-rows`](../no-mismatched-template-rows.md)
|
|
44
|
-
| [`no-overlapping-areas`](../no-overlapping-areas.md)
|
|
45
|
-
| [`no-reversed-placement-lines`](../no-reversed-placement-lines.md)
|
|
46
|
-
| [`no-unknown-areas`](../no-unknown-areas.md)
|
|
47
|
-
| [`no-unused-areas`](../no-unused-areas.md)
|
|
48
|
-
| [`no-zero-grid-lines`](../no-zero-grid-lines.md)
|
|
49
|
-
| [`prefer-gap-properties`](../prefer-gap-properties.md)
|
|
50
|
-
| [`prefer-minmax-zero-fr`](../prefer-minmax-zero-fr.md)
|
|
51
|
-
| [`require-explicit-rows-with-column-flow`](../require-explicit-rows-with-column-flow.md) |
|
|
52
|
-
| [`require-explicit-tracks-with-areas`](../require-explicit-tracks-with-areas.md)
|
|
53
|
-
| [`validate-area-shapes`](../validate-area-shapes.md)
|
|
54
|
-
| [`validate-track-counts`](../validate-track-counts.md)
|
|
32
|
+
| Rule | Fix | [`grid-all`](./grid-all.md) | [`grid-recommended`](./grid-recommended.md) | Description |
|
|
33
|
+
| ---------------------------------------------------------------------------------------- | :-: | :-------------------------: | :-----------------------------------------: | ------------------------------------------------------------------------------------------------------------------------ |
|
|
34
|
+
| [`consistent-area-naming`](../consistent-area-naming.md) | — | ✅ | — | Require consistent naming for `grid-template-areas` and single-name `grid-area` identifiers. |
|
|
35
|
+
| [`no-conflicting-placement`](../no-conflicting-placement.md) | — | ✅ | ✅ | Disallow same-block CSS Grid placement declarations that write the same placement slot. |
|
|
36
|
+
| [`no-dense-auto-flow`](../no-dense-auto-flow.md) | — | ✅ | — | Disallow `grid-auto-flow: dense` because it can reorder auto-placed grid items visually. |
|
|
37
|
+
| [`no-ineffective-container-properties`](../no-ineffective-container-properties.md) | — | ✅ | ✅ | Disallow CSS Grid container declarations in blocks whose final literal display value is not grid-capable. |
|
|
38
|
+
| [`no-invalid-areas`](../no-invalid-areas.md) | — | ✅ | ✅ | Disallow malformed `grid-template-areas` declarations. |
|
|
39
|
+
| [`no-invalid-auto-repeat`](../no-invalid-auto-repeat.md) | — | ✅ | ✅ | Disallow definitely invalid CSS Grid auto-repeat track sizes. |
|
|
40
|
+
| [`no-invalid-minmax`](../no-invalid-minmax.md) | — | ✅ | ✅ | Disallow flexible `fr` values as the minimum argument in CSS Grid `minmax()` track sizes. |
|
|
41
|
+
| [`no-invalid-repeat-count`](../no-invalid-repeat-count.md) | — | ✅ | ✅ | Disallow invalid fixed repeat counts in CSS Grid track templates. |
|
|
42
|
+
| [`no-invalid-span`](../no-invalid-span.md) | — | ✅ | ✅ | Disallow non-positive `span` counts in CSS Grid placement declarations. |
|
|
43
|
+
| [`no-mismatched-template-rows`](../no-mismatched-template-rows.md) | — | ✅ | ✅ | Require `grid-template-rows` track count to match `grid-template-areas` row count. |
|
|
44
|
+
| [`no-overlapping-areas`](../no-overlapping-areas.md) | — | ✅ | — | Disallow multiple selectors assigning the same single-name `grid-area` value in one stylesheet. |
|
|
45
|
+
| [`no-reversed-placement-lines`](../no-reversed-placement-lines.md) | — | ✅ | ✅ | Disallow reversed or zero-width numeric CSS Grid placement line ranges. |
|
|
46
|
+
| [`no-unknown-areas`](../no-unknown-areas.md) | — | ✅ | ✅ | Disallow single-name `grid-area` references that do not match any named area declared in the same stylesheet. |
|
|
47
|
+
| [`no-unused-areas`](../no-unused-areas.md) | — | ✅ | — | Disallow named template areas that are never referenced by a single-name `grid-area` declaration in the same stylesheet. |
|
|
48
|
+
| [`no-zero-grid-lines`](../no-zero-grid-lines.md) | — | ✅ | ✅ | Disallow line `0` in CSS Grid placement declarations. |
|
|
49
|
+
| [`prefer-gap-properties`](../prefer-gap-properties.md) | 🔧 | ✅ | ✅ | Prefer modern `gap`, `row-gap`, and `column-gap` properties over legacy grid gap aliases. |
|
|
50
|
+
| [`prefer-minmax-zero-fr`](../prefer-minmax-zero-fr.md) | — | ✅ | — | Prefer `minmax(0, <flex>)` for bare flexible CSS Grid column tracks. |
|
|
51
|
+
| [`require-explicit-rows-with-column-flow`](../require-explicit-rows-with-column-flow.md) | — | ✅ | — | Require explicit row sizing when a rule uses `grid-auto-flow: column`. |
|
|
52
|
+
| [`require-explicit-tracks-with-areas`](../require-explicit-tracks-with-areas.md) | — | ✅ | — | Require explicit track sizing alongside CSS Grid named area templates. |
|
|
53
|
+
| [`validate-area-shapes`](../validate-area-shapes.md) | — | ✅ | ✅ | Require every named grid template area to form one contiguous rectangle. |
|
|
54
|
+
| [`validate-track-counts`](../validate-track-counts.md) | — | ✅ | ✅ | Require template row and column track counts to match `grid-template-areas` dimensions. |
|
|
@@ -10,7 +10,7 @@ The default style is `kebab-case`. Secondary option `style` also accepts
|
|
|
10
10
|
|
|
11
11
|
```css
|
|
12
12
|
.layout {
|
|
13
|
-
|
|
13
|
+
grid-template-areas: "mainContent";
|
|
14
14
|
}
|
|
15
15
|
```
|
|
16
16
|
|
|
@@ -18,7 +18,7 @@ The default style is `kebab-case`. Secondary option `style` also accepts
|
|
|
18
18
|
|
|
19
19
|
```css
|
|
20
20
|
.layout {
|
|
21
|
-
|
|
21
|
+
grid-template-areas: "main-content";
|
|
22
22
|
}
|
|
23
23
|
```
|
|
24
24
|
|
|
@@ -26,9 +26,9 @@ The default style is `kebab-case`. Secondary option `style` also accepts
|
|
|
26
26
|
|
|
27
27
|
```js
|
|
28
28
|
export default {
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
29
|
+
rules: {
|
|
30
|
+
"grid/consistent-area-naming": [true, { style: "snake-case" }],
|
|
31
|
+
},
|
|
32
32
|
};
|
|
33
33
|
```
|
|
34
34
|
|
|
@@ -23,7 +23,7 @@ Or extend a subpath config from a larger Stylelint config:
|
|
|
23
23
|
|
|
24
24
|
```js
|
|
25
25
|
export default {
|
|
26
|
-
|
|
26
|
+
extends: ["stylelint-plugin-grid/configs/grid-recommended"],
|
|
27
27
|
};
|
|
28
28
|
```
|
|
29
29
|
|
|
@@ -31,12 +31,12 @@ Enable individual rules when you need a tighter policy:
|
|
|
31
31
|
|
|
32
32
|
```js
|
|
33
33
|
export default {
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
34
|
+
plugins: ["stylelint-plugin-grid"],
|
|
35
|
+
rules: {
|
|
36
|
+
"grid/no-invalid-areas": true,
|
|
37
|
+
"grid/validate-area-shapes": true,
|
|
38
|
+
"grid/no-unused-areas": true,
|
|
39
|
+
},
|
|
40
40
|
};
|
|
41
41
|
```
|
|
42
42
|
|
|
@@ -52,4 +52,4 @@ assumptions in `grid/no-unused-areas`, `grid/no-overlapping-areas`, and
|
|
|
52
52
|
- [Current status](./guides/current-status.md) documents what the rules skip on
|
|
53
53
|
purpose.
|
|
54
54
|
- [`grid/no-invalid-areas`](./no-invalid-areas.md) is the first rule to understand
|
|
55
|
-
because stricter template rules depend on parseable rows.
|
|
55
|
+
because stricter template rules depend on parseable rows.
|
|
@@ -11,15 +11,15 @@ makes later edits risky. Use one placement strategy per block.
|
|
|
11
11
|
|
|
12
12
|
```css
|
|
13
13
|
.item {
|
|
14
|
-
|
|
15
|
-
|
|
14
|
+
grid-area: sidebar;
|
|
15
|
+
grid-column: 2 / 4;
|
|
16
16
|
}
|
|
17
17
|
```
|
|
18
18
|
|
|
19
19
|
```css
|
|
20
20
|
.item {
|
|
21
|
-
|
|
22
|
-
|
|
21
|
+
grid-column: 1 / 3;
|
|
22
|
+
grid-column-start: 2;
|
|
23
23
|
}
|
|
24
24
|
```
|
|
25
25
|
|
|
@@ -27,14 +27,14 @@ makes later edits risky. Use one placement strategy per block.
|
|
|
27
27
|
|
|
28
28
|
```css
|
|
29
29
|
.item {
|
|
30
|
-
|
|
30
|
+
grid-area: sidebar;
|
|
31
31
|
}
|
|
32
32
|
```
|
|
33
33
|
|
|
34
34
|
```css
|
|
35
35
|
.item {
|
|
36
|
-
|
|
37
|
-
|
|
36
|
+
grid-row: 1 / 3;
|
|
37
|
+
grid-column: 2 / 4;
|
|
38
38
|
}
|
|
39
39
|
```
|
|
40
40
|
|
|
@@ -42,10 +42,10 @@ makes later edits risky. Use one placement strategy per block.
|
|
|
42
42
|
|
|
43
43
|
```js
|
|
44
44
|
export default {
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
45
|
+
plugins: ["stylelint-plugin-grid"],
|
|
46
|
+
rules: {
|
|
47
|
+
"grid/no-conflicting-placement": true,
|
|
48
|
+
},
|
|
49
49
|
};
|
|
50
50
|
```
|
|
51
51
|
|
|
@@ -15,13 +15,13 @@ implicit grid syntax make a conservative static check much noisier.
|
|
|
15
15
|
|
|
16
16
|
```css
|
|
17
17
|
.cards {
|
|
18
|
-
|
|
18
|
+
grid-auto-flow: dense;
|
|
19
19
|
}
|
|
20
20
|
```
|
|
21
21
|
|
|
22
22
|
```css
|
|
23
23
|
.cards {
|
|
24
|
-
|
|
24
|
+
grid-auto-flow: column dense;
|
|
25
25
|
}
|
|
26
26
|
```
|
|
27
27
|
|
|
@@ -29,13 +29,13 @@ implicit grid syntax make a conservative static check much noisier.
|
|
|
29
29
|
|
|
30
30
|
```css
|
|
31
31
|
.cards {
|
|
32
|
-
|
|
32
|
+
grid-auto-flow: row;
|
|
33
33
|
}
|
|
34
34
|
```
|
|
35
35
|
|
|
36
36
|
```css
|
|
37
37
|
.cards {
|
|
38
|
-
|
|
38
|
+
grid-auto-flow: column;
|
|
39
39
|
}
|
|
40
40
|
```
|
|
41
41
|
|
|
@@ -43,10 +43,10 @@ implicit grid syntax make a conservative static check much noisier.
|
|
|
43
43
|
|
|
44
44
|
```js
|
|
45
45
|
export default {
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
46
|
+
plugins: ["stylelint-plugin-grid"],
|
|
47
|
+
rules: {
|
|
48
|
+
"grid/no-dense-auto-flow": true,
|
|
49
|
+
},
|
|
50
50
|
};
|
|
51
51
|
```
|
|
52
52
|
|
|
@@ -13,16 +13,16 @@ ineffective.
|
|
|
13
13
|
|
|
14
14
|
```css
|
|
15
15
|
.layout {
|
|
16
|
-
|
|
17
|
-
|
|
16
|
+
display: contents;
|
|
17
|
+
grid-template-columns: 1fr 1fr;
|
|
18
18
|
}
|
|
19
19
|
```
|
|
20
20
|
|
|
21
21
|
```css
|
|
22
22
|
.layout {
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
23
|
+
display: grid;
|
|
24
|
+
display: flex;
|
|
25
|
+
grid-template-areas: "main side";
|
|
26
26
|
}
|
|
27
27
|
```
|
|
28
28
|
|
|
@@ -30,15 +30,15 @@ ineffective.
|
|
|
30
30
|
|
|
31
31
|
```css
|
|
32
32
|
.layout {
|
|
33
|
-
|
|
34
|
-
|
|
33
|
+
display: grid;
|
|
34
|
+
grid-template-columns: minmax(0, 1fr) 16rem;
|
|
35
35
|
}
|
|
36
36
|
```
|
|
37
37
|
|
|
38
38
|
```css
|
|
39
39
|
.layout {
|
|
40
|
-
|
|
41
|
-
|
|
40
|
+
display: var(--layout-display);
|
|
41
|
+
grid-template-areas: "main";
|
|
42
42
|
}
|
|
43
43
|
```
|
|
44
44
|
|
|
@@ -46,10 +46,10 @@ ineffective.
|
|
|
46
46
|
|
|
47
47
|
```js
|
|
48
48
|
export default {
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
49
|
+
plugins: ["stylelint-plugin-grid"],
|
|
50
|
+
rules: {
|
|
51
|
+
"grid/no-ineffective-container-properties": true,
|
|
52
|
+
},
|
|
53
53
|
};
|
|
54
54
|
```
|
|
55
55
|
|
|
@@ -12,15 +12,15 @@ This rule reports:
|
|
|
12
12
|
|
|
13
13
|
```css
|
|
14
14
|
.layout {
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
15
|
+
grid-template-areas:
|
|
16
|
+
"header header"
|
|
17
|
+
"nav";
|
|
18
18
|
}
|
|
19
19
|
```
|
|
20
20
|
|
|
21
21
|
```css
|
|
22
22
|
.layout {
|
|
23
|
-
|
|
23
|
+
grid-template-areas: "main 1bad";
|
|
24
24
|
}
|
|
25
25
|
```
|
|
26
26
|
|
|
@@ -28,9 +28,9 @@ This rule reports:
|
|
|
28
28
|
|
|
29
29
|
```css
|
|
30
30
|
.layout {
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
31
|
+
grid-template-areas:
|
|
32
|
+
"header header"
|
|
33
|
+
"nav main";
|
|
34
34
|
}
|
|
35
35
|
```
|
|
36
36
|
|
|
@@ -38,10 +38,10 @@ This rule reports:
|
|
|
38
38
|
|
|
39
39
|
```js
|
|
40
40
|
export default {
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
41
|
+
plugins: ["stylelint-plugin-grid"],
|
|
42
|
+
rules: {
|
|
43
|
+
"grid/no-invalid-areas": true,
|
|
44
|
+
},
|
|
45
45
|
};
|
|
46
46
|
```
|
|
47
47
|
|
|
@@ -13,13 +13,13 @@ reporting runtime-dependent values such as `var()` and `env()`.
|
|
|
13
13
|
|
|
14
14
|
```css
|
|
15
15
|
.cards {
|
|
16
|
-
|
|
16
|
+
grid-template-columns: repeat(auto-fit, 1fr);
|
|
17
17
|
}
|
|
18
18
|
```
|
|
19
19
|
|
|
20
20
|
```css
|
|
21
21
|
.cards {
|
|
22
|
-
|
|
22
|
+
grid-template-columns: repeat(auto-fill, minmax(auto, 1fr));
|
|
23
23
|
}
|
|
24
24
|
```
|
|
25
25
|
|
|
@@ -27,13 +27,13 @@ reporting runtime-dependent values such as `var()` and `env()`.
|
|
|
27
27
|
|
|
28
28
|
```css
|
|
29
29
|
.cards {
|
|
30
|
-
|
|
30
|
+
grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
|
|
31
31
|
}
|
|
32
32
|
```
|
|
33
33
|
|
|
34
34
|
```css
|
|
35
35
|
.cards {
|
|
36
|
-
|
|
36
|
+
grid-template-columns: repeat(auto-fill, [card] minmax(0, 1fr));
|
|
37
37
|
}
|
|
38
38
|
```
|
|
39
39
|
|
|
@@ -41,10 +41,10 @@ reporting runtime-dependent values such as `var()` and `env()`.
|
|
|
41
41
|
|
|
42
42
|
```js
|
|
43
43
|
export default {
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
44
|
+
plugins: ["stylelint-plugin-grid"],
|
|
45
|
+
rules: {
|
|
46
|
+
"grid/no-invalid-auto-repeat": true,
|
|
47
|
+
},
|
|
48
48
|
};
|
|
49
49
|
```
|
|
50
50
|
|