stylelint-plugin-grid 1.0.0
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/CHANGELOG.md +0 -0
- package/LICENSE +21 -0
- package/README.md +93 -0
- package/dist/_internal/create-stylelint-rule.d.ts +49 -0
- package/dist/_internal/create-stylelint-rule.d.ts.map +1 -0
- package/dist/_internal/create-stylelint-rule.js +34 -0
- package/dist/_internal/create-stylelint-rule.js.map +1 -0
- package/dist/_internal/grid-template-analysis.d.ts +62 -0
- package/dist/_internal/grid-template-analysis.d.ts.map +1 -0
- package/dist/_internal/grid-template-analysis.js +346 -0
- package/dist/_internal/grid-template-analysis.js.map +1 -0
- package/dist/_internal/plugin-constants.d.ts +30 -0
- package/dist/_internal/plugin-constants.d.ts.map +1 -0
- package/dist/_internal/plugin-constants.js +47 -0
- package/dist/_internal/plugin-constants.js.map +1 -0
- package/dist/_internal/rules-registry.d.ts +10 -0
- package/dist/_internal/rules-registry.d.ts.map +1 -0
- package/dist/_internal/rules-registry.js +31 -0
- package/dist/_internal/rules-registry.js.map +1 -0
- package/dist/configs/grid-all.cjs +3 -0
- package/dist/configs/grid-all.d.cts +3 -0
- package/dist/configs/grid-all.d.ts +9 -0
- package/dist/configs/grid-all.d.ts.map +1 -0
- package/dist/configs/grid-all.js +9 -0
- package/dist/configs/grid-all.js.map +1 -0
- package/dist/configs/grid-recommended.cjs +3 -0
- package/dist/configs/grid-recommended.d.cts +3 -0
- package/dist/configs/grid-recommended.d.ts +9 -0
- package/dist/configs/grid-recommended.d.ts.map +1 -0
- package/dist/configs/grid-recommended.js +9 -0
- package/dist/configs/grid-recommended.js.map +1 -0
- package/dist/plugin.cjs +1268 -0
- package/dist/plugin.cjs.map +7 -0
- package/dist/plugin.d.cts +45 -0
- package/dist/plugin.d.ts +45 -0
- package/dist/plugin.d.ts.map +1 -0
- package/dist/plugin.js +78 -0
- package/dist/plugin.js.map +1 -0
- package/dist/rules/consistent-area-naming.d.ts +12 -0
- package/dist/rules/consistent-area-naming.d.ts.map +1 -0
- package/dist/rules/consistent-area-naming.js +86 -0
- package/dist/rules/consistent-area-naming.js.map +1 -0
- package/dist/rules/no-dense-auto-flow.d.ts +8 -0
- package/dist/rules/no-dense-auto-flow.d.ts.map +1 -0
- package/dist/rules/no-dense-auto-flow.js +44 -0
- package/dist/rules/no-dense-auto-flow.js.map +1 -0
- package/dist/rules/no-invalid-areas.d.ts +8 -0
- package/dist/rules/no-invalid-areas.d.ts.map +1 -0
- package/dist/rules/no-invalid-areas.js +42 -0
- package/dist/rules/no-invalid-areas.js.map +1 -0
- package/dist/rules/no-invalid-auto-repeat.d.ts +8 -0
- package/dist/rules/no-invalid-auto-repeat.d.ts.map +1 -0
- package/dist/rules/no-invalid-auto-repeat.js +189 -0
- package/dist/rules/no-invalid-auto-repeat.js.map +1 -0
- package/dist/rules/no-invalid-minmax.d.ts +8 -0
- package/dist/rules/no-invalid-minmax.d.ts.map +1 -0
- package/dist/rules/no-invalid-minmax.js +58 -0
- package/dist/rules/no-invalid-minmax.js.map +1 -0
- package/dist/rules/no-mismatched-template-rows.d.ts +8 -0
- package/dist/rules/no-mismatched-template-rows.d.ts.map +1 -0
- package/dist/rules/no-mismatched-template-rows.js +50 -0
- package/dist/rules/no-mismatched-template-rows.js.map +1 -0
- package/dist/rules/no-overlapping-areas.d.ts +8 -0
- package/dist/rules/no-overlapping-areas.d.ts.map +1 -0
- package/dist/rules/no-overlapping-areas.js +48 -0
- package/dist/rules/no-overlapping-areas.js.map +1 -0
- package/dist/rules/no-unknown-areas.d.ts +8 -0
- package/dist/rules/no-unknown-areas.d.ts.map +1 -0
- package/dist/rules/no-unknown-areas.js +47 -0
- package/dist/rules/no-unknown-areas.js.map +1 -0
- package/dist/rules/no-unused-areas.d.ts +8 -0
- package/dist/rules/no-unused-areas.d.ts.map +1 -0
- package/dist/rules/no-unused-areas.js +48 -0
- package/dist/rules/no-unused-areas.js.map +1 -0
- package/dist/rules/prefer-gap-properties.d.ts +8 -0
- package/dist/rules/prefer-gap-properties.d.ts.map +1 -0
- package/dist/rules/prefer-gap-properties.js +58 -0
- package/dist/rules/prefer-gap-properties.js.map +1 -0
- package/dist/rules/require-explicit-rows-with-column-flow.d.ts +8 -0
- package/dist/rules/require-explicit-rows-with-column-flow.d.ts.map +1 -0
- package/dist/rules/require-explicit-rows-with-column-flow.js +52 -0
- package/dist/rules/require-explicit-rows-with-column-flow.js.map +1 -0
- package/dist/rules/validate-area-shapes.d.ts +8 -0
- package/dist/rules/validate-area-shapes.d.ts.map +1 -0
- package/dist/rules/validate-area-shapes.js +47 -0
- package/dist/rules/validate-area-shapes.js.map +1 -0
- package/dist/rules/validate-track-counts.d.ts +9 -0
- package/dist/rules/validate-track-counts.d.ts.map +1 -0
- package/dist/rules/validate-track-counts.js +67 -0
- package/dist/rules/validate-track-counts.js.map +1 -0
- package/docs/rules/configs/grid-all.md +42 -0
- package/docs/rules/configs/grid-recommended.md +37 -0
- package/docs/rules/configs/index.md +46 -0
- package/docs/rules/consistent-area-naming.md +41 -0
- package/docs/rules/getting-started.md +55 -0
- package/docs/rules/guides/current-status.md +44 -0
- package/docs/rules/no-dense-auto-flow.md +57 -0
- package/docs/rules/no-invalid-areas.md +55 -0
- package/docs/rules/no-invalid-auto-repeat.md +58 -0
- package/docs/rules/no-invalid-minmax.md +57 -0
- package/docs/rules/no-mismatched-template-rows.md +36 -0
- package/docs/rules/no-overlapping-areas.md +40 -0
- package/docs/rules/no-unknown-areas.md +39 -0
- package/docs/rules/no-unused-areas.md +44 -0
- package/docs/rules/overview.md +54 -0
- package/docs/rules/prefer-gap-properties.md +45 -0
- package/docs/rules/require-explicit-rows-with-column-flow.md +56 -0
- package/docs/rules/validate-area-shapes.md +46 -0
- package/docs/rules/validate-track-counts.md +39 -0
- package/package.json +355 -0
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
import stylelint, {} from "stylelint";
|
|
2
|
+
import { isDefined } from "ts-extras";
|
|
3
|
+
import { createStylelintRule, } from "../_internal/create-stylelint-rule.js";
|
|
4
|
+
import { createRuleDocsUrl, createRuleName, } from "../_internal/plugin-constants.js";
|
|
5
|
+
const { report, ruleMessages, validateOptions } = stylelint.utils;
|
|
6
|
+
const ruleName = createRuleName("prefer-gap-properties");
|
|
7
|
+
const messages = ruleMessages(ruleName, {
|
|
8
|
+
rejected: (propertyName, replacement) => `Prefer \`${replacement}\` over legacy \`${propertyName}\`.`,
|
|
9
|
+
});
|
|
10
|
+
const docs = {
|
|
11
|
+
description: "Prefer modern `gap`, `row-gap`, and `column-gap` properties over legacy grid gap aliases.",
|
|
12
|
+
recommended: true,
|
|
13
|
+
url: createRuleDocsUrl("prefer-gap-properties"),
|
|
14
|
+
};
|
|
15
|
+
const replacements = {
|
|
16
|
+
"grid-column-gap": "column-gap",
|
|
17
|
+
"grid-gap": "gap",
|
|
18
|
+
"grid-row-gap": "row-gap",
|
|
19
|
+
};
|
|
20
|
+
function getReplacement(declaration) {
|
|
21
|
+
return replacements[declaration.prop.toLowerCase()];
|
|
22
|
+
}
|
|
23
|
+
const ruleFunction = (primary) => (root, result) => {
|
|
24
|
+
if (!validateOptions(result, ruleName, {
|
|
25
|
+
actual: primary,
|
|
26
|
+
possible: [true],
|
|
27
|
+
})) {
|
|
28
|
+
return;
|
|
29
|
+
}
|
|
30
|
+
root.walkDecls((declaration) => {
|
|
31
|
+
const replacement = getReplacement(declaration);
|
|
32
|
+
if (!isDefined(replacement)) {
|
|
33
|
+
return;
|
|
34
|
+
}
|
|
35
|
+
report({
|
|
36
|
+
fix: () => {
|
|
37
|
+
declaration.prop = replacement;
|
|
38
|
+
},
|
|
39
|
+
message: messages.rejected(declaration.prop, replacement),
|
|
40
|
+
node: declaration,
|
|
41
|
+
result,
|
|
42
|
+
ruleName,
|
|
43
|
+
word: declaration.prop,
|
|
44
|
+
});
|
|
45
|
+
});
|
|
46
|
+
};
|
|
47
|
+
/** Public Stylelint rule definition. */
|
|
48
|
+
const rule = createStylelintRule({
|
|
49
|
+
docs,
|
|
50
|
+
messages,
|
|
51
|
+
meta: {
|
|
52
|
+
fixable: true,
|
|
53
|
+
},
|
|
54
|
+
rule: ruleFunction,
|
|
55
|
+
ruleName,
|
|
56
|
+
});
|
|
57
|
+
export default rule;
|
|
58
|
+
//# sourceMappingURL=prefer-gap-properties.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"prefer-gap-properties.js","sourceRoot":"","sources":["../../src/rules/prefer-gap-properties.ts"],"names":[],"mappings":"AAEA,OAAO,SAAS,EAAE,EAAiB,MAAM,WAAW,CAAC;AACrD,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAEtC,OAAO,EACH,mBAAmB,GAEtB,MAAM,uCAAuC,CAAC;AAC/C,OAAO,EACH,iBAAiB,EACjB,cAAc,GACjB,MAAM,kCAAkC,CAAC;AAE1C,MAAM,EAAE,MAAM,EAAE,YAAY,EAAE,eAAe,EAAE,GAAG,SAAS,CAAC,KAAK,CAAC;AAElE,MAAM,QAAQ,GAAG,cAAc,CAAC,uBAAuB,CAAC,CAAC;AACzD,MAAM,QAAQ,GAEV,YAAY,CAAC,QAAQ,EAAE;IACvB,QAAQ,EAAE,CAAC,YAAoB,EAAE,WAAmB,EAAU,EAAE,CAC5D,YAAY,WAAW,oBAAoB,YAAY,KAAK;CACnE,CAAC,CAAC;AAEH,MAAM,IAAI,GAAG;IACT,WAAW,EACP,2FAA2F;IAC/F,WAAW,EAAE,IAAI;IACjB,GAAG,EAAE,iBAAiB,CAAC,uBAAuB,CAAC;CACzC,CAAC;AAEX,MAAM,YAAY,GAAqC;IACnD,iBAAiB,EAAE,YAAY;IAC/B,UAAU,EAAE,KAAK;IACjB,cAAc,EAAE,SAAS;CAC5B,CAAC;AAEF,SAAS,cAAc,CACnB,WAAkC;IAElC,OAAO,YAAY,CAAC,WAAW,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,CAAC;AACxD,CAAC;AAED,MAAM,YAAY,GACd,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE;IAC1B,IACI,CAAC,eAAe,CAAC,MAAM,EAAE,QAAQ,EAAE;QAC/B,MAAM,EAAE,OAAO;QACf,QAAQ,EAAE,CAAC,IAAI,CAAC;KACnB,CAAC,EACJ,CAAC;QACC,OAAO;IACX,CAAC;IAED,IAAI,CAAC,SAAS,CAAC,CAAC,WAAW,EAAE,EAAE;QAC3B,MAAM,WAAW,GAAG,cAAc,CAAC,WAAW,CAAC,CAAC;QAEhD,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,CAAC;YAC1B,OAAO;QACX,CAAC;QAED,MAAM,CAAC;YACH,GAAG,EAAE,GAAG,EAAE;gBACN,WAAW,CAAC,IAAI,GAAG,WAAW,CAAC;YACnC,CAAC;YACD,OAAO,EAAE,QAAQ,CAAC,QAAQ,CAAC,WAAW,CAAC,IAAI,EAAE,WAAW,CAAC;YACzD,IAAI,EAAE,WAAW;YACjB,MAAM;YACN,QAAQ;YACR,IAAI,EAAE,WAAW,CAAC,IAAI;SACzB,CAAC,CAAC;IACP,CAAC,CAAC,CAAC;AACP,CAAC,CAAC;AAEN,wCAAwC;AACxC,MAAM,IAAI,GACN,mBAAmB,CAAsC;IACrD,IAAI;IACJ,QAAQ;IACR,IAAI,EAAE;QACF,OAAO,EAAE,IAAI;KAChB;IACD,IAAI,EAAE,YAAY;IAClB,QAAQ;CACX,CAAC,CAAC;AAEP,eAAe,IAAI,CAAC"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { type StylelintPluginRule } from "../_internal/create-stylelint-rule.js";
|
|
2
|
+
declare const messages: {
|
|
3
|
+
rejected: () => string;
|
|
4
|
+
};
|
|
5
|
+
/** Public Stylelint rule definition. */
|
|
6
|
+
declare const rule: StylelintPluginRule<boolean, undefined, typeof messages>;
|
|
7
|
+
export default rule;
|
|
8
|
+
//# sourceMappingURL=require-explicit-rows-with-column-flow.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"require-explicit-rows-with-column-flow.d.ts","sourceRoot":"","sources":["../../src/rules/require-explicit-rows-with-column-flow.ts"],"names":[],"mappings":"AAGA,OAAO,EAEH,KAAK,mBAAmB,EAC3B,MAAM,uCAAuC,CAAC;AAa/C,QAAA,MAAM,QAAQ,EAAE;IAAE,QAAQ,EAAE,MAAM,MAAM,CAAA;CAGtC,CAAC;AAqDH,wCAAwC;AACxC,QAAA,MAAM,IAAI,EAAE,mBAAmB,CAAC,OAAO,EAAE,SAAS,EAAE,OAAO,QAAQ,CAM7D,CAAC;AAEP,eAAe,IAAI,CAAC"}
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
import stylelint, {} from "stylelint";
|
|
2
|
+
import { isDefined } from "ts-extras";
|
|
3
|
+
import { createStylelintRule, } from "../_internal/create-stylelint-rule.js";
|
|
4
|
+
import { findSiblingDeclaration, splitTopLevelWhitespace, } from "../_internal/grid-template-analysis.js";
|
|
5
|
+
import { createRuleDocsUrl, createRuleName, } from "../_internal/plugin-constants.js";
|
|
6
|
+
const { report, ruleMessages, validateOptions } = stylelint.utils;
|
|
7
|
+
const ruleName = createRuleName("require-explicit-rows-with-column-flow");
|
|
8
|
+
const messages = ruleMessages(ruleName, {
|
|
9
|
+
rejected: () => "Pair `grid-auto-flow: column` with explicit row sizing in the same block, such as `grid-template-rows` or `grid-auto-rows`.",
|
|
10
|
+
});
|
|
11
|
+
const docs = {
|
|
12
|
+
description: "Require explicit row sizing when a rule uses `grid-auto-flow: column`.",
|
|
13
|
+
recommended: false,
|
|
14
|
+
url: createRuleDocsUrl("require-explicit-rows-with-column-flow"),
|
|
15
|
+
};
|
|
16
|
+
function hasColumnFlow(value) {
|
|
17
|
+
return splitTopLevelWhitespace(value).some((token) => token.toLowerCase() === "column");
|
|
18
|
+
}
|
|
19
|
+
const ruleFunction = (primary) => (root, result) => {
|
|
20
|
+
if (!validateOptions(result, ruleName, {
|
|
21
|
+
actual: primary,
|
|
22
|
+
possible: [true],
|
|
23
|
+
})) {
|
|
24
|
+
return;
|
|
25
|
+
}
|
|
26
|
+
root.walkDecls("grid-auto-flow", (declaration) => {
|
|
27
|
+
if (!hasColumnFlow(declaration.value)) {
|
|
28
|
+
return;
|
|
29
|
+
}
|
|
30
|
+
const hasExplicitRows = isDefined(findSiblingDeclaration(declaration, "grid-template-rows")) ||
|
|
31
|
+
isDefined(findSiblingDeclaration(declaration, "grid-auto-rows"));
|
|
32
|
+
if (hasExplicitRows) {
|
|
33
|
+
return;
|
|
34
|
+
}
|
|
35
|
+
report({
|
|
36
|
+
message: messages.rejected(),
|
|
37
|
+
node: declaration,
|
|
38
|
+
result,
|
|
39
|
+
ruleName,
|
|
40
|
+
word: "column",
|
|
41
|
+
});
|
|
42
|
+
});
|
|
43
|
+
};
|
|
44
|
+
/** Public Stylelint rule definition. */
|
|
45
|
+
const rule = createStylelintRule({
|
|
46
|
+
docs,
|
|
47
|
+
messages,
|
|
48
|
+
rule: ruleFunction,
|
|
49
|
+
ruleName,
|
|
50
|
+
});
|
|
51
|
+
export default rule;
|
|
52
|
+
//# sourceMappingURL=require-explicit-rows-with-column-flow.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"require-explicit-rows-with-column-flow.js","sourceRoot":"","sources":["../../src/rules/require-explicit-rows-with-column-flow.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,EAAE,EAAiB,MAAM,WAAW,CAAC;AACrD,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAEtC,OAAO,EACH,mBAAmB,GAEtB,MAAM,uCAAuC,CAAC;AAC/C,OAAO,EACH,sBAAsB,EACtB,uBAAuB,GAC1B,MAAM,wCAAwC,CAAC;AAChD,OAAO,EACH,iBAAiB,EACjB,cAAc,GACjB,MAAM,kCAAkC,CAAC;AAE1C,MAAM,EAAE,MAAM,EAAE,YAAY,EAAE,eAAe,EAAE,GAAG,SAAS,CAAC,KAAK,CAAC;AAElE,MAAM,QAAQ,GAAG,cAAc,CAAC,wCAAwC,CAAC,CAAC;AAC1E,MAAM,QAAQ,GAA+B,YAAY,CAAC,QAAQ,EAAE;IAChE,QAAQ,EAAE,GAAW,EAAE,CACnB,6HAA6H;CACpI,CAAC,CAAC;AAEH,MAAM,IAAI,GAAG;IACT,WAAW,EACP,wEAAwE;IAC5E,WAAW,EAAE,KAAK;IAClB,GAAG,EAAE,iBAAiB,CAAC,wCAAwC,CAAC;CAC1D,CAAC;AAEX,SAAS,aAAa,CAAC,KAAa;IAChC,OAAO,uBAAuB,CAAC,KAAK,CAAC,CAAC,IAAI,CACtC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,WAAW,EAAE,KAAK,QAAQ,CAC9C,CAAC;AACN,CAAC;AAED,MAAM,YAAY,GACd,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE;IAC1B,IACI,CAAC,eAAe,CAAC,MAAM,EAAE,QAAQ,EAAE;QAC/B,MAAM,EAAE,OAAO;QACf,QAAQ,EAAE,CAAC,IAAI,CAAC;KACnB,CAAC,EACJ,CAAC;QACC,OAAO;IACX,CAAC;IAED,IAAI,CAAC,SAAS,CAAC,gBAAgB,EAAE,CAAC,WAAW,EAAE,EAAE;QAC7C,IAAI,CAAC,aAAa,CAAC,WAAW,CAAC,KAAK,CAAC,EAAE,CAAC;YACpC,OAAO;QACX,CAAC;QAED,MAAM,eAAe,GACjB,SAAS,CACL,sBAAsB,CAAC,WAAW,EAAE,oBAAoB,CAAC,CAC5D;YACD,SAAS,CACL,sBAAsB,CAAC,WAAW,EAAE,gBAAgB,CAAC,CACxD,CAAC;QAEN,IAAI,eAAe,EAAE,CAAC;YAClB,OAAO;QACX,CAAC;QAED,MAAM,CAAC;YACH,OAAO,EAAE,QAAQ,CAAC,QAAQ,EAAE;YAC5B,IAAI,EAAE,WAAW;YACjB,MAAM;YACN,QAAQ;YACR,IAAI,EAAE,QAAQ;SACjB,CAAC,CAAC;IACP,CAAC,CAAC,CAAC;AACP,CAAC,CAAC;AAEN,wCAAwC;AACxC,MAAM,IAAI,GACN,mBAAmB,CAAsC;IACrD,IAAI;IACJ,QAAQ;IACR,IAAI,EAAE,YAAY;IAClB,QAAQ;CACX,CAAC,CAAC;AAEP,eAAe,IAAI,CAAC"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { type StylelintPluginRule } from "../_internal/create-stylelint-rule.js";
|
|
2
|
+
declare const messages: {
|
|
3
|
+
rejected: (areaName: string) => string;
|
|
4
|
+
};
|
|
5
|
+
/** Public Stylelint rule definition. */
|
|
6
|
+
declare const rule: StylelintPluginRule<boolean, undefined, typeof messages>;
|
|
7
|
+
export default rule;
|
|
8
|
+
//# sourceMappingURL=validate-area-shapes.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"validate-area-shapes.d.ts","sourceRoot":"","sources":["../../src/rules/validate-area-shapes.ts"],"names":[],"mappings":"AAGA,OAAO,EAEH,KAAK,mBAAmB,EAC3B,MAAM,uCAAuC,CAAC;AAc/C,QAAA,MAAM,QAAQ,EAAE;IAAE,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,MAAM,CAAA;CAMvD,CAAC;AAqCF,wCAAwC;AACxC,QAAA,MAAM,IAAI,EAAE,mBAAmB,CAAC,OAAO,EAAE,SAAS,EAAE,OAAO,QAAQ,CAM7D,CAAC;AAEP,eAAe,IAAI,CAAC"}
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
import stylelint, {} from "stylelint";
|
|
2
|
+
import { isEmpty } from "ts-extras";
|
|
3
|
+
import { createStylelintRule, } from "../_internal/create-stylelint-rule.js";
|
|
4
|
+
import { collectGridTemplateAreas, getAreaShapes, isRectangularArea, } from "../_internal/grid-template-analysis.js";
|
|
5
|
+
import { createRuleDocsUrl, createRuleName, } from "../_internal/plugin-constants.js";
|
|
6
|
+
const { report, ruleMessages, validateOptions } = stylelint.utils;
|
|
7
|
+
const ruleName = createRuleName("validate-area-shapes");
|
|
8
|
+
const messages = ruleMessages(ruleName, {
|
|
9
|
+
rejected: (areaName) => `Grid area "${areaName}" must form one contiguous rectangle in \`grid-template-areas\`.`,
|
|
10
|
+
});
|
|
11
|
+
const docs = {
|
|
12
|
+
description: "Require every named grid template area to form one contiguous rectangle.",
|
|
13
|
+
recommended: true,
|
|
14
|
+
url: createRuleDocsUrl("validate-area-shapes"),
|
|
15
|
+
};
|
|
16
|
+
const ruleFunction = (primary) => (root, result) => {
|
|
17
|
+
if (!validateOptions(result, ruleName, {
|
|
18
|
+
actual: primary,
|
|
19
|
+
possible: [true],
|
|
20
|
+
})) {
|
|
21
|
+
return;
|
|
22
|
+
}
|
|
23
|
+
for (const template of collectGridTemplateAreas(root)) {
|
|
24
|
+
if (isEmpty(template.diagnostics)) {
|
|
25
|
+
for (const shape of getAreaShapes(template)) {
|
|
26
|
+
if (!isRectangularArea(template, shape)) {
|
|
27
|
+
report({
|
|
28
|
+
message: messages.rejected(shape.name),
|
|
29
|
+
node: template.declaration,
|
|
30
|
+
result,
|
|
31
|
+
ruleName,
|
|
32
|
+
word: shape.name,
|
|
33
|
+
});
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
};
|
|
39
|
+
/** Public Stylelint rule definition. */
|
|
40
|
+
const rule = createStylelintRule({
|
|
41
|
+
docs,
|
|
42
|
+
messages,
|
|
43
|
+
rule: ruleFunction,
|
|
44
|
+
ruleName,
|
|
45
|
+
});
|
|
46
|
+
export default rule;
|
|
47
|
+
//# sourceMappingURL=validate-area-shapes.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"validate-area-shapes.js","sourceRoot":"","sources":["../../src/rules/validate-area-shapes.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,EAAE,EAAiB,MAAM,WAAW,CAAC;AACrD,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAEpC,OAAO,EACH,mBAAmB,GAEtB,MAAM,uCAAuC,CAAC;AAC/C,OAAO,EACH,wBAAwB,EACxB,aAAa,EACb,iBAAiB,GACpB,MAAM,wCAAwC,CAAC;AAChD,OAAO,EACH,iBAAiB,EACjB,cAAc,GACjB,MAAM,kCAAkC,CAAC;AAE1C,MAAM,EAAE,MAAM,EAAE,YAAY,EAAE,eAAe,EAAE,GAAG,SAAS,CAAC,KAAK,CAAC;AAElE,MAAM,QAAQ,GAAG,cAAc,CAAC,sBAAsB,CAAC,CAAC;AACxD,MAAM,QAAQ,GAA+C,YAAY,CACrE,QAAQ,EACR;IACI,QAAQ,EAAE,CAAC,QAAgB,EAAU,EAAE,CACnC,cAAc,QAAQ,kEAAkE;CAC/F,CACJ,CAAC;AAEF,MAAM,IAAI,GAAG;IACT,WAAW,EACP,0EAA0E;IAC9E,WAAW,EAAE,IAAI;IACjB,GAAG,EAAE,iBAAiB,CAAC,sBAAsB,CAAC;CACxC,CAAC;AAEX,MAAM,YAAY,GACd,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE;IAC1B,IACI,CAAC,eAAe,CAAC,MAAM,EAAE,QAAQ,EAAE;QAC/B,MAAM,EAAE,OAAO;QACf,QAAQ,EAAE,CAAC,IAAI,CAAC;KACnB,CAAC,EACJ,CAAC;QACC,OAAO;IACX,CAAC;IAED,KAAK,MAAM,QAAQ,IAAI,wBAAwB,CAAC,IAAI,CAAC,EAAE,CAAC;QACpD,IAAI,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAC,EAAE,CAAC;YAChC,KAAK,MAAM,KAAK,IAAI,aAAa,CAAC,QAAQ,CAAC,EAAE,CAAC;gBAC1C,IAAI,CAAC,iBAAiB,CAAC,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC;oBACtC,MAAM,CAAC;wBACH,OAAO,EAAE,QAAQ,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAI,CAAC;wBACtC,IAAI,EAAE,QAAQ,CAAC,WAAW;wBAC1B,MAAM;wBACN,QAAQ;wBACR,IAAI,EAAE,KAAK,CAAC,IAAI;qBACnB,CAAC,CAAC;gBACP,CAAC;YACL,CAAC;QACL,CAAC;IACL,CAAC;AACL,CAAC,CAAC;AAEN,wCAAwC;AACxC,MAAM,IAAI,GACN,mBAAmB,CAAsC;IACrD,IAAI;IACJ,QAAQ;IACR,IAAI,EAAE,YAAY;IAClB,QAAQ;CACX,CAAC,CAAC;AAEP,eAAe,IAAI,CAAC"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { type StylelintPluginRule } from "../_internal/create-stylelint-rule.js";
|
|
2
|
+
declare const messages: {
|
|
3
|
+
columns: (areaColumns: number, trackColumns: number) => string;
|
|
4
|
+
rows: (areaRows: number, trackRows: number) => string;
|
|
5
|
+
};
|
|
6
|
+
/** Public Stylelint rule definition. */
|
|
7
|
+
declare const rule: StylelintPluginRule<boolean, undefined, typeof messages>;
|
|
8
|
+
export default rule;
|
|
9
|
+
//# sourceMappingURL=validate-track-counts.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"validate-track-counts.d.ts","sourceRoot":"","sources":["../../src/rules/validate-track-counts.ts"],"names":[],"mappings":"AAGA,OAAO,EAEH,KAAK,mBAAmB,EAC3B,MAAM,uCAAuC,CAAC;AAc/C,QAAA,MAAM,QAAQ,EAAE;IACZ,OAAO,EAAE,CAAC,WAAW,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,KAAK,MAAM,CAAC;IAC/D,IAAI,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,KAAK,MAAM,CAAC;CAMxD,CAAC;AAwEH,wCAAwC;AACxC,QAAA,MAAM,IAAI,EAAE,mBAAmB,CAAC,OAAO,EAAE,SAAS,EAAE,OAAO,QAAQ,CAM7D,CAAC;AAEP,eAAe,IAAI,CAAC"}
|
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
import stylelint, {} from "stylelint";
|
|
2
|
+
import { arrayFirst, isDefined, isEmpty } from "ts-extras";
|
|
3
|
+
import { createStylelintRule, } from "../_internal/create-stylelint-rule.js";
|
|
4
|
+
import { collectGridTemplateAreas, countGridTracks, findSiblingDeclaration, } from "../_internal/grid-template-analysis.js";
|
|
5
|
+
import { createRuleDocsUrl, createRuleName, } from "../_internal/plugin-constants.js";
|
|
6
|
+
const { report, ruleMessages, validateOptions } = stylelint.utils;
|
|
7
|
+
const ruleName = createRuleName("validate-track-counts");
|
|
8
|
+
const messages = ruleMessages(ruleName, {
|
|
9
|
+
columns: (areaColumns, trackColumns) => `\`grid-template-areas\` defines ${String(areaColumns)} columns, but sibling \`grid-template-columns\` defines ${String(trackColumns)} tracks.`,
|
|
10
|
+
rows: (areaRows, trackRows) => `\`grid-template-areas\` defines ${String(areaRows)} rows, but sibling \`grid-template-rows\` defines ${String(trackRows)} tracks.`,
|
|
11
|
+
});
|
|
12
|
+
const docs = {
|
|
13
|
+
description: "Require template row and column track counts to match `grid-template-areas` dimensions.",
|
|
14
|
+
recommended: true,
|
|
15
|
+
url: createRuleDocsUrl("validate-track-counts"),
|
|
16
|
+
};
|
|
17
|
+
const ruleFunction = (primary) => (root, result) => {
|
|
18
|
+
if (!validateOptions(result, ruleName, {
|
|
19
|
+
actual: primary,
|
|
20
|
+
possible: [true],
|
|
21
|
+
})) {
|
|
22
|
+
return;
|
|
23
|
+
}
|
|
24
|
+
for (const template of collectGridTemplateAreas(root)) {
|
|
25
|
+
const expectedColumns = arrayFirst(template.rows)?.length;
|
|
26
|
+
if (isEmpty(template.diagnostics) && isDefined(expectedColumns)) {
|
|
27
|
+
const expectedRows = template.rows.length;
|
|
28
|
+
const rowsDeclaration = findSiblingDeclaration(template.declaration, "grid-template-rows");
|
|
29
|
+
const columnsDeclaration = findSiblingDeclaration(template.declaration, "grid-template-columns");
|
|
30
|
+
const actualRows = isDefined(rowsDeclaration)
|
|
31
|
+
? countGridTracks(rowsDeclaration.value)
|
|
32
|
+
: undefined;
|
|
33
|
+
const actualColumns = isDefined(columnsDeclaration)
|
|
34
|
+
? countGridTracks(columnsDeclaration.value)
|
|
35
|
+
: undefined;
|
|
36
|
+
if (isDefined(rowsDeclaration) &&
|
|
37
|
+
isDefined(actualRows) &&
|
|
38
|
+
actualRows !== expectedRows) {
|
|
39
|
+
report({
|
|
40
|
+
message: messages.rows(expectedRows, actualRows),
|
|
41
|
+
node: rowsDeclaration,
|
|
42
|
+
result,
|
|
43
|
+
ruleName,
|
|
44
|
+
});
|
|
45
|
+
}
|
|
46
|
+
if (isDefined(columnsDeclaration) &&
|
|
47
|
+
isDefined(actualColumns) &&
|
|
48
|
+
actualColumns !== expectedColumns) {
|
|
49
|
+
report({
|
|
50
|
+
message: messages.columns(expectedColumns, actualColumns),
|
|
51
|
+
node: columnsDeclaration,
|
|
52
|
+
result,
|
|
53
|
+
ruleName,
|
|
54
|
+
});
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
};
|
|
59
|
+
/** Public Stylelint rule definition. */
|
|
60
|
+
const rule = createStylelintRule({
|
|
61
|
+
docs,
|
|
62
|
+
messages,
|
|
63
|
+
rule: ruleFunction,
|
|
64
|
+
ruleName,
|
|
65
|
+
});
|
|
66
|
+
export default rule;
|
|
67
|
+
//# sourceMappingURL=validate-track-counts.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"validate-track-counts.js","sourceRoot":"","sources":["../../src/rules/validate-track-counts.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: Grid-all
|
|
3
|
+
description: Complete shareable config for stylelint-plugin-grid.
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# grid-all
|
|
7
|
+
|
|
8
|
+
`gridPluginConfigs["grid-all"]` enables every public rule exported by this
|
|
9
|
+
package.
|
|
10
|
+
|
|
11
|
+
## Usage
|
|
12
|
+
|
|
13
|
+
```js
|
|
14
|
+
import { gridPluginConfigs } from "stylelint-plugin-grid";
|
|
15
|
+
|
|
16
|
+
export default gridPluginConfigs["grid-all"];
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
Use this config after reading the
|
|
20
|
+
[current static-analysis boundaries](../guides/current-status.md). Projects that
|
|
21
|
+
split grid containers and items across files may prefer
|
|
22
|
+
[`grid-recommended`](./grid-recommended.md) plus selected stricter rules.
|
|
23
|
+
|
|
24
|
+
## Rules in this config
|
|
25
|
+
|
|
26
|
+
**Fix legend:** 🔧 = autofixable · — = report only
|
|
27
|
+
|
|
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-dense-auto-flow`](../no-dense-auto-flow.md) | — | Disallow `grid-auto-flow: dense` because it can reorder auto-placed grid items visually. |
|
|
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-mismatched-template-rows`](../no-mismatched-template-rows.md) | — | Require `grid-template-rows` track count to match `grid-template-areas` row count. |
|
|
36
|
+
| [`no-overlapping-areas`](../no-overlapping-areas.md) | — | Disallow multiple selectors assigning the same single-name `grid-area` value in one stylesheet. |
|
|
37
|
+
| [`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. |
|
|
38
|
+
| [`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. |
|
|
39
|
+
| [`prefer-gap-properties`](../prefer-gap-properties.md) | 🔧 | Prefer modern `gap`, `row-gap`, and `column-gap` properties over legacy grid gap aliases. |
|
|
40
|
+
| [`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`. |
|
|
41
|
+
| [`validate-area-shapes`](../validate-area-shapes.md) | — | Require every named grid template area to form one contiguous rectangle. |
|
|
42
|
+
| [`validate-track-counts`](../validate-track-counts.md) | — | Require template row and column track counts to match `grid-template-areas` dimensions. |
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: Grid-recommended
|
|
3
|
+
description: Recommended shareable config for stylelint-plugin-grid.
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# grid-recommended
|
|
7
|
+
|
|
8
|
+
`gridPluginConfigs["grid-recommended"]` enables the low-noise CSS Grid rules
|
|
9
|
+
that are safe for most stylesheets.
|
|
10
|
+
|
|
11
|
+
## Usage
|
|
12
|
+
|
|
13
|
+
```js
|
|
14
|
+
import { gridPluginConfigs } from "stylelint-plugin-grid";
|
|
15
|
+
|
|
16
|
+
export default gridPluginConfigs["grid-recommended"];
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
This config is the default starting point from
|
|
20
|
+
[Getting Started](../getting-started.md). Move to [`grid-all`](./grid-all.md) only
|
|
21
|
+
after checking the same-file assumptions documented in
|
|
22
|
+
[Current Status](../guides/current-status.md).
|
|
23
|
+
|
|
24
|
+
## Rules in this config
|
|
25
|
+
|
|
26
|
+
**Fix legend:** 🔧 = autofixable · — = report only
|
|
27
|
+
|
|
28
|
+
| Rule | Fix | Description |
|
|
29
|
+
| --- | :-: | --- |
|
|
30
|
+
| [`no-invalid-areas`](../no-invalid-areas.md) | — | Disallow malformed `grid-template-areas` declarations. |
|
|
31
|
+
| [`no-invalid-auto-repeat`](../no-invalid-auto-repeat.md) | — | Disallow definitely invalid CSS Grid auto-repeat track sizes. |
|
|
32
|
+
| [`no-invalid-minmax`](../no-invalid-minmax.md) | — | Disallow flexible `fr` values as the minimum argument in CSS Grid `minmax()` track sizes. |
|
|
33
|
+
| [`no-mismatched-template-rows`](../no-mismatched-template-rows.md) | — | Require `grid-template-rows` track count to match `grid-template-areas` row count. |
|
|
34
|
+
| [`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. |
|
|
35
|
+
| [`prefer-gap-properties`](../prefer-gap-properties.md) | 🔧 | Prefer modern `gap`, `row-gap`, and `column-gap` properties over legacy grid gap aliases. |
|
|
36
|
+
| [`validate-area-shapes`](../validate-area-shapes.md) | — | Require every named grid template area to form one contiguous rectangle. |
|
|
37
|
+
| [`validate-track-counts`](../validate-track-counts.md) | — | Require template row and column track counts to match `grid-template-areas` dimensions. |
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: Configs
|
|
3
|
+
description: Shareable Stylelint configs exported by stylelint-plugin-grid.
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# Configs
|
|
7
|
+
|
|
8
|
+
`stylelint-plugin-grid` exports two ESM-first shareable configs.
|
|
9
|
+
|
|
10
|
+
| Config | Purpose |
|
|
11
|
+
| --------------------------------------------------------------------- | -------------------------------------------------------------------- |
|
|
12
|
+
| [🟢 — `gridPluginConfigs["grid-recommended"]`](./grid-recommended.md) | Low-noise checks for broadly applicable CSS Grid correctness. |
|
|
13
|
+
| [🟣 — `gridPluginConfigs["grid-all"]`](./grid-all.md) | Every public rule, including stricter same-stylesheet policy checks. |
|
|
14
|
+
|
|
15
|
+
Use `grid-recommended` first, then move selected stricter rules into your local
|
|
16
|
+
config after confirming they match your project's file boundaries.
|
|
17
|
+
|
|
18
|
+
## Config Pages
|
|
19
|
+
|
|
20
|
+
- [`grid-recommended`](./grid-recommended.md) enables the low-noise baseline.
|
|
21
|
+
- [`grid-all`](./grid-all.md) enables every public rule, including same-stylesheet
|
|
22
|
+
policy checks.
|
|
23
|
+
- [Current status](../guides/current-status.md) explains why some rules are kept
|
|
24
|
+
out of the recommended config.
|
|
25
|
+
|
|
26
|
+
## Rules by Config
|
|
27
|
+
|
|
28
|
+
**Fix legend:** 🔧 = autofixable · — = report only
|
|
29
|
+
|
|
30
|
+
**Config legend:** ✅ = enabled · — = not enabled
|
|
31
|
+
|
|
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-dense-auto-flow`](../no-dense-auto-flow.md) | — | ✅ | — | Disallow `grid-auto-flow: dense` because it can reorder auto-placed grid items visually. |
|
|
36
|
+
| [`no-invalid-areas`](../no-invalid-areas.md) | — | ✅ | ✅ | Disallow malformed `grid-template-areas` declarations. |
|
|
37
|
+
| [`no-invalid-auto-repeat`](../no-invalid-auto-repeat.md) | — | ✅ | ✅ | Disallow definitely invalid CSS Grid auto-repeat track sizes. |
|
|
38
|
+
| [`no-invalid-minmax`](../no-invalid-minmax.md) | — | ✅ | ✅ | Disallow flexible `fr` values as the minimum argument in CSS Grid `minmax()` track sizes. |
|
|
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-unknown-areas`](../no-unknown-areas.md) | — | ✅ | ✅ | Disallow single-name `grid-area` references that do not match any named area declared in the same stylesheet. |
|
|
42
|
+
| [`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. |
|
|
43
|
+
| [`prefer-gap-properties`](../prefer-gap-properties.md) | 🔧 | ✅ | ✅ | Prefer modern `gap`, `row-gap`, and `column-gap` properties over legacy grid gap aliases. |
|
|
44
|
+
| [`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`. |
|
|
45
|
+
| [`validate-area-shapes`](../validate-area-shapes.md) | — | ✅ | ✅ | Require every named grid template area to form one contiguous rectangle. |
|
|
46
|
+
| [`validate-track-counts`](../validate-track-counts.md) | — | ✅ | ✅ | Require template row and column track counts to match `grid-template-areas` dimensions. |
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
# consistent-area-naming
|
|
2
|
+
|
|
3
|
+
Require consistent naming for `grid-template-areas` and single-name `grid-area`
|
|
4
|
+
identifiers.
|
|
5
|
+
|
|
6
|
+
The default style is `kebab-case`. Secondary option `style` also accepts
|
|
7
|
+
`camel-case` and `snake-case`.
|
|
8
|
+
|
|
9
|
+
## Incorrect
|
|
10
|
+
|
|
11
|
+
```css
|
|
12
|
+
.layout {
|
|
13
|
+
grid-template-areas: "mainContent";
|
|
14
|
+
}
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
## Correct
|
|
18
|
+
|
|
19
|
+
```css
|
|
20
|
+
.layout {
|
|
21
|
+
grid-template-areas: "main-content";
|
|
22
|
+
}
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
## Options
|
|
26
|
+
|
|
27
|
+
```js
|
|
28
|
+
export default {
|
|
29
|
+
rules: {
|
|
30
|
+
"grid/consistent-area-naming": [true, { style: "snake-case" }]
|
|
31
|
+
}
|
|
32
|
+
};
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
## Related Rules
|
|
36
|
+
|
|
37
|
+
- [`no-invalid-areas`](./no-invalid-areas.md) enforces valid area tokens before
|
|
38
|
+
naming-style policy applies.
|
|
39
|
+
- [`no-unused-areas`](./no-unused-areas.md) and
|
|
40
|
+
[`no-unknown-areas`](./no-unknown-areas.md) use the same named-area vocabulary.
|
|
41
|
+
- [`grid-all`](./configs/grid-all.md) enables this stricter policy rule.
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: Getting Started
|
|
3
|
+
description: Install and configure stylelint-plugin-grid.
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# Getting Started
|
|
7
|
+
|
|
8
|
+
Install the plugin next to Stylelint:
|
|
9
|
+
|
|
10
|
+
```sh
|
|
11
|
+
npm install --save-dev stylelint stylelint-plugin-grid
|
|
12
|
+
```
|
|
13
|
+
|
|
14
|
+
Use the recommended config for a low-noise baseline:
|
|
15
|
+
|
|
16
|
+
```js
|
|
17
|
+
import { gridPluginConfigs } from "stylelint-plugin-grid";
|
|
18
|
+
|
|
19
|
+
export default gridPluginConfigs["grid-recommended"];
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
Or extend a subpath config from a larger Stylelint config:
|
|
23
|
+
|
|
24
|
+
```js
|
|
25
|
+
export default {
|
|
26
|
+
extends: ["stylelint-plugin-grid/configs/grid-recommended"]
|
|
27
|
+
};
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
Enable individual rules when you need a tighter policy:
|
|
31
|
+
|
|
32
|
+
```js
|
|
33
|
+
export default {
|
|
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
|
+
};
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
## Recommended Starting Point
|
|
44
|
+
|
|
45
|
+
Start with `grid-recommended`. Add `grid-all` only after checking the same-file
|
|
46
|
+
assumptions in `grid/no-unused-areas`, `grid/no-overlapping-areas`, and
|
|
47
|
+
`grid/consistent-area-naming` against your project structure.
|
|
48
|
+
|
|
49
|
+
## Related Docs
|
|
50
|
+
|
|
51
|
+
- [Config reference](./configs/) explains what each exported config enables.
|
|
52
|
+
- [Current status](./guides/current-status.md) documents what the rules skip on
|
|
53
|
+
purpose.
|
|
54
|
+
- [`grid/no-invalid-areas`](./no-invalid-areas.md) is the first rule to understand
|
|
55
|
+
because stricter template rules depend on parseable rows.
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: Current Status
|
|
3
|
+
description: Current scope of the CSS Grid safety rule catalog.
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# Current Status
|
|
7
|
+
|
|
8
|
+
The repository has been re-identified as `stylelint-plugin-grid` and now
|
|
9
|
+
ships a focused CSS Grid rule catalog.
|
|
10
|
+
|
|
11
|
+
## Stable Scope
|
|
12
|
+
|
|
13
|
+
- Grid area template parsing is intentionally conservative.
|
|
14
|
+
- Track-count validation handles explicit tracks and integer `repeat(...)`
|
|
15
|
+
notation.
|
|
16
|
+
- Auto-repeat validation catches definitely invalid fixed-size mistakes while
|
|
17
|
+
avoiding runtime-dependent `var(...)` and `env(...)` values.
|
|
18
|
+
- Rules skip dynamic values such as `var(...)`, `env(...)`, and multi-value
|
|
19
|
+
`grid-area` line placement when static analysis would be unreliable.
|
|
20
|
+
|
|
21
|
+
## Deliberate Non-Goals
|
|
22
|
+
|
|
23
|
+
- Inferring component relationships across files.
|
|
24
|
+
- Guessing whether duplicate `grid-area` assignments are intentional overlays.
|
|
25
|
+
- Inferring row sizing for column auto-placement from other selectors or cascade
|
|
26
|
+
branches.
|
|
27
|
+
- Rewriting `grid-template-areas` strings automatically.
|
|
28
|
+
|
|
29
|
+
Those choices keep the plugin useful on save instead of turning it into a noisy
|
|
30
|
+
layout oracle.
|
|
31
|
+
|
|
32
|
+
## Related Docs
|
|
33
|
+
|
|
34
|
+
- [Getting Started](../getting-started.md) shows the recommended baseline config.
|
|
35
|
+
- [`grid-all`](../configs/grid-all.md) includes the stricter same-stylesheet rules.
|
|
36
|
+
- [`no-invalid-auto-repeat`](../no-invalid-auto-repeat.md) and
|
|
37
|
+
[`no-invalid-minmax`](../no-invalid-minmax.md) cover track sizing syntax that
|
|
38
|
+
browsers can reject.
|
|
39
|
+
- [`no-dense-auto-flow`](../no-dense-auto-flow.md),
|
|
40
|
+
[`require-explicit-rows-with-column-flow`](../require-explicit-rows-with-column-flow.md),
|
|
41
|
+
[`no-unused-areas`](../no-unused-areas.md),
|
|
42
|
+
[`no-overlapping-areas`](../no-overlapping-areas.md), and
|
|
43
|
+
[`consistent-area-naming`](../consistent-area-naming.md) are the main rules to
|
|
44
|
+
review before opting into stricter policy checks.
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
# no-dense-auto-flow
|
|
2
|
+
|
|
3
|
+
Disallow `grid-auto-flow: dense` because dense packing can reorder auto-placed
|
|
4
|
+
grid items visually.
|
|
5
|
+
|
|
6
|
+
Dense auto-placement backfills earlier holes with later items when they fit.
|
|
7
|
+
That can make the visual order differ from source order, which is risky for
|
|
8
|
+
keyboard navigation, reading order, and assistive technology expectations.
|
|
9
|
+
|
|
10
|
+
This rule intentionally checks only the explicit `grid-auto-flow` property. It
|
|
11
|
+
does not attempt to parse the `grid` shorthand, where quoted area names and
|
|
12
|
+
implicit grid syntax make a conservative static check much noisier.
|
|
13
|
+
|
|
14
|
+
## Incorrect
|
|
15
|
+
|
|
16
|
+
```css
|
|
17
|
+
.cards {
|
|
18
|
+
grid-auto-flow: dense;
|
|
19
|
+
}
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
```css
|
|
23
|
+
.cards {
|
|
24
|
+
grid-auto-flow: column dense;
|
|
25
|
+
}
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
## Correct
|
|
29
|
+
|
|
30
|
+
```css
|
|
31
|
+
.cards {
|
|
32
|
+
grid-auto-flow: row;
|
|
33
|
+
}
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
```css
|
|
37
|
+
.cards {
|
|
38
|
+
grid-auto-flow: column;
|
|
39
|
+
}
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
## Stylelint Config
|
|
43
|
+
|
|
44
|
+
```js
|
|
45
|
+
export default {
|
|
46
|
+
plugins: ["stylelint-plugin-grid"],
|
|
47
|
+
rules: {
|
|
48
|
+
"grid/no-dense-auto-flow": true
|
|
49
|
+
}
|
|
50
|
+
};
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
## Related Rules
|
|
54
|
+
|
|
55
|
+
- [`no-overlapping-areas`](./no-overlapping-areas.md) catches another class of
|
|
56
|
+
layout-order hazards from duplicate named area assignments.
|
|
57
|
+
- [`grid-all`](./configs/grid-all.md) enables this stricter policy rule.
|