🔨 chore: Stylelint/postcss

.idea/git_toolbox_prj.xml

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="GitToolBoxProjectSettings">
+    <option name="commitMessageIssueKeyValidationOverride">
+      <BoolValueOverride>
+        <option name="enabled" value="true" />
+      </BoolValueOverride>
+    </option>
+    <option name="commitMessageValidationEnabledOverride">
+      <BoolValueOverride>
+        <option name="enabled" value="true" />
+        <option name="value" value="true" />
+      </BoolValueOverride>
+    </option>
+  </component>
+</project>

.stylelintrc.json

@@ -0,0 +1,65 @@
+{
+    "extends": [
+        "stylelint-config-standard-scss",
+        "stylelint-config-recess-order",
+        "@ronilaukkarinen/stylelint-a11y/recommended"
+    ],
+    "plugins": [
+        "stylelint-rem-over-px",
+        "stylelint-plugin-defensive-css",
+        "stylelint-plugin-logical-css",
+        "stylelint-declaration-strict-value"
+    ],
+    "rules": {
+        "selector-class-pattern": null,
+        "value-keyword-case": null,
+        "scss/dollar-variable-pattern": null,
+        "rem-over-px/rem-over-px": [
+            true,
+            {
+                "ignore": [
+                    "box-shadow",
+                    "text-shadow",
+                    "border-radius"
+                ]
+            }
+        ],
+        "plugin/use-defensive-css": [
+            true,
+            {
+                "custom-property-fallbacks": false
+            }
+        ],
+        "plugin/use-logical-properties-and-values": [
+            true,
+            {}
+        ],
+        "plugin/use-logical-units": [
+            true,
+            {}
+        ],
+        "scale-unlimited/declaration-strict-value": [
+            [
+                "/color/",
+                "/size/",
+                "/margin/",
+                "/padding/"
+            ],
+            {
+                "ignoreValues": [
+                    "currentColor",
+                    "inherit",
+                    "transparent",
+                    "0",
+                    "100vi",
+                    "100vb",
+                    "100%"
+                ],
+                "expandShorthand": true,
+                "recurseLonghand": true,
+                "message": "Custom expected ${types} for \"${value}\" of \"${property}\"",
+                "disableFix": true
+            }
+        ]
+    }
+}

package.json

@@ -10,7 +10,18 @@
   "author": "",
   "license": "ISC",
   "devDependencies": {
-    "@11ty/eleventy": "^2.0.1"
+    "@11ty/eleventy": "^2.0.1",
+    "@csstools/postcss-sass": "^5.0.1",
+    "@ronilaukkarinen/stylelint-a11y": "^1.2.7",
+    "cssnano": "^6.0.1",
+    "postcss-preset-env": "^8.4.2",
+    "stylelint": "^15.6.3",
+    "stylelint-config-recess-order": "^4.0.0",
+    "stylelint-config-standard-scss": "^9.0.0",
+    "stylelint-declaration-strict-value": "^1.9.2",
+    "stylelint-plugin-defensive-css": "^0.6.0",
+    "stylelint-plugin-logical-css": "^0.12.0",
+    "stylelint-rem-over-px": "^1.0.0"
   },
   "dependencies": {
     "@11ty/eleventy-plugin-vite": "^4.0.0"

postcss.config.js

@@ -0,0 +1,8 @@
+/** @type {import('postcss-load-config').Config} */
+module.exports = {
+    plugins: [
+        require('@csstools/postcss-sass'),
+        require('postcss-preset-env'),
+        require('cssnano')
+    ]
+}

style/reset.scss

@@ -0,0 +1,60 @@
+@layer reset {
+    /* Box sizing rules */
+    *,
+    *::before,
+    *::after {
+        box-sizing: border-box;
+    }
+
+    /* Remove default margin */
+    body,
+    h1,
+    h2,
+    h3,
+    h4,
+    p,
+    figure,
+    blockquote,
+    dl,
+    dd {
+        margin: 0;
+    }
+
+    /* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
+    ul[role="list"],
+    ol[role="list"] {
+        list-style: none;
+    }
+
+    /* Set core root defaults */
+    html:focus-within {
+        scroll-behavior: smooth;
+    }
+
+    /* Set core body defaults */
+    body {
+        min-block-size: 100vb;
+        text-rendering: optimizeSpeed;
+        line-height: 1.5;
+    }
+
+    /* A elements that don't have a class get default styles */
+    a:not([class]) {
+        text-decoration-skip-ink: auto;
+    }
+
+    /* Make images easier to work with */
+    img,
+    picture {
+        max-inline-size: 100%;
+        display: block;
+    }
+
+    /* Inherit fonts for inputs and buttons */
+    input,
+    button,
+    textarea,
+    select {
+        font: inherit;
+    }
+}