stylelint-plugin-grid 1.0.1 → 1.0.3

package/docs/rules/no-invalid-minmax.md

@@ -12,13 +12,13 @@ length, or a percentage instead.
 
 ```css
 .layout {
-  grid-template-columns: minmax(1fr, 20rem) 2fr;
+ grid-template-columns: minmax(1fr, 20rem) 2fr;
 }
 ```
 
 ```css
 .layout {
-  grid-auto-rows: minmax(0.5fr, auto);
+ grid-auto-rows: minmax(0.5fr, auto);
 }
 ```
 
@@ -26,13 +26,13 @@ length, or a percentage instead.
 
 ```css
 .layout {
-  grid-template-columns: minmax(0, 1fr) minmax(12rem, 20rem);
+ grid-template-columns: minmax(0, 1fr) minmax(12rem, 20rem);
 }
 ```
 
 ```css
 .layout {
-  grid-auto-rows: minmax(10rem, auto);
+ grid-auto-rows: minmax(10rem, auto);
 }
 ```
 
@@ -40,10 +40,10 @@ length, or a percentage instead.
 
 ```js
 export default {
-  plugins: ["stylelint-plugin-grid"],
-  rules: {
-    "grid/no-invalid-minmax": true
-  }
+ plugins: ["stylelint-plugin-grid"],
+ rules: {
+  "grid/no-invalid-minmax": true,
+ },
 };
 ```
 

package/docs/rules/no-invalid-repeat-count.md

@@ -0,0 +1,56 @@
+# no-invalid-repeat-count
+
+Disallow invalid fixed repeat counts in CSS Grid track templates.
+
+The first argument to a fixed `repeat()` must be a positive integer. Counts such
+as `0`, negative numbers, and decimals make the track template invalid. This
+rule leaves `auto-fit`, `auto-fill`, and dynamic values to the rules that own
+those cases.
+
+## Incorrect
+
+```css
+.layout {
+ grid-template-columns: repeat(0, 1fr);
+}
+```
+
+```css
+.layout {
+ grid-template-rows: repeat(2.5, auto);
+}
+```
+
+## Correct
+
+```css
+.layout {
+ grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+```
+
+```css
+.layout {
+ grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
+}
+```
+
+## Stylelint Config
+
+```js
+export default {
+ plugins: ["stylelint-plugin-grid"],
+ rules: {
+  "grid/no-invalid-repeat-count": true,
+ },
+};
+```
+
+## Related Rules
+
+- [`no-invalid-auto-repeat`](./no-invalid-auto-repeat.md) checks track sizes
+  inside `repeat(auto-fit, ...)` and `repeat(auto-fill, ...)`.
+- [`validate-track-counts`](./validate-track-counts.md) compares expanded track
+  counts with named area templates.
+- [`grid-recommended`](./configs/grid-recommended.md) enables this rule by
+  default.

package/docs/rules/no-invalid-span.md

@@ -0,0 +1,55 @@
+# no-invalid-span
+
+Disallow non-positive `span` counts in CSS Grid placement declarations.
+
+Grid spans must move across at least one track. Values such as `span 0` and
+`span -1` cannot place an item usefully and usually make the declaration
+invalid or ignored.
+
+## Incorrect
+
+```css
+.item {
+ grid-column: span 0 / span 2;
+}
+```
+
+```css
+.item {
+ grid-row-start: span -1;
+}
+```
+
+## Correct
+
+```css
+.item {
+ grid-column: span 2 / sidebar-end;
+}
+```
+
+```css
+.item {
+ grid-row-start: span var(--rows);
+}
+```
+
+## Stylelint Config
+
+```js
+export default {
+ plugins: ["stylelint-plugin-grid"],
+ rules: {
+  "grid/no-invalid-span": true,
+ },
+};
+```
+
+## Related Rules
+
+- [`no-zero-grid-lines`](./no-zero-grid-lines.md) rejects line `0` in placement
+  values.
+- [`no-reversed-placement-lines`](./no-reversed-placement-lines.md) checks
+  numeric placement ranges.
+- [`grid-recommended`](./configs/grid-recommended.md) enables this rule by
+  default.

package/docs/rules/no-mismatched-template-rows.md

