[core] Enable stylelint on css files

mui · Dec 19, 2024 · 4577f49 · 4577f49
1 parent 4941275
commit 4577f49
Show file tree

Hide file tree

Showing 20 changed files with 61 additions and 38 deletions.
diff --git a/docs/src/app/(private)/experiments/rtl.module.css b/docs/src/app/(private)/experiments/rtl.module.css
@@ -16,7 +16,7 @@
   margin: 12px 0;
   min-width: 200px;
   border-radius: 12px;
-  /*  overflow: auto;*/
+  /* overflow: auto; */
   outline: 0;
   background: #fff;
   border: 1px solid var(--color-gray-200);

diff --git a/docs/src/app/(private)/experiments/slider.module.css b/docs/src/app/(private)/experiments/slider.module.css
@@ -1,7 +1,5 @@
 .slider {
-  font-family:
-    IBM Plex Sans,
-    sans-serif;
+  font-family: "IBM Plex Sans", sans-serif;
   font-size: 1rem;
   width: 100%;
   align-items: center;

diff --git a/...public)/(content)/react/components/menu/demos/checkbox-items/css-modules/index.module.css b/...public)/(content)/react/components/menu/demos/checkbox-items/css-modules/index.module.css
@@ -87,10 +87,12 @@
     top: -8px;
     rotate: 0deg;
   }
+
   &[data-side='left'] {
     right: -13px;
     rotate: 90deg;
   }
