@perplex-digital/stylelint-config 2.0.1 → 8.0.1

package/README.md

@@ -1,12 +1,18 @@
-# Perplex Property Order [<img src="https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/2872758/stylelint-icon-black.svg" alt="StyleLint" width="90" height="90" align="right">][stylelint]
+# Perplex CSS Order & Property Sorter [<img src="https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/2872758/stylelint-icon-black.svg" alt="StyleLint" width="90" height="90" align="right">][stylelint]
 
 [![npm version][npm-img]][npm-url]
 [![npm downloads][npm-dls]][npm-url]
 [![github issues][issues-img]][issues-url]
 
-A heavily opinionated [Stylelint][] config that also sorts CSS declarations and properties the way [Perplex][] does.
-
-\*With some modifications & additions for modern properties.
+🗂️ A heavily opinionated [Stylelint][] config that:
+- Supports linting `.vue` files
+- Orders CSS the way [Perplex][] does
+   - Supports Tailwind 4 directives like `@apply` and `@variant`
+- Sorts CSS properties the way [Concentric-CSS][] did but with:
+   - 'Box sizing' and 'Overflow' modules above the 'Box model - Margin' module
+   - `outline` grouped with the 'Borders' module
+   - 'Backgrounds and box-shadow' module below the 'Box model - Padding' module
+   - 'Positioning' and 'Anchor positioning' modules above the 'Transforms' module
 
 ## Usage
 
@@ -27,16 +33,18 @@ A heavily opinionated [Stylelint][] config that also sorts CSS declarations and
 ## Advanced
 
 The default setup applies these rules:
-* `stylelint-config-standard`
-* `stylelint-config-recommended-vue`
-* `order/order` with the various [custom properties and declarations][].
-* `order/properties-order` with the various [property groups][]. If you need to configure other options for this rule,
+- `stylelint-config-standard`
+- `stylelint-config-recommended-vue`
+- `@stylistic/stylelint-plugin`,
+- `stylelint-use-logical-spec`
+- `stylelint-high-performance-animation`
+- [Some overrides][] of these rules
+- `order/order` with the [Perplex][] order.
+- `order/properties-order` with the various [property groups][]. If you need to configure other options for this rule,
 the groups can be imported separately and the rule configured to your needs.
