jss transform: use @enum instead of json.parse (#30304)

* Revert "resources: fix loading sequence of fill and intersection-observer"

This reverts commit f5ff363.

* jss transform: use const instead of json.parse

* separate CSS export

* remove eslint warnings

* remove accidentally added file

* lint

build-system/babel-plugins/babel-plugin-transform-jss/index.js

@@ -31,8 +31,9 @@
  * Out:
  * ```
  * const jss = { button: { fontSize: 12 }}
- * const _classes = {button: 'button-1', CSS: 'button-1 { font-size: 12 }'}
+ * const _classes = {button: 'button-1'}
  * export const useStyles = () => _classes;
+ * export const CSS = 'button-1 { font-size: 12px }'
  * ```
  */
 
@@ -42,7 +43,7 @@ const {default: preset} = require('jss-preset-default');
 const {relative, join} = require('path');
 const {spawnSync} = require('child_process');
 
-module.exports = function ({types: t, template}) {
+module.exports = function ({template}) {
   function isJssFile(filename) {
     return filename.endsWith('.jss.js');
   }
@@ -99,18 +100,25 @@ module.exports = function ({types: t, template}) {
           );
         }
 
+        // Create the classes var.
         const id = path.scope.generateUidIdentifier('classes');
-        path.scope.push({
-          id,
-          init: template.expression.ast`JSON.parse(${t.stringLiteral(
-            JSON.stringify({
-              ...sheet.classes,
-              'CSS': transformCssSync(sheet.toString()),
-            })
-          )})`,
-        });
+        const init = template.expression.ast`${JSON.stringify(sheet.classes)}`;
+        path.scope.push({id, init});
+        path.scope.bindings[id.name].path.parentPath.addComment(
+          'leading',
+          '* @enum {string}'
+        );
 
+        // Replace useStyles with a getter for the new `classes` var.
         path.replaceWith(template.expression.ast`(() => ${id})`);
+
+        // Export a variable named CSS with the compiled CSS.
+        const cssExport = template.ast`export const CSS = "${transformCssSync(
+          sheet.toString()
+        )}"`;
+        path
+          .findParent((p) => p.type === 'ExportNamedDeclaration')
+          .insertAfter(cssExport);
       },
 
       // Remove the import for react-jss

build-system/babel-plugins/babel-plugin-transform-jss/test/fixtures/transform-assertions/should-transform-jss-var/output.mjs

@@ -1,4 +1,5 @@
-var _classes = JSON.parse("{\"button\":\"button-21aa4a8\",\"CSS\":\".button-21aa4a8{font-size:12px}\\n\"}");
+/** @enum {string}*/
+var _classes = {"button":"button-21aa4a8"};
 
 /**
  * Copyright 2020 The AMP HTML Authors. All Rights Reserved.
@@ -21,3 +22,4 @@ const JSS = {
   }
 };
 export const useStyles = () => _classes;
+export const CSS = ".button-21aa4a8{font-size:12px}\n";

build-system/babel-plugins/babel-plugin-transform-jss/test/fixtures/transform-assertions/should-transform-literal/output.mjs

@@ -1,4 +1,5 @@
-var _classes = JSON.parse("{\"floatLeft\":\"float-left-a6c6677\",\"fill\":\"fill-a6c6677\",\"CSS\":\".float-left-a6c6677{float:left;border:1px solid #000}.fill-a6c6677{-ms-flex:1 1 auto;flex:1 1 auto;display:block;position:relative}\\n\"}");
+/** @enum {string}*/
+var _classes = {"floatLeft":"float-left-a6c6677","fill":"fill-a6c6677"};
 
 /**
  * Copyright 2020 The AMP HTML Authors. All Rights Reserved.
@@ -16,3 +17,4 @@ var _classes = JSON.parse("{\"floatLeft\":\"float-left-a6c6677\",\"fill\":\"fill
  * limitations under the License.
  */
 export const useStyles = () => _classes;
+export const CSS = ".float-left-a6c6677{float:left;border:1px solid #000}.fill-a6c6677{-ms-flex:1 1 auto;flex:1 1 auto;display:block;position:relative}\n";

extensions/amp-base-carousel/1.0/amp-base-carousel.js

@@ -16,14 +16,14 @@
 
 import {ActionTrust} from '../../../src/action-constants';
 import {BaseCarousel} from './base-carousel';
+import {CSS} from './base-carousel.jss';
 import {CarouselContextProp} from './carousel-props';
 import {PreactBaseElement} from '../../../src/preact/base-element';
 import {Services} from '../../../src/services';
 import {createCustomEvent} from '../../../src/event-helper';
 import {dict} from '../../../src/utils/object';
 import {isExperimentOn} from '../../../src/experiments';
 import {isLayoutSizeDefined} from '../../../src/layout';
-import {useStyles} from './base-carousel.jss';
 import {userAssert} from '../../../src/log';
 
 /** @const {string} */
@@ -92,8 +92,7 @@ AmpBaseCarousel['props'] = {
 };
 
 /** @override */
-// eslint-disable-next-line
-AmpBaseCarousel['shadowCss'] = useStyles().CSS;
+AmpBaseCarousel['shadowCss'] = CSS;
 
 /** @override */
 AmpBaseCarousel['useContexts'] = [CarouselContextProp];

extensions/amp-inline-gallery/1.0/amp-inline-gallery-pagination.js

@@ -14,12 +14,12 @@
  * limitations under the License.
  */
 
+import {CSS} from './pagination.jss';
 import {CarouselContextProp} from '../../amp-base-carousel/1.0/carousel-props';
 import {Layout} from '../../../src/layout';
 import {Pagination} from './pagination';
 import {PreactBaseElement} from '../../../src/preact/base-element';
 import {isExperimentOn} from '../../../src/experiments';
-import {useStyles} from './pagination.jss';
 import {userAssert} from '../../../src/log';
 
 /** @const {string} */
@@ -52,8 +52,7 @@ AmpInlineGalleryPagination['children'] = {};
 AmpInlineGalleryPagination['layoutSizeDefined'] = true;
 
 /** @override */
-// eslint-disable-next-line
-AmpInlineGalleryPagination['shadowCss'] = useStyles().CSS;
+AmpInlineGalleryPagination['shadowCss'] = CSS;
 
 /** @override */
 AmpInlineGalleryPagination['useContexts'] = [CarouselContextProp];