Skip to content
This repository has been archived by the owner on Oct 13, 2022. It is now read-only.

Commit

Permalink
webcomponents#284: Cast property accesses of unknown type (upstream c…
Browse files Browse the repository at this point in the history 
…l/298601736)
  • Loading branch information
@bicknellr
bicknellr authored Mar 16, 2020
2 parents 86c5cb1 + d2b1e8e commit 0c216ab
Show file tree
Hide file tree
Showing 2 changed files with 47 additions and 37 deletions.
62 changes: 35 additions & 27 deletions packages/shadycss/src/style-properties.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down Expand Up @@ -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);
Expand All @@ -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(
Expand All @@ -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,
Expand Down Expand Up @@ -446,8 +449,8 @@ class StyleProperties {
_keyframesRuleTransformer(keyframesRule) {
return function(cssText) {
return cssText.replace(
keyframesRule.keyframesNameRx,
keyframesRule.transformedKeyframesName);
/** @type {?} */ (keyframesRule.keyframesNameRx),
/** @type {?} */ (keyframesRule.transformedKeyframesName));
};
}

Expand All @@ -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):
Expand All @@ -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);
Expand Down Expand Up @@ -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);
}
});
}
}

Expand Down
22 changes: 12 additions & 10 deletions packages/shadycss/src/style-transformer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down Expand Up @@ -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') {
Expand Down Expand Up @@ -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;
}
Expand Down Expand Up @@ -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);
}

/**
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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);
}
Expand Down Expand Up @@ -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();

0 comments on commit 0c216ab

Please sign in to comment.