build(lint): Add stylelint command with its config to lint CSS (#141)

.browserslistrc

@@ -0,0 +1,5 @@
+last 1 year
+>= 1%
+not op_mini all
+not IE <= 11
+not dead

.check.exs

@@ -24,6 +24,7 @@
     },
 
     # Custom tools
+    {:css_lint, "./run css:lint"},
     {:dockerfile_lint, "./run dockerfile:lint"},
     {:elixir_eex_lint, "./run elixir:eex:lint"},
     {:markdown_lint, "./run markdown:lint"},

.devcontainer/devcontainer.json

@@ -18,6 +18,9 @@
     // EditorConfig
     "editorconfig.editorconfig",
 
+    // CSS, SCSS, SASS, LESS
+    "stylelint.vscode-stylelint",
+
     // Commit:
     "joshbolduc.commitlint",
     "vivaxy.vscode-conventional-commits",

.github/workflows/ci.yml

@@ -104,6 +104,7 @@ jobs:
           path: |
             **/node_modules
             **/npm_cache
+            **/.stylelintcache
           key: |
             ${{ runner.os }}-node-${{ env.NODE_VERSION }}-${{ hashFiles('**/package-lock.json') }}
           restore-keys: |

.gitignore

@@ -8,6 +8,9 @@ npm_cache/
 # Docker compose
 docker-compose.override.yml
 
+# Stylelint
+.stylelintcache
+
 # Elixir
 _build/
 cover/

.stylelintignore

@@ -0,0 +1,16 @@
+# Local history (VSCode extension)
+.history/
+
+# NodeJS
+node_modules/
+npm_cache/
+
+# Elixir
+_build/
+cover/
+deps/
+doc/
+.fetch/
+
+# ElixirLS (VSCode extension)
+.elixir_ls/

.stylelintrc.yml

@@ -0,0 +1,54 @@
+# Order is important: top configs are overridden by bottom ones
+extends:
+  - stylelint-config-standard
+  - stylelint-config-recommended
+  - stylelint-config-sass-guidelines
+  - stylelint-config-idiomatic-order
+  - stylelint-a11y/recommended
+  - stylelint-config-prettier # Must be last
+
+plugins:
+  - stylelint-at-rule-no-children
+  - stylelint-a11y
+  - stylelint-csstree-validator
+  - stylelint-color-format
+  - stylelint-declaration-block-no-ignored-properties
+  - stylelint-declaration-strict-value
+  - stylelint-high-performance-animation
+  - stylelint-no-unsupported-browser-features
+  - stylelint-use-logical-spec
+  - stylelint-use-nesting
+
+rules:
+  # Rules from core
+  alpha-value-notation: number
+  hue-degree-notation: number
+  font-weight-notation: numeric
+  color-function-notation: modern
+  color-no-hex: true
+
+  # Rules from plugins
+  color-format/format:
+    format: hsl
+  csstools/use-nesting: always
+  csstree/validator: true
+  liberty/use-logical-spec: true
+  order/properties-alphabetical-order: null
+  plugin/declaration-block-no-ignored-properties: true
+  plugin/no-low-performance-animation-properties: true
+  plugin/no-unsupported-browser-features:
+    - true
+    - severity: warning
+  scale-unlimited/declaration-strict-value:
+    - - /color/
+      - fill
+      - stroke
+      - font-family
+      - font-size
+      - line-height
+      - z-index
+    - ignoreValues:
+        /color/: &keywords [currentColor, inherit, transparent]
+        fill: *keywords
+        stroke: *keywords
+      disableFix: true

.vscode/extensions.json

@@ -10,6 +10,9 @@
     // EditorConfig:
     "editorconfig.editorconfig",
 
+    // CSS, SCSS, SASS, LESS:
+    "stylelint.vscode-stylelint",
+
     // Tasks / Makefile targets
     "spmeesseman.vscode-taskexplorer",