Patch - CSS and JS optimization: Stylelint SCSS rules (#2524)

* fix: font-family-name-quotes

* fix: function-url-quotes

* fix: length-zero-no-unit

* fix: property-no-vendor-prefix

* fix: color-hex-length

* fix: comment-empty-line-before

* fix: declaration-empty-line-before

* fix: rule-empty-line-before

* fix: scss/at-mixin-argumentless-call-parentheses

* fix: scss/dollar-variable-empty-line-before

* fix: scss/double-slash-comment-empty-line-before

* fix: scss/double-slash-comment-whitespace-inside

* fix: scss/load-no-partial-leading-underscore

* fix: selector-attribute-quotes

* fix: selector-type-no-unknown

* fix: shorthand-property-no-redundant-values

* build: add CI job for CSS/SCSS linting

* build: bump stylelint-config-standard-scss

* fix: color-function-alias-notation

* chore: ignore break-word issue

Author: nschonni

.github/workflows/lint-css.yml

@@ -0,0 +1,43 @@
+name: CSS Linting
+on:
+  push:
+    branches-ignore:
+      - "dependabot/**"
+    paths:
+      - "package*.json"
+      - "Gruntfile.coffee"
+      - "stylelint.config.js"
+      - "**/*.css"
+      - "**/*.scss"
+      - ".github/workflows/lint-css.yml"
+
+  pull_request:
+    paths:
+      - "package*.json"
+      - "Gruntfile.coffee"
+      - "stylelint.config.js"
+      - "**/*.css"
+      - "**/*.scss"
+      - ".github/workflows/lint-css.yml"
+
+jobs:
+  lint-css:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Clone repository
+        uses: actions/checkout@v4
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          cache: npm
+
+      - name: Install Grunt
+        run: npm i -g grunt-cli --force
+
+      - name: Install npm dependencies
+        run: npm ci
+
+      - name: Stylelint
+        run: grunt stylelint

common/list/_lists.scss

@@ -15,7 +15,6 @@
  * - views/_screen-xs-max
  */
 .list-responsive {
-
 	> li {
 		float: left;
 		padding-right: 5px;
@@ -30,6 +29,7 @@
 		content: " ";
 		display: table;
 	}
+
 	&:after {
 		clear: both;
 	}
@@ -42,7 +42,7 @@
  *	- _screen-md-min
  *	- _screen-lg-min
 */
-ul[class*=list-col] {
+ul[class*="list-col"] {
 	display: flex;
 	flex-wrap: wrap;
 	list-style: none;

common/scaffolding/_base.scss

@@ -10,7 +10,8 @@
 
 h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6
 {
-	@include defaults-alternative-font-family();
+	@include defaults-alternative-font-family;
+
 	font-variant-ligatures: no-common-ligatures;
 	font-weight: $bold-weight;
 }

common/spacing/_base.scss

@@ -35,18 +35,22 @@
 
 // Auto margins
 .m-auto { margin: auto !important; }
+
 .mt-auto,
 .my-auto {
 	margin-top: auto !important;
 }
+
 .mr-auto,
 .mx-auto {
 	margin-right: auto !important;
 }
+
 .mb-auto,
 .my-auto {
 	margin-bottom: auto !important;
 }
+
 .ml-auto,
 .mx-auto {
 	margin-left: auto !important;

common/spacing/_screen-lg-min.scss

@@ -29,18 +29,22 @@
 
 // Auto margins
 .m-lg-auto { margin: auto !important; }
+
 .mt-lg-auto,
 .my-lg-auto {
 	margin-top: auto !important;
 }
+
 .mr-lg-auto,
 .mx-lg-auto {
 	margin-right: auto !important;
 }
+
 .mb-lg-auto,
 .my-lg-auto {
 	margin-bottom: auto !important;
 }
+
 .ml-lg-auto,
 .mx-lg-auto {
 	margin-left: auto !important;

common/spacing/_screen-md-min.scss

@@ -29,18 +29,22 @@
 
 // Auto margins
 .m-md-auto { margin: auto !important; }
+
 .mt-md-auto,
 .my-md-auto {
 	margin-top: auto !important;
 }
+
 .mr-md-auto,
 .mx-md-auto {
 	margin-right: auto !important;
 }
+
 .mb-md-auto,
 .my-md-auto {
 	margin-bottom: auto !important;
 }
+
 .ml-md-auto,
 .mx-md-auto {
 	margin-left: auto !important;

common/spacing/_screen-sm-min.scss

@@ -29,18 +29,22 @@
 
 // Auto margins
 .m-sm-auto { margin: auto !important; }
+
 .mt-sm-auto,
 .my-sm-auto {
 	margin-top: auto !important;
 }
+
 .mr-sm-auto,
 .mx-sm-auto {
 	margin-right: auto !important;
 }
+
 .mb-sm-auto,
 .my-sm-auto {
 	margin-bottom: auto !important;
 }
+
 .ml-sm-auto,
 .mx-sm-auto {
 	margin-left: auto !important;

common/text-level-modifiers/_base.scss

@@ -6,7 +6,7 @@
 
 // Font heading
 .fnt-hdng {
-	@include defaults-alternative-font-family();
+	@include defaults-alternative-font-family;
 }
 
 .lead {

components/_base.scss

@@ -2,7 +2,7 @@
 * Template pages styles
 */
 
-.whtwedo { //used on the topics template
+.whtwedo { // used on the topics template
 
 	p {
 		font-weight: 700;
@@ -11,24 +11,21 @@
 	}
 
 	ul {
-
 		>li {
 			margin-bottom: 10px;
 		}
 	}
 }
 
-.lnkbx { //used on topics and theme for well in right column
+.lnkbx { // used on topics and theme for well in right column
 
 	>ul {
-
 		>li {
 			margin-bottom: 10px;
 		}
 	}
 
 	dl {
-
 		a {
 			overflow-wrap: break-word;
 			word-break: break-all;
@@ -51,7 +48,6 @@
 
 .gc-crprt {
 	ul {
-
 		&:nth-child(1) {
 			list-style: outside none none;
 			margin: 0;
@@ -68,7 +64,6 @@
 	}
 
 	.col-md-8 {
-
 		.col-md-4 {
 			margin-bottom: 15px;
 		}
@@ -83,7 +78,6 @@
 .gc-orgnztn { // Class added to main
 
 	.gc-rms-lngth {
-
 		img {
 			margin-bottom: 30px;
 		}
@@ -95,7 +89,6 @@
  */
 
 .gc-theme {
-
 	.profile {
 		margin-bottom: 25px;
 	}
@@ -109,7 +102,6 @@
 .lnkbx { // Contact definition list
 
 	dl {
-
 		dt,
 		dd {
 			border: 0;
@@ -122,7 +114,6 @@
  */
 
 .gc-advnc-srvc {
-
 	.col-md-8 {
 		h2 {
 			&:first-child {

components/_base2.scss

@@ -2,7 +2,6 @@
  * Main content area
  */
 main {
-
 	.subtitle {
 		color: #555;
 		font-size: 1em;
@@ -26,7 +25,6 @@ main {
 	}
 
 	.gc-rms-lngth {
-
 		img {
 			background-color: #fff;
 			border: solid 1px $wbGray;