Linter

spec/example_app/app/assets/stylesheets/admin/identity.scss

@@ -1,18 +1,39 @@
 .identity__banner {
   margin: 0;
 
-  &--admin {
-    background-image: repeating-linear-gradient(45deg, violet, indigo, blue, green, yellow, orange, red, violet);
-    text-align: center;
+  &.identity__banner--admin {
+    // Done this way purely to satisfy the linter
+    --rainbow-blue: #00f;
+    --rainbow-green: #008000;
+    --rainbow-indigo: #4b0082;
+    --rainbow-orange: #ffa500;
+    --rainbow-red: #f00;
+    --rainbow-violet: #ee82ee;
+    --rainbow-yellow: #ff0;
+
+    animation: rainbow 1s ease;
+    background-clip: text;
+    background-image: repeating-linear-gradient(
+      45deg,
+      var(--rainbow-violet),
+      var(--rainbow-indigo),
+      var(--rainbow-blue),
+      var(--rainbow-green),
+      var(--rainbow-yellow),
+      var(--rainbow-orange),
+      var(--rainbow-red),
+      var(--rainbow-violet)
+    );
     background-size: 800% 800%;
-    -webkit-background-clip: text;
+    text-align: center;
     -webkit-text-fill-color: transparent;
-    animation: rainbow 1s ease;
   }
 }
 
 @keyframes rainbow {
-    0%{background-position:0% 50%}
-    50%{background-position:100% 25%}
-    100%{background-position:0% 50%}
+  0% { background-position: 0% 50%; }
+
+  50% { background-position: 100% 25%; }
+
+  100% { background-position: 0% 50%; }
 }