-* `stylelint-use-logical-spec`
-* `stylelint-high-performance-animation`
 
 ```js
-import propertyGroups from '@perplex-digital/stylelint-config/groups';
+import propertyGroups from '@perplex-digital/stylelint-config/property-groups';
 
 export default {
 	extends: [], // Do not extend the config here.
@@ -61,7 +69,9 @@ export default {
 [issues-url]: https://github.com/PerplexDigital/stylelint-config/issues
 [issues-img]: https://img.shields.io/github/issues/PerplexDigital/stylelint-config.svg?style=flat-square
 [stylelint]: https://github.com/stylelint/stylelint
-[perplex]: https://perplex.nl/en
-[mdo-order]: http://markdotto.com/2011/11/29/css-property-order/
-[custom properties and declarations]: https://github.com/PerplexDigital/stylelint-config/blob/main/declarations.js
-[property groups]: https://github.com/PerplexDigital/stylelint-config/blob/main/groups.js
+[stylelint-order]: https://github.com/hudochenkov/stylelint-order
+[concentric-css]: https://github.com/brandon-rhodes/Concentric-CSS/
+[some overrides]: https://github.com/PerplexDigital/stylelint-config/blob/main/src/index.js
+[perplex]: https://github.com/PerplexDigital/stylelint-config/blob/main/src/order.js
+[property groups]: https://github.com/PerplexDigital/stylelint-config/blob/main/src/property-groups.js
+[mdo-order]: https://markdotto.com/blog/css-property-order/

package/package.json

@@ -1,69 +1,72 @@
 {
-    "name": "@perplex-digital/stylelint-config",
-    "version": "2.0.1",
-    "description": "Box model-based property sort order for Stylelint.",
-    "keywords": [
-        "logical properties",
-        "properties-order",
-        "property order",
-        "box model",
-        "stylelint",
-        "stylelint-config",
-        "stylelint-order"
+  "name": "@perplex-digital/stylelint-config",
+  "version": "8.0.1",
+  "description": "Order and Concentric-based property sorting for Stylelint.",
+  "keywords": [
+    "tailwind",
+    "logical properties",
+    "properties-order",
+    "property order",
+    "concentric",
+    "stylelint",
+    "stylelint-config",
+    "stylelint-order"
+  ],
+  "homepage": "https://github.com/PerplexDigital/stylelint-config",
+  "bugs": "https://github.com/PerplexDigital/stylelint-config/issues",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/PerplexDigital/stylelint-config.git"
+  },
+  "license": "ISC",
+  "author": "Tobias Boekwijt (https://perplex.nl/en/about-perplex/the-perplexers#tobias-boekwijt)",
+  "type": "module",
+  "exports": {
+    ".": "./src/index.js",
+    "./order": "./src/order.js",
+    "./property-groups": "./src/property-groups.js"
+  },
+  "main": "src/index.js",
+  "files": [
+    "src/index.js",
+    "src/order.js",
+    "src/property-groups.js"
+  ],
+  "lint-staged": {
+    "*.js": [
+      "eslint --fix",
+      "prettier --write"
     ],
-    "homepage": "https://github.com/PerplexDigital/stylelint-config",
-    "bugs": "https://github.com/PerplexDigital/stylelint-config/issues",
-    "repository": "PerplexDigital/stylelint-config",
-    "license": "ISC",
-    "author": "Tobias Boekwijt (https://perplex.nl/en/about-perplex/the-perplexers#tobias-boekwijt)",
-    "type": "module",
-    "exports": {
-        ".": "./index.js",
-        "./declarations": "./declarations.js",
-        "./groups": "./groups.js"
-    },
-    "main": "index.js",
-    "files": [
-        "index.js",
-        "declarations.js",
-        "groups.js"
-    ],
-    "scripts": {
-        "changeset": "changeset add",
-        "lint": "eslint '**/*.js'",
-        "prepare": "husky",
-        "release": "changeset publish",
-        "test": "node --test"
-    },
-    "lint-staged": {
-        "*.js": [
-            "eslint --fix",
-            "prettier --write"
-        ],
-        "package.json": "prettier --write"
-    },
-    "dependencies": {
-        "@stylistic/stylelint-plugin": "^3.1.2",
-        "stylelint-config-recommended-vue": "^1.6.0",
-        "stylelint-config-standard": "^36.0.1",
-        "stylelint-high-performance-animation": "^1.11.0",
-        "stylelint-order": "^6.0.4",
-        "stylelint-use-logical-spec": "^5.0.1"
-    },
-    "devDependencies": {
-        "@changesets/cli": "^2.28.1",
-        "@commitlint/cli": "^19.8.0",
-        "@commitlint/config-conventional": "^19.8.0",
-        "@nuxt/eslint-config": "^1.2.0",
-        "@zazen/changesets-changelog": "^2.0.3",
-        "eslint": "^9.23.0",
-        "husky": "^9.1.7",
-        "lint-staged": "^15.5.0",
-        "prettier": "^3.5.3",
-        "stylelint": "^16.16.0",
-        "typescript": "^5.8.2"
-    },
-    "peerDependencies": {
-        "stylelint": ">=16"
-    }
-}
+    "package.json": "prettier --write"
+  },
+  "dependencies": {
+    "@stylistic/stylelint-plugin": "^4.0.0",
+    "stylelint-config-recommended-vue": "^1.6.1",
+    "stylelint-config-standard": "^38.0.0",
+    "stylelint-high-performance-animation": "^1.11.0",
+    "stylelint-order": "^7.0.0",
+    "stylelint-use-logical-spec": "^5.0.1"
+  },
+  "devDependencies": {
+    "@changesets/cli": "^2.29.6",
+    "@commitlint/cli": "^19.8.1",
+    "@commitlint/config-conventional": "^19.8.1",
+    "@zazen/changesets-changelog": "^2.0.3",
+    "@nuxt/eslint-config": "^1.9.0",
+    "eslint": "^9.34.0",
+    "husky": "^9.1.7",
+    "lint-staged": "^16.1.5",
+    "prettier": "^3.6.2",
+    "stylelint": "^16.23.1",
+    "typescript": "^5.9.2"
+  },
+  "peerDependencies": {
+    "stylelint": ">=16.23"
+  },
+  "scripts": {
+    "lint": "eslint '**/*.js'",
+    "fix": "eslint '**/*.js' --fix",
+    "release": "changeset publish",
+    "test": "node --test"
+  }
+}

package/{index.js → src/index.js}

@@ -1,5 +1,5 @@
-import declarations from './declarations.js';
-import propertyGroups from './groups.js';
+import order from './order.js';
+import propertyGroups from './property-groups.js';
 
 const config = {
     extends: ['stylelint-config-standard', 'stylelint-config-recommended-vue'],
@@ -9,7 +9,7 @@ const config = {
         'stylelint-use-logical-spec',
         'stylelint-high-performance-animation',
     ],
-    ignoreFiles: ['*.min.css', 'wwwroot/css/*.css'],
+    ignoreFiles: ['*.min.css'],
     rules: {
         'at-rule-empty-line-before': [
             'always',
@@ -22,7 +22,6 @@ const config = {
         'at-rule-no-unknown': null,
         'color-no-hex': true,
         'comment-empty-line-before': null,
-        'custom-media-pattern': null,
         'custom-property-pattern': null,
         'declaration-block-no-redundant-longhand-properties': [
             true,
@@ -31,6 +30,7 @@ const config = {
             },
         ],
         'declaration-empty-line-before': 'never',
+        'declaration-property-value-no-unknown': null,
         'font-weight-notation': [
             'numeric',
             {
@@ -40,7 +40,6 @@ const config = {
         'function-no-unknown': null,
         'import-notation': 'string',
         'no-descending-specificity': null,
-        'no-duplicate-selectors': true,
         'no-empty-source': [
             true,
             {
@@ -48,7 +47,12 @@ const config = {
             },
         ],
         'number-max-precision': null,
-        'selector-class-pattern': null,
+        'selector-class-pattern': [
+            '^[a-z0-9]+(?:-[a-z0-9]+)*(?:__(?:[a-z0-9]+(?:-[a-z0-9]+)*))*(?:--(?:[a-z0-9]+(?:-[a-z0-9]+)*))*$',
+            {
+                message: (selector) => `Expected class selector "${selector}" to be kebab-case or BEM`,
+            },
+        ],
         'selector-pseudo-class-no-unknown': [
             true,
             {
@@ -56,11 +60,16 @@ const config = {
             },
         ],
         // Plugin rules
-        'liberty/use-logical-spec': ['always', { except: [/width/i, /height/i] }],
+        'liberty/use-logical-spec': [
+            'always',
+            {
+                except: [/width/i, /height/i],
+            },
+        ],
         '@stylistic/block-closing-brace-newline-before': 'always',
         '@stylistic/block-opening-brace-newline-after': 'always',
         '@stylistic/declaration-block-semicolon-newline-after': 'always',
-        'order/order': declarations,
+        'order/order': order,
         'order/properties-order': propertyGroups,
         'plugin/no-low-performance-animation-properties': [
             true,

package/src/order.js

@@ -0,0 +1,362 @@
+const order = [
+    [
+        'custom-properties',
+
+        /**
+         * @property
+         * @see https://developer.mozilla.org/en-US/docs/Web/CSS/@property
+         */
+        {
+            type: 'at-rule',
+            name: 'property',
+            hasBlock: true,
+        },
+
+        /**
+         * @function
+         * @see https://developer.mozilla.org/en-US/docs/Web/CSS/@function
+         */
+        {
+            type: 'at-rule',
+            name: 'function',
+            hasBlock: true,
+        },
+
+        /**
+         * @layer
+         * @see https://developer.mozilla.org/en-US/docs/Web/CSS/@layer
+         */
+        {
+            type: 'at-rule',
+            name: 'layer',
+            hasBlock: true,
+        },
+
+        /**
+         * Tailwind's @apply directive
+         * @see https://tailwindcss.com/docs/functions-and-directives#apply-directive
+         */
+        {
+            type: 'at-rule',
+            name: 'apply',
+            hasBlock: false,
+        },
+
+        'declarations',
+
+        /**
+         * Tree-structural` :root` pseudo-class
+         * @see https://developer.mozilla.org/en-US/docs/Web/CSS/:root
+         */
+        {
+            type: 'rule',
+            selector: '^&:root',
+        },
+
+        /**
+         * Shadow-structural pseudo-classes
+         * @see https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes#shadow-structural_pseudo-classes
+         */
+        {
+            type: 'rule',
+            selector: '^&:(host|host-context|has-slotted)',
+        },
+
+        /**
+         * Typographic pseudo-elements
+         * @see https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements#typographic_pseudo_elements
+         */
+        {
+            type: 'rule',
+            selector: '^&::(first-line|first-letter|cue)',
+        },
+
+        /**
+         * Highlight pseudo-elements
+         * @see https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements#highlight_pseudo_elements
+         */
+        {
+            type: 'rule',
+            selector: '^&::(selection|target-text|spelling-error|grammar-error|highlight)',
+        },
+
+        /**
+         * Tree-abiding pseudo-element '&::before'
+         * @see https://developer.mozilla.org/en-US/docs/Web/CSS/::before
+         */
+        {
+            type: 'rule',
+            selector: '^&::before',
+        },
+
+        /**
+         * Tree-abiding pseudo-element '&::after'
+         * @see https://developer.mozilla.org/en-US/docs/Web/CSS/::after
+         */
+        {
+            type: 'rule',
+            selector: '^&::after',
+        },
+
+        /**
+         * All other tree-abiding pseudo-elements
+         * @see https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements#tree-abiding_pseudo-elements
+         */
+        {
+            type: 'rule',
+            selector: '^&::(column|marker|backdrop|scroll-button|scroll-marker|scroll-marker-group)',
+        },
+
+        /**
+         * Element-backed pseudo-elements
+         * @see https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements#element-backed_pseudo_elements
+         */
+        {
+            type: 'rule',
+            selector: '^&::(details-content|part|slotted)',
+        },
+
+        /**
+         * Form-related pseudo-elements
+         * @see https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements#form-related_pseudo_elements
+         */
+        {
+            type: 'rule',
+            selector: '^&::(checkmark|file-selector-button|picker|picker-icon|placeholder)',
+        },
+
+        /**
+         * View-transition pseudo-elements
+         * @see https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements#view-transition_pseudo_elements
+         */
+        {
+            type: 'rule',
+            selector:
+                '^&::(view-transition|view-transition-image-pair|view-transition-group|view-transition-new|view-transition-old)',
+        },
+
+        /**
+         * Universal selectors '*'
+         * @see https://developer.mozilla.org/en-US/docs/Web/CSS/Universal_selectors
+         */
+        {
+            type: 'rule',
+            selector: '^\\*',
+        },
+
+        /**
+         * Child-elements like '.example'
+         */
+        {
+            type: 'rule',
+            selector: '^[^&\\+~]*[^:&]$',
+        },
+
+        /**
+         * Next-sibling combinator like '+ .example'
+         * @see https://developer.mozilla.org/en-US/docs/Web/CSS/Next-sibling_combinator
+         */
+        {
+            type: 'rule',
+            selector: '^\\+',
+        },
+
+        /**
+         * Subsequent-sibling combinator like '~ .example'
+         * @see https://developer.mozilla.org/en-US/docs/Web/CSS/Subsequent-sibling_combinator
+         */
+        {
+            type: 'rule',
+            selector: '^~',
+        },
+
+        /**
+         * Elemental pseudo-classes
+         * @see https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes#elemental_pseudo_classes
+         */
+        {
+            type: 'rule',
+            selector: '^&:(defined|heading)',
+        },
+
+        /**
+         * Element display state pseudo-classes
+         * @see https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes#element_display_state_pseudo_classes
+         */
+        {
+            type: 'rule',
+            selector: '^&:(open|popover-open|modal|fullscreen|picture-in-picture)',
+        },
+
+        /**
+         * Input pseudo-classes
+         * @see https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes#input_pseudo_classes
+         */
+        {
+            type: 'rule',
+            selector:
+                '^&:(enabled|disabled|read-only|read-write|placeholder-shown|autofill|default|checked|indeterminate|blank|valid|invalid|in-range|out-of-range|required|optional|user-valid|user-invalid)',
+        },
+
+        /**
+         * Linguistic pseudo-classes
+         * @see https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes#linguistic_pseudo_classes
+         */
+        {
+            type: 'rule',
+            selector: '^&:(dir|lang)',
+        },
+
+        /**
+         * Location pseudo-classes
+         * @see https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes#location_pseudo_classes
+         */
+        {
+            type: 'rule',
+            selector: '^&:(any-link|link|visited|local-link|target|target-within|scope)',
+        },
+
+        /**
+         * Resource state pseudo-classes
+         * @see https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes#resource_state_pseudo_classes
+         */
+        {
+            type: 'rule',
+            selector: '^&:(playing|paused|seeking|buffering|stalled|muted|volume-locked)',
+        },
+
+        /**
+         * Time-dimensional pseudo-classes
+         * @see https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes#time-dimensional_pseudo_classes
+         */
+        {
+            type: 'rule',
+            selector: '^&:(current|past|future)',
+        },
+
+        /**
+         * User action pseudo-classes
+         * @see https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes#user_action_pseudo_classes
+         */
+        {
+            type: 'rule',
+            selector: '^&:(hover|active|focus|focus-visible|focus-within|target-current)',
+        },
+
+        /**
+         * User action pseudo-classes like '@variant hoverfocus', '@variant mouse' and '@variant touch'
+         * @see https://github.com/argyleink/open-props/blob/main/src/props.media.css
+         * @see https://tailwindcss.com/docs/hover-focus-and-other-states#registering-a-custom-variant
+         */
+        {
+            type: 'at-rule',
+            name: 'variant',
+            parameter: '(hover|focus|hoverfocus|mouse|touch)',
+            hasBlock: true,
+        },
+
+        /**
+         * Modifiers like '&.example' and tree-structural and functional pseudo-classes
+         * Although `:root` is technically part of tree-structural pseudo-classes,
+         * it is placed above the shadow-structural pseudo-classes.
+         * @see https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes#tree-structural_pseudo_classes
+         * @see https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes#functional_pseudo_classes
+         */
+        {
+            type: 'rule',
+            selector:
+                '^&((\\.|\\[)|(.*(empty|nth-child|nth-last-child|first-child|last-child|nth-of-type|nth-last-of-type|first-of-type|last-of-type|only-of-type|is|not|where|has)).*)',
+        },
+
+        /**
+         * Custom state pseudo-classes
+         * @see https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes#custom_state_pseudo_classes
+         */
+        {
+            type: 'rule',
+            selector: '^&:(state)',
+        },
+
+        /**
+         * Page pseudo-classes
+         * @see https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes#page_pseudo_classes
+         */
+        {
+            type: 'rule',
+            selector: '^&:(left|right|first|blank)',
+        },
+
+        /**
+         * View transition pseudo-classes
+         * @see https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes#view_transition_pseudo_classes
+         */
+        {
+            type: 'rule',
+            selector: '^&:(active-view-transition|active-view-transition-type)',
+        },
+
+        /**
+         * Parent-modifiers like '.example &'
+         */
+        {
+            type: 'rule',
+            selector: '&$',
+        },
+
+        /**
+         * Keyframes
+         * @see https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes
+         */
+        {
+            type: 'at-rule',
+            name: 'keyframes',
+        },
+
+        /**
+         * Container queries like '@container scroll-state(stuck: top)'
+         * @see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries
+         */
+        {
+            type: 'at-rule',
+            name: 'container',
+            hasBlock: true,
+        },
+
+        /**
+         * @scope
+         * @see https://developer.mozilla.org/en-US/docs/Web/CSS/@scope
+         */
+        {
+            type: 'at-rule',
+            name: 'scope',
+            hasBlock: true,
+        },
+
+        /**
+         * Tailwind media-queries like '@variant xl' and '@variant motionOK'
+         * @see https://tailwindcss.com/docs/responsive-design
+         * @see https://tailwindcss.com/docs/hover-focus-and-other-states#registering-a-custom-variant
+         */
+        {
+            type: 'at-rule',
+            name: 'variant',
+            parameter: '(?!hover|focus|hoverfocus|mouse|touch)',
+            hasBlock: true,
+        },
+
+        /**
+         * All other media queries like '@media (width > 1472px)'
+         * @see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries
+         */
+        {
+            type: 'at-rule',
+            name: 'media',
+            hasBlock: true,
+        },
+    ],
+    {
+        unspecified: 'ignore',
+    },
+];
+
+export default order;