+
   &[data-side='right'] {
     left: -13px;
     rotate: -90deg;

diff --git a/.../(public)/(content)/react/components/menu/demos/group-labels/css-modules/index.module.css b/.../(public)/(content)/react/components/menu/demos/group-labels/css-modules/index.module.css
@@ -66,8 +66,8 @@
   @media (prefers-color-scheme: light) {
     outline: 1px solid var(--color-gray-200);
     box-shadow:
-      0px 10px 15px -3px var(--color-gray-200),
-      0px 4px 6px -4px var(--color-gray-200);
+      0 10px 15px -3px var(--color-gray-200),
+      0 4px 6px -4px var(--color-gray-200);
   }
 
   @media (prefers-color-scheme: dark) {
@@ -83,14 +83,17 @@
     bottom: -8px;
     rotate: 180deg;
   }
+
   &[data-side='bottom'] {
     top: -8px;
     rotate: 0deg;
   }
+
   &[data-side='left'] {
     right: -13px;
     rotate: 90deg;
   }
+
   &[data-side='right'] {
     left: -13px;
     rotate: -90deg;
@@ -123,7 +126,6 @@
   padding-right: 2rem;
   font-size: 0.875rem;
   line-height: 1rem;
-
   display: grid;
   gap: 0.5rem;
   align-items: center;

diff --git a/.../src/app/(public)/(content)/react/components/menu/demos/hero/css-modules/index.module.css b/.../src/app/(public)/(content)/react/components/menu/demos/hero/css-modules/index.module.css
@@ -83,14 +83,17 @@
     bottom: -8px;
     rotate: 180deg;
   }
+
   &[data-side='bottom'] {
     top: -8px;
     rotate: 0deg;
   }
+
   &[data-side='left'] {
     right: -13px;
     rotate: 90deg;
   }
+
   &[data-side='right'] {
     left: -13px;
     rotate: -90deg;

diff --git a/...(public)/(content)/react/components/menu/demos/open-on-hover/css-modules/index.module.css b/...(public)/(content)/react/components/menu/demos/open-on-hover/css-modules/index.module.css
@@ -66,8 +66,8 @@
   @media (prefers-color-scheme: light) {
     outline: 1px solid var(--color-gray-200);
     box-shadow:
-      0px 10px 15px -3px var(--color-gray-200),
-      0px 4px 6px -4px var(--color-gray-200);
+      0 10px 15px -3px var(--color-gray-200),
+      0 4px 6px -4px var(--color-gray-200);
   }
 
   @media (prefers-color-scheme: dark) {
@@ -83,14 +83,17 @@
     bottom: -8px;
     rotate: 180deg;
   }
+
   &[data-side='bottom'] {
     top: -8px;
     rotate: 0deg;
   }
+
   &[data-side='left'] {
     right: -13px;
     rotate: 90deg;
   }
+
   &[data-side='right'] {
     left: -13px;
     rotate: -90deg;

diff --git a/...p/(public)/(content)/react/components/menu/demos/radio-items/css-modules/index.module.css b/...p/(public)/(content)/react/components/menu/demos/radio-items/css-modules/index.module.css
@@ -66,8 +66,8 @@
   @media (prefers-color-scheme: light) {
     outline: 1px solid var(--color-gray-200);
     box-shadow:
-      0px 10px 15px -3px var(--color-gray-200),
-      0px 4px 6px -4px var(--color-gray-200);
+      0 10px 15px -3px var(--color-gray-200),
+      0 4px 6px -4px var(--color-gray-200);
   }
 
   @media (prefers-color-scheme: dark) {
@@ -83,14 +83,17 @@
     bottom: -8px;
     rotate: 180deg;
   }
+
   &[data-side='bottom'] {
     top: -8px;
     rotate: 0deg;
   }
+
   &[data-side='left'] {
     right: -13px;
     rotate: 90deg;
   }
+
   &[data-side='right'] {
     left: -13px;
     rotate: -90deg;
@@ -122,7 +125,6 @@
   padding-right: 2rem;
   font-size: 0.875rem;
   line-height: 1rem;
-
   display: grid;
   gap: 0.5rem;
   align-items: center;

diff --git a/...c/app/(public)/(content)/react/components/menu/demos/submenu/css-modules/index.module.css b/...c/app/(public)/(content)/react/components/menu/demos/submenu/css-modules/index.module.css
@@ -66,8 +66,8 @@
   @media (prefers-color-scheme: light) {
     outline: 1px solid var(--color-gray-200);
     box-shadow:
-      0px 10px 15px -3px var(--color-gray-200),
-      0px 4px 6px -4px var(--color-gray-200);
+      0 10px 15px -3px var(--color-gray-200),
+      0 4px 6px -4px var(--color-gray-200);
   }
 
   @media (prefers-color-scheme: dark) {
@@ -83,14 +83,17 @@
     bottom: -8px;
     rotate: 180deg;
   }
+
   &[data-side='bottom'] {
     top: -8px;
     rotate: 0deg;
   }
+
   &[data-side='left'] {
     right: -13px;
     rotate: 90deg;
   }
+
   &[data-side='right'] {
     left: -13px;
     rotate: -90deg;

diff --git a/.../(public)/(content)/react/components/number-field/demos/hero/css-modules/index.module.css b/.../(public)/(content)/react/components/number-field/demos/hero/css-modules/index.module.css
@@ -86,6 +86,7 @@
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
 }
+
 .Increment {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;

diff --git a/...c/app/(public)/(content)/react/components/popover/demos/hero/css-modules/index.module.css b/...c/app/(public)/(content)/react/components/popover/demos/hero/css-modules/index.module.css
@@ -59,8 +59,8 @@
   @media (prefers-color-scheme: light) {
     outline: 1px solid var(--color-gray-200);
     box-shadow:
-      0px 10px 15px -3px var(--color-gray-200),
-      0px 4px 6px -4px var(--color-gray-200);
+      0 10px 15px -3px var(--color-gray-200),
+      0 4px 6px -4px var(--color-gray-200);
   }
 
   @media (prefers-color-scheme: dark) {
@@ -76,14 +76,17 @@
     bottom: -8px;
     rotate: 180deg;
   }
+
   &[data-side='bottom'] {
     top: -8px;
     rotate: 0deg;
   }
+
   &[data-side='left'] {
     right: -13px;
     rotate: 90deg;
   }
+
   &[data-side='right'] {
     left: -13px;
     rotate: -90deg;

diff --git a/.../(public)/(content)/react/components/preview-card/demos/hero/css-modules/index.module.css b/.../(public)/(content)/react/components/preview-card/demos/hero/css-modules/index.module.css
@@ -55,8 +55,8 @@
   @media (prefers-color-scheme: light) {
     outline: 1px solid var(--color-gray-200);
     box-shadow:
-      0px 10px 15px -3px var(--color-gray-200),
-      0px 4px 6px -4px var(--color-gray-200);
+      0 10px 15px -3px var(--color-gray-200),
+      0 4px 6px -4px var(--color-gray-200);
   }
 
   @media (prefers-color-scheme: dark) {
@@ -72,14 +72,17 @@
     bottom: -8px;
     rotate: 180deg;
   }
+
   &[data-side='bottom'] {
     top: -8px;
     rotate: 0deg;
   }
+
   &[data-side='left'] {
     right: -13px;
     rotate: 90deg;
   }
+
   &[data-side='right'] {
     left: -13px;
     rotate: -90deg;

diff --git a/...rc/app/(public)/(content)/react/components/select/demos/hero/css-modules/index.module.css b/...rc/app/(public)/(content)/react/components/select/demos/hero/css-modules/index.module.css
@@ -49,7 +49,6 @@
   border-radius: 0.375rem;
   background-color: canvas;
   color: var(--color-gray-900);
-
   transform-origin: var(--transform-origin);
   transition:
     transform 150ms,
@@ -70,8 +69,8 @@
   @media (prefers-color-scheme: light) {
     outline: 1px solid var(--color-gray-200);
     box-shadow:
-      0px 10px 15px -3px var(--color-gray-200),
-      0px 4px 6px -4px var(--color-gray-200);
+      0 10px 15px -3px var(--color-gray-200),
+      0 4px 6px -4px var(--color-gray-200);
   }
 
   @media (prefers-color-scheme: dark) {
@@ -87,14 +86,17 @@
     bottom: -8px;
     rotate: 180deg;
   }
+
   &[data-side='bottom'] {
     top: -8px;
     rotate: 0deg;
   }
+
   &[data-side='left'] {
     right: -13px;
     rotate: 90deg;
   }
+
   &[data-side='right'] {
     left: -13px;
     rotate: -90deg;

diff --git a/...rc/app/(public)/(content)/react/components/switch/demos/hero/css-modules/index.module.css b/...rc/app/(public)/(content)/react/components/switch/demos/hero/css-modules/index.module.css
@@ -32,12 +32,12 @@
   }
 
   @media (prefers-color-scheme: light) {
-    box-shadow: var(--color-gray-200) 0px 1.5px 2px inset;
+    box-shadow: var(--color-gray-200) 0 1.5px 2px inset;
     outline-color: var(--color-gray-200);
   }
 
   @media (prefers-color-scheme: dark) {
-    box-shadow: rgb(0 0 0 / 75%) 0px 1.5px 2px inset;
+    box-shadow: rgb(0 0 0 / 75%) 0 1.5px 2px inset;
     outline-color: rgb(255 255 255 / 15%);
     background-image: linear-gradient(
       to right,

diff --git a/...c/app/(public)/(content)/react/components/tooltip/demos/hero/css-modules/index.module.css b/...c/app/(public)/(content)/react/components/tooltip/demos/hero/css-modules/index.module.css
@@ -76,8 +76,8 @@
   @media (prefers-color-scheme: light) {
     outline: 1px solid var(--color-gray-200);
     box-shadow:
-      0px 10px 15px -3px var(--color-gray-200),
-      0px 4px 6px -4px var(--color-gray-200);
+      0 10px 15px -3px var(--color-gray-200),
+      0 4px 6px -4px var(--color-gray-200);
   }
 
   @media (prefers-color-scheme: dark) {
@@ -93,14 +93,17 @@
     bottom: -8px;
     rotate: 180deg;
   }
+
   &[data-side='bottom'] {
     top: -8px;
     rotate: 0deg;
   }
+
   &[data-side='left'] {
     right: -13px;
     rotate: 90deg;
   }
+
   &[data-side='right'] {
     left: -13px;
     rotate: -90deg;

diff --git a/docs/src/components/ScrollArea.css b/docs/src/components/ScrollArea.css
@@ -17,7 +17,6 @@
     border-radius: 0.375rem;
     margin: 0.5rem;
     pointer-events: none;
-
     opacity: 0;
     transition: opacity 150ms 300ms;
 
@@ -44,10 +43,6 @@
       width: 0.25rem;
     }
 
-    &[data-orientation='vertical'] {
-      width: 0.25rem;
-    }
-
     &::before {
       content: '';
       position: absolute;

diff --git a/docs/src/components/Select.css b/docs/src/components/Select.css
@@ -5,10 +5,10 @@
 
     @media (prefers-color-scheme: light) {
       /* Use filter for the shadow in order to catch the arrow part */
-      filter: drop-shadow(0px 0px 1px var(--color-gray-200))
-        drop-shadow(0px 0.5px 1px var(--color-gray-200))
-        drop-shadow(0px 1px 2px var(--color-gray-200))
-        drop-shadow(0px 3px 8px var(--color-gray-300));
+      filter: drop-shadow(0 0 1px var(--color-gray-200))
+        drop-shadow(0 0.5px 1px var(--color-gray-200))
+        drop-shadow(0 1px 2px var(--color-gray-200))
+        drop-shadow(0 3px 8px var(--color-gray-300));
     }
   }
 

diff --git a/docs/src/demo-theme.css b/docs/src/demo-theme.css
@@ -26,7 +26,6 @@
     --color-gray-500: oklch(64% 4% 264 / 80%);
     --color-gray-600: oklch(82% 4% 264 / 80%);
     --color-gray-700: oklch(92% 4.5% 264 / 80%);
-    --color-gray-800: oklch(92% 4.5% 264 / 80%);
     --color-gray-800: oklch(93% 3.5% 264 / 85%);
     --color-gray-900: oklch(95% 2% 264 / 90%);
     --color-gray-950: oklch(94% 1.5% 264 / 95%);

diff --git a/docs/src/styles.css b/docs/src/styles.css
@@ -154,7 +154,6 @@
     --color-gray-500: oklch(64% 1% 264 / 80%);
     --color-gray-600: oklch(82% 1% 264 / 80%);
     --color-gray-700: oklch(92% 1.125% 264 / 80%);
-    --color-gray-800: oklch(92% 1.125% 264 / 80%);
     --color-gray-800: oklch(93% 0.875% 264 / 85%);
     --color-gray-900: oklch(95% 0.5% 264 / 90%);
     --color-gray-950: oklch(94% 0.375% 264 / 95%);

diff --git a/package.json b/package.json
@@ -26,7 +26,7 @@
     "jsonlint": "node ./scripts/jsonlint.mjs",
     "eslint": "eslint . --cache --report-unused-disable-directives --ext .js,.ts,.tsx --max-warnings 0",
     "eslint:ci": "eslint . --report-unused-disable-directives --ext .js,.ts,.tsx --max-warnings 0",
-    "stylelint": "stylelint --reportInvalidScopeDisables --reportNeedlessDisables \"docs/**/*.{js,ts,tsx}\" --ignore-path .gitignore",
+    "stylelint": "stylelint --reportInvalidScopeDisables --reportNeedlessDisables \"docs/**/*.{js,ts,tsx}\" \"**/*.css\" --ignore-path .gitignore --max-warnings 278",
     "markdownlint": "markdownlint-cli2 \"**/*.md\"",
     "prettier": "pretty-quick --ignore-path .eslintignore",
     "prettier:all": "prettier --write . --ignore-path .eslintignore",

diff --git a/stylelint.config.mjs b/stylelint.config.mjs
@@ -1 +1,6 @@
-export { default } from '@mui/monorepo/stylelint.config.mjs';
+import baseline from '@mui/monorepo/stylelint.config.mjs';
+
+export default {
+  ...baseline,
+  defaultSeverity: 'warning' // TODO, remove
+};