@@ -7,10 +7,10 @@ count when both declarations appear in the same block.
 
 ```css
 .layout {
-  grid-template-areas:
-    "header"
-    "main";
-  grid-template-rows: auto;
+ grid-template-areas:
+  "header"
+  "main";
+ grid-template-rows: auto;
 }
 ```
 
@@ -18,10 +18,10 @@ count when both declarations appear in the same block.
 
 ```css
 .layout {
-  grid-template-areas:
-    "header"
-    "main";
-  grid-template-rows: auto 1fr;
+ grid-template-areas:
+  "header"
+  "main";
+ grid-template-rows: auto 1fr;
 }
 ```
 

package/docs/rules/no-overlapping-areas.md

@@ -11,11 +11,11 @@ usually indicate layout collisions in your codebase.
 
 ```css
 .header {
-  grid-area: header;
+ grid-area: header;
 }
 
 .mobileHeader {
-  grid-area: header;
+ grid-area: header;
 }
 ```
 
@@ -23,11 +23,11 @@ usually indicate layout collisions in your codebase.
 
 ```css
 .header {
-  grid-area: header;
+ grid-area: header;
 }
 
 .sidebar {
-  grid-area: sidebar;
+ grid-area: sidebar;
 }
 ```
 

package/docs/rules/no-reversed-placement-lines.md

@@ -0,0 +1,56 @@
+# no-reversed-placement-lines
+
+Disallow reversed or zero-width numeric CSS Grid placement line ranges.
+
+Numeric line ranges such as `grid-column: 4 / 2` and `grid-row: 3 / 3` do not
+describe a forward span across tracks. This rule only compares plain numeric
+line pairs in the same block and ignores named lines, spans, mixed signs, and
+dynamic values.
+
+## Incorrect
+
+```css
+.item {
+ grid-column: 4 / 2;
+}
+```
+
+```css
+.item {
+ grid-row-start: 7;
+ grid-row-end: 6;
+}
+```
+
+## Correct
+
+```css
+.item {
+ grid-column: 2 / 4;
+}
+```
+
+```css
+.item {
+ grid-row: span 2 / 5;
+}
+```
+
+## Stylelint Config
+
+```js
+export default {
+ plugins: ["stylelint-plugin-grid"],
+ rules: {
+  "grid/no-reversed-placement-lines": true,
+ },
+};
+```
+
+## Related Rules
+
+- [`no-invalid-span`](./no-invalid-span.md) rejects non-positive span counts.
+- [`no-zero-grid-lines`](./no-zero-grid-lines.md) rejects line `0` in placement
+  values.
+- [`grid-recommended`](./configs/grid-recommended.md) enables this rule by
+  default.

package/docs/rules/no-unknown-areas.md

@@ -7,11 +7,11 @@ declared by `grid-template-areas` in the same stylesheet.
 
 ```css
 .layout {
-  grid-template-areas: "header main";
+ grid-template-areas: "header main";
 }
 
 .sidebar {
-  grid-area: sidebr;
+ grid-area: sidebr;
 }
 ```
 
@@ -19,11 +19,11 @@ declared by `grid-template-areas` in the same stylesheet.
 
 ```css
 .layout {
-  grid-template-areas: "header main";
+ grid-template-areas: "header main";
 }
 
 .header {
-  grid-area: header;
+ grid-area: header;
 }
 ```
 

package/docs/rules/no-unused-areas.md

@@ -11,11 +11,11 @@ templates and items live in separate files.
 
 ```css
 .layout {
-  grid-template-areas: "header main";
+ grid-template-areas: "header main";
 }
 
 .main {
-  grid-area: main;
+ grid-area: main;
 }
 ```
 
@@ -31,14 +31,14 @@ templates and items live in separate files.
 
 ```css
 .layout {
-  grid-template-areas: "header main";
+ grid-template-areas: "header main";
 }
 
 .header {
-  grid-area: header;
+ grid-area: header;
 }
 
 .main {
-  grid-area: main;
+ grid-area: main;
 }
 ```

package/docs/rules/no-zero-grid-lines.md

