chore: setup stylelint

.lintstagedrc.mjs

@@ -1,7 +1,7 @@
 export default {
   '*': 'prettier --check --ignore-unknown --write',
   '*.{md,markdown,mdx}': ['remark --frail', 'eslint --max-warnings 0'],
-  // '*.{scss,css}': 'stylelint',
+  '*.{css,scss}': 'stylelint --fix',
   // '*.{ts,tsx}': () => 'tsc --project tsconfig.json',
   '*.{js,mjs,jsx,ts,tsx}': [
     'eslint --max-warnings 0',

.stylelintrc.mjs

@@ -0,0 +1,3 @@
+export default {
+  extends: ['@tiagoporto/stylelint-config'],
+}

package.json

@@ -5,12 +5,14 @@
   "license": "MIT",
   "scripts": {
     "prepare": "husky",
-    "checks": "npm run check-docs && npm run formatting:check && npm run lint",
+    "checks": "npm run check-docs && npm run formatting:check && npm run lint && npm run lint:styles",
     "check-docs": "remark --frail . --ext md,markdown,mdx",
     "formatting:check": "prettier --check --ignore-unknown \"**/*\"",
     "formatting": "npm run formatting:check -- --write",
     "lint": "eslint --max-warnings 0",
-    "lint:fix": "npm run lint -- --write"
+    "lint:fix": "npm run lint -- --write",
+    "lint:styles": "stylelint \"**/*.{css,scss}\"",
+    "lint:styles:fix": "stylelint \"**/*.{css,scss}\" --fix"
   },
   "packageManager": "[email protected]",
   "engines": {
@@ -26,12 +28,14 @@
     "@tiagoporto/eslint-config": "^2.6.0",
     "@tiagoporto/prettier-config": "^1.2.0",
     "@tiagoporto/remark-config": "^1.6.0",
+    "@tiagoporto/stylelint-config": "^1.1.0",
     "eslint": "^9.18.0",
     "globals": "^15.14.0",
     "husky": "^9.1.7",
     "lint-staged": "^15.3.0",
     "prettier": "^3.4.2",
     "remark": "^15.0.1",
-    "remark-cli": "^12.0.1"
+    "remark-cli": "^12.0.1",
+    "stylelint": "^16.13.2"
   }
 }

packages/logo-downloadtip/src/logo-downloadtip.css

@@ -1,8 +1,8 @@
 .tippy-tooltip.logo-downloadtip-theme {
+  padding: 0;
   background-color: #fff;
+  box-shadow: 0 3px 12px rgb(0 0 0 / 40%);
   color: #555;
-  padding: 0;
-  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.4);
 }
 
 .tippy-tooltip.logo-downloadtip-theme[data-animatefill] {
@@ -14,15 +14,15 @@
 }
 
 .logo-downloadtip-theme h1 {
+  padding: 8px 14px;
+  margin: 0;
   background: #ebebeb;
   font-size: 14px;
-  margin: 0;
-  padding: 8px 14px;
 }
 
 .logo-downloadtip-theme a {
-  color: #555;
   display: block;
+  color: #555;
   text-decoration: none;
 }
 
@@ -31,7 +31,7 @@
 }
 
 .logo-downloadtip-theme .content {
+  padding: 9px 14px;
   color: #333;
   font-size: 13px;
-  padding: 9px 14px;
 }