Forces BY_WHOLE style renaming for CSS variables (disambiguated by -- prefix) and added support for CSS variable parsing in goog.setCssNameMapping calls.

PiperOrigin-RevId: 789013338

Author: Closure Team

src/com/google/javascript/jscomp/ProcessClosurePrimitives.java

@@ -622,10 +622,11 @@ private void reportPossibleBadBaseMethodUse(Node n, String className, String ext
     }
 
     if (style == CssRenamingMap.Style.BY_PART) {
-      // Make sure that no keys contain -'s
+      // Make sure that no class keys contain -'s
+      // Variable keys can contain -'s since they're always named BY_WHOLE.
       List<String> errors = new ArrayList<>();
       for (String key : cssNames.keySet()) {
-        if (key.contains("-")) {
+        if (key.contains("-") && !key.startsWith("--")) {
           errors.add(key);
         }
       }

src/com/google/javascript/jscomp/ReplaceCssNames.java

@@ -508,27 +508,37 @@ private void processStringNode(Node n) {
     String[] parts = name.split("-");
     if (symbolMap != null) {
       String replacement = null;
-      switch (symbolMap.getStyle()) {
-        case BY_WHOLE:
-          replacement = symbolMap.get(name);
-          if (replacement == null) {
-            compiler.report(JSError.make(n, UNKNOWN_SYMBOL_WARNING, name, name));
-            return;
-          }
-          break;
-        case BY_PART:
-          String[] replaced = new String[parts.length];
-          for (int i = 0; i < parts.length; i++) {
-            String part = symbolMap.get(parts[i]);
-            if (part == null) {
-              // If we can't encode all parts, don't encode any of it.
-              compiler.report(JSError.make(n, UNKNOWN_SYMBOL_WARNING, parts[i], name));
+
+      if (name.startsWith("--")) {
+        // Force BY_WHOLE style for CSS variables.
+        replacement = symbolMap.get(name);
+        if (replacement == null) {
+          compiler.report(JSError.make(n, UNKNOWN_SYMBOL_WARNING, name, name));
+          return;
+        }
+      } else {
+        switch (symbolMap.getStyle()) {
+          case BY_WHOLE:
+            replacement = symbolMap.get(name);
+            if (replacement == null) {
+              compiler.report(JSError.make(n, UNKNOWN_SYMBOL_WARNING, name, name));
               return;
             }
-            replaced[i] = part;
-          }
-          replacement = Joiner.on("-").join(replaced);
-          break;
+            break;
+          case BY_PART:
+            String[] replaced = new String[parts.length];
+            for (int i = 0; i < parts.length; i++) {
+              String part = symbolMap.get(parts[i]);
+              if (part == null) {
+                // If we can't encode all parts, don't encode any of it.
+                compiler.report(JSError.make(n, UNKNOWN_SYMBOL_WARNING, parts[i], name));
+                return;
+              }
+              replaced[i] = part;
+            }
+            replacement = Joiner.on("-").join(replaced);
+            break;
+        }
       }
       n.setString(replacement);
     }

test/com/google/javascript/jscomp/ReplaceCssNamesTest.java

@@ -53,6 +53,9 @@ public final class ReplaceCssNamesTest extends CompilerTestCase {
           .put("goog", "g")
           .put("fooStylesBar", "fsr")
           .put("fooStylesBaz", "fsz")
+          .put("--foo-bar", "--fb")
+          .put("---foo-baz", "--fbz")
+          .put("--foo-bar-baz--qux", "--fbzq")
           .buildOrThrow();
 
   Map<String, String> replacementMapFull =
@@ -63,6 +66,9 @@ public final class ReplaceCssNamesTest extends CompilerTestCase {
           .put("unrelated", "l")
           .put("long-suffix", "m")
           .put("long-prefix-suffix1", "h-i")
+          .put("--foo-bar", "--fb")
+          .put("---foo-baz", "--fbz")
+          .put("--foo-bar-baz--qux", "--fbzq")
           .buildOrThrow();
 
   CssRenamingMap renamingMap;
@@ -151,6 +157,18 @@ public void testValidSetCssNameMapping_byPart() {
         "const x = 'bar', y = 'baz', z = 'bar-baz';");
   }
 
+  @Test
+  public void testValidSetCssNameMapping_byPart_withCssVariable() {
+    test(
+        """
+        goog.setCssNameMapping({classy: 'c',selector: 's',"--foo":'--f',"--biz-baz":'--b'}, 'BY_PART');
+        const x = goog.getCssName('--foo'),
+          y = goog.getCssName('--biz-baz'),
+          z = goog.getCssName('classy-selector');
+        """,
+        "const x = '--f', y = '--b', z = 'c-s';");
+  }
+
   @Test
   public void testValidSetCssNameMapping_byWhole() {
     test(
@@ -172,6 +190,18 @@ public void testValidSetCssNameMapping_byWhole() {
         "const x = 'bar', y = 'baz', z = 'foo-biz';");
   }
 
+  @Test
+  public void testValidSetCssNameMapping_byWhole_withCssVariable() {
+    test(
+        """
+        goog.setCssNameMapping({classy: 'c',"--foo":'--f',"--biz-baz":'--b'}, 'BY_WHOLE');
+        const x = goog.getCssName('--foo'),
+          y = goog.getCssName('--biz-baz'),
+          z = goog.getCssName('classy');
+        """,
+        "const x = '--f', y = '--b', z = 'c';");
+  }
+
   @Test
   public void testDoNotUseReplacementMap() {
     useReplacementMap = false;
@@ -259,6 +289,23 @@ public void testOneArgWithCompositeClassNamesFull() {
         "var x = 'k'");
   }
 
+  @Test
+  public void testOneArgWithCssVariables_byWhole() {
+    renamingMap = getFullMap();
+
+    test(
+        "var x = goog.getCssName('--foo-bar')", //
+        "var x = '--fb'");
+
+    test(
+        "var x = goog.getCssName('---foo-baz')", //
+        "var x = '--fbz'");
+
+    test(
+        "var x = goog.getCssName('--foo-bar-baz--qux')", //
+        "var x = '--fbzq'");
+  }
+
   @Test
   public void testOneArgWithCompositeClassNamesWithUnknownParts() {
     test(
@@ -275,6 +322,21 @@ public void testOneArgWithCompositeClassNamesWithUnknownParts() {
         warning(UNKNOWN_SYMBOL_WARNING));
   }
 
+  @Test
+  public void testOneArgWithCssVariable() {
+    test(
+        "var x = goog.getCssName('--foo-bar')", //
+        "var x = '--fb'");
+
+    test(
+        "var x = goog.getCssName('---foo-baz')", //
+        "var x = '--fbz'");
+
+    test(
+        "var x = goog.getCssName('--foo-bar-baz--qux')", //
+        "var x = '--fbzq'");
+  }
+
   @Test
   public void testTwoArgsWithStringLiterals() {
     testError("var x = goog.getCssName('header', 'active')", UNEXPECTED_STRING_LITERAL_ERROR);