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 132c080a4fa..65a78a06403 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 @@ -4,6 +4,7 @@ import { getBuildFeatures } from '../../app-core/app-data'; export const getHydrateBuildConditionals = (cmps: d.ComponentCompilerMeta[]) => { const build = getBuildFeatures(cmps) as d.BuildConditionals; + build.slotRelocation = true; build.lazyLoad = true; build.hydrateServerSide = true; build.cssVarShim = false; diff --git a/src/compiler/transformers/add-static-style.ts b/src/compiler/transformers/add-static-style.ts index cc0c0c75a93..cb060490c5b 100644 --- a/src/compiler/transformers/add-static-style.ts +++ b/src/compiler/transformers/add-static-style.ts @@ -11,8 +11,8 @@ import ts from 'typescript'; * static get style() { return "styles"; } * } */ -export const addStaticStyleGetterWithinClass = (classMembers: ts.ClassElement[], cmp: d.ComponentCompilerMeta) => { - const styleLiteral = getStyleLiteral(cmp); +export const addStaticStyleGetterWithinClass = (classMembers: ts.ClassElement[], cmp: d.ComponentCompilerMeta, commentOriginalSelector: boolean) => { + const styleLiteral = getStyleLiteral(cmp, commentOriginalSelector); if (styleLiteral) { classMembers.push(createStaticGetter('style', styleLiteral)); } @@ -23,35 +23,35 @@ export const addStaticStyleGetterWithinClass = (classMembers: ts.ClassElement[], * const MyComponent = class {} * MyComponent.style = "styles"; */ -export const addStaticStylePropertyToClass = (styleStatements: ts.Statement[], cmp: d.ComponentCompilerMeta) => { - const styleLiteral = getStyleLiteral(cmp); +export const addStaticStylePropertyToClass = (styleStatements: ts.Statement[], cmp: d.ComponentCompilerMeta, commentOriginalSelector: boolean) => { + const styleLiteral = getStyleLiteral(cmp, commentOriginalSelector); if (styleLiteral) { const statement = ts.createStatement(ts.createAssignment(ts.createPropertyAccess(ts.createIdentifier(cmp.componentClassName), 'style'), styleLiteral)); styleStatements.push(statement); } }; -const getStyleLiteral = (cmp: d.ComponentCompilerMeta) => { +const getStyleLiteral = (cmp: d.ComponentCompilerMeta, commentOriginalSelector: boolean) => { if (Array.isArray(cmp.styles) && cmp.styles.length > 0) { if (cmp.styles.length > 1 || (cmp.styles.length === 1 && cmp.styles[0].modeName !== DEFAULT_STYLE_MODE)) { // multiple style modes - return getMultipleModeStyle(cmp, cmp.styles); + return getMultipleModeStyle(cmp, cmp.styles, commentOriginalSelector); } else { // single style - return getSingleStyle(cmp, cmp.styles[0]); + return getSingleStyle(cmp, cmp.styles[0], commentOriginalSelector); } } return null; }; -const getMultipleModeStyle = (cmp: d.ComponentCompilerMeta, styles: d.StyleCompiler[]) => { +const getMultipleModeStyle = (cmp: d.ComponentCompilerMeta, styles: d.StyleCompiler[], commentOriginalSelector: boolean) => { const styleModes: ts.ObjectLiteralElementLike[] = []; styles.forEach(style => { if (typeof style.styleStr === 'string') { // inline the style string // static get style() { return { ios: "string" }; } - const styleLiteral = createStyleLiteral(cmp, style); + const styleLiteral = createStyleLiteral(cmp, style, commentOriginalSelector); const propStr = createPropertyAssignment(style.modeName, styleLiteral); styleModes.push(propStr); } else if (typeof style.styleIdentifier === 'string') { @@ -79,11 +79,11 @@ const createPropertyAssignment = (mode: string, initializer: ts.Expression) => { return node; }; -const getSingleStyle = (cmp: d.ComponentCompilerMeta, style: d.StyleCompiler) => { +const getSingleStyle = (cmp: d.ComponentCompilerMeta, style: d.StyleCompiler, commentOriginalSelector: boolean) => { if (typeof style.styleStr === 'string') { // inline the style string // static get style() { return "string"; } - return createStyleLiteral(cmp, style); + return createStyleLiteral(cmp, style, commentOriginalSelector); } if (typeof style.styleIdentifier === 'string') { @@ -103,11 +103,11 @@ const getSingleStyle = (cmp: d.ComponentCompilerMeta, style: d.StyleCompiler) => return null; }; -const createStyleLiteral = (cmp: d.ComponentCompilerMeta, style: d.StyleCompiler) => { - if (cmp.encapsulation === 'scoped') { +const createStyleLiteral = (cmp: d.ComponentCompilerMeta, style: d.StyleCompiler, commentOriginalSelector: boolean) => { + if (cmp.encapsulation === 'scoped' || (commentOriginalSelector && cmp.encapsulation === 'shadow')) { // scope the css first const scopeId = getScopeId(cmp.tagName, style.modeName); - return ts.createStringLiteral(scopeCss(style.styleStr, scopeId, false)); + return ts.createStringLiteral(scopeCss(style.styleStr, scopeId, commentOriginalSelector)); } return ts.createStringLiteral(style.styleStr); diff --git a/src/compiler/transformers/component-hydrate/hydrate-runtime-cmp-meta.ts b/src/compiler/transformers/component-hydrate/hydrate-runtime-cmp-meta.ts index 71db5d27df9..f3701867997 100644 --- a/src/compiler/transformers/component-hydrate/hydrate-runtime-cmp-meta.ts +++ b/src/compiler/transformers/component-hydrate/hydrate-runtime-cmp-meta.ts @@ -19,7 +19,8 @@ export const addHydrateRuntimeCmpMeta = (classMembers: ts.ClassElement[], cmp: d cmpMeta.$flags$ |= CMP_FLAGS.needsShadowDomShim; } const staticMember = createStaticGetter('cmpMeta', convertValueToLiteral(cmpMeta)); - addStaticStyleGetterWithinClass(classMembers, cmp); + const commentOriginalSelector = cmp.encapsulation === 'shadow'; + addStaticStyleGetterWithinClass(classMembers, cmp, commentOriginalSelector); classMembers.push(staticMember); }; diff --git a/src/compiler/transformers/component-lazy/lazy-component.ts b/src/compiler/transformers/component-lazy/lazy-component.ts index a4ebad4a474..f2e012fea1c 100644 --- a/src/compiler/transformers/component-lazy/lazy-component.ts +++ b/src/compiler/transformers/component-lazy/lazy-component.ts @@ -34,7 +34,7 @@ const updateLazyComponentMembers = ( transformHostData(classMembers, moduleFile); if (transformOpts.style === 'static') { - addStaticStylePropertyToClass(styleStatements, cmp); + addStaticStylePropertyToClass(styleStatements, cmp, false); } return classMembers; diff --git a/src/compiler/transformers/static-to-meta/styles.ts b/src/compiler/transformers/static-to-meta/styles.ts index 2f2b2c14a3b..3941f2e6acc 100644 --- a/src/compiler/transformers/static-to-meta/styles.ts +++ b/src/compiler/transformers/static-to-meta/styles.ts @@ -21,9 +21,6 @@ export const parseStaticStyles = (compilerCtx: d.CompilerCtx, tagName: string, c styleId: null, styleStr: parsedStyle, styleIdentifier: null, - compiledStyleText: null, - compiledStyleTextScoped: null, - compiledStyleTextScopedCommented: null, externalStyles: [], }); compilerCtx.styleModeNames.add(DEFAULT_STYLE_MODE); @@ -40,9 +37,6 @@ export const parseStaticStyles = (compilerCtx: d.CompilerCtx, tagName: string, c styleId: null, styleStr: parsedStyleMode, styleIdentifier: null, - compiledStyleText: null, - compiledStyleTextScoped: null, - compiledStyleTextScopedCommented: null, externalStyles: [], }); } else { @@ -73,9 +67,6 @@ export const parseStaticStyles = (compilerCtx: d.CompilerCtx, tagName: string, c styleId: null, styleStr: null, styleIdentifier: null, - compiledStyleText: null, - compiledStyleTextScoped: null, - compiledStyleTextScopedCommented: null, externalStyles: externalStyles, }; @@ -96,9 +87,6 @@ const parseStyleIdentifier = (parsedStyle: ConvertIdentifier, modeName: string) styleId: null, styleStr: null, styleIdentifier: parsedStyle.__escapedText, - compiledStyleText: null, - compiledStyleTextScoped: null, - compiledStyleTextScopedCommented: null, externalStyles: [], }; return style; diff --git a/src/declarations/stencil-private.ts b/src/declarations/stencil-private.ts index 26205e7d772..082482408c4 100644 --- a/src/declarations/stencil-private.ts +++ b/src/declarations/stencil-private.ts @@ -1922,9 +1922,6 @@ export interface StyleCompiler { styleStr: string; styleIdentifier: string; externalStyles: ExternalStyleCompiler[]; - compiledStyleText: string; - compiledStyleTextScoped: string; - compiledStyleTextScopedCommented: string; } export interface ExternalStyleCompiler {