MNT Fix scss lint warnings (#296)

silverstripe · Jun 11, 2024 · d1d9a4e · d1d9a4e
1 parent 33621d0
commit d1d9a4e
Show file tree

Hide file tree

Showing 7 changed files with 498 additions and 39 deletions.
diff --git a/.stylelintrc.js b/.stylelintrc.js
@@ -0,0 +1 @@
+module.exports = require('@silverstripe/eslint-config/.stylelintrc');
diff --git a/client/dist/styles/bundle.css b/client/dist/styles/bundle.css
diff --git a/client/src/components/LinkField/LinkField.scss b/client/src/components/LinkField/LinkField.scss
@@ -27,7 +27,7 @@
   right: 0;
 
   &:focus,
-  &:not(:disabled):not(.disabled):active {
+  &:not(:disabled, .disabled):active {
     box-shadow: none;
   }
 }
diff --git a/client/src/components/LinkPicker/LinkPicker.scss b/client/src/components/LinkPicker/LinkPicker.scss
@@ -3,7 +3,7 @@
   height: auto;
   width: 100%;
   min-height: 54px;
-  background: white;
+  background: #fff;
   padding: 0;
 }
 
@@ -19,7 +19,7 @@
     margin-bottom: 10px;
   }
 
-  &.font-icon-link::before {
+  &.font-icon-link:before {
     margin: $spacer-xs;
   }
 }
@@ -39,7 +39,7 @@
   height: 100%;
   text-align: left;
 
-  &::before {
+  &:before {
     padding: $spacer-xs;
   }
 }
@@ -60,19 +60,16 @@
   justify-content: space-between;
   position: relative;
   border-top: 0;
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
+  border-radius: 0;
   border-bottom: 0;
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
 
   &:hover, &:focus {
     text-decoration: none;
     color: inherit;
   }
 
   // version-state icon
-  &::before {
+  &:before {
     top: 29px;
     left: 32px;
     content: ' ';
@@ -87,17 +84,17 @@
     z-index: 1;
   }
 
-  &--draft::before {
+  &--draft:before {
     background-color: $state-draft-bg;
   }
 
-  &--modified::before {
+  &--modified:before {
     background-color: $state-modified-bg;
   }
 
-  &--unsaved::before,
-  &--unversioned::before,
-  &--published::before {
+  &--unsaved:before,
+  &--unversioned:before,
+  &--published:before {
     display: none;
   }
 
@@ -128,10 +125,10 @@
   height: 100%;
   min-width: 0;
   text-align: left;
-  border: none;
+  border: 0;
   margin-right: 0;
 
-  &[class*="font-icon-"]::before {
+  &[class*="font-icon-"]:before {
     position: absolute;
     font-size: 1.231rem;
     padding: .76925rem;
@@ -151,17 +148,17 @@
   }
 
   .font-icon-drag-handle {
-    opacity: 0%;
+    opacity: 0;
   }
 
   &:focus .font-icon-drag-handle {
-    opacity: 100%;
+    opacity: 1;
   }
 }
 
 .link-picker__link:hover {
   .link-picker__drag-handle .font-icon-drag-handle {
-    opacity: 100%;
+    opacity: 1;
   }
 }
 
@@ -206,10 +203,12 @@
 .link-picker__title-text {
   min-width: 0;
   margin-right: 5px;
+
   @extend %cutoff-text;
 }
 
 .link-picker__type {
   width: 100%;
+
   @extend %cutoff-text;
 }
diff --git a/client/src/styles/bundle.scss b/client/src/styles/bundle.scss
@@ -6,6 +6,5 @@
 @import "~bootstrap/scss/mixins";
 @import "~bootstrap/scss/functions";
 @import "~bootstrap/scss/variables";
-
 @import "../components/LinkField/LinkField";
 @import "../components/LinkPicker/LinkPicker";
diff --git a/package.json b/package.json
@@ -25,7 +25,7 @@
     "lint": "yarn lint-js && yarn lint-sass",
     "lint-js": "eslint client/src",
     "lint-js-fix": "eslint client/src --fix",
-    "lint-sass": "sass-lint client/src"
+    "lint-sass": "stylelint client/src"
   },
   "jest": {
     "testEnvironment": "jsdom",
@@ -48,7 +48,7 @@
   },
   "devDependencies": {
     "@babel/runtime": "^7.20.0",
-    "@silverstripe/eslint-config": "^1.0.0",
+    "@silverstripe/eslint-config": "^1.3.0",
     "@silverstripe/webpack-config": "^2.0.0",
     "@testing-library/jest-dom": "^6.4.2",
     "@testing-library/react": "^14.0.0",