[AP-3662] Install & configure stylelint

.circleci/config.yml

@@ -150,6 +150,9 @@ jobs:
     - run:
         name: Run StandardJS
         command: yarn run standardjs
+    - run:
+        name: Run Stylelint
+        command: yarn run stylelint
     - run:
         name: Run Rubocop
         command:  bundle exec rubocop

.overcommit.yml

@@ -29,6 +29,11 @@ PreCommit:
     command: ['yarn', 'run', 'standard']
     requires_files: true
     include: 'app/webpack/**/*.js'
+  Stylelint:
+    enabled: true
+    command: ['yarn', 'run', 'stylelint']
+    requires_files: true
+    include: 'app/webpack/**/*.scss'
   DBAnonymizer:
     enabled: true
     command: ['ruby', './scripts/migration_hook.rb']

package.json

@@ -3,6 +3,7 @@
   "private": true,
   "scripts": {
     "standardjs": "standard",
+    "stylelint": "stylelint **/*.scss",
     "test": "jest"
   },
   "dependencies": {
@@ -15,12 +16,16 @@
     "govuk-frontend": "^4.4.0",
     "jest": "^29.3.1",
     "jquery": "^3.6.1",
-    "js-search": "^2.0.0"
+    "js-search": "^2.0.0",
+    "postcss": "^8.4.19"
   },
   "devDependencies": {
     "jest-environment-jsdom": "^29.3.1",
     "jest-environment-jsdom-global": "^4.0.0",
     "standard": "^17.0.0",
+    "stylelint": "^14.16.0",
+    "stylelint-config-gds": "^0.2.0",
+    "stylelint-order": "^5.0.0",
     "webpack-dev-server": "^4.11.1"
   },
   "resolutions": {

stylelint.config.js

@@ -0,0 +1,178 @@
+module.exports = {
+  extends: 'stylelint-config-gds/scss',
+  ignoreFiles: [
+    'node-modules/**/*',
+    'public/**/*',
+    'vendor/**/*'
+  ],
+  overrides: [
+    {
+      customSyntax: 'postcss-scss',
+      files: ['**/*.scss']
+    }
+  ],
+  plugins: ['stylelint-order'],
+  rules: {
+    /**
+     * based on govuk-frontend ordering pattern
+     * rules
+     *
+     * https://github.com/alphagov/govuk-frontend/blob/main/stylelint.config.js
+     */
+    'order/properties-order': [
+      'content',
+      'quotes',
+
+      // Box-sizing - Allow here until global is decided
+      'box-sizing',
+
+      'display',
+      'visibility',
+
+      'position',
+      'z-index',
+      'top',
+      'right',
+      'bottom',
+      'left',
+
+      'width',
+      'min-width',
+      'max-width',
+      'height',
+      'min-height',
+      'max-height',
+
+      'margin',
+      'margin-top',
+      'margin-right',
+      'margin-bottom',
+      'margin-left',
+
+      'padding',
+      'padding-top',
+      'padding-right',
+      'padding-bottom',
+      'padding-left',
+
+      'float',
+      'clear',
+
+      'overflow',
+      'overflow-x',
+      'overflow-y',
+
+      'clip',
+      'clip-path',
+      'zoom',
+      'resize',
+
+      'columns',
+
+      'table-layout',
+      'empty-cells',
+      'caption-side',
+      'border-spacing',
+      'border-collapse',
+
+      'list-style',
+      'list-style-position',
+      'list-style-type',
+      'list-style-image',
+
+      'transform',
+      'transition',
+      'animation',
+
+      'border',
+      'border-top',
+      'border-right',
+      'border-bottom',
+      'border-left',
+
+      'border-width',
+      'border-top-width',
+      'border-right-width',
+      'border-bottom-width',
+      'border-left-width',
+
+      'border-style',
+      'border-top-style',
+      'border-right-style',
+      'border-bottom-style',
+      'border-left-style',
+
+      'border-radius',
+      'border-top-left-radius',
+      'border-top-right-radius',
+      'border-bottom-left-radius',
+      'border-bottom-right-radius',
+
+      'border-color',
+      'border-top-color',
+      'border-right-color',
+      'border-bottom-color',
+      'border-left-color',
+
+      'outline',
+      'outline-color',
+      'outline-offset',
+      'outline-style',
+      'outline-width',
+
+      'opacity',
+
+      // Color has been moved to ensure it appears before background
+      'color',
+      'background',
+      'background-color',
+      'background-image',
+      'background-repeat',
+      'background-position',
+      'background-size',
+      'box-shadow',
+      'fill',
+
+      'font',
+      'font-family',
+      'font-size',
+      'font-style',
+      'font-variant',
+      'font-weight',
+
+      'font-emphasize',
+
+      'letter-spacing',
+      'line-height',
+      'list-style',
+      'word-spacing',
+
+      'text-align',
+      'text-align-last',
+      'text-decoration',
+      'text-indent',
+      'text-justify',
+      'text-overflow',
+      'text-overflow-ellipsis',
+      'text-overflow-mode',
+      'text-rendering',
+      'text-outline',
+      'text-shadow',
+      'text-transform',
+      'text-wrap',
+      'word-wrap',
+      'word-break',
+
+      'text-emphasis',
+
+      'vertical-align',
+      'white-space',
+      'word-spacing',
+      'hyphens',
+
+      'src',
+      'cursor',
+      '-webkit-appearance'
+    ]
+  }
+}