feat: tag transform

cspell-wordlist.txt

@@ -148,3 +148,4 @@ wdio
 webapps
 xlink
 yourpackage
+fdir

package.json

@@ -160,6 +160,7 @@
     "autoprefixer": "10.4.19",
     "conventional-changelog-cli": "^5.0.0",
     "cspell": "^8.0.0",
+    "css-what": "^7.0.0",
     "dts-bundle-generator": "~9.5.0",
     "esbuild": "^0.25.0",
     "esbuild-plugin-replace": "^1.4.0",
@@ -189,6 +190,8 @@
     "parse5": "7.2.1",
     "pixelmatch": "5.3.0",
     "postcss": "^8.2.8",
+    "postcss-safe-parser": "^7.0.1",
+    "postcss-selector-parser": "^7.1.0",
     "prettier": "3.3.1",
     "prompts": "2.4.2",
     "puppeteer": "^24.1.0",

scripts/esbuild/compiler.ts

@@ -92,6 +92,11 @@ export async function buildCompiler(opts: BuildOptions) {
     alias,
     plugins: [replace(replaceData)],
     outfile: join(opts.output.compilerDir, compilerFileName),
+    // workaround for fdir https://github.com/thecodrr/fdir/issues/163
+    inject: [join(opts.bundleHelpersDir, 'import-meta-url.js')],
+    define: {
+      'import.meta.url': 'import_meta_url',
+    },
   };
 
   // copy typescript default lib dts files

scripts/esbuild/helpers/import-meta-url.js

@@ -0,0 +1 @@
+export var import_meta_url = require('url').pathToFileURL(__filename);

src/app-data/index.ts

