From d2b1e8ec976ee69360bafe90a6bcf24cc82e1bb0 Mon Sep 17 00:00:00 2001 From: Russell Bicknell Date: Fri, 13 Mar 2020 14:09:02 -0700 Subject: [PATCH] Upstream cl/298601736 --- packages/shadycss/src/style-properties.js | 62 ++++++++++++---------- packages/shadycss/src/style-transformer.js | 22 ++++---- 2 files changed, 47 insertions(+), 37 deletions(-) diff --git a/packages/shadycss/src/style-properties.js b/packages/shadycss/src/style-properties.js index 7b9cd741b..8d0f08bd0 100644 --- a/packages/shadycss/src/style-properties.js +++ b/packages/shadycss/src/style-properties.js @@ -42,6 +42,7 @@ const IS_IE = navigator.userAgent.match('Trident'); const XSCOPE_NAME = 'x-scope'; class StyleProperties { + /** @return {string} */ get XSCOPE_NAME() { return XSCOPE_NAME; } @@ -308,10 +309,10 @@ class StyleProperties { * @param {function(Object)} callback */ whenHostOrRootRule(scope, rule, cssBuild, callback) { - if (!rule.propertyInfo) { + if (!/** @type {?} */ (rule.propertyInfo)) { this.decorateRule(rule); } - if (!rule.propertyInfo.properties) { + if (!/** @type {?} */ (rule.propertyInfo).properties) { return; } let {is, typeExtension} = StyleUtil.getIsExtends(scope); @@ -336,7 +337,7 @@ class StyleProperties { let selectorToMatch = hostScope; if (isHost) { // need to transform :host because `:host` does not work with `matches` - if (!rule.transformedSelector) { + if (!/** @type {?} */ (rule.transformedSelector)) { // transform :host into a matchable selector rule.transformedSelector = StyleTransformer._transformRuleCss( @@ -346,10 +347,12 @@ class StyleProperties { hostScope ); } - selectorToMatch = rule.transformedSelector || hostScope; + selectorToMatch = + /** @type {?} */ (rule.transformedSelector) || hostScope; } if (isRoot && hostScope === 'html') { - selectorToMatch = rule.transformedSelector || rule.parsedSelector; + selectorToMatch = /** @type {?} */ (rule.transformedSelector) || + /** @type {?} */ (rule.parsedSelector); } callback({ selector: selectorToMatch, @@ -446,8 +449,8 @@ class StyleProperties { _keyframesRuleTransformer(keyframesRule) { return function(cssText) { return cssText.replace( - keyframesRule.keyframesNameRx, - keyframesRule.transformedKeyframesName); + /** @type {?} */ (keyframesRule.keyframesNameRx), + /** @type {?} */ (keyframesRule.transformedKeyframesName)); }; } @@ -464,9 +467,11 @@ class StyleProperties { // a non-word boundary or `-` at the end. rule.keyframesNameRx = new RegExp(`\\b${rule['keyframesName']}(?!\\B|-)`, 'g'); rule.transformedKeyframesName = rule['keyframesName'] + '-' + scopeId; - rule.transformedSelector = rule.transformedSelector || rule['selector']; - rule['selector'] = rule.transformedSelector.replace( - rule['keyframesName'], rule.transformedKeyframesName); + rule.transformedSelector = + /** @type {?} */ (rule.transformedSelector) || rule['selector']; + rule['selector'] = + /** @type {?} */ (rule.transformedSelector) + .replace(rule['keyframesName'], rule.transformedKeyframesName); } // Strategy: x scope shim a selector e.g. to scope `.x-foo-42` (via classes): @@ -484,7 +489,8 @@ class StyleProperties { * @param {string} scopeId */ _scopeSelector(rule, hostRx, hostSelector, scopeId) { - rule.transformedSelector = rule.transformedSelector || rule['selector']; + rule.transformedSelector = + /** @type {?} */ (rule.transformedSelector) || rule['selector']; let selector = rule.transformedSelector; let scope = '.' + scopeId; let parts = StyleUtil.splitSelectorList(selector); @@ -586,22 +592,24 @@ class StyleProperties { applyCustomStyle(style, properties) { let rules = StyleUtil.rulesForStyle(/** @type {HTMLStyleElement} */(style)); let self = this; - style.textContent = StyleUtil.toCssText(rules, function(/** StyleNode */rule) { - let css = rule['cssText'] = rule['parsedCssText']; - if (rule.propertyInfo && rule.propertyInfo.cssText) { - // remove property assignments - // so next function isn't confused - // NOTE: we have 3 categories of css: - // (1) normal properties, - // (2) custom property assignments (--foo: red;), - // (3) custom property usage: border: var(--foo); @apply(--foo); - // In elements, 1 and 3 are separated for efficiency; here they - // are not and this makes this case unique. - css = removeCustomPropAssignment(/** @type {string} */(css)); - // replace with reified properties, scenario is same as mixin - rule['cssText'] = self.valueForProperties(css, properties); - } - }); + style.textContent = + StyleUtil.toCssText(rules, function(/** StyleNode */ rule) { + let css = rule['cssText'] = rule['parsedCssText']; + if (/** @type {?} */ (rule.propertyInfo) && + /** @type {?} */ (rule.propertyInfo).cssText) { + // remove property assignments + // so next function isn't confused + // NOTE: we have 3 categories of css: + // (1) normal properties, + // (2) custom property assignments (--foo: red;), + // (3) custom property usage: border: var(--foo); @apply(--foo); + // In elements, 1 and 3 are separated for efficiency; here they + // are not and this makes this case unique. + css = removeCustomPropAssignment(/** @type {string} */ (css)); + // replace with reified properties, scenario is same as mixin + rule['cssText'] = self.valueForProperties(css, properties); + } + }); } } diff --git a/packages/shadycss/src/style-transformer.js b/packages/shadycss/src/style-transformer.js index 6803a8bc2..ed8a10881 100644 --- a/packages/shadycss/src/style-transformer.js +++ b/packages/shadycss/src/style-transformer.js @@ -37,6 +37,7 @@ import {nativeShadow} from './style-settings.js'; const SCOPE_NAME = 'style-scope'; class StyleTransformer { + /** @return {string} */ get SCOPE_NAME() { return SCOPE_NAME; } @@ -69,11 +70,11 @@ class StyleTransformer { /** * @param {!Node} startNode - * @param {!function(!Node)} transformer + * @param {function(!Node)} transformer */ _transformDom(startNode, transformer) { if (startNode.nodeType === Node.ELEMENT_NODE) { - transformer(startNode) + transformer(startNode); } let c$; if (startNode.localName === 'template') { @@ -185,8 +186,8 @@ class StyleTransformer { let hostScope = this._calcHostScope(scope, ext); scope = this._calcElementScope(scope); let self = this; - return StyleUtil.toCssText(rules, function(/** StyleNode */rule) { - if (!rule.isScoped) { + return StyleUtil.toCssText(rules, function(/** StyleNode */ rule) { + if (!/** @type {?} */ (rule.isScoped)) { self.rule(rule, scope, hostScope); rule.isScoped = true; } @@ -224,8 +225,8 @@ class StyleTransformer { _transformRule(rule, transformer, scope, hostScope) { // NOTE: save transformedSelector for subsequent matching of elements // against selectors (e.g. when calculating style properties) - rule['selector'] = rule.transformedSelector = - this._transformRuleCss(rule, transformer, scope, hostScope); + rule['selector'] = /** @type {?} */ (rule).transformedSelector = + this._transformRuleCss(rule, transformer, scope, hostScope); } /** @@ -277,7 +278,7 @@ class StyleTransformer { const start = match.index; const end = StyleUtil.findMatchingParen(selector, start); if (end === -1) { - throw new Error(`${match.input} selector missing ')'`) + throw new Error(`${match.input} selector missing ')'`); } const part = selector.slice(start, end + 1); selector = selector.replace(part, MATCHES_REPLACEMENT); @@ -310,7 +311,8 @@ class StyleTransformer { // Remove spaces inside of selectors like `:nth-of-type` because it confuses SIMPLE_SELECTOR_SEP let isNth = NTH.test(selector); if (isNth) { - selector = selector.replace(NTH, (m, type, inner) => `:${type}(${inner.replace(/\s/g, '')})`) + selector = selector.replace( + NTH, (m, type, inner) => `:${type}(${inner.replace(/\s/g, '')})`); selector = this._twiddleNthPlus(selector); } // Preserve selectors like `:-webkit-any` so that SIMPLE_SELECTOR_SEP does @@ -454,7 +456,7 @@ class StyleTransformer { // remove ':host' type selectors in document rules return ''; } else if (selector.match(SLOTTED)) { - return this._transformComplexSelector(selector, SCOPE_DOC_SELECTOR) + return this._transformComplexSelector(selector, SCOPE_DOC_SELECTOR); } else { return this._transformSimpleSelector(selector.trim(), SCOPE_DOC_SELECTOR); } @@ -484,4 +486,4 @@ const SELECTOR_NO_MATCH = 'should_not_match'; const MATCHES = /:(?:matches|any|-(?:webkit|moz)-any)/; const MATCHES_REPLACEMENT = '\u{e000}'; -export default new StyleTransformer() +export default new StyleTransformer();