diff --git a/BREAKING_CHANGES.md b/BREAKING_CHANGES.md index d89efbd7f36..37ec87cdcef 100644 --- a/BREAKING_CHANGES.md +++ b/BREAKING_CHANGES.md @@ -16,6 +16,7 @@ This is a comprehensive list of the breaking changes introduced in the major ver * [`dist-custom-elements` Type Declarations](#dist-custom-elements-type-declarations) * [Legacy Browser Support Fields Deprecated](#legacy-browser-support-fields-deprecated) * [`dynamicImportShim`](#dynamicimportshim) + * [`cssVarShim`](#cssvarshim) * [Deprecated `assetsDir` Removed from `@Component()` decorator](#deprecated-assetsdir-removed-from-component-decorator) * [Drop Node 12 Support](#drop-node-12-support) * [Strongly Typed Inputs](#strongly-typed-inputs) @@ -98,6 +99,25 @@ export const config: Config = { }; ``` +##### `cssVarShim` + +`extras.cssVarShim` causes Stencil to include a polyfill for [CSS +variables](https://developer.mozilla.org/en-US/docs/Web/CSS/--*). For Stencil +v3.0.0 this field is renamed to `__deprecated__cssVarsShim`. To retain the +previous behavior the new option can be set in your project's +`stencil.config.ts`: + +```ts +// stencil.config.ts +import { Config } from '@stencil/core'; + +export const config: Config = { + extras: { + __deprecated__cssVarsShim: true + } +}; +``` + #### Deprecated `assetsDir` Removed from `@Component()` decorator The `assetsDir` field was [deprecated in Stencil v2.0.0](#componentassetsdir), but some backwards compatibility was retained with a warning message. It has been fully removed in Stencil v3.0.0 in favor of `assetsDirs`. diff --git a/src/app-data/index.ts b/src/app-data/index.ts index 007c1feb199..1f9c17a0a02 100644 --- a/src/app-data/index.ts +++ b/src/app-data/index.ts @@ -72,6 +72,7 @@ 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, diff --git a/src/client/client-patch-browser.ts b/src/client/client-patch-browser.ts index 30c551d0c03..7d3a7c1f9be 100644 --- a/src/client/client-patch-browser.ts +++ b/src/client/client-patch-browser.ts @@ -10,8 +10,10 @@ export const patchBrowser = (): Promise => { 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; } diff --git a/src/client/client-patch-esm.ts b/src/client/client-patch-esm.ts index 6c4c34f623a..a0e165b013d 100644 --- a/src/client/client-patch-esm.ts +++ b/src/client/client-patch-esm.ts @@ -3,11 +3,13 @@ import { CSS, plt, promiseResolve, win } from '@platform'; export const patchEsm = () => { // NOTE!! This fn cannot use async/await! + // TODO(STENCIL-659): Remove code implementing the CSS variable shim // @ts-ignore if (BUILD.cssVarShim && !(CSS && CSS.supports && CSS.supports('color', 'var(--c)'))) { // @ts-ignore return import(/* webpackChunkName: "polyfills-css-shim" */ './polyfills/css-shim.js').then(() => { if ((plt.$cssShim$ = (win as any).__cssshim)) { + // TODO(STENCIL-659): Remove code implementing the CSS variable shim return plt.$cssShim$.i(); } else { // for better minification diff --git a/src/client/client-window.ts b/src/client/client-window.ts index ba14cb5f5b7..2c52be0170b 100644 --- a/src/client/client-window.ts +++ b/src/client/client-window.ts @@ -4,6 +4,7 @@ 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); diff --git a/src/client/polyfills/css-shim/css-parser.ts b/src/client/polyfills/css-shim/css-parser.ts index 52917a6bd92..cc69ca4159a 100644 --- a/src/client/polyfills/css-shim/css-parser.ts +++ b/src/client/polyfills/css-shim/css-parser.ts @@ -1,3 +1,4 @@ +// TODO(STENCIL-659): Remove code implementing the CSS variable shim /* Extremely simple css parser. Intended to be not more than what we need and definitely not necessarily correct =). diff --git a/src/client/polyfills/css-shim/custom-style.ts b/src/client/polyfills/css-shim/custom-style.ts index 9c7c5d3ac19..bb5cc2e1cc3 100644 --- a/src/client/polyfills/css-shim/custom-style.ts +++ b/src/client/polyfills/css-shim/custom-style.ts @@ -1,3 +1,4 @@ +// TODO(STENCIL-659): Remove code implementing the CSS variable shim import { CssVarShim } from '../../../declarations'; import { CSSScope } from './interfaces'; import { addGlobalLink, loadDocument, startWatcher } from './load-link-styles'; @@ -5,6 +6,7 @@ import { addGlobalStyle, parseCSS, reScope, updateGlobalScopes } from './scope'; import { getActiveSelectors, resolveValues } from './selectors'; import { executeTemplate } from './template'; +// TODO(STENCIL-659): Remove code implementing the CSS variable shim export class CustomStyle implements CssVarShim { private count = 0; private hostStyleMap = new WeakMap(); diff --git a/src/client/polyfills/css-shim/index.ts b/src/client/polyfills/css-shim/index.ts index 7f79c034986..f89c1c5a8ed 100644 --- a/src/client/polyfills/css-shim/index.ts +++ b/src/client/polyfills/css-shim/index.ts @@ -1,3 +1,4 @@ +// TODO(STENCIL-659): Remove code implementing the CSS variable shim import { CustomStyle } from './custom-style'; (function (win: any) { diff --git a/src/client/polyfills/css-shim/interfaces.ts b/src/client/polyfills/css-shim/interfaces.ts index e23cad64521..7c8a3d2a25a 100644 --- a/src/client/polyfills/css-shim/interfaces.ts +++ b/src/client/polyfills/css-shim/interfaces.ts @@ -1,3 +1,4 @@ +// TODO(STENCIL-659): Remove code implementing the CSS variable shim export type CSSVariables = { [prop: string]: string }; export type CSSEval = (p: CSSVariables) => string; export type CSSSegment = string | CSSEval; diff --git a/src/client/polyfills/css-shim/load-link-styles.ts b/src/client/polyfills/css-shim/load-link-styles.ts index 5a542099c55..2067cc2d36d 100644 --- a/src/client/polyfills/css-shim/load-link-styles.ts +++ b/src/client/polyfills/css-shim/load-link-styles.ts @@ -1,3 +1,4 @@ +// TODO(STENCIL-659): Remove code implementing the CSS variable shim import { CSSScope } from './interfaces'; import { addGlobalStyle, updateGlobalScopes } from './scope'; diff --git a/src/client/polyfills/css-shim/regex.ts b/src/client/polyfills/css-shim/regex.ts index 7943a9c9ed5..7ab981634eb 100644 --- a/src/client/polyfills/css-shim/regex.ts +++ b/src/client/polyfills/css-shim/regex.ts @@ -1,3 +1,4 @@ +// TODO(STENCIL-659): Remove code implementing the CSS variable shim export const VAR_USAGE_START = /\bvar\(/; export const VAR_ASSIGN_START = /\B--[\w-]+\s*:/; diff --git a/src/client/polyfills/css-shim/scope.ts b/src/client/polyfills/css-shim/scope.ts index a6b6cc6879e..811c8be297a 100644 --- a/src/client/polyfills/css-shim/scope.ts +++ b/src/client/polyfills/css-shim/scope.ts @@ -1,3 +1,4 @@ +// TODO(STENCIL-659): Remove code implementing the CSS variable shim import { parse } from './css-parser'; import { CSSScope } from './interfaces'; import { getSelectors, getSelectorsForScopes, resolveValues } from './selectors'; diff --git a/src/client/polyfills/css-shim/selectors.ts b/src/client/polyfills/css-shim/selectors.ts index f9e98a326a2..43ae37b80e8 100644 --- a/src/client/polyfills/css-shim/selectors.ts +++ b/src/client/polyfills/css-shim/selectors.ts @@ -1,3 +1,4 @@ +// TODO(STENCIL-659): Remove code implementing the CSS variable shim import { StyleNode, types } from './css-parser'; import { CSSScope, CSSSelector, CSSTemplate, Declaration } from './interfaces'; import { compileTemplate, executeTemplate } from './template'; diff --git a/src/client/polyfills/css-shim/template.ts b/src/client/polyfills/css-shim/template.ts index b6cb63cb918..90e1c200e99 100644 --- a/src/client/polyfills/css-shim/template.ts +++ b/src/client/polyfills/css-shim/template.ts @@ -1,3 +1,4 @@ +// TODO(STENCIL-659): Remove code implementing the CSS variable shim import { CSSTemplate, CSSVariables } from './interfaces'; import { COMMENTS, TRAILING_LINES, VAR_ASSIGN_START, VAR_USAGE_START } from './regex'; import { findRegex } from './utils'; diff --git a/src/client/polyfills/css-shim/test/compiler.spec.ts b/src/client/polyfills/css-shim/test/compiler.spec.ts index 4ddd9068ae0..869cfb71c4f 100644 --- a/src/client/polyfills/css-shim/test/compiler.spec.ts +++ b/src/client/polyfills/css-shim/test/compiler.spec.ts @@ -1,3 +1,4 @@ +// TODO(STENCIL-659): Remove code implementing the CSS variable shim import { compileTemplate, compileVar, executeTemplate, findVarEndIndex, parseVar } from '../template'; describe('compiler', () => { diff --git a/src/client/polyfills/css-shim/test/css-shim.spec.ts b/src/client/polyfills/css-shim/test/css-shim.spec.ts index 5e3a93cd419..aab4ff9a248 100644 --- a/src/client/polyfills/css-shim/test/css-shim.spec.ts +++ b/src/client/polyfills/css-shim/test/css-shim.spec.ts @@ -1,3 +1,4 @@ +// TODO(STENCIL-659): Remove code implementing the CSS variable shim import { mockWindow } from '@stencil/core/testing'; import { CustomStyle } from '../custom-style'; diff --git a/src/client/polyfills/css-shim/test/init-css-shim.spec.ts b/src/client/polyfills/css-shim/test/init-css-shim.spec.ts index c0bd91c1f1c..9aeecbada3c 100644 --- a/src/client/polyfills/css-shim/test/init-css-shim.spec.ts +++ b/src/client/polyfills/css-shim/test/init-css-shim.spec.ts @@ -1,3 +1,4 @@ +// TODO(STENCIL-659): Remove code implementing the CSS variable shim import { fixRelativeUrls, hasCssVariables, hasRelativeUrls } from '../load-link-styles'; describe('hasCssVariables', () => { diff --git a/src/client/polyfills/css-shim/test/utils.spec.ts b/src/client/polyfills/css-shim/test/utils.spec.ts index 4735c76833d..982e4a0814b 100644 --- a/src/client/polyfills/css-shim/test/utils.spec.ts +++ b/src/client/polyfills/css-shim/test/utils.spec.ts @@ -1,3 +1,4 @@ +// TODO(STENCIL-659): Remove code implementing the CSS variable shim import { CSSSelector, Declaration } from '../interfaces'; import { parseCSS } from '../scope'; import { getDeclarations, normalizeValue, resolveValues } from '../selectors'; diff --git a/src/client/polyfills/css-shim/utils.ts b/src/client/polyfills/css-shim/utils.ts index fb0d19a2fd0..112fe90baf2 100644 --- a/src/client/polyfills/css-shim/utils.ts +++ b/src/client/polyfills/css-shim/utils.ts @@ -1,3 +1,4 @@ +// TODO(STENCIL-659): Remove code implementing the CSS variable shim export const GLOBAL_SCOPE = ':root'; export function findRegex(regex: RegExp, cssText: string, offset: number) { diff --git a/src/compiler/app-core/app-polyfills.ts b/src/compiler/app-core/app-polyfills.ts index ad2b267313f..6b7c7ed357c 100644 --- a/src/compiler/app-core/app-polyfills.ts +++ b/src/compiler/app-core/app-polyfills.ts @@ -19,7 +19,8 @@ export const getAppBrowserCorePolyfills = async (config: d.Config, compilerCtx: // read all the polyfill content, in this particular order const polyfills = INLINE_POLYFILLS.slice(); - if (config.extras.cssVarsShim) { + // TODO(STENCIL-659): Remove code implementing the CSS variable shim + if (config.extras.__deprecated__cssVarsShim) { polyfills.push(INLINE_CSS_SHIM); } diff --git a/src/compiler/config/test/validate-config.spec.ts b/src/compiler/config/test/validate-config.spec.ts index 75e48109dc9..5eb6b1e23cb 100644 --- a/src/compiler/config/test/validate-config.spec.ts +++ b/src/compiler/config/test/validate-config.spec.ts @@ -354,7 +354,8 @@ describe('validation', () => { const { config } = validateConfig(userConfig, bootstrapConfig); expect(config.extras.appendChildSlotFix).toBe(false); expect(config.extras.cloneNodeFix).toBe(false); - expect(config.extras.cssVarsShim).toBe(false); + // TODO(STENCIL-659): Remove code implementing the CSS variable shim + expect(config.extras.__deprecated__cssVarsShim).toBe(false); // TODO(STENCIL-661): Remove code related to the dynamic import shim expect(config.extras.__deprecated__dynamicImportShim).toBe(false); expect(config.extras.lifecycleDOMEvents).toBe(false); diff --git a/src/compiler/config/validate-config.ts b/src/compiler/config/validate-config.ts index f1c49081068..bcb32a461cd 100644 --- a/src/compiler/config/validate-config.ts +++ b/src/compiler/config/validate-config.ts @@ -71,7 +71,8 @@ export const validateConfig = ( validatedConfig.extras = validatedConfig.extras || {}; validatedConfig.extras.appendChildSlotFix = !!validatedConfig.extras.appendChildSlotFix; validatedConfig.extras.cloneNodeFix = !!validatedConfig.extras.cloneNodeFix; - validatedConfig.extras.cssVarsShim = !!validatedConfig.extras.cssVarsShim; + // TODO(STENCIL-659): Remove code implementing the CSS variable shim + validatedConfig.extras.__deprecated__cssVarsShim = !!validatedConfig.extras.__deprecated__cssVarsShim; // TODO(STENCIL-661): Remove code related to the dynamic import shim validatedConfig.extras.__deprecated__dynamicImportShim = !!validatedConfig.extras.__deprecated__dynamicImportShim; validatedConfig.extras.lifecycleDOMEvents = !!validatedConfig.extras.lifecycleDOMEvents; diff --git a/src/compiler/output-targets/dist-hydrate-script/hydrate-build-conditionals.ts b/src/compiler/output-targets/dist-hydrate-script/hydrate-build-conditionals.ts index ca7b25c4fb0..87738029159 100644 --- a/src/compiler/output-targets/dist-hydrate-script/hydrate-build-conditionals.ts +++ b/src/compiler/output-targets/dist-hydrate-script/hydrate-build-conditionals.ts @@ -7,6 +7,7 @@ export const getHydrateBuildConditionals = (cmps: d.ComponentCompilerMeta[]) => build.slotRelocation = true; build.lazyLoad = true; build.hydrateServerSide = true; + // TODO(STENCIL-659): Remove code implementing the CSS variable shim build.cssVarShim = false; build.hydrateClientSide = true; build.isDebug = false; diff --git a/src/compiler/output-targets/dist-lazy/lazy-build-conditionals.ts b/src/compiler/output-targets/dist-lazy/lazy-build-conditionals.ts index 66015090d67..57f5db143b6 100644 --- a/src/compiler/output-targets/dist-lazy/lazy-build-conditionals.ts +++ b/src/compiler/output-targets/dist-lazy/lazy-build-conditionals.ts @@ -10,7 +10,8 @@ export const getLazyBuildConditionals = ( build.lazyLoad = true; build.hydrateServerSide = false; - build.cssVarShim = config.extras.cssVarsShim; + // TODO(STENCIL-659): Remove code implementing the CSS variable shim + build.cssVarShim = config.extras.__deprecated__cssVarsShim; build.transformTagName = config.extras.tagNameTransform; build.asyncQueue = config.taskQueue === 'congestionAsync'; build.taskQueue = config.taskQueue !== 'immediate'; diff --git a/src/declarations/stencil-private.ts b/src/declarations/stencil-private.ts index ad94ffb1eb3..36145967ed6 100644 --- a/src/declarations/stencil-private.ts +++ b/src/declarations/stencil-private.ts @@ -169,6 +169,7 @@ export interface BuildConditionals extends Partial { cssAnnotations?: boolean; lazyLoad?: boolean; profile?: boolean; + // TODO(STENCIL-659): Remove code implementing the CSS variable shim cssVarShim?: boolean; constructableCSS?: boolean; appendChildSlotFix?: boolean; @@ -1079,6 +1080,7 @@ export interface HostRuleHeader { value?: string; } +// TODO(STENCIL-659): Remove code implementing the CSS variable shim export interface CssVarShim { i(): Promise; addLink(linkEl: HTMLLinkElement): Promise; @@ -1694,6 +1696,7 @@ export interface HostRef { } export interface PlatformRuntime { + // TODO(STENCIL-659): Remove code implementing the CSS variable shim $cssShim$?: CssVarShim; $flags$: number; $orgLocNodes$?: Map; diff --git a/src/declarations/stencil-public-compiler.ts b/src/declarations/stencil-public-compiler.ts index 68cdb66d8d6..bbf2975648e 100644 --- a/src/declarations/stencil-public-compiler.ts +++ b/src/declarations/stencil-public-compiler.ts @@ -267,11 +267,15 @@ export interface ConfigExtras { */ cloneNodeFix?: boolean; + // TODO(STENCIL-659): Remove code implementing the CSS variable shim /** * Include the CSS Custom Property polyfill/shim for legacy browsers. ESM builds will * not include the css vars shim. Defaults to `false` + * + * @deprecated Since Stencil v3.0.0. IE 11, Edge <= 18, and old Safari + * versions are no longer supported. */ - cssVarsShim?: boolean; + __deprecated__cssVarsShim?: boolean; // TODO(STENCIL-661): Remove code related to the dynamic import shim /** diff --git a/src/runtime/disconnected-callback.ts b/src/runtime/disconnected-callback.ts index 6a899ce0f72..904e7f46aa6 100644 --- a/src/runtime/disconnected-callback.ts +++ b/src/runtime/disconnected-callback.ts @@ -18,7 +18,9 @@ export const disconnectedCallback = (elm: d.HostElement) => { } // clear CSS var-shim tracking + // TODO(STENCIL-659): Remove code implementing the CSS variable shim if (BUILD.cssVarShim && plt.$cssShim$) { + // TODO(STENCIL-659): Remove code implementing the CSS variable shim plt.$cssShim$.removeHost(elm); } diff --git a/src/runtime/styles.ts b/src/runtime/styles.ts index 28b9ce7f4d6..2e3959ed4a7 100644 --- a/src/runtime/styles.ts +++ b/src/runtime/styles.ts @@ -56,7 +56,9 @@ export const addStyle = ( // This is only happening on native shadow-dom, do not needs CSS var shim styleElm.innerHTML = style; } else { + // TODO(STENCIL-659): Remove code implementing the CSS variable shim if (BUILD.cssVarShim && plt.$cssShim$) { + // TODO(STENCIL-659): Remove code implementing the CSS variable shim styleElm = plt.$cssShim$.createHostStyle( hostElm, scopeId, diff --git a/src/runtime/update-component.ts b/src/runtime/update-component.ts index 262be1eaa5c..86ebe2a41ca 100644 --- a/src/runtime/update-component.ts +++ b/src/runtime/update-component.ts @@ -87,7 +87,9 @@ const updateComponent = async (hostRef: d.HostRef, instance: any, isInitialLoad: } else { callRender(hostRef, instance, elm); } + // TODO(STENCIL-659): Remove code implementing the CSS variable shim if (BUILD.cssVarShim && plt.$cssShim$) { + // TODO(STENCIL-659): Remove code implementing the CSS variable shim plt.$cssShim$.updateHost(elm); } if (BUILD.isDev) { diff --git a/src/testing/platform/testing-platform.ts b/src/testing/platform/testing-platform.ts index 07431fc86d9..934d49ebbdd 100644 --- a/src/testing/platform/testing-platform.ts +++ b/src/testing/platform/testing-platform.ts @@ -26,6 +26,7 @@ export const setPlatformHelpers = (helpers: { Object.assign(plt, helpers); }; +// TODO(STENCIL-659): Remove code implementing the CSS variable shim export const cssVarShim: d.CssVarShim = false as any; export const supportsListenerOptions = true; export const supportsConstructableStylesheets = false;