fix(compiler): reapply changes to style import transformer (#5125)

This reverts commit cf4a701. fixes: #5016 STENCIL-999 improve tests more e2e tests
ionic-team · Dec 5, 2023 · d5b39de · d5b39de
1 parent e78a9a6
commit d5b39de
Show file tree

Hide file tree

Showing 14 changed files with 442 additions and 85 deletions.
diff --git a/src/compiler/transformers/add-static-style.ts b/src/compiler/transformers/add-static-style.ts
@@ -1,10 +1,10 @@
-import { dashToPascalCase, DEFAULT_STYLE_MODE } from '@utils';
+import { DEFAULT_STYLE_MODE } from '@utils';
 import ts from 'typescript';
 
 import type * as d from '../../declarations';
 import { scopeCss } from '../../utils/shadow-css';
 import { getScopeId } from '../style/scope-css';
-import { createStaticGetter } from './transform-utils';
+import { createStaticGetter, getIdentifierFromResourceUrl } from './transform-utils';
 
 /**
  * Adds static "style" getter within the class
@@ -91,7 +91,8 @@ const getMultipleModeStyle = (
       // import generated from @Component() styleUrls option
       // import myTagIosStyle from './import-path.css';
       // static get style() { return { ios: myTagIosStyle }; }
-      const styleUrlIdentifier = createStyleIdentifierFromUrl(cmp, style);
+      const externalStyles = Array.from(new Set(style.externalStyles.map((s) => s.absolutePath)));
+      const styleUrlIdentifier = createStyleIdentifierFromUrl(style.styleId, externalStyles);
       const propUrlIdentifier = ts.factory.createPropertyAssignment(style.modeName, styleUrlIdentifier);
       styleModes.push(propUrlIdentifier);
     }
@@ -118,7 +119,8 @@ const getSingleStyle = (cmp: d.ComponentCompilerMeta, style: d.StyleCompiler, co
     // import generated from @Component() styleUrls option
     // import myTagStyle from './import-path.css';
     // static get style() { return myTagStyle; }
-    return createStyleIdentifierFromUrl(cmp, style);
+    const externalStyles = Array.from(new Set(style.externalStyles.map((s) => s.absolutePath)));
+    return createStyleIdentifierFromUrl(style.styleId, externalStyles);
   }
 
   return null;
@@ -134,16 +136,49 @@ const createStyleLiteral = (cmp: d.ComponentCompilerMeta, style: d.StyleCompiler
   return ts.factory.createStringLiteral(style.styleStr);
 };
 
-const createStyleIdentifierFromUrl = (cmp: d.ComponentCompilerMeta, style: d.StyleCompiler) => {
-  style.styleIdentifier = dashToPascalCase(cmp.tagName);
-  style.styleIdentifier = style.styleIdentifier.charAt(0).toLowerCase() + style.styleIdentifier.substring(1);
-
-  if (style.modeName !== DEFAULT_STYLE_MODE) {
-    style.styleIdentifier += dashToPascalCase(style.modeName);
+/**
+ * Creates an expression to be assigned to the `style` property of a component class. For example
+ * given the following component:
+ *
+ * ```ts
+ * @Component({
+ *  styleUrls: ['my-component.css', 'my-component.ios.css']
+ *  tag: 'cmp',
+ * })
+ * export class MyComponent {
+ *   // ...
+ * }
+ * ```
+ *
+ * it would generate the following expression:
+ *
+ * ```ts
+ * import CMP_my_component_css from './my-component.css';
+ * import CMP_my_component_ios_css from './my-component.ios.css';
+ * export class MyComponent {
+ *   // ...
+ * }
+ * MyComponent.style = CMP_my_component_css + CMP_my_component_ios_css;
+ * ```
+ *
+ * Note: style imports are made in [`createEsmStyleImport`](src/compiler/transformers/style-imports.ts).
+ *
+ * @param styleId a unique identifier for the component style
+ * @param externalStyles a list of external styles to be applied the component
+ * @returns an assignment expression to be applied to the `style` property of a component class (e.g. `_myComponentCssStyle + _myComponentIosCssStyle` based on the example)
+ */
+export const createStyleIdentifierFromUrl = (
+  styleId: string,
+  externalStyles: string[],
+): ts.Identifier | ts.BinaryExpression => {
+  if (externalStyles.length === 1) {
+    return ts.factory.createIdentifier(getIdentifierFromResourceUrl(styleId + externalStyles[0]));
   }
 
-  style.styleIdentifier += 'Style';
-  style.externalStyles = [style.externalStyles[0]];
-
-  return ts.factory.createIdentifier(style.styleIdentifier);
+  const firstExternalStyle = externalStyles[0];
+  return ts.factory.createBinaryExpression(
+    createStyleIdentifierFromUrl(styleId, [firstExternalStyle]),
+    ts.SyntaxKind.PlusToken,
+    createStyleIdentifierFromUrl(styleId, externalStyles.slice(1)),
+  );
 };
diff --git a/src/compiler/transformers/component-native/native-static-style.ts b/src/compiler/transformers/component-native/native-static-style.ts
@@ -1,9 +1,10 @@
-import { dashToPascalCase, DEFAULT_STYLE_MODE } from '@utils';
+import { DEFAULT_STYLE_MODE } from '@utils';
 import ts from 'typescript';
 
 import type * as d from '../../../declarations';
 import { scopeCss } from '../../../utils/shadow-css';
 import { getScopeId } from '../../style/scope-css';
+import { createStyleIdentifierFromUrl } from '../add-static-style';
 import { createStaticGetter } from '../transform-utils';
 
 export const addNativeStaticStyle = (classMembers: ts.ClassElement[], cmp: d.ComponentCompilerMeta) => {
@@ -43,7 +44,8 @@ const addMultipleModeStyleGetter = (
       // import generated from @Component() styleUrls option
       // import myTagIosStyle from './import-path.css';
       // static get style() { return { "ios": myTagIosStyle }; }
-      const styleUrlIdentifier = createStyleIdentifierFromUrl(cmp, style);
+      const externalStyles = Array.from(new Set(style.externalStyles.map((s) => s.absolutePath)));
+      const styleUrlIdentifier = createStyleIdentifierFromUrl(style.styleId, externalStyles);
       const propUrlIdentifier = ts.factory.createPropertyAssignment(style.modeName, styleUrlIdentifier);
       styleModes.push(propUrlIdentifier);
     }
@@ -74,7 +76,8 @@ const addSingleStyleGetter = (
     // import generated from @Component() styleUrls option
     // import myTagStyle from './import-path.css';
     // static get style() { return myTagStyle; }
-    const styleUrlIdentifier = createStyleIdentifierFromUrl(cmp, style);
+    const externalStyles = Array.from(new Set(style.externalStyles.map((s) => s.absolutePath)));
+    const styleUrlIdentifier = createStyleIdentifierFromUrl(style.styleId, externalStyles);
     classMembers.push(createStaticGetter('style', styleUrlIdentifier));
   }
 };
@@ -88,17 +91,3 @@ const createStyleLiteral = (cmp: d.ComponentCompilerMeta, style: d.StyleCompiler
 
   return ts.factory.createStringLiteral(style.styleStr);
 };
-
-const createStyleIdentifierFromUrl = (cmp: d.ComponentCompilerMeta, style: d.StyleCompiler) => {
-  style.styleIdentifier = dashToPascalCase(cmp.tagName);
-  style.styleIdentifier = style.styleIdentifier.charAt(0).toLowerCase() + style.styleIdentifier.substring(1);
-
-  if (style.modeName !== DEFAULT_STYLE_MODE) {
-    style.styleIdentifier += dashToPascalCase(style.modeName);
-  }
-
-  style.styleIdentifier += 'Style';
-  style.externalStyles = [style.externalStyles[0]];
-
-  return ts.factory.createIdentifier(style.styleIdentifier);
-};
diff --git a/src/compiler/transformers/stencil-import-path.ts b/src/compiler/transformers/stencil-import-path.ts
@@ -15,9 +15,14 @@ import type { ImportData, ParsedImport, SerializeImportData } from '../../declar
  * @param data import data to be serialized
  * @param styleImportData an argument which controls whether the import data
  * will be added to the path (formatted as query params)
+ * @param moduleSystem the module system we compile to
  * @returns a formatted string
  */
-export const serializeImportPath = (data: SerializeImportData, styleImportData: string | undefined | null): string => {
+export const serializeImportPath = (
+  data: SerializeImportData,
+  styleImportData: string | undefined | null,
+  moduleSystem?: 'esm' | 'cjs',
+): string => {
   let p = data.importeePath;
 
   if (isString(p)) {
@@ -28,7 +33,7 @@ export const serializeImportPath = (data: SerializeImportData, styleImportData:
       p = './' + p;
     }
 
-    if (styleImportData === 'queryparams' || styleImportData === undefined) {
+    if (moduleSystem !== 'cjs' && (styleImportData === 'queryparams' || styleImportData === undefined)) {
       const paramData: ImportData = {};
       if (isString(data.tag)) {
         paramData.tag = data.tag;