@@ -96,6 +96,7 @@ export const BUILD: BuildConditionals = {
   initializeNextTick: false,
   asyncLoading: true,
   asyncQueue: false,
+  // TODO: deprecated in favour of `setTagTransformer` and `transformTag`. Remove in 5.0
   transformTagName: false,
   attachStyles: true,
   // TODO(STENCIL-914): remove this option when `experimentalSlotFixes` is the default behavior

src/compiler/bundle/ext-transforms-plugin.ts

@@ -124,6 +124,8 @@ export const extTransformsPlugin = (
           file: pluginTransforms.id,
           input: pluginTransforms.code,
           tag: data.tag,
+          tags: buildCtx.components.map((c) => c.tagName),
+          addTagTransformers: !!buildCtx.config.extras.additionalTagTransformers,
           encapsulation: data.encapsulation,
           mode: data.mode,
           sourceMap: config.sourceMap,

src/compiler/config/test/validate-config.spec.ts

@@ -405,8 +405,58 @@ describe('validation', () => {
     expect(config.extras.slotChildNodesFix).toBe(false);
     expect(config.extras.initializeNextTick).toBe(false);
     expect(config.extras.tagNameTransform).toBe(false);
+    expect(config.extras.additionalTagTransformers).toBe(false);
     expect(config.extras.scopedSlotTextContentFix).toBe(false);
     expect(config.extras.addGlobalStyleToComponents).toBe(true);
+    expect(config.extras.additionalTagTransformers).toBe(false);
+  });
+
+  describe('extras.additionalTagTransformers', () => {
+    it('set extras.additionalTagTransformers false', () => {
+      userConfig.extras = { additionalTagTransformers: false };
+      const { config } = validateConfig(userConfig, bootstrapConfig);
+      expect(config.extras.additionalTagTransformers).toBe(false);
+    });
+
+    it('set extras.additionalTagTransformers true', () => {
+      userConfig.extras = { additionalTagTransformers: true };
+      const { config } = validateConfig(userConfig, bootstrapConfig);
+      expect(config.extras.additionalTagTransformers).toBe(true);
+    });
+
+    it('set extras.additionalTagTransformers true, dev mode', () => {
+      userConfig.devMode = true;
+      userConfig.extras = { additionalTagTransformers: true };
+      const { config } = validateConfig(userConfig, bootstrapConfig);
+      expect(config.extras.additionalTagTransformers).toBe(true);
+    });
+
+    it('prod mode, set extras.additionalTagTransformers', () => {
+      userConfig.devMode = false;
+      userConfig.extras = { additionalTagTransformers: true };
+      const { config } = validateConfig(userConfig, bootstrapConfig);
+      expect(config.extras.additionalTagTransformers).toBe(true);
+    });
+
+    it('build extras.additionalTagTransformers when set to "prod" and in prod', () => {
+      userConfig.devMode = false;
+      userConfig.extras = { additionalTagTransformers: 'prod' };
+      const { config } = validateConfig(userConfig, bootstrapConfig);
+      expect(config.extras.additionalTagTransformers).toBe(true);
+    });
+
+    it('do not build extras.additionalTagTransformers when set to "prod" and in dev', () => {
+      userConfig.devMode = true;
+      userConfig.extras = { additionalTagTransformers: 'prod' };
+      const { config } = validateConfig(userConfig, bootstrapConfig);
+      expect(config.extras.additionalTagTransformers).toBe(false);
+    });
+
+    it('prod mode default to only modern and not extras.additionalTagTransformers', () => {
+      userConfig.devMode = false;
+      const { config } = validateConfig(userConfig, bootstrapConfig);
+      expect(config.extras.additionalTagTransformers).toBe(false);
+    });
   });
 
   it('should set slot config based on `experimentalSlotFixes`', () => {

src/compiler/config/transpile-options.ts

@@ -163,6 +163,8 @@ export const getTranspileCssConfig = (
     file: results.inputFilePath,
     input: results.code,
     tag: importData && importData.tag,
+    tags: [...(compileOpts.tagsToTransform || importData?.tag)],
+    addTagTransformers: compileOpts && compileOpts.additionalTagTransformers === true,
     encapsulation: importData && importData.encapsulation,
     mode: importData && importData.mode,
     sourceMap: compileOpts.sourceMap !== false,

src/compiler/config/validate-config.ts

@@ -150,6 +150,9 @@ export const validateConfig = (
   validatedConfig.extras.scriptDataOpts = !!validatedConfig.extras.scriptDataOpts;
   validatedConfig.extras.initializeNextTick = !!validatedConfig.extras.initializeNextTick;
   validatedConfig.extras.tagNameTransform = !!validatedConfig.extras.tagNameTransform;
+  validatedConfig.extras.additionalTagTransformers =
+    validatedConfig.extras.additionalTagTransformers === true ||
+    (!devMode && validatedConfig.extras.additionalTagTransformers === 'prod');
   validatedConfig.extras.addGlobalStyleToComponents = validatedConfig.extras.addGlobalStyleToComponents !== false;
 
   // TODO(STENCIL-914): remove when `experimentalSlotFixes` is the default behavior

src/compiler/output-targets/dist-custom-elements/index.ts

@@ -23,6 +23,7 @@ import { removeCollectionImports } from '../../transformers/remove-collection-im
 import { rewriteAliasedSourceFileImportPaths } from '../../transformers/rewrite-aliased-paths';
 import { updateStencilCoreImports } from '../../transformers/update-stencil-core-import';
 import { getCustomElementsBuildConditionals } from './custom-elements-build-conditionals';
+import { addTagTransform } from '../../transformers/add-tag-transform';
 
 /**
  * Main output target function for `dist-custom-elements`. This function just
@@ -76,7 +77,13 @@ export const getBundleOptions = (
   id: 'customElements',
   platform: 'client',
   conditionals: getCustomElementsBuildConditionals(config, buildCtx.components),
-  customBeforeTransformers: getCustomBeforeTransformers(config, compilerCtx, buildCtx.components, outputTarget),
+  customBeforeTransformers: getCustomBeforeTransformers(
+    config,
+    compilerCtx,
+    buildCtx.components,
+    outputTarget,
+    buildCtx,
+  ),
   externalRuntime: !!outputTarget.externalRuntime,
   inlineWorkers: true,
   inputs: {
@@ -267,15 +274,16 @@ export const generateEntryPoint = (
 
   // Content related to the `bundle` export behavior
   if (outputTarget.customElementsExportBehavior === 'bundle') {
+    imports.push(`import { transformTag } from '${STENCIL_INTERNAL_CLIENT_ID}';`);
     imports.push(...cmpImports);
     body.push(
       'export const defineCustomElements = (opts) => {',
       "    if (typeof customElements !== 'undefined') {",
       '        [',
       ...cmpNames.map((cmp) => `            ${cmp},`),
       '        ].forEach(cmp => {',
-      '            if (!customElements.get(cmp.is)) {',
-      '                customElements.define(cmp.is, cmp, opts);',
+      '            if (!customElements.get(transformTag(cmp.is))) {',
+      '                customElements.define(transformTag(cmp.is), cmp, opts);',
       '            }',
       '        });',
       '    }',
@@ -319,6 +327,7 @@ const getCustomBeforeTransformers = (
   compilerCtx: d.CompilerCtx,
   components: d.ComponentCompilerMeta[],
   outputTarget: d.OutputTargetDistCustomElements,
+  buildCtx: d.BuildCtx,
 ): ts.TransformerFactory<ts.SourceFile>[] => {
   const transformOpts: d.TransformOptions = {
     coreImportPath: STENCIL_INTERNAL_CLIENT_ID,
@@ -338,8 +347,12 @@ const getCustomBeforeTransformers = (
     customBeforeTransformers.push(rewriteAliasedSourceFileImportPaths);
   }
 
+  if (buildCtx.config.extras.additionalTagTransformers) {
+    customBeforeTransformers.push(addTagTransform(compilerCtx, buildCtx));
+  }
+
   customBeforeTransformers.push(
-    nativeComponentTransform(compilerCtx, transformOpts),
+    nativeComponentTransform(compilerCtx, transformOpts, buildCtx),
     proxyCustomElement(compilerCtx, transformOpts),
     removeCollectionImports(compilerCtx),
   );

src/compiler/output-targets/dist-hydrate-script/bundle-hydrate-factory.ts

@@ -7,6 +7,7 @@ import { bundleOutput } from '../../bundle/bundle-output';
 import { STENCIL_INTERNAL_HYDRATE_ID } from '../../bundle/entry-alias-ids';
 import { hydrateComponentTransform } from '../../transformers/component-hydrate/tranform-to-hydrate-component';
 import { removeCollectionImports } from '../../transformers/remove-collection-imports';
+import { addTagTransform } from '../../transformers/add-tag-transform';
 import { rewriteAliasedSourceFileImportPaths } from '../../transformers/rewrite-aliased-paths';
 import { updateStencilCoreImports } from '../../transformers/update-stencil-core-import';
 import { getHydrateBuildConditionals } from './hydrate-build-conditionals';
@@ -32,7 +33,7 @@ export const bundleHydrateFactory = async (
       id: 'hydrate',
       platform: 'hydrate',
       conditionals: getHydrateBuildConditionals(config, buildCtx.components),
-      customBeforeTransformers: getCustomBeforeTransformers(config, compilerCtx),
+      customBeforeTransformers: getCustomBeforeTransformers(config, compilerCtx, buildCtx),
       inlineDynamicImports: true,
       inputs: {
         '@app-factory-entry': '@app-factory-entry',
@@ -66,6 +67,7 @@ export const bundleHydrateFactory = async (
 const getCustomBeforeTransformers = (
   config: d.ValidatedConfig,
   compilerCtx: d.CompilerCtx,
+  buildCtx?: d.BuildCtx,
 ): ts.TransformerFactory<ts.SourceFile>[] => {
   const transformOpts: d.TransformOptions = {
     coreImportPath: STENCIL_INTERNAL_HYDRATE_ID,
@@ -82,8 +84,12 @@ const getCustomBeforeTransformers = (
     customBeforeTransformers.push(rewriteAliasedSourceFileImportPaths);
   }
 
+  if (buildCtx.config.extras.additionalTagTransformers) {
+    customBeforeTransformers.push(addTagTransform(compilerCtx, buildCtx));
+  }
+
   customBeforeTransformers.push(
-    hydrateComponentTransform(compilerCtx, transformOpts),
+    hydrateComponentTransform(compilerCtx, transformOpts, buildCtx),
     removeCollectionImports(compilerCtx),
   );
   return customBeforeTransformers;

src/compiler/output-targets/dist-hydrate-script/hydrate-factory-closure.ts

@@ -13,6 +13,10 @@ export const HYDRATE_FACTORY_INTRO = `
 // const ${MODE_RESOLUTION_CHAIN_DECLARATION}
 
 export function hydrateFactory($stencilWindow, $stencilHydrateOpts, $stencilHydrateResults, $stencilAfterHydrate, $stencilHydrateResolve) {
+  var everywhere;
+  try { everywhere = global || globalThis; } 
+  catch (e) { everywhere = window || globalThis; }
+
   var globalThis = $stencilWindow;
   var self = $stencilWindow;
   var top = $stencilWindow;

src/compiler/output-targets/dist-lazy/lazy-build-conditionals.ts

@@ -11,6 +11,7 @@ export const getLazyBuildConditionals = (
 
   build.lazyLoad = true;
   build.hydrateServerSide = false;
+  // TODO: deprecated in favour of `setTagTransformer` and `transformTag`. Remove in 5.0
   build.transformTagName = config.extras.tagNameTransform;
   build.asyncQueue = config.taskQueue === 'congestionAsync';
   build.taskQueue = config.taskQueue !== 'immediate';

src/compiler/output-targets/dist-lazy/lazy-output.ts

@@ -24,6 +24,7 @@ import { generateEsm } from './generate-esm';
 import { generateEsmBrowser } from './generate-esm-browser';
 import { generateSystem } from './generate-system';
 import { getLazyBuildConditionals } from './lazy-build-conditionals';
+import { addTagTransform } from '../../transformers/add-tag-transform';
 
 export const outputLazy = async (
   config: d.ValidatedConfig,
@@ -43,7 +44,7 @@ export const outputLazy = async (
       id: 'lazy',
       platform: 'client',
       conditionals: getLazyBuildConditionals(config, buildCtx.components),
-      customBeforeTransformers: getCustomBeforeTransformers(config, compilerCtx),
+      customBeforeTransformers: getCustomBeforeTransformers(config, compilerCtx, buildCtx),
       inlineWorkers: config.outputTargets.some(isOutputTargetDist),
       inputs: {
         [config.fsNamespace]: LAZY_BROWSER_ENTRY_ID,
@@ -110,6 +111,7 @@ export const outputLazy = async (
 const getCustomBeforeTransformers = (
   config: d.ValidatedConfig,
   compilerCtx: d.CompilerCtx,
+  buildCtx?: d.BuildCtx,
 ): ts.TransformerFactory<ts.SourceFile>[] => {
   const transformOpts: d.TransformOptions = {
     coreImportPath: STENCIL_CORE_ID,
@@ -126,8 +128,12 @@ const getCustomBeforeTransformers = (
     customBeforeTransformers.push(rewriteAliasedSourceFileImportPaths);
   }
 
+  if (buildCtx.config.extras.additionalTagTransformers) {
+    customBeforeTransformers.push(addTagTransform(compilerCtx, buildCtx));
+  }
+
   customBeforeTransformers.push(
-    lazyComponentTransform(compilerCtx, transformOpts),
+    lazyComponentTransform(compilerCtx, transformOpts, buildCtx),
     removeCollectionImports(compilerCtx),
   );
   return customBeforeTransformers;

src/compiler/output-targets/test/output-targets-dist-custom-elements.spec.ts

@@ -257,6 +257,7 @@ globalScripts();
         addCustomElementInputs(buildCtx, bundleOptions, config.outputTargets[0] as OutputTargetDistCustomElements);
         expect(bundleOptions.loader['\0core']).toEqual(
           `import { globalScripts } from '${STENCIL_APP_GLOBALS_ID}';
+import { transformTag } from '@stencil/core/internal/client';
 import { StubCmp } from '\0StubCmp';
 import { MyBestComponent } from '\0MyBestComponent';
 export { getAssetPath, setAssetPath, setNonce, setPlatformOptions, render } from '${STENCIL_INTERNAL_CLIENT_ID}';
@@ -269,8 +270,8 @@ export const defineCustomElements = (opts) => {
             StubCmp,
             MyBestComponent,
         ].forEach(cmp => {
-            if (!customElements.get(cmp.is)) {
-                customElements.define(cmp.is, cmp, opts);
+            if (!customElements.get(transformTag(cmp.is))) {
+                customElements.define(transformTag(cmp.is), cmp, opts);
             }
         });
     }

src/compiler/style/css-to-esm.ts

@@ -9,6 +9,9 @@ import { optimizeCss } from '../optimize/optimize-css';
 import { serializeImportPath } from '../transformers/stencil-import-path';
 import { getScopeId } from './scope-css';
 import { stripCssComments } from './style-utils';
+import { addTagTransformToCssString } from '../transformers/transform-utils';
+import { RUNTIME_APIS, TRANSFORM_TAG } from '../transformers/core-runtime-apis';
+import { STENCIL_CORE_ID } from '../bundle/entry-alias-ids';
 
 /**
  * A regular expression for matching CSS import statements
@@ -161,8 +164,15 @@ const generateTransformCssToEsm = (
 ): d.TransformCssToEsmOutput => {
   const s = new MagicString('');
 
+  if (input.addTagTransformers) {
+    results.styleText = addTagTransformToCssString(results.styleText, input.tags);
+  }
+
   if (input.module === 'cjs') {
     // CommonJS
+    if (input.addTagTransformers) {
+      s.append(`const ${TRANSFORM_TAG} = require('${STENCIL_CORE_ID}').${RUNTIME_APIS.transformTag};\n`);
+    }
     results.imports.forEach((cssImport) => {
       s.append(`const ${cssImport.varName} = require('${cssImport.importPath}');\n`);
     });
@@ -173,10 +183,13 @@ const generateTransformCssToEsm = (
       s.append(`${cssImport.varName} + `);
     });
 
-    s.append(`${JSON.stringify(results.styleText)};\n`);
+    s.append(`\`${results.styleText}\`;\n`);
     s.append(`module.exports = ${results.defaultVarName};`);
   } else {
     // ESM
+    if (input.addTagTransformers) {
+      s.append(`import { transformTag as ${TRANSFORM_TAG}  } from '${STENCIL_CORE_ID}';\n`);
+    }
     results.imports.forEach((cssImport) => {
       s.append(`import ${cssImport.varName} from '${cssImport.importPath}';\n`);
     });
@@ -187,7 +200,7 @@ const generateTransformCssToEsm = (
       s.append(`${cssImport.varName} + `);
     });
 
-    s.append(`${JSON.stringify(results.styleText)};\n`);
+    s.append(`\`${results.styleText}\`;\n`);
     s.append(`export default ${results.defaultVarName};`);
   }