@@ -0,0 +1,53 @@
+# no-zero-grid-lines
+
+Disallow line `0` in CSS Grid placement declarations.
+
+CSS Grid line numbering starts at `1` from the start edge and `-1` from the end
+edge. Line `0` does not exist, so placement values using `0` are invalid.
+
+## Incorrect
+
+```css
+.item {
+ grid-column: 0 / 2;
+}
+```
+
+```css
+.item {
+ grid-row-end: 0;
+}
+```
+
+## Correct
+
+```css
+.item {
+ grid-column: 1 / -1;
+}
+```
+
+```css
+.item {
+ grid-row: var(--row-start) / var(--row-end);
+}
+```
+
+## Stylelint Config
+
+```js
+export default {
+ plugins: ["stylelint-plugin-grid"],
+ rules: {
+  "grid/no-zero-grid-lines": true,
+ },
+};
+```
+
+## Related Rules
+
+- [`no-invalid-span`](./no-invalid-span.md) rejects non-positive span counts.
+- [`no-reversed-placement-lines`](./no-reversed-placement-lines.md) checks
+  numeric placement ranges.
+- [`grid-recommended`](./configs/grid-recommended.md) enables this rule by
+  default.

package/docs/rules/prefer-gap-properties.md

@@ -8,9 +8,9 @@ This rule is autofixable.
 
 ```css
 .layout {
-  display: grid;
-  grid-gap: 1rem;
-  grid-column-gap: 2rem;
+ display: grid;
+ grid-gap: 1rem;
+ grid-column-gap: 2rem;
 }
 ```
 
@@ -18,9 +18,9 @@ This rule is autofixable.
 
 ```css
 .layout {
-  display: grid;
-  gap: 1rem;
-  column-gap: 2rem;
+ display: grid;
+ gap: 1rem;
+ column-gap: 2rem;
 }
 ```
 
@@ -28,10 +28,10 @@ This rule is autofixable.
 
 ```js
 export default {
-  plugins: ["stylelint-plugin-grid"],
-  rules: {
-    "grid/prefer-gap-properties": true
-  }
+ plugins: ["stylelint-plugin-grid"],
+ rules: {
+  "grid/prefer-gap-properties": true,
+ },
 };
 ```
 

package/docs/rules/prefer-minmax-zero-fr.md

@@ -0,0 +1,49 @@
+# prefer-minmax-zero-fr
+
+Prefer `minmax(0, <flex>)` for bare flexible CSS Grid column tracks.
+
+Bare `fr` column tracks use an automatic minimum size, so long content can
+force columns wider than intended. Wrapping the flexible track in `minmax(0, …)`
+keeps the column flexible while allowing content to shrink or overflow according
+to the rest of the layout rules.
+
+## Incorrect
+
+```css
+.layout {
+ grid-template-columns: 1fr 2fr;
+}
+```
+
+## Correct
+
+```css
+.layout {
+ grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
+}
+```
+
+```css
+.layout {
+ grid-template-columns: repeat(2, 1fr);
+}
+```
+
+## Stylelint Config
+
+```js
+export default {
+ plugins: ["stylelint-plugin-grid"],
+ rules: {
+  "grid/prefer-minmax-zero-fr": true,
+ },
+};
+```
+
+## Related Rules
+
+- [`no-invalid-minmax`](./no-invalid-minmax.md) rejects flexible minimums inside
+  `minmax()`.
+- [`no-invalid-auto-repeat`](./no-invalid-auto-repeat.md) checks auto-repeat
+  track sizes.
+- [`grid-all`](./configs/grid-all.md) enables this optional rule.

package/docs/rules/require-explicit-rows-with-column-flow.md

@@ -15,8 +15,8 @@ cascade layers.
 
 ```css
 .cards {
-  grid-auto-flow: column;
-  grid-template-columns: repeat(3, 1fr);
+ grid-auto-flow: column;
+ grid-template-columns: repeat(3, 1fr);
 }
 ```
 
@@ -24,15 +24,15 @@ cascade layers.
 
 ```css
 .cards {
-  grid-auto-flow: column;
-  grid-auto-rows: minmax(10rem, auto);
+ grid-auto-flow: column;
+ grid-auto-rows: minmax(10rem, auto);
 }
 ```
 
 ```css
 .cards {
-  grid-auto-flow: column;
-  grid-template-rows: repeat(3, minmax(0, 1fr));
+ grid-auto-flow: column;
+ grid-template-rows: repeat(3, minmax(0, 1fr));
 }
 ```
 
