@mrhenry/stylelint-mrhenry-prop-order 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Mr. Henry
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,10 @@
+# @mrhenry/stylelint-mrhenry-prop-order
+
+Our preferred order of CSS properties.
+
+## To update properties :
+
+- `npm run update` (to get the latest `@webref/css`)
+- `npm run test`
+
+This will tell you which properties are missing.

package/order.js

@@ -0,0 +1,591 @@
+module.exports = [
+	"accent-color",
+	"align-content",
+	"align-items",
+	"align-self",
+	"align-tracks",
+	"alignment-baseline",
+	"all",
+	"anchor-name",
+	"anchor-scroll",
+	"animation",
+	"animation-composition",
+	"animation-delay",
+	"animation-delay-start",
+	"animation-delay-end",
+	"animation-direction",
+	"animation-duration",
+	"animation-fill-mode",
+	"animation-iteration-count",
+	"animation-name",
+	"animation-play-state",
+	"animation-range",
+	"animation-timeline",
+	"animation-timing-function",
+	"appearance",
+	"aspect-ratio",
+	"backdrop-filter",
+	"backface-visibility",
+	"background",
+	"background-attachment",
+	"background-blend-mode",
+	"background-clip",
+	"background-color",
+	"background-image",
+	"background-origin",
+	"background-position",
+	"background-position-block",
+	"background-position-inline",
+	"background-position-x",
+	"background-position-y",
+	"background-repeat",
+	"background-size",
+	"baseline-shift",
+	"baseline-source",
+	"block-ellipsis",
+	"block-size",
+	"block-step",
+	"block-step-align",
+	"block-step-insert",
+	"block-step-round",
+	"block-step-size",
+	"bookmark-label",
+	"bookmark-level",
+	"bookmark-state",
+	"border",
+	"border-color",
+	"border-limit",
+	"border-radius",
+	"border-spacing",
+	"border-style",
+	"border-width",
+	"border-block",
+	"border-block-color",
+	"border-block-start",
+	"border-block-start-color",
+	"border-block-start-style",
+	"border-block-start-width",
+	"border-block-end",
+	"border-block-end-color",
+	"border-block-end-style",
+	"border-block-end-width",
+	"border-block-style",
+	"border-block-width",
+	"border-inline",
+	"border-inline-color",
+	"border-inline-start",
+	"border-inline-start-color",
+	"border-inline-start-style",
+	"border-inline-start-width",
+	"border-inline-end",
+	"border-inline-end-color",
+	"border-inline-end-style",
+	"border-inline-end-width",
+	"border-inline-style",
+	"border-inline-width",
+	"border-top",
+	"border-top-color",
+	"border-top-left-radius",
+	"border-top-right-radius",
+	"border-top-style",
+	"border-top-width",
+	"border-right",
+	"border-right-color",
+	"border-right-style",
+	"border-right-width",
+	"border-bottom",
+	"border-bottom-color",
+	"border-bottom-left-radius",
+	"border-bottom-right-radius",
+	"border-bottom-style",
+	"border-bottom-width",
+	"border-left",
+	"border-left-color",
+	"border-left-style",
+	"border-left-width",
+	"border-start-start-radius",
+	"border-start-end-radius",
+	"border-end-end-radius",
+	"border-end-start-radius",
+	"border-boundary",
+	"border-clip",
+	"border-clip-bottom",
+	"border-clip-left",
+	"border-clip-right",
+	"border-clip-top",
+	"border-collapse",
+	"border-image",
+	"border-image-outset",
+	"border-image-repeat",
+	"border-image-slice",
+	"border-image-source",
+	"border-image-width",
+	"box-decoration-break",
+	"box-shadow",
+	"box-sizing",
+	"box-snap",
+	"break-before",
+	"break-after",
+	"break-inside",
+	"caption-side",
+	"caret",
+	"caret-color",
+	"caret-shape",
+	"clear",
+	"clip",
+	"clip-path",
+	"clip-rule",
+	"color",
+	"color-adjust",
+	"color-interpolation",
+	"color-interpolation-filters",
+	"color-scheme",
+	"column-count",
+	"column-fill",
+	"column-gap",
+	"column-rule",
+	"column-rule-color",
+	"column-rule-style",
+	"column-rule-width",
+	"column-span",
+	"column-width",
+	"columns",
+	"contain",
+	"contain-intrinsic-block-size",
+	"contain-intrinsic-width",
+	"contain-intrinsic-height",
+	"contain-intrinsic-inline-size",
+	"contain-intrinsic-size",
+	"container",
+	"container-name",
+	"container-type",
+	"content",
+	"content-visibility",
+	"continue",
+	"copy-into",
+	"corner-shape",
+	"corners",
+	"counter-increment",
+	"counter-reset",
+	"counter-set",
+	"cue",
+	"cue-after",
+	"cue-before",
+	"cursor",
+	"cx",
+	"cy",
+	"d",
+	"direction",
+	"display",
+	"dominant-baseline",
+	"empty-cells",
+	"fill",
+	"fill-break",
+	"fill-color",
+	"fill-image",
+	"fill-opacity",
+	"fill-origin",
+	"fill-position",
+	"fill-repeat",
+	"fill-rule",
+	"fill-size",
+	"filter",
+	"flex",
+	"flex-basis",
+	"flex-grow",
+	"flex-shrink",
+	"flex-flow",
+	"flex-direction",
+	"flex-wrap",
+	"float",
+	"float-defer",
+	"float-offset",
+	"float-reference",
+	"flood-color",
+	"flood-opacity",
+	"flow-from",
+	"flow-into",
+	"font",
+	"font-family",
+	"font-feature-settings",
+	"font-kerning",
+	"font-language-override",
+	"font-optical-sizing",
+	"font-palette",
+	"font-size",
+	"font-size-adjust",
+	"font-stretch",
+	"font-style",
+	"font-synthesis",
+	"font-synthesis-small-caps",
+	"font-synthesis-style",
+	"font-synthesis-weight",
+	"font-variant",
+	"font-variant-alternates",
+	"font-variant-caps",
+	"font-variant-east-asian",
+	"font-variant-emoji",
+	"font-variant-ligatures",
+	"font-variant-numeric",
+	"font-variant-position",
+	"font-variation-settings",
+	"font-weight",
+	"footnote-display",
+	"footnote-policy",
+	"forced-color-adjust",
+	"gap",
+	"glyph-orientation-vertical",
+	"grid",
+	"grid-gap",
+	"grid-area",
+	"grid-row",
+	"grid-row-start",
+	"grid-row-end",
+	"grid-row-gap",
+	"grid-column",
+	"grid-column-start",
+	"grid-column-end",
+	"grid-column-gap",
+	"grid-auto-rows",
+	"grid-auto-columns",
+	"grid-auto-flow",
+	"grid-template",
+	"grid-template-areas",
+	"grid-template-rows",
+	"grid-template-columns",
+	"hanging-punctuation",
+	"hyphenate-character",
+	"hyphenate-limit-chars",
+	"hyphenate-limit-last",
+	"hyphenate-limit-lines",
+	"hyphenate-limit-zone",
+	"hyphens",
+	"image-orientation",
+	"image-rendering",
+	"image-resolution",
+	"initial-letter",
+	"initial-letter-align",
+	"initial-letter-wrap",
+	"inline-size",
+	"inline-sizing",
+	"input-security",
+	"inset",
+	"inset-block",
+	"inset-block-start",
+	"inset-block-end",
+	"inset-inline",
+	"inset-inline-start",
+	"inset-inline-end",
+	"isolation",
+	"justify-content",
+	"justify-items",
+	"justify-self",
+	"justify-tracks",
+	"leading-trim",
+	"letter-spacing",
+	"lighting-color",
+	"line-break",
+	"line-clamp",
+	"line-grid",
+	"line-height",
+	"line-height-step",
+	"line-padding",
+	"line-snap",
+	"list-style",
+	"list-style-image",
+	"list-style-position",
+	"list-style-type",
+	"margin",
+	"margin-block",
+	"margin-block-start",
+	"margin-block-end",
+	"margin-inline",
+	"margin-inline-start",
+	"margin-inline-end",
+	"margin-break",
+	"margin-top",
+	"margin-right",
+	"margin-bottom",
+	"margin-left",
+	"margin-trim",
+	"marker",
+	"marker-start",
+	"marker-end",
+	"marker-mid",
+	"marker-side",
+	"mask",
+	"mask-border",
+	"mask-border-mode",
+	"mask-border-outset",
+	"mask-border-repeat",
+	"mask-border-slice",
+	"mask-border-source",
+	"mask-border-width",
+	"mask-clip",
+	"mask-composite",
+	"mask-image",
+	"mask-mode",
+	"mask-origin",
+	"mask-position",
+	"mask-repeat",
+	"mask-size",
+	"mask-type",
+	"masonry-auto-flow",
+	"math-depth",
+	"math-shift",
+	"math-style",
+	"max-width",
+	"max-height",
+	"max-block-size",
+	"max-inline-size",
+	"max-lines",
+	"min-width",
+	"min-height",
+	"min-block-size",
+	"min-inline-size",
+	"min-intrinsic-sizing",
+	"mix-blend-mode",
+	"nav-up",
+	"nav-right",
+	"nav-down",
+	"nav-left",
+	"object-fit",
+	"object-position",
+	"object-view-box",
+	"offset",
+	"offset-anchor",
+	"offset-distance",
+	"offset-path",
+	"offset-position",
+	"offset-rotate",
+	"opacity",
+	"order",
+	"orphans",
+	"outline",
+	"outline-color",
+	"outline-style",
+	"outline-width",
+	"outline-offset",
+	"overflow",
+	"overflow-x",
+	"overflow-y",
+	"overflow-anchor",
+	"overflow-block",
+	"overflow-clip-margin",
+	"overflow-inline",
+	"overflow-wrap",
+	"overscroll-behavior",
+	"overscroll-behavior-block",
+	"overscroll-behavior-inline",
+	"overscroll-behavior-x",
+	"overscroll-behavior-y",
+	"padding",
+	"padding-block",
+	"padding-block-start",
+	"padding-block-end",
+	"padding-inline",
+	"padding-inline-start",
+	"padding-inline-end",
+	"padding-top",
+	"padding-right",
+	"padding-bottom",
+	"padding-left",
+	"page",
+	"page-break-before",
+	"page-break-after",
+	"page-break-inside",
+	"paint-order",
+	"pause",
+	"pause-before",
+	"pause-after",
+	"perspective",
+	"perspective-origin",
+	"place-content",
+	"place-items",
+	"place-self",
+	"pointer-events",
+	"position",
+	"position-fallback",
+	"print-color-adjust",
+	"quotes",
+	"r",
+	"region-fragment",
+	"resize",
+	"rest",
+	"rest-before",
+	"rest-after",
+	"rotate",
+	"row-gap",
+	"ruby-align",
+	"ruby-merge",
+	"ruby-overhang",
+	"ruby-position",
+	"rx",
+	"ry",
+	"scale",
+	"scroll-behavior",
+	"scroll-margin",
+	"scroll-margin-block",
+	"scroll-margin-block-start",
+	"scroll-margin-block-end",
+	"scroll-margin-inline",
+	"scroll-margin-inline-start",
+	"scroll-margin-inline-end",
+	"scroll-margin-top",
+	"scroll-margin-right",
+	"scroll-margin-bottom",
+	"scroll-margin-left",
+	"scroll-padding",
+	"scroll-padding-block",
+	"scroll-padding-block-start",
+	"scroll-padding-block-end",
+	"scroll-padding-inline",
+	"scroll-padding-inline-start",
+	"scroll-padding-inline-end",
+	"scroll-padding-top",
+	"scroll-padding-right",
+	"scroll-padding-bottom",
+	"scroll-padding-left",
+	"scroll-snap-align",
+	"scroll-snap-stop",
+	"scroll-snap-type",
+	"scroll-start",
+	"scroll-start-block",
+	"scroll-start-inline",
+	"scroll-start-target",
+	"scroll-start-x",
+	"scroll-start-y",
+	"scroll-timeline",
+	"scroll-timeline-axis",
+	"scroll-timeline-name",
+	"scrollbar-color",
+	"scrollbar-gutter",
+	"scrollbar-width",
+	"shape-image-threshold",
+	"shape-inside",
+	"shape-margin",
+	"shape-outside",
+	"shape-padding",
+	"shape-rendering",
+	"shape-subtract",
+	"spatial-navigation-action",
+	"spatial-navigation-contain",
+	"spatial-navigation-function",
+	"speak",
+	"speak-as",
+	"stop-color",
+	"stop-opacity",
+	"string-set",
+	"stroke",
+	"stroke-align",
+	"stroke-alignment",
+	"stroke-break",
+	"stroke-color",
+	"stroke-dash-corner",
+	"stroke-dash-justify",
+	"stroke-dashadjust",
+	"stroke-dasharray",
+	"stroke-dashcorner",
+	"stroke-dashoffset",
+	"stroke-image",
+	"stroke-linecap",
+	"stroke-linejoin",
+	"stroke-miterlimit",
+	"stroke-opacity",
+	"stroke-origin",
+	"stroke-position",
+	"stroke-repeat",
+	"stroke-size",
+	"stroke-width",
+	"tab-size",
+	"table-layout",
+	"text-align",
+	"text-align-all",
+	"text-align-last",
+	"text-anchor",
+	"text-combine-upright",
+	"text-decoration",
+	"text-decoration-color",
+	"text-decoration-line",
+	"text-decoration-style",
+	"text-decoration-thickness",
+	"text-decoration-skip",
+	"text-decoration-skip-box",
+	"text-decoration-skip-ink",
+	"text-decoration-skip-self",
+	"text-decoration-skip-spaces",
+	"text-decoration-trim",
+	"text-edge",
+	"text-emphasis",
+	"text-emphasis-color",
+	"text-emphasis-style",
+	"text-emphasis-position",
+	"text-emphasis-skip",
+	"text-group-align",
+	"text-indent",
+	"text-justify",
+	"text-orientation",
+	"text-overflow",
+	"text-rendering",
+	"text-shadow",
+	"text-size-adjust",
+	"text-space-collapse",
+	"text-space-trim",
+	"text-spacing",
+	"text-transform",
+	"text-underline-offset",
+	"text-underline-position",
+	"text-wrap",
+	"top",
+	"right",
+	"bottom",
+	"left",
+	"touch-action",
+	"transform",
+	"transform-box",
+	"transform-origin",
+	"transform-style",
+	"transition",
+	"transition-delay",
+	"transition-duration",
+	"transition-property",
+	"transition-timing-function",
+	"translate",
+	"unicode-bidi",
+	"user-select",
+	"vector-effect",
+	"vertical-align",
+	"view-timeline",
+	"view-timeline-axis",
+	"view-timeline-inset",
+	"view-timeline-name",
+	"view-transition-name",
+	"visibility",
+	"voice-balance",
+	"voice-duration",
+	"voice-family",
+	"voice-pitch",
+	"voice-range",
+	"voice-rate",
+	"voice-stress",
+	"voice-volume",
+	"white-space",
+	"widows",
+	"width",
+	"height",
+	"will-change",
+	"word-boundary-detection",
+	"word-boundary-expansion",
+	"word-break",
+	"word-spacing",
+	"word-wrap",
+	"wrap-before",
+	"wrap-after",
+	"wrap-flow",
+	"wrap-inside",
+	"wrap-through",
+	"writing-mode",
+	"x",
+	"y",
+	"z-index"
+]

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@mrhenry/stylelint-mrhenry-prop-order",
+  "version": "1.0.0",
+  "description": "",
+  "main": "styelint-mrhenry-prop-order.js",
+  "scripts": {
+    "test": "npm run test:jest && npm run test:properties-list",
+    "test:jest": "c8 --100 jest",
+    "test:properties-list": "node verify-properties-list.mjs"
+  },
+  "author": "Mr. Henry",
+  "license": "MIT",
+  "files": [
+    "order.js",
+    "stylelint-mrhenry-prop-order.js",
+    "LICENSE"
+  ],
+  "jest": {
+    "preset": "jest-preset-stylelint"
+  },
+  "keywords": [
+    "stylelint",
+    "stylelint-plugin"
+  ],
+  "peerDependencies": {
+    "stylelint": "^14.16.1"
+  },
+  "devDependencies": {
+    "@webref/css": "^6.1.1",
+    "c8": "^7.12.0",
+    "jest": "^29.3.1",
+    "jest-preset-stylelint": "^6.0.0",
+    "stylelint": "^14.16.1"
+  }
+}

