💄 Upgrade styling

Author: rdwz

.stylelintrc.json

@@ -0,0 +1,28 @@
+{
+  "extends": "stylelint-config-recommended-scss",
+  "rules": {
+    "color-named": "never",
+    "font-family-name-quotes": "always-where-required",
+    "font-weight-notation": "named-where-possible",
+    "function-url-no-scheme-relative": true,
+    "function-url-quotes": "always",
+    "value-keyword-case": "lower",
+    "unit-disallowed-list": [],
+    "no-descending-specificity": true,
+    "no-duplicate-selectors": true,
+    "font-family-no-missing-generic-family-keyword": null,
+    "property-no-unknown": [
+      true,
+      {
+        "ignoreProperties": ["/^lost-/"]
+      }
+    ],
+    "selector-pseudo-class-no-unknown": [
+      true,
+      { "ignorePseudoClasses": ["global"] }
+    ]
+  },
+  "ignoreFiles": ["node_modules/*"],
+  "defaultSeverity": "error",
+  "customSyntax": "postcss-html"
+}

README.md

@@ -50,9 +50,9 @@ Feel free to check [our documentation](https://docs.astro.build) or jump into ou
 
 `src/config.ts` contains several data objects that describe metadata about your site like title, description, default language, and Open Graph details. You can customize these to match your project.
 
-### CSS styling
+### SCSS styling
 
-The theme's look and feel is controlled by a few key variables that you can customize yourself. You'll find them in the `src/styles/theme.css` CSS file.
+The theme's look and feel is controlled by a few key variables that you can customize yourself. You'll find them in the `src/styles/theme.scss` SCSS file.
 
 If you've never worked with CSS variables before, give [MDN's guide on CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) a quick read.
 

package.json

@@ -10,7 +10,8 @@
     "preview": "astro preview",
     "start": "astro dev",
     "prettier:check": "prettier --check --plugin-search-dir=. .",
-    "prettier:format": "prettier --cache --write --plugin-search-dir=. ."
+    "format": "prettier --cache --write --plugin-search-dir=. .",
+    "lint:scss": "stylelint \"src/**/*.{astro,scss}\""
   },
   "dependencies": {
     "@algolia/client-search": "^4.15.0",
@@ -31,7 +32,12 @@
   "devDependencies": {
     "@astrojs/mdx": "^0.17.2",
     "html-escaper": "^3.0.3",
+    "postcss": "^8.4.21",
+    "postcss-html": "^1.5.0",
     "prettier": "^2.8.4",
-    "prettier-plugin-astro": "^0.8.0"
+    "sass": "^1.58.3",
+    "stylelint": "^15.2.0",
+    "stylelint-config-recommended-scss": "^9.0.1",
+    "stylelint-config-standard": "^30.0.1"
   }
 }