stylelint を追加

.stylelintrc.yml

@@ -0,0 +1,28 @@
+customSyntax: "postcss-html"
+plugins:
+  - "stylelint-scss"
+  - "stylelint-declaration-block-no-ignored-properties"
+  - "stylelint-no-unsupported-browser-features"
+  - "stylelint-prettier"
+extends:
+  - "stylelint-config-standard-scss"
+  - "stylelint-config-recess-order"
+  - "stylelint-config-prettier-scss"
+ignoreFiles:
+  - node_modules/**/*
+rules:
+  prettier/prettier: true
+  plugin/declaration-block-no-ignored-properties: true
+  plugin/no-unsupported-browser-features:
+    - true
+    - severity: "warning"
+      ignore: ["css-nesting"]
+  font-family-no-missing-generic-family-keyword: true
+  declaration-block-no-shorthand-property-overrides: true
+  selector-pseudo-element-colon-notation: "double"
+  selector-pseudo-class-no-unknown:
+    - true
+    - ignorePseudoClasses: ["global"]
+  no-duplicate-selectors:
+    - true
+    - severity: "warning"

astro.config.mjs

@@ -24,7 +24,7 @@ export default defineConfig({
     css: {
       preprocessorOptions: {
         scss: {
-          additionalData: `@import "src/styles/variables.scss";`,
+          additionalData: `@use 'sass:color';@import "src/styles/variables.scss";`,
         },
       },
     },

browserslist

@@ -0,0 +1,5 @@
+last 2 Chrome versions
+last 2 Edge versions
+last 2 Safari versions
+last 2 Firefox versions
+ios >= 15