Update ReplaceCssNames transform to support arbitrary code between the object key and the goog.getCssName() call.

PiperOrigin-RevId: 876351497

Author: Closure Team

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

@@ -23,6 +23,7 @@
 import com.google.javascript.jscomp.NodeTraversal.AbstractPostOrderCallback;
 import com.google.javascript.rhino.IR;
 import com.google.javascript.rhino.Node;
+import com.google.javascript.rhino.Node.AncestorIterable;
 import java.util.ArrayList;
 import java.util.LinkedHashMap;
 import java.util.LinkedHashSet;
@@ -416,8 +417,18 @@ boolean isCssClosureFileClassesMember() {
     @Nullable String getCssClosureClassesMemberName() {
       checkNotNull(
           cssClosureClassesQualifiedName, "Not a css closure file classes object: %s", callNode);
-      String memberName = callNode.getParent().getString();
-      return cssClosureClassesQualifiedName + "." + memberName;
+      // We support 2 structures getCssName() calls in Sass-generated files:
+      // 1. { Foo: goog.getCssName('foo') }
+      // 2. { Foo: expression ? … : goog.getCssName('foo') }
+      // Traversing our ancestry allows us to find the `Foo` string key in both cases.
+      AncestorIterable ancestors = callNode.getAncestors();
+      for (Node ancestor : ancestors) {
+        if (ancestor.isStringKey()) {
+          return cssClosureClassesQualifiedName + "." + ancestor.getString();
+        }
+      }
+      throw new IllegalStateException(
+          String.format("No css closure classes member name found: %s", callNode));
     }
 
     @Nullable String getCssClassName() {

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

@@ -516,6 +516,57 @@ public void testVariableReferencesToCssClasses() {
     assertThat(cssNames).containsExactly("fooStylesBar");
   }
 
+  @Test
+  public void testVariableReferencesToXidCssClasses() {
+    SourceFile cssVarsDefinition =
+        SourceFile.fromCode(
+            "foo/styles.css.closure.js",
+            """
+            /**
+             * @fileoverview generated from foo/styles.css
+             * @sassGeneratedCssTs
+             */
+            goog.module('foo.styles$2ecss');
+            // These files will be automatically generated, so we know the
+            // exported 'classes' property will always be declared like this.
+            /** @type {{Bar: string, Baz: string}} */
+            exports.classes = {
+              'Bar': obfuscate ? xid('fooStylesBar') : goog.getCssName('fooStylesBar'),
+              'Baz': obfuscate ? xid('fooStylesBaz') : goog.getCssName('fooStylesBaz'),
+            }
+            """);
+    SourceFile cssVarsExpected =
+        SourceFile.fromCode(
+            "foo/styles.css.closure.js",
+            """
+            /**
+             * @fileoverview generated from foo/styles.css
+             * @sassGeneratedCssTs
+             */
+            goog.module('foo.styles$2ecss');
+            /** @type {{Bar: string, Baz: string}} */
+            exports.classes = {
+              'Bar': obfuscate ? xid('fooStylesBar') : 'fsr',
+              'Baz': obfuscate ? xid('fooStylesBaz') : 'fsz',
+            }
+            """);
+    SourceFile importer =
+        SourceFile.fromCode(
+            "foo/importer.closure.js",
+            """
+            goog.module('foo.importer');
+            /** @type {string} */
+            const foo_styles_css = goog.require('foo.styles$2ecss')
+            // Even when the original TS import was
+            // `import {classes as foo} from './path/to/file';`
+            // tsickle will convert references to `foo` into a fully qualified
+            // name like this rather than creating an alias variable named `foo`.
+            var x = foo_styles_css.classes.Bar
+            """);
+    test(srcs(cssVarsDefinition, importer), expected(cssVarsExpected, importer));
+    assertThat(cssNames).containsExactly("fooStylesBar");
+  }
+
   @Test
   public void testMixedVariableAndStringReferences() {
     SourceFile cssVarsDefinition =