diff --git a/BREAKING_CHANGES.md b/BREAKING_CHANGES.md index d3864e5f14c..dd030c64c6e 100644 --- a/BREAKING_CHANGES.md +++ b/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 diff --git a/scripts/bundles/internal-platform-client.ts b/scripts/bundles/internal-platform-client.ts index cdb5a152daa..1cccebbda59 100644 --- a/scripts/bundles/internal-platform-client.ts +++ b/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) { diff --git a/scripts/test/validate-build.ts b/scripts/test/validate-build.ts index 5ebe04f023b..30b68e653c0 100644 --- a/scripts/test/validate-build.ts +++ b/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')); diff --git a/src/app-data/index.ts b/src/app-data/index.ts index 1f6a94062ad..dfe3d677fe6 100644 --- a/src/app-data/index.ts +++ b/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, diff --git a/src/client/client-patch-browser.ts b/src/client/client-patch-browser.ts index 8eb930a4051..de8794dfcda 100644 --- a/src/client/client-patch-browser.ts +++ b/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 => { 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); diff --git a/src/client/client-patch-esm.ts b/src/client/client-patch-esm.ts deleted file mode 100644 index a0e165b013d..00000000000 --- a/src/client/client-patch-esm.ts +++ /dev/null @@ -1,21 +0,0 @@ -import { BUILD } from '@app-data'; -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 - return 0; - } - }); - } - return promiseResolve(); -}; diff --git a/src/client/client-window.ts b/src/client/client-window.ts index 5bc62a2c4bf..baf0309000d 100644 --- a/src/client/client-window.ts +++ b/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; diff --git a/src/client/polyfills/css-shim/css-parser.ts b/src/client/polyfills/css-shim/css-parser.ts deleted file mode 100644 index cc69ca4159a..00000000000 --- a/src/client/polyfills/css-shim/css-parser.ts +++ /dev/null @@ -1,238 +0,0 @@ -// 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 =). -*/ - -'use strict'; - -/** @unrestricted */ -export class StyleNode { - start = 0; - end = 0; - previous: StyleNode | null = null; - parent: StyleNode | null = null; - rules: StyleNode[] | null = null; - parsedCssText = ''; - cssText = ''; - atRule = false; - type = 0; - keyframesName: string | undefined = ''; - selector = ''; - parsedSelector = ''; -} - -/** - * Given a string of CSS, return a simple rule tree - * @param text the CSS to generate a tree from - * @returns the generated tree - */ -export function parse(text: string): StyleNode { - text = clean(text); - return parseCss(lex(text), text); -} - -/** - * Remove text that may hinder parsing, such as comments and `@import` statements - * @param cssText the CSS to remove unnecessary bit from - * @returns the 'cleaned' css string - */ -function clean(cssText: string): string { - return cssText.replace(RX.comments, '').replace(RX.port, ''); -} - -/** - * Create a `StyleNode` for the given text. This function is a super simple lexer against the provided text to capture - * CSS rules between curly braces. - * @param text the text to parse containing CSS rules - * @returns a new `StyleNode` with the parsed styles attached to it - */ -function lex(text: string): StyleNode { - const root = new StyleNode(); - root['start'] = 0; - root['end'] = text.length; - let n = root; - for (let i = 0, l = text.length; i < l; i++) { - if (text[i] === OPEN_BRACE) { - if (!n['rules']) { - n['rules'] = []; - } - const p = n; - const previous = p['rules'][p['rules'].length - 1] || null; - n = new StyleNode(); - n['start'] = i + 1; - n['parent'] = p; - n['previous'] = previous; - p['rules'].push(n); - } else if (text[i] === CLOSE_BRACE) { - n['end'] = i + 1; - n = n['parent'] || root; - } - } - return root; -} - -/** - * Add selectors/cssText to a style node - * @param node the CSS node to add styles to - * @param text the selectors to add to the style node - * @returns the updated style node - */ -function parseCss(node: StyleNode, text: string): StyleNode { - let t = text.substring(node['start'], node['end'] - 1); - node['parsedCssText'] = node['cssText'] = t.trim(); - if (node.parent) { - const ss = node.previous ? node.previous['end'] : node.parent['start']; - t = text.substring(ss, node['start'] - 1); - t = _expandUnicodeEscapes(t); - t = t.replace(RX.multipleSpaces, ' '); - // TODO(sorvell): ad hoc; make selector include only after last ; - // helps with mixin syntax - t = t.substring(t.lastIndexOf(';') + 1); - const s = (node['parsedSelector'] = node['selector'] = t.trim()); - node['atRule'] = s.indexOf(AT_START) === 0; - // note, support a subset of rule types... - if (node['atRule']) { - if (s.indexOf(MEDIA_START) === 0) { - node['type'] = types.MEDIA_RULE; - } else if (s.match(RX.keyframesRule)) { - node['type'] = types.KEYFRAMES_RULE; - node['keyframesName'] = node['selector'].split(RX.multipleSpaces).pop(); - } - } else { - if (s.indexOf(VAR_START) === 0) { - node['type'] = types.MIXIN_RULE; - } else { - node['type'] = types.STYLE_RULE; - } - } - } - const r$ = node['rules']; - if (r$) { - for (let i = 0, l = r$.length, r; i < l && (r = r$[i]); i++) { - parseCss(r, text); - } - } - return node; -} - -/** - * Conversion of unicode escapes with spaces like `\33 ` (and longer) into - * expanded form that doesn't require trailing space -> `\000033` - * @param s the unicode escape sequence to expand - * @returns the expanded escape sequence - */ -function _expandUnicodeEscapes(s: string): string { - return s.replace(/\\([0-9a-f]{1,6})\s/gi, function () { - // eslint-disable-next-line prefer-rest-params -- We need to use this here for browser support - let code = arguments[1], - repeat = 6 - code.length; - while (repeat--) { - code = '0' + code; - } - return '\\' + code; - }); -} - -/** - * Stringify some parsed CSS. - * @param node the CSS root node to stringify - * @param preserveProperties if `false`, custom CSS properties will be removed from the CSS. If `true`, they will be - * preserved. - * @param text an optional string to append the stringified CSS to - * @returns the stringified CSS. - */ -export function stringify(node: StyleNode, preserveProperties: boolean, text = ''): string { - // calc rule cssText - let cssText = ''; - if (node['cssText'] || node['rules']) { - const r$ = node['rules']; - if (r$ && !_hasMixinRules(r$)) { - for (let i = 0, l = r$.length, r; i < l && (r = r$[i]); i++) { - cssText = stringify(r, preserveProperties, cssText); - } - } else { - cssText = preserveProperties ? node['cssText'] : removeCustomProps(node['cssText']); - cssText = cssText.trim(); - if (cssText) { - cssText = ' ' + cssText + '\n'; - } - } - } - // emit rule if there is cssText - if (cssText) { - if (node['selector']) { - text += node['selector'] + ' ' + OPEN_BRACE + '\n'; - } - text += cssText; - if (node['selector']) { - text += CLOSE_BRACE + '\n\n'; - } - } - return text; -} - -/** - * Determines if a parsed CSS node has a selector that begins with '--' or not - * @param rules the rules to evaluate. only the first rule in the provided list will be tested. - * @returns `true` if a selector that begins with '--' is found, `false` otherwise. - */ -function _hasMixinRules(rules: ReadonlyArray): boolean { - const r = rules[0]; - return Boolean(r) && Boolean(r['selector']) && r['selector'].indexOf(VAR_START) === 0; -} - -/** - * Helper function to remove custom properties from CSS - * @param cssText the stringified CSS to remove custom properties from - * @returns the sanitized CSS - */ -function removeCustomProps(cssText: string): string { - cssText = removeCustomPropAssignment(cssText); - return removeCustomPropApply(cssText); -} - -/** - * - * @param cssText the stringified CSS to remove custom properties from - * @returns the sanitized CSS - */ -export function removeCustomPropAssignment(cssText: string): string { - return cssText.replace(RX.customProp, '').replace(RX.mixinProp, ''); -} - -/** - * - * @param cssText the stringified CSS to remove custom properties from - * @returns the sanitized CSS - */ -function removeCustomPropApply(cssText: string): string { - return cssText.replace(RX.mixinApply, '').replace(RX.varApply, ''); -} - -/** @enum {number} */ -export const types = { - STYLE_RULE: 1, - KEYFRAMES_RULE: 7, - MEDIA_RULE: 4, - MIXIN_RULE: 1000, -}; - -const OPEN_BRACE = '{'; -const CLOSE_BRACE = '}'; - -// helper regexp's -const RX = { - comments: /\/\*[^*]*\*+([^/*][^*]*\*+)*\//gim, - port: /@import[^;]*;/gim, - customProp: /(?:^[^;\-\s}]+)?--[^;{}]*?:[^{};]*?(?:[;\n]|$)/gim, - mixinProp: /(?:^[^;\-\s}]+)?--[^;{}]*?:[^{};]*?{[^}]*?}(?:[;\n]|$)?/gim, - mixinApply: /@apply\s*\(?[^);]*\)?\s*(?:[;\n]|$)?/gim, - varApply: /[^;:]*?:[^;]*?var\([^;]*\)(?:[;\n]|$)?/gim, - keyframesRule: /^@[^\s]*keyframes/, - multipleSpaces: /\s+/g, -}; - -const VAR_START = '--'; -const MEDIA_START = '@media'; -const AT_START = '@'; diff --git a/src/client/polyfills/css-shim/custom-style.ts b/src/client/polyfills/css-shim/custom-style.ts deleted file mode 100644 index bb5cc2e1cc3..00000000000 --- a/src/client/polyfills/css-shim/custom-style.ts +++ /dev/null @@ -1,113 +0,0 @@ -// 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'; -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(); - private hostScopeMap = new WeakMap(); - - private globalScopes: CSSScope[] = []; - private scopesMap = new Map(); - private didInit = false; - - constructor(private win: Window, private doc: Document) {} - - i() { - if (this.didInit || !this.win.requestAnimationFrame) { - return Promise.resolve(); - } - - this.didInit = true; - return new Promise((resolve) => { - this.win.requestAnimationFrame(() => { - startWatcher(this.doc, this.globalScopes); - loadDocument(this.doc, this.globalScopes).then(() => resolve()); - }); - }); - } - - addLink(linkEl: HTMLLinkElement) { - return addGlobalLink(this.doc, this.globalScopes, linkEl).then(() => { - this.updateGlobal(); - }); - } - - addGlobalStyle(styleEl: HTMLStyleElement) { - if (addGlobalStyle(this.globalScopes, styleEl)) { - this.updateGlobal(); - } - } - - createHostStyle(hostEl: HTMLElement, cssScopeId: string, cssText: string, isScoped: boolean) { - if (this.hostScopeMap.has(hostEl)) { - throw new Error('host style already created'); - } - const baseScope = this.registerHostTemplate(cssText, cssScopeId, isScoped); - const styleEl = this.doc.createElement('style'); - styleEl.setAttribute('data-no-shim', ''); - - if (!baseScope.usesCssVars) { - // This component does not use (read) css variables - styleEl.textContent = cssText; - } else if (isScoped) { - // This component is dynamic: uses css var and is scoped - (styleEl as any)['s-sc'] = cssScopeId = `${baseScope.scopeId}-${this.count}`; - styleEl.textContent = '/*needs update*/'; - this.hostStyleMap.set(hostEl, styleEl); - this.hostScopeMap.set(hostEl, reScope(baseScope, cssScopeId)); - this.count++; - } else { - // This component uses css vars, but it's no-encapsulation (global static) - baseScope.styleEl = styleEl; - if (!baseScope.usesCssVars) { - styleEl.textContent = executeTemplate(baseScope.template, {}); - } - this.globalScopes.push(baseScope); - this.updateGlobal(); - this.hostScopeMap.set(hostEl, baseScope); - } - return styleEl; - } - - removeHost(hostEl: HTMLElement) { - const css = this.hostStyleMap.get(hostEl); - if (css) { - css.remove(); - } - this.hostStyleMap.delete(hostEl); - this.hostScopeMap.delete(hostEl); - } - - updateHost(hostEl: HTMLElement) { - const scope = this.hostScopeMap.get(hostEl); - if (scope && scope.usesCssVars && scope.isScoped) { - const styleEl = this.hostStyleMap.get(hostEl); - if (styleEl) { - const selectors = getActiveSelectors(hostEl, this.hostScopeMap, this.globalScopes); - const props = resolveValues(selectors); - styleEl.textContent = executeTemplate(scope.template, props); - } - } - } - - updateGlobal() { - updateGlobalScopes(this.globalScopes); - } - - private registerHostTemplate(cssText: string, scopeId: string, isScoped: boolean) { - let scope = this.scopesMap.get(scopeId); - if (!scope) { - scope = parseCSS(cssText); - scope.scopeId = scopeId; - scope.isScoped = isScoped; - this.scopesMap.set(scopeId, scope); - } - return scope; - } -} diff --git a/src/client/polyfills/css-shim/index.ts b/src/client/polyfills/css-shim/index.ts deleted file mode 100644 index f89c1c5a8ed..00000000000 --- a/src/client/polyfills/css-shim/index.ts +++ /dev/null @@ -1,8 +0,0 @@ -// TODO(STENCIL-659): Remove code implementing the CSS variable shim -import { CustomStyle } from './custom-style'; - -(function (win: any) { - if (win && !win.__cssshim && !(win.CSS && win.CSS.supports && win.CSS.supports('color', 'var(--c)'))) { - win.__cssshim = new CustomStyle(win, win.document); - } -})(typeof window !== 'undefined' && window); diff --git a/src/client/polyfills/css-shim/interfaces.ts b/src/client/polyfills/css-shim/interfaces.ts deleted file mode 100644 index 7c8a3d2a25a..00000000000 --- a/src/client/polyfills/css-shim/interfaces.ts +++ /dev/null @@ -1,30 +0,0 @@ -// 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; -export type CSSTemplate = CSSSegment[]; - -export interface CSSSelector { - nu: number; - selector: string; - specificity: number; - declarations: Declaration[]; -} - -export interface Declaration { - prop: string; - value: CSSTemplate; - important: boolean; -} - -export interface CSSScope { - original: string; - - scopeId?: string; - isScoped?: boolean; - - selectors: CSSSelector[]; - template: CSSTemplate; - usesCssVars: boolean; - styleEl?: HTMLStyleElement; -} diff --git a/src/client/polyfills/css-shim/load-link-styles.ts b/src/client/polyfills/css-shim/load-link-styles.ts deleted file mode 100644 index 2067cc2d36d..00000000000 --- a/src/client/polyfills/css-shim/load-link-styles.ts +++ /dev/null @@ -1,99 +0,0 @@ -// TODO(STENCIL-659): Remove code implementing the CSS variable shim -import { CSSScope } from './interfaces'; -import { addGlobalStyle, updateGlobalScopes } from './scope'; - -export function loadDocument(doc: Document, globalScopes: CSSScope[]) { - loadDocumentStyles(doc, globalScopes); - return loadDocumentLinks(doc, globalScopes).then(() => { - updateGlobalScopes(globalScopes); - }); -} - -export function startWatcher(doc: Document, globalScopes: CSSScope[]) { - if (typeof MutationObserver !== 'undefined') { - const mutation = new MutationObserver(() => { - if (loadDocumentStyles(doc, globalScopes)) { - updateGlobalScopes(globalScopes); - } - }); - mutation.observe(document.head, { childList: true }); - } -} - -export function loadDocumentLinks(doc: Document, globalScopes: CSSScope[]) { - const promises: Promise[] = []; - - const linkElms = doc.querySelectorAll('link[rel="stylesheet"][href]:not([data-no-shim])'); - for (let i = 0; i < linkElms.length; i++) { - promises.push(addGlobalLink(doc, globalScopes, linkElms[i] as HTMLLinkElement)); - } - return Promise.all(promises); -} - -export function loadDocumentStyles(doc: Document, globalScopes: CSSScope[]) { - const styleElms = Array.from( - doc.querySelectorAll('style:not([data-styles]):not([data-no-shim])') - ) as HTMLStyleElement[]; - return styleElms.map((style) => addGlobalStyle(globalScopes, style)).some(Boolean); -} - -export function addGlobalLink(doc: Document, globalScopes: CSSScope[], linkElm: HTMLLinkElement) { - const url = linkElm.href; - return fetch(url) - .then((rsp) => rsp.text()) - .then((text) => { - if (hasCssVariables(text) && linkElm.parentNode) { - if (hasRelativeUrls(text)) { - text = fixRelativeUrls(text, url); - } - - const styleEl = doc.createElement('style'); - styleEl.setAttribute('data-styles', ''); - styleEl.textContent = text; - - addGlobalStyle(globalScopes, styleEl); - linkElm.parentNode.insertBefore(styleEl, linkElm); - linkElm.remove(); - } - }) - .catch((err) => { - console.error(err); - }); -} - -// This regexp tries to determine when a variable is declared, for example: -// -// .my-el { --highlight-color: green; } -// -// but we don't want to trigger when a classname uses "--" or a pseudo-class is -// used. We assume that the only characters that can preceed a variable -// declaration are "{", from an opening block, ";" from a preceeding rule, or a -// space. This prevents the regexp from matching a word in a selector, since -// they would need to start with a "." or "#". (We assume element names don't -// start with "--"). -const CSS_VARIABLE_REGEXP = /[\s;{]--[-a-zA-Z0-9]+\s*:/m; - -export function hasCssVariables(css: string) { - return css.indexOf('var(') > -1 || CSS_VARIABLE_REGEXP.test(css); -} - -// This regexp find all url() usages with relative urls -const CSS_URL_REGEXP = /url[\s]*\([\s]*['"]?(?!(?:https?|data)\:|\/)([^\'\"\)]*)[\s]*['"]?\)[\s]*/gim; - -export function hasRelativeUrls(css: string) { - CSS_URL_REGEXP.lastIndex = 0; - return CSS_URL_REGEXP.test(css); -} - -export function fixRelativeUrls(css: string, originalUrl: string) { - // get the basepath from the original import url - const basePath = originalUrl.replace(/[^/]*$/, ''); - - // replace the relative url, with the new relative url - return css.replace(CSS_URL_REGEXP, (fullMatch, url) => { - // rhe new relative path is the base path + uri - // TODO: normalize relative URL - const relativeUrl = basePath + url; - return fullMatch.replace(url, relativeUrl); - }); -} diff --git a/src/client/polyfills/css-shim/regex.ts b/src/client/polyfills/css-shim/regex.ts deleted file mode 100644 index 7ab981634eb..00000000000 --- a/src/client/polyfills/css-shim/regex.ts +++ /dev/null @@ -1,6 +0,0 @@ -// TODO(STENCIL-659): Remove code implementing the CSS variable shim -export const VAR_USAGE_START = /\bvar\(/; -export const VAR_ASSIGN_START = /\B--[\w-]+\s*:/; - -export const COMMENTS = /\/\*[^*]*\*+([^/*][^*]*\*+)*\//gim; -export const TRAILING_LINES = /^[\t ]+\n/gm; diff --git a/src/client/polyfills/css-shim/scope.ts b/src/client/polyfills/css-shim/scope.ts deleted file mode 100644 index 811c8be297a..00000000000 --- a/src/client/polyfills/css-shim/scope.ts +++ /dev/null @@ -1,66 +0,0 @@ -// 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'; -import { compileTemplate, executeTemplate } from './template'; - -export function parseCSS(original: string): CSSScope { - const ast = parse(original); - const template = compileTemplate(original); - const selectors = getSelectors(ast); - return { - original, - template, - selectors, - usesCssVars: template.length > 1, - }; -} - -export function addGlobalStyle(globalScopes: CSSScope[], styleEl: HTMLStyleElement) { - if (globalScopes.some((css) => css.styleEl === styleEl)) { - return false; - } - const css = parseCSS(styleEl.textContent); - css.styleEl = styleEl; - globalScopes.push(css); - return true; -} - -export function updateGlobalScopes(scopes: CSSScope[]) { - const selectors = getSelectorsForScopes(scopes); - const props = resolveValues(selectors); - scopes.forEach((scope) => { - if (scope.usesCssVars) { - scope.styleEl.textContent = executeTemplate(scope.template, props); - } - }); -} - -export function reScope(scope: CSSScope, scopeId: string): CSSScope { - const template = scope.template.map((segment) => { - return typeof segment === 'string' ? replaceScope(segment, scope.scopeId, scopeId) : segment; - }); - - const selectors = scope.selectors.map((sel) => { - return { - ...sel, - selector: replaceScope(sel.selector, scope.scopeId, scopeId), - }; - }); - - return { - ...scope, - template, - selectors, - scopeId, - }; -} - -export function replaceScope(original: string, oldScopeId: string, newScopeId: string) { - original = replaceAll(original, `\\.${oldScopeId}`, `.${newScopeId}`); - return original; -} - -export function replaceAll(input: string, find: string, replace: string) { - return input.replace(new RegExp(find, 'g'), replace); -} diff --git a/src/client/polyfills/css-shim/selectors.ts b/src/client/polyfills/css-shim/selectors.ts deleted file mode 100644 index 43ae37b80e8..00000000000 --- a/src/client/polyfills/css-shim/selectors.ts +++ /dev/null @@ -1,155 +0,0 @@ -// 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'; - -export function resolveValues(selectors: CSSSelector[]) { - const props: { [prop: string]: CSSTemplate } = {}; - selectors.forEach((selector) => { - selector.declarations.forEach((dec) => { - props[dec.prop] = dec.value; - }); - }); - - const propsValues: any = {}; - const entries = Object.entries(props); - - for (let i = 0; i < 10; i++) { - let dirty = false; - entries.forEach(([key, value]) => { - const propValue = executeTemplate(value, propsValues); - if (propValue !== propsValues[key]) { - propsValues[key] = propValue; - dirty = true; - } - }); - if (!dirty) { - break; - } - } - return propsValues; -} - -export function getSelectors(root: StyleNode, index = 0): CSSSelector[] { - if (!root.rules) { - return []; - } - const selectors: CSSSelector[] = []; - - root.rules - .filter((rule) => rule.type === types.STYLE_RULE) - .forEach((rule) => { - const declarations = getDeclarations(rule.cssText); - if (declarations.length > 0) { - rule.parsedSelector.split(',').forEach((selector) => { - selector = selector.trim(); - selectors.push({ - selector: selector, - declarations, - specificity: computeSpecificity(selector), - nu: index, - }); - }); - } - index++; - }); - - return selectors; -} - -export function computeSpecificity(_selector: string): number { - return 1; -} - -const IMPORTANT = '!important'; -const FIND_DECLARATIONS = - /(?:^|[;\s{]\s*)(--[\w-]*?)\s*:\s*(?:((?:'(?:\\'|.)*?'|"(?:\\"|.)*?"|\([^)]*?\)|[^};{])+)|\{([^}]*)\}(?:(?=[;\s}])|$))/gm; - -export function getDeclarations(cssText: string) { - const declarations: Declaration[] = []; - let xArray; - while ((xArray = FIND_DECLARATIONS.exec(cssText.trim()))) { - const { value, important } = normalizeValue(xArray[2]); - declarations.push({ - prop: xArray[1].trim(), - value: compileTemplate(value), - important, - }); - } - return declarations; -} - -export function normalizeValue(value: string) { - const regex = /\s+/gim; - value = value.replace(regex, ' ').trim(); - const important = value.endsWith(IMPORTANT); - if (important) { - value = value.slice(0, value.length - IMPORTANT.length).trim(); - } - return { - value, - important, - }; -} - -export function getActiveSelectors( - hostEl: HTMLElement, - hostScopeMap: WeakMap, - globalScopes: CSSScope[] -): CSSSelector[] { - // computes the css scopes that might affect this particular element - // avoiding using spread arrays to avoid ts helper fns when in es5 - const scopes: CSSScope[] = []; - - const scopesForElement = getScopesForElement(hostScopeMap, hostEl); - - // globalScopes are always took into account - globalScopes.forEach((s) => scopes.push(s)); - - // the parent scopes are computed by walking parent dom until is reached - scopesForElement.forEach((s) => scopes.push(s)); - - // each scope might have an array of associated selectors - // let's flatten the complete array of selectors from all the scopes - const selectorSet = getSelectorsForScopes(scopes); - - // we filter to only the selectors that matches the hostEl - const activeSelectors = selectorSet.filter((selector) => matches(hostEl, selector.selector)); - - // sort selectors by specifity - return sortSelectors(activeSelectors); -} - -function getScopesForElement(hostTemplateMap: WeakMap, node: HTMLElement) { - const scopes: CSSScope[] = []; - while (node) { - const scope = hostTemplateMap.get(node); - if (scope) { - scopes.push(scope); - } - node = node.parentElement; - } - return scopes; -} - -export function getSelectorsForScopes(scopes: CSSScope[]) { - const selectors: CSSSelector[] = []; - scopes.forEach((scope) => { - selectors.push(...scope.selectors); - }); - return selectors; -} - -export function sortSelectors(selectors: CSSSelector[]) { - selectors.sort((a, b) => { - if (a.specificity === b.specificity) { - return a.nu - b.nu; - } - return a.specificity - b.specificity; - }); - return selectors; -} - -export function matches(el: HTMLElement, selector: string) { - return selector === ':root' || selector === 'html' || el.matches(selector); -} diff --git a/src/client/polyfills/css-shim/template.ts b/src/client/polyfills/css-shim/template.ts deleted file mode 100644 index 90e1c200e99..00000000000 --- a/src/client/polyfills/css-shim/template.ts +++ /dev/null @@ -1,129 +0,0 @@ -// 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'; - -export function resolveVar(props: CSSVariables, prop: string, fallback: CSSTemplate | undefined): string { - if (props[prop]) { - return props[prop]; - } - if (fallback) { - return executeTemplate(fallback, props); - } - return ''; -} - -export function findVarEndIndex(cssText: string, offset: number) { - let count = 0; - let i = offset; - - for (; i < cssText.length; i++) { - const c = cssText[i]; - if (c === '(') { - count++; - } else if (c === ')') { - count--; - if (count <= 0) { - return i + 1; - } - } - } - return i; -} - -export function parseVar(cssText: string, offset: number) { - const varPos = findRegex(VAR_USAGE_START, cssText, offset); - if (!varPos) { - return null; - } - const endVar = findVarEndIndex(cssText, varPos.start); - const varContent = cssText.substring(varPos.end, endVar - 1); - const [propName, ...fallback] = varContent.split(','); - return { - start: varPos.start, - end: endVar, - propName: propName.trim(), - fallback: fallback.length > 0 ? fallback.join(',').trim() : undefined, - }; -} - -export function compileVar(cssText: string, template: CSSTemplate, offset: number): number { - const varMeta = parseVar(cssText, offset); - if (!varMeta) { - template.push(cssText.substring(offset, cssText.length)); - return cssText.length; - } - const propName = varMeta.propName; - const fallback = varMeta.fallback != null ? compileTemplate(varMeta.fallback) : undefined; - - template.push(cssText.substring(offset, varMeta.start), (params) => resolveVar(params, propName, fallback)); - return varMeta.end; -} - -export function executeTemplate(template: CSSTemplate, props: CSSVariables): string { - let final = ''; - for (let i = 0; i < template.length; i++) { - const s = template[i]; - final += typeof s === 'string' ? s : s(props); - } - return final; -} - -export function findEndValue(cssText: string, offset: number): number { - let onStr = false; - let double = false; - let i = offset; - for (; i < cssText.length; i++) { - const c = cssText[i]; - if (onStr) { - if (double && c === '"') { - onStr = false; - } - if (!double && c === "'") { - onStr = false; - } - } else { - if (c === '"') { - onStr = true; - double = true; - } else if (c === "'") { - onStr = true; - double = false; - } else if (c === ';') { - return i + 1; - } else if (c === '}') { - return i; - } - } - } - return i; -} - -export function removeCustomAssigns(cssText: string) { - let final = ''; - let offset = 0; - while (true) { - const assignPos = findRegex(VAR_ASSIGN_START, cssText, offset); - const start = assignPos ? assignPos.start : cssText.length; - final += cssText.substring(offset, start); - if (assignPos) { - offset = findEndValue(cssText, start); - } else { - break; - } - } - return final; -} - -export function compileTemplate(cssText: string): CSSTemplate { - let index = 0; - cssText = cssText.replace(COMMENTS, ''); - - cssText = removeCustomAssigns(cssText).replace(TRAILING_LINES, ''); - - const segments: CSSTemplate = []; - while (index < cssText.length) { - index = compileVar(cssText, segments, index); - } - return segments; -} diff --git a/src/client/polyfills/css-shim/test/compiler.spec.ts b/src/client/polyfills/css-shim/test/compiler.spec.ts deleted file mode 100644 index 869cfb71c4f..00000000000 --- a/src/client/polyfills/css-shim/test/compiler.spec.ts +++ /dev/null @@ -1,179 +0,0 @@ -// TODO(STENCIL-659): Remove code implementing the CSS variable shim -import { compileTemplate, compileVar, executeTemplate, findVarEndIndex, parseVar } from '../template'; - -describe('compiler', () => { - describe('findVarEndIndex', () => { - it('should work without fallback', () => { - const text = 'var(--bar);'; - expect(findVarEndIndex(text, 0)).toBe(text.length - 1); - }); - - it('should work with fallback', () => { - const text = 'var(--foo, var(--bar, 12px));'; - expect(findVarEndIndex(text, 0)).toBe(text.length - 1); - }); - }); - - describe('parseVar', () => { - it('should work without fallback', () => { - const css = `.class { color: var(--color); }`; - const var1 = parseVar(css, 0); - expect(var1.fallback).toBe(undefined); - expect(var1.start).toBe(16); - expect(var1.end).toBe(28); - }); - - it('should work with fallback', () => { - const css = `.class { color: var(--color, "();{}"); }`; - const var1 = parseVar(css, 0); - expect(var1.fallback).toBe('"();{}"'); - expect(var1.start).toBe(16); - expect(var1.end).toBe(37); - }); - - it('should work with fallback + nested var + calc', () => { - const css = `.class { color: var(--color,calc(var(--color2) + 12px)); }`; - const var1 = parseVar(css, 0); - expect(var1.fallback).toBe('calc(var(--color2) + 12px)'); - expect(var1.start).toBe(16); - expect(var1.end).toBe(55); - }); - - it('should work with commans in fallback', () => { - const css = `var(--font, 255, 255, 255)`; - const var1 = parseVar(css, 0); - expect(var1.propName).toBe('--font'); - expect(var1.fallback).toBe('255, 255, 255'); - }); - - it('should work with fallback + nested var + calc (2)', () => { - const css = `var(--font, calc(var(--ion-font, 0px) + 12px))`; - const var1 = parseVar(css, 0); - expect(var1.fallback).toBe('calc(var(--ion-font, 0px) + 12px)'); - expect(var1.start).toBe(0); - }); - }); - - describe('compileCSS', () => { - it('should compile CSS without vars', () => { - const text = ` - .class { - font-size: 12px; - }`; - const template = compileTemplate(text); - expect(executeTemplate(template, {})).toEqual(text); - }); - - it('should compile CSS without context', () => { - const text = `calc(var(--ion-font, 0px) + 12px)`; - const template = compileTemplate(text); - expect(executeTemplate(template, {})).toEqual(`calc(0px + 12px)`); - }); - - it('should compile nested var without context', () => { - const text = `var(--font, calc(var(--ion-font, 0px) + 12px))`; - const template = compileTemplate(text); - expect(executeTemplate(template, {})).toEqual(`calc(0px + 12px)`); - }); - - it('should compile CSS and execute changes', () => { - const template = compileTemplate(` - .class { - font-size: var(--font, calc(var(--ion-font, 0px) + 12px)); - --color: 12px; - } - - :host { - --ion-font: 12px;font-size: var(--font, calc(var(--ion-font2, 0px) + 12px)); - --color: 12px - } - - :host(.class3) { - font-size: var(--font2, calc(var(--ion-font2, 0px) + 12px + var(--ion-font2))); - --color: 12px} - `); - - expect(executeTemplate(template, {})).toEqual(` - .class { - font-size: calc(0px + 12px); - } - - :host { - font-size: calc(0px + 12px); - } - - :host(.class3) { - font-size: calc(0px + 12px + ); - } - `); - - expect( - executeTemplate(template, { - '--ion-font2': '100px', - '--font2': '200px', - }) - ).toEqual(` - .class { - font-size: calc(0px + 12px); - } - - :host { - font-size: calc(100px + 12px); - } - - :host(.class3) { - font-size: 200px; - } - `); - }); - }); - - describe('compileVar', () => { - it('should compile nested Var', () => { - const css = ` - .class { - font-size: var(--font, calc(var(--ion-font, 0px, 1px) + 12px)); - }`; - const segments: any = []; - compileVar(css, segments, 0); - - expect(segments[1]({})).toEqual(`calc(0px, 1px + 12px)`); - expect(segments[1]({ '--ion-font': '10px' })).toEqual(`calc(10px + 12px)`); - expect(segments[1]({ '--font': '11px' })).toEqual(`11px`); - expect(segments[1]({ '--font': '0', '--ion-font': '11px' })).toEqual(`0`); - }); - it('should work compile vars step by step', () => { - const css = ` -.class { - color: var(--color); - font-size: var(--font-size, 12px) var( --font , 12px); -}`; - - const segments: any[] = []; - - // STEP 1 - let index = compileVar(css, segments, 0); - expect(segments[0]).toBe(` -.class { - color: `); - expect(segments[1]({ '--color': 'hola' })).toBe(`hola`); - - // STEP 2 - index = compileVar(css, segments, index); - expect(segments[2]).toBe(`; - font-size: `); - expect(segments[3]({})).toBe(`12px`); - - // STEP 3 - index = compileVar(css, segments, index); - expect(segments[4]).toBe(' '); - expect(segments[5]({ '--font': 'sans' })).toBe('sans'); - - // STEP 4 - compileVar(css, segments, index); - expect(segments.length).toBe(7); - expect(segments[6]).toBe(`; -}`); - }); - }); -}); diff --git a/src/client/polyfills/css-shim/test/css-shim.spec.ts b/src/client/polyfills/css-shim/test/css-shim.spec.ts deleted file mode 100644 index aab4ff9a248..00000000000 --- a/src/client/polyfills/css-shim/test/css-shim.spec.ts +++ /dev/null @@ -1,388 +0,0 @@ -// TODO(STENCIL-659): Remove code implementing the CSS variable shim -import { mockWindow } from '@stencil/core/testing'; - -import { CustomStyle } from '../custom-style'; - -describe('css-shim', () => { - beforeEach(() => { - window = mockWindow(); - document = window.document; - }); - - it('should set value in second addCustomStyle with async tick', async () => { - const customStyle = new CustomStyle(window, document); - - const rootElm = style(` - html { - --custom-a: red; - } - `); - customStyle.addGlobalStyle(rootElm); - - const styleElm = style(` - p { - color: var(--custom-a); - } - `); - customStyle.addGlobalStyle(styleElm); - - expect(css(styleElm.textContent)).toBe( - css(` - p { - color: red; - } - `) - ); - }); - - it('should set value in second addCustomStyle w/out async tick', async () => { - const customStyle = new CustomStyle(window, document); - - const rootElm = style(` - html { - --custom-a: red; - } - `); - customStyle.addGlobalStyle(rootElm); - - const styleElm = style(` - p { - color: var(--custom-a); - } - `); - customStyle.addGlobalStyle(styleElm); - - expect(css(styleElm.textContent)).toBe( - css(` - p { - color: red; - } - `) - ); - }); - - it('should set value in same script in different rule', async () => { - const customStyle = new CustomStyle(window, document); - - const styleElm = style(` - html { - --custom-a: red; - background: yellow; - } - p { - color: var(--custom-a); - } - `); - customStyle.addGlobalStyle(styleElm); - - expect(css(styleElm.textContent)).toBe( - css(` - html { - background: yellow; - } - p { - color: red; - } - `) - ); - }); - - it('should set value in from fallback', async () => { - const customStyle = new CustomStyle(window, document); - - const styleElm = style(` - html { - --custom-a: green; - color: var(--invalid, var(--custom-a)); - } - `); - - customStyle.addGlobalStyle(styleElm); - - expect(css(styleElm.textContent)).toBe( - css(` - html { - color: green; - } - `) - ); - }); - - it('should set data uri value', async () => { - const customStyle = new CustomStyle(window, document); - - const styleElm = style(` - html { - --stencil-logo: url('data:image/png;base64,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'); - background-image: var(--stencil-logo); - } - `); - - customStyle.addGlobalStyle(styleElm); - - expect(css(styleElm.textContent)).toBe( - css(` - html { - background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAAZdEVYdFNvZnR3YXJlAEFkb2JlIEltYWdlUmVhZHlxyWU8AAAHVElEQVRoQ92aW2yURRTHz24vu1B63V62LTWSAL2ILQFBASEF5WpQEwy1BIhGCAGDkUrKCw+Q8AAqwYSID2gCIkWJPhgSLuXWcAelBYWWAglRoO12u223F6B7aT3/2emypbvLfLtQwF/y5euc2W9mzpwzZ84M6HoY+h+gl+8XnidqkTNnztGxYxV08WIVXb9xg+7eqaMHDx6IOqPRSJlDM2jkiOE0duwYmjqtkCZNfEPUPRGgSDgcOXKsZ8477/NkRPBj7DEY4ntiY5N7EhLMPSZTRk9ycqZ48DdkqDPyb/BbfINv0Ua4hGyRXbv20MrPVpG9tYViY+PEjOt0OlmrBrqGxdrb2yg+PpG2bt1CixYVy1ptaFbk2rVamjp1JjU0WCgpKZEiIyNlTXi4XC5qbm6hNHMaVRw/RDk52bJGDU2LveSLNZSbm0NdXV2UmpryxJQAaAttOrht9FFSskbWqKFskYKC8XTlylUymZI0u5BWMKRmWzO9MiqPLl/+Q0qDo6RIamoW3bt3j2JiYqRkYOjs7KTBgwdTY+NtKQnMYxWBEliQgwYNkpKB5f79+2TgQGJ9jDJB10hBwThhiWelBEDf93kM+fnjpMQ/ARXBYrt6pXrA3ckfGEN1dTWtKimVkv74da2amlrKy8uhlJShT31hq4JhWq13WKEaEdUexa8iZvPL5HB0UVRUlJSogaZcLjf+8ggCouNwG6F5kpxOJ0VHR/Me9o+UPKSfa+38cTdHCYsmJdxut9jMrNYGDs+JlJ6ezpNh9vugDr+xWi3iG3yrCsbU2NhIO3f+JCUP6WcRzocoIkKvvNkhqrjd3bR9+7e0YMGHUqrGnj2/0NKlK0iv1ysHFGQALlbe3mqREg99LFJ++CjZ7a3KSmCHz8jI4Hhv06wEKC4uoo4OG2VmZoq2VMDY2ux2Ki8/IiUe+lhk9uz36PTpM0qzg8+sViu/PWl6uOh0Rg4uKUrrBl4wadJEOnDgdyl5RBGdLpIbS1dqDCZOS+MEr6Jc+G04IMcqLJxJFotFyRs8k1jPb5eU+Chy4sQpbmy6mBVVPBlrsyyFR1JSkrJLA3hDRcVhmjLlTVH2KrJu3QbatOlriouLExXPO21tbVRauprWr18ryt7FjuOp1n3jWYKxVlZWypKPRXJzRwsf1aKM0+milpa+YVCdKM5sYzj9GKx5YwTYHFNTU/mgd1mUvRapq6sX8VwVKJGensYLzh3SU1t7hRYvXsC+flesNa1grHX19bLkYxGDIZ7XR6yyMvgMO7nFUieiTqggWGRlDRchPyIiQkofT3d3N6+Tdt5/7KKsboJHgDuYTKk0bFh2WJEL0erWrVqy2RrF5ISKVxGDIVpzQ5hB3J6YTMm0fPlKun79pqzRBiyalzdKJpxqYKwYcy9e18rOfpVdpSmkyIUmOjvv8SGsk0tOj1AjiYlp3Lf6PoLFnpyczJP3tyh7FZk16106e/acmOEXARy/J0x4nQ4e3CfKXtcaPTpfaPmigLEWFOTLko9F9u8/SHPnzmNzmUSFCs8yRWlqstG+fb/RnDmzRNmrCF56fTTnWmblpNFsTqPjxw9x0miV0tDAxlZYOENj0thA3e4u0sntwqsIwFVoZWWV0jrxNPZs0nisjzFjRvMklkvJI/vIsmWfUHt7hywFBx3Gx8eL1CZccnIKRFuqqQrGuGzZElny0MciIC4uRRzwVXdZHHKwy27fvk2c+LRQVvYzH3U/FUdr1aMuzvgOh4N39b7u3E+RzZu/oTVr1oo7XlXQuN3exuumi4YPH8ETYRCu5w/MOm5obt68zuvByJaI05Sa2GzNtHHjBlq9+nMp8dBPEYD7LMyyligC0NTTvA5CgME3TU13peQhfnOt3bt3cFi1BJzVQKAT7M7IDoI/kZqVwFgwprKyHVLSF7+KzJjxNqfYH7O7eDLL5wGMZfHij3hs06WkL35dC8C1cnMLqL6+QXkhPi0QUNLTzVRTczngMSOgIsDW1EQjs/OF3xuNBikdWHDfhWBQW/uXSBID4V89SZLJRJcunRcLE7My0KBPKIExmHgswQiqCBYkbgGrq6uEaVtb7ZoDQCigD/SFPtE3xvC44BBUEQCfhEkvVZ2novnzOC2pF2HwaYG20cd87quK+0TfKsfvoGvEFyx+t9tFBw4coiVLVlBLS6vmzSwYvZtqQkI8/fD9dzR7zkxuO1L5DkFZkV6QHnRx0rZ16zb68qst1NHRSUOGxIi0JpS9Ae2hDVwLlZaW0MqVK0TSiva0oFkRAOs4ulghTjX27v1V/C+IkydPcVCIEgNARgBLIYfyBf/8gJmH+0ABl8tJkydPooULi6mo6AM+g3sUULWCLyEp0gsG5nI5yOlwig3r6LEKunDhT6qpvkb/3r4tzikOrgPR0VHikuGlrCzKzcuh8eNeo2lvFVICZ71RXBcZxYlqCAr0EpYivmCWe2cb7+5uXMRxRW/z7HbwPL0elorwWk1rPheIJ6aIP+CCvoTiMmoQ/Qfk2TCbSm2n3gAAAABJRU5ErkJggg=='); - } - `) - ); - }); - - it('should set data uri value in same script in different rule', async () => { - const customStyle = new CustomStyle(window, document); - - const styleElm = style(` - html { - --stencil-logo: url('data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=='); - background: yellow; - } - div { - background-image: var(--stencil-logo); - } - `); - customStyle.addGlobalStyle(styleElm); - - expect(css(styleElm.textContent)).toBe( - css(` - html { - background: yellow; - } - div { - background-image: url('data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=='); - } - `) - ); - }); - - it('should set a base64 value in from fallback', async () => { - const customStyle = new CustomStyle(window, document); - - const styleElm = style(` - html { - --stencil-logo: url('data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=='); - background-image: var(--invalid, var(--stencil-logo)); - } - `); - - customStyle.addGlobalStyle(styleElm); - - expect(css(styleElm.textContent)).toBe( - css(` - html { - background-image: url('data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=='); - } - `) - ); - }); - - it('should set a base64 value in from fallback svg', async () => { - const customStyle = new CustomStyle(window, document); - - const styleElm = style(` - html { - background-image: var(--invalid, url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxMC4xMjEiPg0KICAgIDxwYXRoIGQ9Ik04LjU5OSA5LjkwNWEuNzUuNzUgMCAwIDEtMS4wNTMtLjAwMmwtNy4yMy03LjIzYS43NDUuNzQ1IDAgMCAxIDAtMS4wNTJsMS40LTEuNGMuMjktLjI5Ljc2LS4yOSAxLjA1IDBMNy41NTQgNS4wMWMuMjkuMjkuNzYyLjI5MiAxLjA1MyAwbDQuODMtNC43OTRhLjc0Ny43NDcgMCAwIDEgMS4wNS4wMDRsMS40IDEuNDA2YS43NDcuNzQ3IDAgMCAxLS4wMDcgMS4wNUw4LjU5OSA5LjkwNHoiLz4NCjwvc3ZnPg0K')); - } - `); - - customStyle.addGlobalStyle(styleElm); - - expect(css(styleElm.textContent)).toBe( - css(` - html { - background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxMC4xMjEiPg0KICAgIDxwYXRoIGQ9Ik04LjU5OSA5LjkwNWEuNzUuNzUgMCAwIDEtMS4wNTMtLjAwMmwtNy4yMy03LjIzYS43NDUuNzQ1IDAgMCAxIDAtMS4wNTJsMS40LTEuNGMuMjktLjI5Ljc2LS4yOSAxLjA1IDBMNy41NTQgNS4wMWMuMjkuMjkuNzYyLjI5MiAxLjA1MyAwbDQuODMtNC43OTRhLjc0Ny43NDcgMCAwIDEgMS4wNS4wMDRsMS40IDEuNDA2YS43NDcuNzQ3IDAgMCAxLS4wMDcgMS4wNUw4LjU5OSA5LjkwNHoiLz4NCjwvc3ZnPg0K'); - } - `) - ); - }); - - it('should not stackoverflow with multiple base64 rules', async () => { - const customStyle = new CustomStyle(window, document); - - const styleElm = style(` - html { - background-image: var(--invalid, url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxMC4xMjEiPg0KICAgIDxwYXRoIGQ9Ik04LjU5OSA5LjkwNWEuNzUuNzUgMCAwIDEtMS4wNTMtLjAwMmwtNy4yMy03LjIzYS43NDUuNzQ1IDAgMCAxIDAtMS4wNTJsMS40LTEuNGMuMjktLjI5Ljc2LS4yOSAxLjA1IDBMNy41NTQgNS4wMWMuMjkuMjkuNzYyLjI5MiAxLjA1MyAwbDQuODMtNC43OTRhLjc0Ny43NDcgMCAwIDEgMS4wNS4wMDRsMS40IDEuNDA2YS43NDcuNzQ3IDAgMCAxLS4wMDcgMS4wNUw4LjU5OSA5LjkwNHoiLz4NCjwvc3ZnPg0K')); - background: var(--invalid2, url('data:image/svg+xml;base64,ZPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxMC4xMjEiPg0KICAgIDxwYXRoIGQ9Ik04LjU5OSA5LjkwNWEuNzUuNzUgMCAwIDEtMS4wNTMtLjAwMmwtNy4yMy03LjIzYS43NDUuNzQ1IDAgMCAxIDAtMS4wNTJsMS40LTEuNGMuMjktLjI5Ljc2LS4yOSAxLjA1IDBMNy41NTQgNS4wMWMuMjkuMjkuNzYyLjI5MiAxLjA1MyAwbDQuODMtNC43OTRhLjc0Ny43NDcgMCAwIDEgMS4wNS4wMDRsMS40IDEuNDA2YS43NDcuNzQ3IDAgMCAxLS4wMDcgMS4wNUw4LjU5OSA5LjkwNHoiLz4NCjwvc3ZnPg0K')); - } - `); - - customStyle.addGlobalStyle(styleElm); - - expect(css(styleElm.textContent)).toBe( - css(` - html { - background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxMC4xMjEiPg0KICAgIDxwYXRoIGQ9Ik04LjU5OSA5LjkwNWEuNzUuNzUgMCAwIDEtMS4wNTMtLjAwMmwtNy4yMy03LjIzYS43NDUuNzQ1IDAgMCAxIDAtMS4wNTJsMS40LTEuNGMuMjktLjI5Ljc2LS4yOSAxLjA1IDBMNy41NTQgNS4wMWMuMjkuMjkuNzYyLjI5MiAxLjA1MyAwbDQuODMtNC43OTRhLjc0Ny43NDcgMCAwIDEgMS4wNS4wMDRsMS40IDEuNDA2YS43NDcuNzQ3IDAgMCAxLS4wMDcgMS4wNUw4LjU5OSA5LjkwNHoiLz4NCjwvc3ZnPg0K'); - background: url('data:image/svg+xml;base64,ZPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxMC4xMjEiPg0KICAgIDxwYXRoIGQ9Ik04LjU5OSA5LjkwNWEuNzUuNzUgMCAwIDEtMS4wNTMtLjAwMmwtNy4yMy03LjIzYS43NDUuNzQ1IDAgMCAxIDAtMS4wNTJsMS40LTEuNGMuMjktLjI5Ljc2LS4yOSAxLjA1IDBMNy41NTQgNS4wMWMuMjkuMjkuNzYyLjI5MiAxLjA1MyAwbDQuODMtNC43OTRhLjc0Ny43NDcgMCAwIDEgMS4wNS4wMDRsMS40IDEuNDA2YS43NDcuNzQ3IDAgMCAxLS4wMDcgMS4wNUw4LjU5OSA5LjkwNHoiLz4NCjwvc3ZnPg0K'); - } - `) - ); - }); - - it('should set value in same script in different rule and remove var only rule', async () => { - const customStyle = new CustomStyle(window, document); - - const styleElm = style(` - html { - --custom-a: red; - } - p { - color: var(--custom-a); - } - `); - - customStyle.addGlobalStyle(styleElm); - - expect(css(styleElm.textContent)).toBe( - css(` - html{} - p { - color: red; - } - `) - ); - }); - - it('should set value in same script in same rule', async () => { - const customStyle = new CustomStyle(window, document); - - const styleElm = style(` - html { - --custom-a: red; - --custom-b: blue; - color: var(--custom-a); - } - `); - - customStyle.addGlobalStyle(styleElm); - - expect(css(styleElm.textContent)).toBe( - css(` - html { - color: red; - } - `) - ); - }); - - it('should set value in transform', async () => { - const customStyle = new CustomStyle(window, document); - - const styleElm = style(` - html { - --custom: 88px; - } - .transform { - transform: translate3d(0, var(--custom), 0); - } - `); - - customStyle.addGlobalStyle(styleElm); - - expect(css(styleElm.textContent)).toBe( - css(` - html{} - .transform { - transform: translate3d(0, 88px, 0); - } - `) - ); - }); - - it('should set value in keyframe animation', async () => { - const customStyle = new CustomStyle(window, document); - - const styleElm = style(` - html { - --custom-a: 0.3; - --custom-b: 0.8; - } - @keyframes animation { - 0% { opacity: var(--custom-a); } - 100% { opacity: var(--custom-b); } - } - `); - - customStyle.addGlobalStyle(styleElm); - - expect(css(styleElm.textContent)).toBe( - css(` - html{} - @keyframes animation { - 0% { opacity: 0.3; } - 100% { opacity: 0.8; } - } - `) - ); - }); - - it('should set value in @media', async () => { - const customStyle = new CustomStyle(window, document); - - const styleElm = style(` - html { - --custom: red; - } - @media only screen { - body { - color: var(--custom); - } - } - `); - - customStyle.addGlobalStyle(styleElm); - - expect(css(styleElm.textContent)).toBe( - css(` - html{} - @media only screen { - body { - color: red; - } - } - `) - ); - }); - - it('should set value in animation', async () => { - (window as any).matchMedia = () => { - return { matches: true }; - }; - const customStyle = new CustomStyle(window, document); - - const styleElm = style(` - html { - --ani-name: slidein; - --ani-dur: 3s; - } - div { - animation-name: var(--ani-name); - animation-duration: var(--ani-dur); - } - `); - - customStyle.addGlobalStyle(styleElm); - - expect(css(styleElm.textContent)).toBe( - css(` - html{} - div { - animation-name: slidein; - animation-duration: 3s; - } - `) - ); - }); - - var window: Window; // eslint-disable-line no-var -- shims will continue to use var while we support older browsers - var document: Document; // eslint-disable-line no-var -- shims will continue to use var while we support older browsers - - function style(text: string) { - const elm = document.createElement('style'); - elm.textContent = text; - return elm; - } - - function css(c: string) { - return c.replace(/\s/g, '').toLowerCase(); - } -}); 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 deleted file mode 100644 index 9aeecbada3c..00000000000 --- a/src/client/polyfills/css-shim/test/init-css-shim.spec.ts +++ /dev/null @@ -1,210 +0,0 @@ -// TODO(STENCIL-659): Remove code implementing the CSS variable shim -import { fixRelativeUrls, hasCssVariables, hasRelativeUrls } from '../load-link-styles'; - -describe('hasCssVariables', () => { - it('false for standard css', () => { - const text = ` - .my-classname { - color: brown; - } - #myid { - color: brown; - } - [my='attr'] { - color: brown; - } - `; - expect(hasCssVariables(text)).toBe(false); - }); - - it('false for -- in classname or attribute', () => { - const text = ` - .my--classname { - color: brown; - } - [my='attr--ibute'] { - color: brown; - } - `; - expect(hasCssVariables(text)).toBe(false); - }); - - it('false for normal CSS with a pseudo class', () => { - const text = ` - .test--el:hover { - background-color: green - } - `; - expect(hasCssVariables(text)).toBe(false); - }); - - it('false for minified CSS with a pseudo class', () => { - const text = ` - .test--el:hover{background-color: green} - `; - expect(hasCssVariables(text)).toBe(false); - }); - - it('true for -- declaration w/ spaces', () => { - const text = ` - element { - --main-bg-color : brown; - } - `; - expect(hasCssVariables(text)).toBe(true); - }); - - it('true for -- declaration', () => { - const text = ` - element { - --main-bg-color: brown; - } - `; - expect(hasCssVariables(text)).toBe(true); - }); - - it('true for css var() and -- declaration', () => { - const text = ` - element { - background-color: var(--main-bg-color); - } - `; - expect(hasCssVariables(text)).toBe(true); - }); - - it('true for minified CSS with a semicolon', () => { - const text = `element{background-color: green;--main-text-color: black}`; - expect(hasCssVariables(text)).toBe(true); - }); - - it('true for minified CSS without a semicolon', () => { - const text = `element{--main-text-color: black}`; - expect(hasCssVariables(text)).toBe(true); - }); - - it('true for var()', () => { - const text = ` - element { - background-color: var(derp); - } - `; - expect(hasCssVariables(text)).toBe(true); - }); -}); - -describe('hasRelativeUrls', () => { - it('false for absolute urls', () => { - const text = ` - div { - background-image: url('http://example.com/mytestimage.jpg'); - } - `; - - expect(hasRelativeUrls(text)).toBe(false); - }); - - it('false for absolute https urls', () => { - const text = ` - div { - background-image: url('https://example.com/mytestimage.jpg'); - } - `; - - expect(hasRelativeUrls(text)).toBe(false); - }); - - it('true for relative urls', () => { - const text = ` - div { - background-image: url('assets/images/mytestimage.jpg'); - } - `; - - expect(hasRelativeUrls(text)).toBe(true); - }); - - it('false for relative urls without domain', () => { - const text = ` - div { - background-image: url('/assets/images/mytestimage.jpg'); - } - `; - - expect(hasRelativeUrls(text)).toBe(false); - }); -}); - -describe('fixRelativeUrls', () => { - it('should transform prepend relative urls with base path', () => { - const text = ` - div { - background-image: url('../images/mytestimage.jpg'); - } - `; - - expect(fixRelativeUrls(text, '/assets/css/styles.css')).toBe(` - div { - background-image: url('/assets/css/../images/mytestimage.jpg'); - } - `); - }); - - it('should keep external urls', () => { - const text = ` - div { - background-image: url('http://www.example.com/assets/images/mytestimage.jpg'); - } - `; - - expect(fixRelativeUrls(text, '/assets/css/styles.css')).toBe(` - div { - background-image: url('http://www.example.com/assets/images/mytestimage.jpg'); - } - `); - }); - - it('should keep absolute urls', () => { - const text = ` - div { - background-image: url('/assets/images/mytestimage.jpg'); - } - `; - - expect(fixRelativeUrls(text, '/assets/css/styles.css')).toBe(` - div { - background-image: url('/assets/images/mytestimage.jpg'); - } - `); - }); - - it('should transform prepend relative urls contains data folder with base path', () => { - const text = ` - div { - background-image: url('data/images/mytestimage.jpg'); - } - `; - - expect(fixRelativeUrls(text, '/assets/css/styles.css')).toBe(` - div { - background-image: url('/assets/css/data/images/mytestimage.jpg'); - } - `); - }); - - it.each(['data:,ABC123', 'data:text/plain,ABC123', 'data:text/plain;base64,ABC123'])( - 'should keep data url', - (dataURL) => { - const text = ` - div { - background-image: url('${dataURL}'); - } - `; - - expect(fixRelativeUrls(text, '/assets/css/styles.css')).toBe(` - div { - background-image: url('${dataURL}'); - } - `); - } - ); -}); diff --git a/src/client/polyfills/css-shim/test/load-link-styles.spec.ts b/src/client/polyfills/css-shim/test/load-link-styles.spec.ts deleted file mode 100644 index f3ba2b44afc..00000000000 --- a/src/client/polyfills/css-shim/test/load-link-styles.spec.ts +++ /dev/null @@ -1,24 +0,0 @@ -import { addGlobalLink } from '../load-link-styles'; - -describe('loadLinkStyles', () => { - describe('addGlobalLink', () => { - global.fetch = jest.fn().mockResolvedValue({ text: () => '--color: var(--app-color);' }); - - afterEach(() => { - jest.clearAllMocks(); - }); - - it('should create a style tag within the link element parent node', async () => { - const linkElm = document.createElement('link'); - linkElm.setAttribute('rel', 'stylesheet'); - linkElm.setAttribute('href', ''); - - const parentElm = document.createElement('head'); - parentElm.appendChild(linkElm); - - await addGlobalLink(document, [], linkElm); - - expect(parentElm.innerHTML).toEqual(''); - }); - }); -}); diff --git a/src/client/polyfills/css-shim/test/tsconfig.json b/src/client/polyfills/css-shim/test/tsconfig.json deleted file mode 100644 index 9630f867acb..00000000000 --- a/src/client/polyfills/css-shim/test/tsconfig.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "extends": "../../../../testing/tsconfig.internal.json" -} diff --git a/src/client/polyfills/css-shim/test/utils.spec.ts b/src/client/polyfills/css-shim/test/utils.spec.ts deleted file mode 100644 index 982e4a0814b..00000000000 --- a/src/client/polyfills/css-shim/test/utils.spec.ts +++ /dev/null @@ -1,232 +0,0 @@ -// 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'; -import { executeTemplate } from '../template'; - -describe('utils', () => { - describe('resolveValues', () => { - it('should resolve values', () => { - const css = parseCSS(` - .class{ - -webkit-color: black; - --loop: var(--loop2); - --fallback: var(--unknown, fallback); - --value: 12px; - --value2: var(--value); - --value4: var(--value3); - } - .class2 { - color: black; - --loop2: var(--loop); - --value3: 0 0 0 0; - --value6: var(--value) var(--value2) var(--value4); - } - ion-button { - --ion-color: black; - } - .inner-class { - fallback: var(--fallback); - ioncolor": var(--fallback); - loop: var(--loop) end; - loop2: var(--loop2) end; - value: var(--value) middle var(--value6) end; - value2: var(--value2); - value3: var(--value3); - value4: var(--value4); - value6: var(--value6); - }`); - - const values = resolveValues(css.selectors); - expect(values).toEqual({ - '--fallback': 'fallback', - '--ion-color': 'black', - '--loop': '', - '--loop2': '', - '--value': '12px', - '--value2': '12px', - '--value3': '0 0 0 0', - '--value4': '0 0 0 0', - '--value6': '12px 12px 0 0 0 0', - }); - - expect(executeTemplate(css.template, values)).toEqual(` - .class{ - -webkit-color: black; - } - .class2 { - color: black; - } - ion-button { - } - .inner-class { - fallback: fallback; - ioncolor": fallback; - loop: end; - loop2: end; - value: 12px middle 12px 12px 0 0 0 0 end; - value2: 12px; - value3: 0 0 0 0; - value4: 0 0 0 0; - value6: 12px 12px 0 0 0 0; - }`); - }); - }); - - describe('normalizeValue', () => { - it('should normalize CSS value', () => { - expect(normalizeValue(' 12px ')).toEqual({ - value: '12px', - important: false, - }); - expect(normalizeValue('12 px')).toEqual({ - value: '12 px', - important: false, - }); - - expect(normalizeValue('0 .1 2 \n 3px ')).toEqual({ - value: '0 .1 2 3px', - important: false, - }); - - expect(normalizeValue('233, 244 244\t!important\n')).toEqual({ - value: '233, 244 244', - important: true, - }); - }); - }); - - describe('getDeclarations', () => { - it('should get css declarations', () => { - const declarations = getDeclarations(` - --var: 12px; - -webkit: value; - font-size: 12; - --var: var(--variable);--color: var(--ion-color, 12); - --padding: 12 - 12 - 12 - 12; - --ion-color:calc(12px) - `); - - expectDeclaration(declarations[0], { - prop: '--var', - value: '12px', - important: false, - }); - - expectDeclaration( - declarations[1], - { - prop: '--var', - value: 'value', - important: false, - }, - { '--variable': 'value' } - ); - - expectDeclaration(declarations[2], { - prop: '--color', - value: '12', - important: false, - }); - - expectDeclaration(declarations[3], { - prop: '--padding', - value: '12 12 12 12', - important: false, - }); - - expectDeclaration(declarations[4], { - prop: '--ion-color', - value: 'calc(12px)', - important: false, - }); - }); - }); - - function expectDeclaration(dec: Declaration, exp: any, props: any = {}) { - expect(dec.prop).toBe(exp.prop); - expect(executeTemplate(dec.value, props)).toBe(exp.value); - expect(dec.important).toBe(exp.important); - } - - function expectSelector(selector: CSSSelector, expected: any) { - expect(selector.selector).toBe(expected.selector); - expect(selector.nu).toBe(expected.nu); - expect(selector.specificity).toBe(expected.specificity); - for (let i = 0; i < expected.declarations.length; i++) { - expectDeclaration(selector.declarations[i], expected.declarations[i]); - } - } - - describe('parseCSS', () => { - it('shoud parse CSS', () => { - const { selectors } = parseCSS(` - ion-button { - --value: transparent; - } - ion-button.color { - --value: black; - --background: var(--color, transparent); - } - .color-background, - .color-active,:host(.toolbar) .color-focused { - --stuff: 0 0 10x var(--color); - --background: #00000 - } - ion-button .button-inner { - color: var(--value) - }`); - - expect(selectors.length).toBe(5); - - expectSelector(selectors[0], { - selector: 'ion-button', - declarations: [{ prop: '--value', value: 'transparent', important: false }], - specificity: 1, - nu: 0, - }); - expectSelector(selectors[1], { - selector: 'ion-button.color', - declarations: [ - { prop: '--value', value: 'black', important: false }, - { prop: '--background', value: 'transparent', important: false }, - ], - specificity: 1, - nu: 1, - }); - - expectSelector(selectors[2], { - selector: '.color-background', - declarations: [ - { prop: '--stuff', value: '0 0 10x ', important: false }, - { prop: '--background', value: '#00000', important: false }, - ], - specificity: 1, - nu: 2, - }); - - expectSelector(selectors[3], { - selector: '.color-active', - declarations: [ - { prop: '--stuff', value: '0 0 10x ', important: false }, - { prop: '--background', value: '#00000', important: false }, - ], - specificity: 1, - nu: 2, - }); - - expectSelector(selectors[4], { - selector: ':host(.toolbar) .color-focused', - declarations: [ - { prop: '--stuff', value: '0 0 10x ', important: false }, - { prop: '--background', value: '#00000', important: false }, - ], - specificity: 1, - nu: 2, - }); - }); - }); -}); diff --git a/src/client/polyfills/css-shim/utils.ts b/src/client/polyfills/css-shim/utils.ts deleted file mode 100644 index 112fe90baf2..00000000000 --- a/src/client/polyfills/css-shim/utils.ts +++ /dev/null @@ -1,15 +0,0 @@ -// TODO(STENCIL-659): Remove code implementing the CSS variable shim -export const GLOBAL_SCOPE = ':root'; - -export function findRegex(regex: RegExp, cssText: string, offset: number) { - regex['lastIndex'] = 0; - const r = cssText.substring(offset).match(regex); - if (r) { - const start = offset + r['index']; - return { - start, - end: start + r[0].length, - }; - } - return null; -} diff --git a/src/compiler/app-core/app-polyfills.ts b/src/compiler/app-core/app-polyfills.ts index 6b7c7ed357c..e41c7b21826 100644 --- a/src/compiler/app-core/app-polyfills.ts +++ b/src/compiler/app-core/app-polyfills.ts @@ -19,11 +19,6 @@ export const getAppBrowserCorePolyfills = async (config: d.Config, compilerCtx: // read all the polyfill content, in this particular order const polyfills = INLINE_POLYFILLS.slice(); - // TODO(STENCIL-659): Remove code implementing the CSS variable shim - if (config.extras.__deprecated__cssVarsShim) { - polyfills.push(INLINE_CSS_SHIM); - } - const results = await Promise.all( polyfills.map((polyfillFile) => getClientPolyfill(config, compilerCtx, polyfillFile)) ); @@ -35,5 +30,3 @@ export const getAppBrowserCorePolyfills = async (config: d.Config, compilerCtx: // order of the polyfills matters!! test test test // actual source of the polyfills are found in /src/client/polyfills/ const INLINE_POLYFILLS = ['core-js.js', 'dom.js', 'es5-html-element.js', 'system.js']; - -const INLINE_CSS_SHIM = 'css-shim.js'; diff --git a/src/compiler/bundle/core-resolve-plugin.ts b/src/compiler/bundle/core-resolve-plugin.ts index 15052608a64..bf4e37db6a3 100644 --- a/src/compiler/bundle/core-resolve-plugin.ts +++ b/src/compiler/bundle/core-resolve-plugin.ts @@ -11,7 +11,6 @@ import { STENCIL_CORE_ID, STENCIL_INTERNAL_CLIENT_ID, STENCIL_INTERNAL_CLIENT_PATCH_BROWSER_ID, - STENCIL_INTERNAL_CLIENT_PATCH_ESM_ID, STENCIL_INTERNAL_HYDRATE_ID, STENCIL_INTERNAL_ID, } from './entry-alias-ids'; @@ -25,7 +24,6 @@ export const coreResolvePlugin = ( const compilerExe = config.sys.getCompilerExecutingPath(); const internalClient = getStencilInternalModule(config, compilerExe, 'client/index.js'); const internalClientPatchBrowser = getStencilInternalModule(config, compilerExe, 'client/patch-browser.js'); - const internalClientPatchEsm = getStencilInternalModule(config, compilerExe, 'client/patch-esm.js'); const internalHydrate = getStencilInternalModule(config, compilerExe, 'hydrate/index.js'); return { @@ -71,15 +69,6 @@ export const coreResolvePlugin = ( } return internalClientPatchBrowser; } - if (id === STENCIL_INTERNAL_CLIENT_PATCH_ESM_ID) { - if (externalRuntime) { - return { - id: STENCIL_INTERNAL_CLIENT_PATCH_ESM_ID, - external: true, - }; - } - return internalClientPatchEsm; - } if (id === STENCIL_INTERNAL_HYDRATE_ID) { return internalHydrate; } diff --git a/src/compiler/bundle/entry-alias-ids.ts b/src/compiler/bundle/entry-alias-ids.ts index 73edfd60966..62865b32fc4 100644 --- a/src/compiler/bundle/entry-alias-ids.ts +++ b/src/compiler/bundle/entry-alias-ids.ts @@ -5,7 +5,6 @@ export const STENCIL_APP_GLOBALS_ID = '@stencil/core/internal/app-globals'; export const STENCIL_HYDRATE_FACTORY_ID = '@stencil/core/hydrate-factory'; export const STENCIL_INTERNAL_CLIENT_ID = '@stencil/core/internal/client'; export const STENCIL_INTERNAL_CLIENT_PATCH_BROWSER_ID = '@stencil/core/internal/client/patch-browser'; -export const STENCIL_INTERNAL_CLIENT_PATCH_ESM_ID = '@stencil/core/internal/client/patch-esm'; export const STENCIL_INTERNAL_HYDRATE_ID = '@stencil/core/internal/hydrate'; export const STENCIL_MOCK_DOC_ID = '@stencil/core/mock-doc'; export const APP_DATA_CONDITIONAL = '?app-data=conditional'; diff --git a/src/compiler/config/test/validate-config.spec.ts b/src/compiler/config/test/validate-config.spec.ts index 3f292ee95ad..8fb4fd9b35c 100644 --- a/src/compiler/config/test/validate-config.spec.ts +++ b/src/compiler/config/test/validate-config.spec.ts @@ -387,8 +387,6 @@ describe('validation', () => { const { config } = validateConfig(userConfig, bootstrapConfig); expect(config.extras.appendChildSlotFix).toBe(false); expect(config.extras.cloneNodeFix).toBe(false); - // TODO(STENCIL-659): Remove code implementing the CSS variable shim - expect(config.extras.__deprecated__cssVarsShim).toBe(false); expect(config.extras.lifecycleDOMEvents).toBe(false); expect(config.extras.scriptDataOpts).toBe(false); // TODO(STENCIL-662): Remove code related to deprecated shadowDomShim field diff --git a/src/compiler/config/validate-config.ts b/src/compiler/config/validate-config.ts index 37138161b09..be7aff36f37 100644 --- a/src/compiler/config/validate-config.ts +++ b/src/compiler/config/validate-config.ts @@ -104,8 +104,6 @@ export const validateConfig = ( validatedConfig.extras = validatedConfig.extras || {}; validatedConfig.extras.appendChildSlotFix = !!validatedConfig.extras.appendChildSlotFix; validatedConfig.extras.cloneNodeFix = !!validatedConfig.extras.cloneNodeFix; - // TODO(STENCIL-659): Remove code implementing the CSS variable shim - validatedConfig.extras.__deprecated__cssVarsShim = !!validatedConfig.extras.__deprecated__cssVarsShim; validatedConfig.extras.lifecycleDOMEvents = !!validatedConfig.extras.lifecycleDOMEvents; validatedConfig.extras.scriptDataOpts = !!validatedConfig.extras.scriptDataOpts; // TODO(STENCIL-662): Remove code related to deprecated shadowDomShim field diff --git a/src/compiler/optimize/optimize-module.ts b/src/compiler/optimize/optimize-module.ts index 3982c49acc0..18a807e896b 100644 --- a/src/compiler/optimize/optimize-module.ts +++ b/src/compiler/optimize/optimize-module.ts @@ -81,7 +81,6 @@ export const optimizeModule = async ( compressOpts.passes = 2; compressOpts.global_defs = { supportsListenerOptions: true, - 'plt.$cssShim$': false, }; compressOpts.pure_funcs = compressOpts.pure_funcs || []; compressOpts.pure_funcs = ['getHostRef', ...compressOpts.pure_funcs]; 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 7bd6451c631..f047f5d6fa3 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,8 +7,6 @@ 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; build.isDev = false; diff --git a/src/compiler/output-targets/dist-lazy/generate-system.ts b/src/compiler/output-targets/dist-lazy/generate-system.ts index d4e5ad9d3e0..ac22cc83301 100644 --- a/src/compiler/output-targets/dist-lazy/generate-system.ts +++ b/src/compiler/output-targets/dist-lazy/generate-system.ts @@ -107,11 +107,7 @@ const getSystemLoader = async ( System.import(url.href); }; - if (window.__cssshim) { - window.__cssshim.i().then(start); - } else { - start(); - } + start(); // Note: using .call(window) here because the self-executing function needs // to be scoped to the window object for the ES6Promise polyfill to work 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 85423aa7cbf..14e5fcc5e99 100644 --- a/src/compiler/output-targets/dist-lazy/lazy-build-conditionals.ts +++ b/src/compiler/output-targets/dist-lazy/lazy-build-conditionals.ts @@ -11,8 +11,6 @@ export const getLazyBuildConditionals = ( build.lazyLoad = true; build.hydrateServerSide = false; - // 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/compiler/output-targets/dist-lazy/lazy-output.ts b/src/compiler/output-targets/dist-lazy/lazy-output.ts index b0fb0cf12d1..5c6232c8cef 100644 --- a/src/compiler/output-targets/dist-lazy/lazy-output.ts +++ b/src/compiler/output-targets/dist-lazy/lazy-output.ts @@ -10,7 +10,6 @@ import { STENCIL_APP_GLOBALS_ID, STENCIL_CORE_ID, STENCIL_INTERNAL_CLIENT_PATCH_BROWSER_ID, - STENCIL_INTERNAL_CLIENT_PATCH_ESM_ID, USER_INDEX_ENTRY_ID, } from '../../bundle/entry-alias-ids'; import { generateComponentBundles } from '../../entries/component-bundles'; @@ -166,14 +165,11 @@ const getLazyEntry = (isBrowser: boolean): string => { s.append(` return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n`); s.append(`});\n`); } else { - s.append(`import { patchEsm } from '${STENCIL_INTERNAL_CLIENT_PATCH_ESM_ID}';\n`); s.append(`import { globalScripts } from '${STENCIL_APP_GLOBALS_ID}';\n`); s.append(`export const defineCustomElements = (win, options) => {\n`); s.append(` if (typeof window === 'undefined') return Promise.resolve();\n`); - s.append(` return patchEsm().then(() => {\n`); - s.append(` globalScripts();\n`); - s.append(` return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n`); - s.append(` });\n`); + s.append(` globalScripts();\n`); + s.append(` return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n`); s.append(`};\n`); } diff --git a/src/declarations/stencil-private.ts b/src/declarations/stencil-private.ts index a95dcc88750..b279a4caff8 100644 --- a/src/declarations/stencil-private.ts +++ b/src/declarations/stencil-private.ts @@ -170,8 +170,6 @@ 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; slotChildNodesFix?: boolean; @@ -1109,19 +1107,6 @@ export interface HostRuleHeader { value?: string; } -// TODO(STENCIL-659): Remove code implementing the CSS variable shim -export interface CssVarShim { - i(): Promise; - addLink(linkEl: HTMLLinkElement): Promise; - addGlobalStyle(styleEl: HTMLStyleElement): void; - - createHostStyle(hostEl: HTMLElement, templateName: string, cssText: string, isScoped: boolean): HTMLStyleElement; - - removeHost(hostEl: HTMLElement): void; - updateHost(hostEl: HTMLElement): void; - updateGlobal(): void; -} - export interface DevClientWindow extends Window { ['s-dev-server']: boolean; ['s-initial-load']: boolean; @@ -1740,8 +1725,6 @@ export interface HostRef { } export interface PlatformRuntime { - // TODO(STENCIL-659): Remove code implementing the CSS variable shim - $cssShim$?: CssVarShim; $flags$: number; $orgLocNodes$?: Map; $resourcesUrl$: string; diff --git a/src/declarations/stencil-public-compiler.ts b/src/declarations/stencil-public-compiler.ts index 0567fb0a200..390d00038cd 100644 --- a/src/declarations/stencil-public-compiler.ts +++ b/src/declarations/stencil-public-compiler.ts @@ -278,16 +278,6 @@ 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. - */ - __deprecated__cssVarsShim?: boolean; - /** * Experimental flag. Projects that use a Stencil library built using the `dist` output target may have trouble lazily * loading components when using a bundler such as Vite or Parcel. Setting this flag to `true` will change how Stencil diff --git a/src/runtime/disconnected-callback.ts b/src/runtime/disconnected-callback.ts index 904e7f46aa6..a0d978ee354 100644 --- a/src/runtime/disconnected-callback.ts +++ b/src/runtime/disconnected-callback.ts @@ -17,13 +17,6 @@ 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); - } - if (BUILD.lazyLoad && BUILD.disconnectedCallback) { safeCall(instance, 'disconnectedCallback'); } diff --git a/src/runtime/styles.ts b/src/runtime/styles.ts index 829eb8e6439..defb7288866 100644 --- a/src/runtime/styles.ts +++ b/src/runtime/styles.ts @@ -23,13 +23,8 @@ export const registerStyle = (scopeId: string, cssText: string, allowCS: boolean styles.set(scopeId, style); }; -export const addStyle = ( - styleContainerNode: any, - cmpMeta: d.ComponentRuntimeMeta, - mode?: string, - hostElm?: HTMLElement -) => { - let scopeId = getScopeId(cmpMeta, mode); +export const addStyle = (styleContainerNode: any, cmpMeta: d.ComponentRuntimeMeta, mode?: string) => { + const scopeId = getScopeId(cmpMeta, mode); const style = styles.get(scopeId); if (!BUILD.attachStyles) { @@ -56,29 +51,8 @@ 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, - style, - // TODO(STENCIL-662): Remove code related to deprecated shadowDomShim field - !!(cmpMeta.$flags$ & CMP_FLAGS.needsScopedEncapsulation) - ); - const newScopeId = (styleElm as any)['s-sc']; - if (newScopeId) { - scopeId = newScopeId; - - // we don't want to add this styleID to the appliedStyles Set - // since the cssVarShim might need to apply several different - // stylesheets for the same component - appliedStyles = null; - } - } else { - styleElm = doc.createElement('style'); - styleElm.innerHTML = style; - } + styleElm = doc.createElement('style'); + styleElm.innerHTML = style; // Apply CSP nonce to the style tag if it exists const nonce = plt.$nonce$ ?? queryNonceMetaTagContent(doc); @@ -112,8 +86,7 @@ export const attachStyles = (hostRef: d.HostRef) => { const scopeId = addStyle( BUILD.shadowDom && supportsShadow && elm.shadowRoot ? elm.shadowRoot : elm.getRootNode(), cmpMeta, - hostRef.$modeName$, - elm + hostRef.$modeName$ ); // TODO(STENCIL-662): Remove code related to deprecated shadowDomShim field diff --git a/src/runtime/update-component.ts b/src/runtime/update-component.ts index 99d8aa3376f..9a12ddd4576 100644 --- a/src/runtime/update-component.ts +++ b/src/runtime/update-component.ts @@ -139,11 +139,7 @@ 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) { hostRef.$renderCount$ = hostRef.$renderCount$ === undefined ? 1 : hostRef.$renderCount$ + 1; hostRef.$flags$ &= ~HOST_FLAGS.devOnRender; diff --git a/src/testing/platform/testing-platform.ts b/src/testing/platform/testing-platform.ts index 62a333e048b..e82ec9785c2 100644 --- a/src/testing/platform/testing-platform.ts +++ b/src/testing/platform/testing-platform.ts @@ -26,8 +26,6 @@ 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; /** diff --git a/test/jest-spec-runner/stencil.config.ts b/test/jest-spec-runner/stencil.config.ts index e73e0d1658b..bf387c14643 100755 --- a/test/jest-spec-runner/stencil.config.ts +++ b/test/jest-spec-runner/stencil.config.ts @@ -9,7 +9,6 @@ export const config: Config = { hashFileNames: false, hydratedFlag: null, extras: { - cssVarsShim: false, scriptDataOpts: false, shadowDomShim: false, }, diff --git a/test/karma/stencil.config.ts b/test/karma/stencil.config.ts index a2511774f0d..b4b4ceb61fe 100644 --- a/test/karma/stencil.config.ts +++ b/test/karma/stencil.config.ts @@ -31,7 +31,6 @@ export const config: Config = { extras: { appendChildSlotFix: true, cloneNodeFix: true, - cssVarsShim: true, lifecycleDOMEvents: true, scopedSlotTextContentFix: true, scriptDataOpts: true, diff --git a/test/todo-app/stencil.config.ts b/test/todo-app/stencil.config.ts index d11f897ee1c..7886f255e5d 100755 --- a/test/todo-app/stencil.config.ts +++ b/test/todo-app/stencil.config.ts @@ -11,7 +11,6 @@ export const config: Config = { hashFileNames: false, hydratedFlag: null, extras: { - cssVarsShim: false, scriptDataOpts: false, shadowDomShim: false, }, diff --git a/tsconfig.json b/tsconfig.json index cae48cebd53..6d4b37da759 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -55,8 +55,6 @@ "src/cli/config-flags.ts", "src/client/index.ts", "src/client/client-patch-browser.ts", - "src/client/client-patch-esm.ts", - "src/client/polyfills/css-shim/index.ts", "src/compiler/index.ts", "src/compiler/public.ts", "src/compiler/sys/modules/index.ts",