build: Upgrade CSS linter (#3991)

The new version requires additional configuration for less syntax, and has new default rules we were out of compliance with. I disabled rules about avoiding explicit vendor prefixes (such as "-webkit") because we are not using any auto-prefixer tools. Other violations have been fixed: - kebab-case for element ids - quotes around URLs - double quotes instead of single quotes - disable class selector pattern matching for MDL (external) - use modern rgb/rgba syntax - no quotes on font families - no long-hand when short-hand will do
shaka-project · Apr 21, 2022 · 98b9389 · 98b9389
1 parent 6f4c37e
commit 98b9389
Show file tree

Hide file tree

Showing 10 changed files with 440 additions and 2,305 deletions.
diff --git a/.csslintrc b/.csslintrc
@@ -1,13 +1,23 @@
 {
     "extends": "stylelint-config-standard",
+    "customSyntax": "postcss-less",
     "rules": {
       "font-family-no-missing-generic-family-keyword": null,
       "declaration-block-single-line-max-declarations": null,
       "declaration-empty-line-before": null,
-      "max-line-length": [ 80, {
+      "max-line-length": [80, {
         ignorePattern: "/^@import\\s+/",
       }],
+      "function-no-unknown": [true, {
+        ignoreFunctions: [
+          "data-uri",
+          "lighten",
+          "percentage",
+        ],
+      }],
+      "property-no-vendor-prefix": null,
       "selector-list-comma-newline-after": "always-multi-line",
+      "selector-no-vendor-prefix": null,
       "selector-pseudo-element-colon-notation": "single",
       "unit-allowed-list": ["em", "%", "px", "s", "deg", "vmin", "ms", "vh"]
     }

diff --git a/demo/cast_receiver/index.html b/demo/cast_receiver/index.html
@@ -63,7 +63,7 @@
     <script defer src="../load.js"></script>
   </head>
   <body>
-    <div data-shaka-player-container id="videoContainer">
+    <div data-shaka-player-container id="video-container">
       <video autoplay data-shaka-player id="video"></video>
     </div>
     <!-- Covers everything else while idle -->

diff --git a/demo/cast_receiver/receiver_app.css b/demo/cast_receiver/receiver_app.css
@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-/* Experimentation has revealed that unless html, body, and videoContainer are
+/* Experimentation has revealed that unless html, body, and video-container are
  * width and height 100%, video can force all its parents to grow larger than
  * window.innerHeight, causing things to be cut off for some content.
  */
@@ -25,7 +25,7 @@ body {
   color: white;
 }
 
-#videoContainer {
+#video-container {
   width: 100%;
   height: 100%;
 }
@@ -83,29 +83,29 @@ body:after {
   height: 0;
   overflow: hidden;
   z-index: -1;
-  content: url(idle1.jpg) url(idle2.jpg) url(idle3.jpg);
+  content: url("idle1.jpg") url("idle2.jpg") url("idle3.jpg");
 }
 
 @keyframes bg-change {
-  0% { background-image: url('idle1.jpg'); padding-left: 0; }
+  0% { background-image: url("idle1.jpg"); padding-left: 0; }
 
-  32% { background-image: url('idle1.jpg'); padding-left: 0; }
+  32% { background-image: url("idle1.jpg"); padding-left: 0; }
 
-  34% { background-image: url('idle2.jpg'); padding-left: 0; }
+  34% { background-image: url("idle2.jpg"); padding-left: 0; }
 
-  49% { background-image: url('idle2.jpg'); padding-left: 0; }
+  49% { background-image: url("idle2.jpg"); padding-left: 0; }
 
-  50% { background-image: url('idle2.jpg'); padding-left: 400px; }
+  50% { background-image: url("idle2.jpg"); padding-left: 400px; }
 
-  65% { background-image: url('idle2.jpg'); padding-left: 400px; }
+  65% { background-image: url("idle2.jpg"); padding-left: 400px; }
 
-  67% { background-image: url('idle3.jpg'); padding-left: 400px; }
+  67% { background-image: url("idle3.jpg"); padding-left: 400px; }
 
-  87% { background-image: url('idle3.jpg'); padding-left: 400px; }
+  87% { background-image: url("idle3.jpg"); padding-left: 400px; }
 
-  88% { background-image: url('idle3.jpg'); padding-left: 0; }
+  88% { background-image: url("idle3.jpg"); padding-left: 0; }
 
-  98% { background-image: url('idle3.jpg'); padding-left: 0; }
+  98% { background-image: url("idle3.jpg"); padding-left: 0; }
 
-  100% { background-image: url('idle1.jpg'); padding-left: 0; }
+  100% { background-image: url("idle1.jpg"); padding-left: 0; }
 }
diff --git a/demo/demo.less b/demo/demo.less
@@ -4,6 +4,8 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+/* stylelint-disable selector-class-pattern -- MDL classes can't be changed */
+
 // Import the MDL styles with the desired color scheme.
 @import (css, inline) "../node_modules/material-design-lite/dist/material.indigo-blue.min.css";
 @import (css, inline) "../node_modules/dialog-polyfill/dialog-polyfill.css";
@@ -15,7 +17,7 @@
 @drawer-width: 550px;
 
 @mdl-footer-link-color: #9e9e9e;  /* copied from MDL stylesheet */
-@mdl-button-color: rgb(63,81,181);  /* copied from MDL stylesheet */
+@mdl-button-color: rgb(63 81 181);  /* copied from MDL stylesheet */
 
 @progress-circle-size: 45px;
 @progress-circle-thickness: 5px;
@@ -24,7 +26,7 @@
  * here we override the font family for the MDL class.  Without this, the menu
  * on the left side of the screen has no icon. */
 .material-icons {
-  font-family: 'Material Icons Round';
+  font-family: "Material Icons Round";
 }
 
 /* Conflicting styles between the icons font & the MDL buttons caused some
@@ -73,7 +75,7 @@ main.mdl-layout__content {
   border-radius: 50%;
   width: 32px;
   color: #000;
-  background: rgba(255, 255, 255, 0.85);
+  background: rgba(255 255 255 / 85%);
 }
 
 html, body {
@@ -180,7 +182,7 @@ html, body {
   background-color: @error-color;
   color: white;
   position: relative;
-  padding: 0 0;
+  padding: 0;
   top: 0;
   right: 1em;
   float: right;
@@ -212,56 +214,56 @@ html, body {
 
   /* features */
   &[icon="high_definition"] {
-    background-image: data-uri('icons/custom_high_definition.svg');
+    background-image: data-uri("icons/custom_high_definition.svg");
   }
 
   &[icon="ultra_high_definition"] {
-    background-image: data-uri('icons/custom_ultra_high_definition.svg');
+    background-image: data-uri("icons/custom_ultra_high_definition.svg");
   }
 
   &[icon="subtitles"] {
-    background-image: data-uri('icons/baseline-subtitles-24px.svg');
+    background-image: data-uri("icons/baseline-subtitles-24px.svg");
   }
 
   &[icon="closed_caption"] {
-    background-image: data-uri('icons/baseline-closed_caption-24px.svg');
+    background-image: data-uri("icons/baseline-closed_caption-24px.svg");
   }
 
   &[icon="live"] {
-    background-image: data-uri('icons/baseline-live_tv-24px.svg');
+    background-image: data-uri("icons/baseline-live_tv-24px.svg");
   }
 
   &[icon="trick_mode"] {
-    background-image: data-uri('icons/baseline-fast_forward-24px.svg');
+    background-image: data-uri("icons/baseline-fast_forward-24px.svg");
   }
 
   &[icon="surround_sound"] {
-    background-image: data-uri('icons/baseline-surround_sound-24px.svg');
+    background-image: data-uri("icons/baseline-surround_sound-24px.svg");
   }
 
   &[icon="multiple_languages"] {
-    background-image: data-uri('icons/baseline-language-24px.svg');
+    background-image: data-uri("icons/baseline-language-24px.svg");
   }
 
   &[icon="ad"] {
-    background-image: data-uri('icons/custom_ad.svg');
+    background-image: data-uri("icons/custom_ad.svg");
   }
 
   &[icon="audio_only"] {
-    background-image: data-uri('icons/baseline-audiotrack-24px.svg');
+    background-image: data-uri("icons/baseline-audiotrack-24px.svg");
   }
 
   /* key systems */
   &[icon="widevine"] {
-    background-image: data-uri('icons/custom_widevine.svg');
+    background-image: data-uri("icons/custom_widevine.svg");
   }
 
   &[icon="clear_key"] {
-    background-image: data-uri('icons/custom_clear_key.svg');
+    background-image: data-uri("icons/custom_clear_key.svg");
   }
 
   &[icon="playready"] {
-    background-image: data-uri('icons/custom_playready.svg');
+    background-image: data-uri("icons/custom_playready.svg");
   }
 }