chore(compiler/runtime): remove CSS var shim & patchEsm() (#4419)

* remove CSS var shim & patchEsm

* remove `cssVarShim` references from some tests

* remove some errant code

* add field removal to breaking changes

* fix build error

BREAKING_CHANGES.md

@@ -18,6 +18,12 @@ This is a comprehensive list of the breaking changes introduced in the major ver
 
 #### Legacy Browser Support Fields Removed
 
+##### `__deprecated__cssVarsShim`
+
+`extras.__deprecated__cssVarsShim` causes Stencil to include a polyfill for [CSS
+variables](https://developer.mozilla.org/en-US/docs/Web/CSS/--*). For Stencil
+v4.0.0 this field and corresponding behavior has been removed.
+
 ##### `__deprecated__dynamicImportShim`
 
 The `extras.__deprecated__dynamicImportShim` option causes Stencil to include a polyfill for

scripts/bundles/internal-platform-client.ts

@@ -1,8 +1,7 @@
 import fs from 'fs-extra';
 import glob from 'glob';
 import { basename, join } from 'path';
-import { rollup, RollupOptions } from 'rollup';
-import ts from 'typescript';
+import { RollupOptions } from 'rollup';
 
 import { getBanner } from '../utils/banner';
 import type { BuildOptions } from '../utils/options';
@@ -85,52 +84,6 @@ export async function internalClient(opts: BuildOptions) {
           }
         },
       },
-      {
-        name: 'internalClientRuntimeCssShim',
-        resolveId(importee) {
-          if (importee === './polyfills/css-shim.js') {
-            return importee;
-          }
-          return null;
-        },
-
-        async load(id) {
-          // bundle the css-shim into one file
-          if (id === './polyfills/css-shim.js') {
-            const rollupBuild = await rollup({
-              input: join(inputClientDir, 'polyfills', 'css-shim', 'index.js'),
-              onwarn: (message) => {
-                if (/top level of an ES module/.test(message as any)) return;
-                console.error(message);
-              },
-            });
-
-            const { output } = await rollupBuild.generate({ format: 'es' });
-
-            const { minify } = await import('terser');
-
-            const transpileToEs5 = ts.transpileModule(output[0].code, {
-              compilerOptions: {
-                target: ts.ScriptTarget.ES5,
-              },
-            });
-
-            let code = transpileToEs5.outputText;
-
-            if (opts.isProd) {
-              const minifyResults = await minify(code);
-              code = minifyResults.code;
-            }
-
-            const dest = join(outputInternalClientPolyfillsDir, 'css-shim.js');
-            await fs.writeFile(dest, code);
-
-            return code;
-          }
-          return null;
-        },
-      },
-
       {
         name: 'internalClientRuntimePolyfills',
         resolveId(importee) {
@@ -148,18 +101,7 @@ export async function internalClient(opts: BuildOptions) {
     ],
   };
 
-  const internalClientPatchEsmBundle = { ...internalClientPatchBrowserBundle };
-  internalClientPatchEsmBundle.input = join(inputClientDir, 'client-patch-esm.js');
-  internalClientPatchEsmBundle.output = {
-    format: 'es',
-    dir: outputInternalClientDir,
-    entryFileNames: 'patch-esm.js',
-    chunkFileNames: '[name].js',
-    banner: getBanner(opts, 'Stencil Client Patch Esm'),
-    preferConst: true,
-  };
-
-  return [internalClientBundle, internalClientPatchBrowserBundle, internalClientPatchEsmBundle];
+  return [internalClientBundle, internalClientPatchBrowserBundle];
 }
 
 async function copyPolyfills(opts: BuildOptions, outputInternalClientPolyfillsDir: string) {

scripts/test/validate-build.ts

@@ -316,7 +316,6 @@ async function validateTreeshaking(opts: BuildOptions) {
   await validateModuleTreeshake(opts, 'app-data', join(opts.output.internalDir, 'app-data', 'index.js'));
   await validateModuleTreeshake(opts, 'client', join(opts.output.internalDir, 'client', 'index.js'));
   await validateModuleTreeshake(opts, 'patch-browser', join(opts.output.internalDir, 'client', 'patch-browser.js'));
-  await validateModuleTreeshake(opts, 'patch-esm', join(opts.output.internalDir, 'client', 'patch-esm.js'));
   await validateModuleTreeshake(opts, 'shadow-css', join(opts.output.internalDir, 'client', 'shadow-css.js'));
   await validateModuleTreeshake(opts, 'hydrate', join(opts.output.internalDir, 'hydrate', 'index.js'));
   await validateModuleTreeshake(opts, 'stencil-core', join(opts.output.internalDir, 'stencil-core', 'index.js'));

src/app-data/index.ts

@@ -72,8 +72,6 @@ export const BUILD: BuildConditionals = {
   propBoolean: true,
   propNumber: true,
   propString: true,
-  // TODO(STENCIL-659): Remove code implementing the CSS variable shim
-  cssVarShim: false,
   constructableCSS: true,
   cmpShouldUpdate: true,
   devTools: false,

src/client/client-patch-browser.ts

@@ -1,5 +1,5 @@
 import { BUILD, NAMESPACE } from '@app-data';
-import { consoleDevInfo, doc, H, plt, promiseResolve, win } from '@platform';
+import { consoleDevInfo, doc, H, promiseResolve } from '@platform';
 
 import type * as d from '../declarations';
 
@@ -9,13 +9,6 @@ export const patchBrowser = (): Promise<d.CustomElementsDefineOptions> => {
     consoleDevInfo('Running in development mode.');
   }
 
-  // TODO(STENCIL-659): Remove code implementing the CSS variable shim
-  if (BUILD.cssVarShim) {
-    // shim css vars
-    // TODO(STENCIL-659): Remove code implementing the CSS variable shim
-    plt.$cssShim$ = (win as any).__cssshim;
-  }
-
   if (BUILD.cloneNodeFix) {
     // opted-in to polyfill cloneNode() for slot polyfilled components
     patchCloneNodeFix((H as any).prototype);

src/client/client-window.ts

@@ -4,9 +4,6 @@ import type * as d from '../declarations';
 
 export const win = typeof window !== 'undefined' ? window : ({} as Window);
 
-// TODO(STENCIL-659): Remove code implementing the CSS variable shim
-export const CSS = BUILD.cssVarShim ? (win as any).CSS : null;
-
 export const doc = win.document || ({ head: {} } as Document);
 
 export const H = ((win as any).HTMLElement || (class {} as any)) as HTMLElement;