@@ -40,10 +40,10 @@ cascade layers.
 
 ```js
 export default {
-  plugins: ["stylelint-plugin-grid"],
-  rules: {
-    "grid/require-explicit-rows-with-column-flow": true
-  }
+ plugins: ["stylelint-plugin-grid"],
+ rules: {
+  "grid/require-explicit-rows-with-column-flow": true,
+ },
 };
 ```
 

package/docs/rules/require-explicit-tracks-with-areas.md

@@ -0,0 +1,80 @@
+# require-explicit-tracks-with-areas
+
+Require explicit track sizing alongside CSS Grid named area templates.
+
+Named area templates are easiest to maintain when their columns, and optionally
+their rows, are sized in the same block. By default this rule requires
+`grid-template-columns` and leaves rows optional because auto-sized rows are
+common.
+
+## Incorrect
+
+```css
+.layout {
+ grid-template-areas: "nav main";
+}
+```
+
+With `{ rows: true }`:
+
+```css
+.layout {
+ grid-template-areas: "main";
+ grid-template-columns: minmax(0, 1fr);
+}
+```
+
+## Correct
+
+```css
+.layout {
+ grid-template-areas: "nav main";
+ grid-template-columns: auto minmax(0, 1fr);
+}
+```
+
+With `{ rows: true }`:
+
+```css
+.layout {
+ grid-template-areas: "main";
+ grid-template-columns: minmax(0, 1fr);
+ grid-template-rows: auto;
+}
+```
+
+## Options
+
+```js
+export default {
+ plugins: ["stylelint-plugin-grid"],
+ rules: {
+  "grid/require-explicit-tracks-with-areas": [
+   true,
+   {
+    columns: true,
+    rows: false,
+   },
+  ],
+ },
+};
+```
+
+## Stylelint Config
+
+```js
+export default {
+ plugins: ["stylelint-plugin-grid"],
+ rules: {
+  "grid/require-explicit-tracks-with-areas": true,
+ },
+};
+```
+
+## Related Rules
+
+- [`no-mismatched-template-rows`](./no-mismatched-template-rows.md) compares
+  named area rows with `grid-template-rows`.
+- [`validate-track-counts`](./validate-track-counts.md) compares named area
+  columns and rows with explicit track counts.
+- [`grid-all`](./configs/grid-all.md) enables this optional rule.

package/docs/rules/validate-area-shapes.md

@@ -9,9 +9,9 @@ authored template declaration instead of leaving it to browser behavior.
 
 ```css
 .layout {
-  grid-template-areas:
-    "main side"
-    "main main";
+ grid-template-areas:
+  "main side"
+  "main main";
 }
 ```
 
@@ -19,9 +19,9 @@ authored template declaration instead of leaving it to browser behavior.
 
 ```css
 .layout {
-  grid-template-areas:
-    "main side"
-    "main side";
+ grid-template-areas:
+  "main side"
+  "main side";
 }
 ```
 
@@ -29,10 +29,10 @@ authored template declaration instead of leaving it to browser behavior.
 
 ```js
 export default {
-  plugins: ["stylelint-plugin-grid"],
-  rules: {
-    "grid/validate-area-shapes": true
-  }
+ plugins: ["stylelint-plugin-grid"],
+ rules: {
+  "grid/validate-area-shapes": true,
+ },
 };
 ```
 

package/docs/rules/validate-track-counts.md

@@ -7,11 +7,11 @@ match the dimensions of `grid-template-areas`.
 
 ```css
 .layout {
-  grid-template-areas:
-    "nav main"
-    "nav footer";
-  grid-template-columns: 12rem;
-  grid-template-rows: auto auto auto;
+ grid-template-areas:
+  "nav main"
+  "nav footer";
+ grid-template-columns: 12rem;
+ grid-template-rows: auto auto auto;
 }
 ```
 
@@ -19,11 +19,11 @@ match the dimensions of `grid-template-areas`.
 
 ```css
 .layout {
-  grid-template-areas:
-    "nav main"
-    "nav footer";
-  grid-template-columns: 12rem 1fr;
-  grid-template-rows: auto auto;
+ grid-template-areas:
+  "nav main"
+  "nav footer";
+ grid-template-columns: 12rem 1fr;
+ grid-template-rows: auto auto;
 }
 ```