ci: add lint css modules (#3816)

coveo · Jul 15, 2024 · 5bdcf04 · 5bdcf04
1 parent 95b9e25
commit 5bdcf04
Show file tree

Hide file tree

Showing 30 changed files with 403 additions and 105 deletions.
diff --git a/.stylelintignore b/.stylelintignore
@@ -0,0 +1,2 @@
+**/dist
+**/node_modules
diff --git a/.stylelintrc b/.stylelintrc
@@ -0,0 +1,13 @@
+{
+    "$id": "https://json.schemastore.org/stylelintrc.json",
+    "extends": ["stylelint-config-standard-scss"],
+    "defaultSeverity": "warning",
+    "rules": {
+        "keyframes-name-pattern": [
+            "^[a-z]+((\\d)|([A-Z0-9][a-z0-9]+))*([A-Z])?$",
+            {
+                "message": "Expected keyframes names to be camelCase"
+            }
+        ]
+    }
+}
diff --git a/package.json b/package.json
@@ -24,10 +24,10 @@
         "**/package.json": [
             "sort-package-json"
         ],
-        "**/*.{js,jsx,ts,tsx,mjs,json,md,yml,html,css}": [
+        "**/*.{js,jsx,ts,tsx,mjs,json,md,yml,html}": [
             "prettier --write"
         ],
-        "**/*.scss": [
+        "**/*.{scss,css}": [
             "stylelint --fix",
             "prettier --write"
         ]
@@ -43,19 +43,6 @@
         "IE 11",
         "not dead"
     ],
-    "stylelint": {
-        "extends": [
-            "stylelint-config-standard-scss"
-        ],
-        "rules": {
-            "keyframes-name-pattern": [
-                "^[a-z]+((\\d)|([A-Z0-9][a-z0-9]+))*([A-Z])?$",
-                {
-                    "message": "Expected keyframes names to be camelCase"
-                }
-            ]
-        }
-    },
     "devDependencies": {
         "@commitlint/cli": "19.3.0",
         "@commitlint/config-conventional": "19.2.2",

diff --git a/packages/mantine/src/components/code-editor/CodeEditor.module.css b/packages/mantine/src/components/code-editor/CodeEditor.module.css
@@ -8,6 +8,7 @@
     @mixin light {
         background-color: var(--mantine-color-white);
     }
+
     @mixin dark {
         background-color: var(--mantine-color-black);
     }

diff --git a/packages/mantine/src/components/collection/Collection.module.css b/packages/mantine/src/components/collection/Collection.module.css
@@ -1,8 +1,10 @@
 .root {
     position: relative;
 }
+
 .item {
     align-items: baseline;
+
     &[data-isdragging='true'] {
         box-shadow: var(--mantine-shadow-md);
         z-index: 2;

diff --git a/packages/mantine/src/components/header/Header.module.css b/packages/mantine/src/components/header/Header.module.css
@@ -3,6 +3,7 @@
         padding: var(--mantine-spacing-xl);
         padding-bottom: var(--mantine-spacing-lg);
     }
+
     & .description {
         color: var(--mantine-color-gray-6);
         font-weight: 300;
@@ -11,9 +12,11 @@
 
 .title {
     word-break: break-word;
+
     &[data-variant='primary'] {
         color: var(--mantine-color-gray-5);
     }
+
     line-height: var(--mantine-line-height-md);
 }
 

diff --git a/packages/mantine/src/components/sticky-footer/StickyFooter.module.css b/packages/mantine/src/components/sticky-footer/StickyFooter.module.css
@@ -8,10 +8,8 @@
     &[data-variant='modal-footer'] {
         border-top: 1px solid var(--mantine-color-gray-3);
         padding-bottom: 0;
-        margin-top: var(--mb-padding);
-        margin-bottom: calc(var(--mantine-spacing-md) - var(--mb-padding));
-        margin-left: calc(-1 * var(--mb-padding));
-        margin-right: calc(-1 * var(--mb-padding));
+        margin: var(--mb-padding) calc(-1 * var(--mb-padding)) calc(var(--mantine-spacing-md) - var(--mb-padding))
+            calc(-1 * var(--mb-padding));
     }
 }
 

diff --git a/packages/mantine/src/components/table/Table.module.css b/packages/mantine/src/components/table/Table.module.css
@@ -23,6 +23,7 @@
 .actionsDropdown {
     text-align: left;
 }
+
 .actionsGroup {
     &:has(.actionsGroupItems:empty) {
         /* Hide empty groups */
@@ -34,6 +35,7 @@
 .filterWrapper {
     width: 20rem;
 }
+
 .filterEmpty {
     color: var(--mantine-color-gray-5);
 }
@@ -85,6 +87,7 @@
 .lastUpdatedRoot {
     min-height: 98px;
 }
+
 .lastUpdatedLabel {
     color: var(--mantine-color-gray-6);
 }

diff --git a/packages/mantine/src/components/table/layouts/row-layout/RowLayout.module.css b/packages/mantine/src/components/table/layouts/row-layout/RowLayout.module.css
@@ -10,6 +10,7 @@
         border-color: var(--mantine-color-gray-3);
         pointer-events: none;
         cursor: not-allowed;
+
         & + svg {
             color: var(--mantine-color-gray-5);
         }
@@ -18,9 +19,11 @@
 
 .row {
     overflow-wrap: anywhere;
+
     & td:first-of-type {
         padding-left: 40px;
     }
+
     @mixin hover {
         background-color: var(--mantine-color-gray-1);
     }
@@ -30,14 +33,17 @@
         border-color: var(--mantine-color-gray-3);
         pointer-events: none;
         cursor: not-allowed;
+
         &:checked + svg {
             color: var(--mantine-color-gray-5);
         }
     }
+
     &[data-selected='true'] {
         &[data-multi-selection='false'] {
             background-color: var(--mantine-color-gray-1);
         }
+
         &[data-multi-selection='true'] {
             background-color: transparent;
         }
@@ -51,7 +57,8 @@
 
 .cell {
     vertical-align: middle;
-    /* We must use height instead of minHeight here, otherwise it doesn’t apply*/
+
+    /* We must use height instead of minHeight here, otherwise it doesn’t apply */
     height: 56px;
     padding: var(--mantine-spacing-xs) var(--mantine-spacing-sm);
     border-bottom: rem(1) solid var(--mantine-color-gray-3);

diff --git a/packages/mantine/src/styles/Alert.module.css b/packages/mantine/src/styles/Alert.module.css
@@ -1,5 +1,6 @@
 .root {
     padding: var(--mantine-spacing-sm);
+
     &:not(&[data-variant]) {
         border-color: color-mix(in srgb, var(--alert-color), var(--alert-bg) 85%);
     }
@@ -22,6 +23,7 @@
 .message {
     @mixin light {
         color: var(--mantine-color-gray-7);
+
         &:where([data-variant='filled']) {
             color: var(--alert-color);
         }

diff --git a/packages/mantine/src/styles/Checkbox.module.css b/packages/mantine/src/styles/Checkbox.module.css
@@ -7,6 +7,7 @@
     &[data-indeterminate] {
         background-color: var(--mantine-color-pureWhite);
         border-color: var(--mantine-color-gray-4);
+
         & + svg {
             color: var(--mantine-color-gray-6);
         }

diff --git a/packages/mantine/src/styles/Combobox.module.css b/packages/mantine/src/styles/Combobox.module.css
@@ -4,6 +4,7 @@
     border: 1px solid;
     width: 100%;
     border-color: var(--mantine-color-gray-4);
+
     &:focus {
         border-color: var(--mantine-primary-color-filled);
     }

diff --git a/packages/mantine/src/styles/Modal.module.css b/packages/mantine/src/styles/Modal.module.css
@@ -4,31 +4,37 @@
             flex: 0 0 100%;
         }
     }
+
     &[data-size='xs'] {
         .content {
             flex: 0 0 rem(432px);
         }
     }
+
     &[data-size='sm'] {
         .content {
             flex: 0 0 rem(664px);
         }
     }
+
     &[data-size='md'] {
         .content {
             flex: 0 0 rem(896px);
         }
     }
+
     &[data-size='lg'] {
         .content {
             flex: 0 0 rem(1120px);
         }
     }
+
     &[data-size='xl'] {
         .content {
             flex: 0 0 rem(88%);
         }
     }
+
     &:not([data-size]) {
         .content {
             flex: 0 0 rem(896px);

diff --git a/packages/mantine/src/styles/NavLink.module.css b/packages/mantine/src/styles/NavLink.module.css
@@ -1,7 +1,7 @@
 .root {
     color: var(--mantine-color-gray-6);
     line-height: var(--mantine-line-height);
-    border-radius: var(--mantine-radius-default) 0px 0px var(--mantine-radius-default);
+    border-radius: var(--mantine-radius-default) 0 0 var(--mantine-radius-default);
 
     &[data-active] {
         color: var(--mantine-primary-color-6);

diff --git a/packages/mantine/src/styles/Notification.module.css b/packages/mantine/src/styles/Notification.module.css
@@ -3,6 +3,7 @@
     background-color: var(--mantine-color-gray-0);
     box-shadow: var(--mantine-shadow-lg);
     padding: var(--mantine-spacing-sm);
+
     &[data-with-icon] {
         padding-left: var(--mantine-spacing-sm);
     }

diff --git a/packages/mantine/src/styles/Pagination.module.css b/packages/mantine/src/styles/Pagination.module.css
@@ -1,5 +1,6 @@
 .root {
     --pagination-control-fz: var(--mantine-font-size-sm);
+
     color: var(--mantine-color-gray-6);
 }
 
@@ -8,6 +9,7 @@
 
     @mixin light {
         border-color: var(--mantine-color-gray-3);
+
         @mixin hover {
             &:where(:not(:disabled, [data-disabled])) {
                 background-color: var(--mantine-primary-color-1);
@@ -19,6 +21,7 @@
         @mixin light {
             border-color: var(--pagination-active-bg);
             color: var(--pagination-active-color, var(--mantine-color-white));
+
             @mixin hover {
                 background-color: var(--pagination-active-bg);
             }

diff --git a/packages/mantine/src/styles/Select.module.css b/packages/mantine/src/styles/Select.module.css
@@ -2,31 +2,38 @@
     @mixin light {
         color: var(--mantine-color-gray-7);
     }
+
     @mixin dark {
         color: var(--mantine-color-dark-0);
     }
 }
 
 .option {
     padding: 12px 16px;
+
     @mixin light {
         color: var(--mantine-color-gray-7);
+
         @mixin hover {
             background-color: var(--mantine-color-gray-1);
         }
     }
+
     @mixin dark {
         color: var(--mantine-color-dark-0);
+
         @mixin hover {
             background-color: var(--mantine-color-dark-4);
         }
     }
+
     &[aria-selected='true'] {
         background-color: var(--mantine-color-action-1);
         color: var(--mantine-color-action-6);
+
         @mixin hover {
             color: var(--mantine-color-action-6);
-            background-color: rgb(237, 246, 255, 0.65);
+            background-color: rgb(237 246 255 / 65%);
         }
     }
 }
diff --git a/packages/mantine/src/styles/Skeleton.module.css b/packages/mantine/src/styles/Skeleton.module.css
@@ -3,6 +3,7 @@
         &::before {
             z-index: unset;
         }
+
         &::after {
             z-index: unset;
         }