package/stylelint-mrhenry-prop-order.js

@@ -0,0 +1,103 @@
+const stylelint = require("stylelint");
+const order = require('./order.js');
+const orderSet = new Set(order);
+
+const ruleName = "plugin/stylelint-mrhenry-prop-order";
+const messages = stylelint.utils.ruleMessages(ruleName, {
+	expected: (name) => {
+		return `Expected ${name} to appear at a different position.`;
+	}
+});
+
+const meta = {
+	url: "https://github.com/mrhenry/stylelint-mrhenry-prop-order"
+};
+
+const ruleFunction = (primaryOption, secondaryOptionObject, context) => {
+	return (postcssRoot, postcssResult) => {
+		postcssRoot.walkRules((rule) => {
+			let parent = rule.parent;
+			while (parent) {
+				if (parent.type === 'atrule' && parent.name.toLowerCase() === 'font-face') {
+					return;
+				}
+
+				parent = parent.parent
+			}
+
+			if (!rule.nodes.length) {
+				/* c8 ignore next */
+				return;
+			}
+
+			let declarationsSections = [[]]
+			for (let i = 0; i < rule.nodes.length; i++) {
+				if (
+					rule.nodes[i].type === 'decl' &&
+					!rule.nodes[i].variable &&
+					orderSet.has(rule.nodes[i].prop.toLowerCase())
+				) {
+					if ((rule.nodes[i].raws?.before?.match(/\n/g) || []).length >= 2) {
+						declarationsSections.push([])
+					}
+
+					declarationsSections.at(-1).push(rule.nodes[i]);
+
+					continue;
+				}
+
+				declarationsSections.push([])
+			}
+
+			declarationsSections = declarationsSections.filter((x) => {
+				return x.length > 1
+			})
+
+			declarationsSections.forEach((section) => {
+				section.sort((a, b) => {
+					return order.indexOf(a.prop.toLowerCase()) - order.indexOf(b.prop.toLowerCase());
+				});
+
+				const firstNodeIndex = Math.min.apply(Math, section.map((x) => rule.index(x)));
+				const originalFirstNode = rule.nodes[firstNodeIndex];
+
+				section.forEach((decl, index) => {
+					const desiredIndex = firstNodeIndex + index;
+					if (rule.index(decl) === desiredIndex) {
+						return;
+					}
+
+					if (context.fix) {
+						rule.insertBefore(desiredIndex, decl)
+
+						return;
+					}
+
+					if (index < section.length - 1) {
+						stylelint.utils.report({
+							message: messages.expected(decl.prop),
+							node: decl,
+							index: 0,
+							endIndex: decl.prop.length,
+							result: postcssResult,
+							ruleName,
+						});
+					}
+				});
+
+				const finalFirstNode = rule.nodes[firstNodeIndex];
+				if (originalFirstNode.raws.before && finalFirstNode.raws.before) {
+					const originalRawBefore = originalFirstNode.raws.before;
+					originalFirstNode.raws.before = finalFirstNode.raws.before;
+					finalFirstNode.raws.before = originalRawBefore;
+				}
+			});
+		});
+	};
+};
+
+ruleFunction.ruleName = ruleName;
+ruleFunction.messages = messages;
+ruleFunction.meta = meta;
+
+module.exports = stylelint.createPlugin(ruleName, ruleFunction);