Stylelint を導入した (#56)

* feat: 🎸 Add stylelint stylelint-config-standard stylelint-order

* test: 💍 Stylelint を導入した

Close #53

.stylelintignore

@@ -0,0 +1,2 @@
+dist/**/*.css
+coverage/**

package.json

@@ -16,6 +16,9 @@
     "postcss": "8.4.12",
     "prettier": "^2.6.2",
     "sass": "1.50.0",
+    "stylelint": "^14.6.1",
+    "stylelint-config-standard": "^25.0.0",
+    "stylelint-order": "^5.0.0",
     "tailwindcss": "3.0.23",
     "typescript": "4.6.3"
   },

stylelint.config.js

@@ -0,0 +1,21 @@
+module.exports = {
+  plugins: ['stylelint-order'],
+  extends: ['stylelint-config-standard'],
+  rules: {
+    'at-rule-no-unknown': [
+      true,
+      {
+        ignoreAtRules: [
+          'tailwind',
+          'apply',
+          'variants',
+          'responsive',
+          'screen',
+        ],
+      },
+    ],
+    'string-quotes': 'single',
+    'order/properties-alphabetical-order': true,
+  },
+  ignoreFiles: ['**/node_modules/**'],
+}

styles/Home.module.scss

@@ -1,36 +1,36 @@
 .container {
-  min-height: 100vh;
-  padding: 0 0.5rem;
+  align-items: center;
   display: flex;
   flex-direction: column;
-  justify-content: center;
-  align-items: center;
   height: 100vh;
+  justify-content: center;
+  min-height: 100vh;
+  padding: 0 0.5rem;
 }
 
 .main {
-  padding: 5rem 0;
-  flex: 1;
+  align-items: center;
   display: flex;
+  flex: 1;
   flex-direction: column;
   justify-content: center;
-  align-items: center;
+  padding: 5rem 0;
 }
 
 .footer {
-  width: 100%;
-  height: 100px;
+  align-items: center;
   border-top: 1px solid #eaeaea;
   display: flex;
+  height: 100px;
   justify-content: center;
-  align-items: center;
+  width: 100%;
 }
 
 .footer a {
-  display: flex;
-  justify-content: center;
   align-items: center;
+  display: flex;
   flex-grow: 1;
+  justify-content: center;
 }
 
 .title a {
@@ -45,9 +45,9 @@
 }
 
 .title {
-  margin: 0;
-  line-height: 1.15;
   font-size: 4rem;
+  line-height: 1.15;
+  margin: 0;
 }
 
 .title,
@@ -56,56 +56,63 @@
 }
 
 .description {
-  line-height: 1.5;
   font-size: 1.5rem;
+  line-height: 1.5;
 }
 
 .code {
   background: #fafafa;
   border-radius: 5px;
-  padding: 0.75rem;
+  font-family:
+    Menlo,
+    Monaco,
+    'Lucida Console',
+    'Liberation Mono',
+    'DejaVu Sans Mono',
+    'Bitstream Vera Sans Mono',
+    'Courier New',
+    monospace;
   font-size: 1.1rem;
-  font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
-    Bitstream Vera Sans Mono, Courier New, monospace;
+  padding: 0.75rem;
 }
 
 .grid {
-  display: flex;
   align-items: center;
-  justify-content: center;
+  display: flex;
   flex-wrap: wrap;
-  max-width: 800px;
+  justify-content: center;
   margin-top: 3rem;
+  max-width: 800px;
 }
 
 .card {
+  border: 1px solid #eaeaea;
+  border-radius: 10px;
+  color: inherit;
   margin: 1rem;
   padding: 1.5rem;
   text-align: left;
-  color: inherit;
   text-decoration: none;
-  border: 1px solid #eaeaea;
-  border-radius: 10px;
   transition: color 0.15s ease, border-color 0.15s ease;
   width: 45%;
 }
 
 .card:hover,
 .card:focus,
 .card:active {
-  color: #0070f3;
   border-color: #0070f3;
+  color: #0070f3;
 }
 
 .card h2 {
-  margin: 0 0 1rem 0;
   font-size: 1.5rem;
+  margin: 0 0 1rem;
 }
 
 .card p {
-  margin: 0;
   font-size: 1.25rem;
   line-height: 1.5;
+  margin: 0;
 }
 
 .logo {
@@ -115,7 +122,7 @@
 
 @media (max-width: 600px) {
   .grid {
-    width: 100%;
     flex-direction: column;
+    width: 100%;
   }
 }

styles/globals.scss

@@ -1,15 +1,25 @@
-@import "tailwindcss/base";
-@import "tailwindcss/components";
-@import "tailwindcss/utilities";
+@import 'tailwindcss/base';
+@import 'tailwindcss/components';
+@import 'tailwindcss/utilities';
 
-html,
 body {
-  padding: 0;
+  font-family:
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    Roboto,
+    Oxygen,
+    Ubuntu,
+    Cantarell,
+    'Fira Sans',
+    'Droid Sans',
+    'Helvetica Neue',
+    sans-serif;
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
-    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+  padding: 0;
 }
 
+html,
 a {
   color: inherit;
   text-decoration: none;