diff --git a/src/lib/css-parse.html b/src/lib/css-parse.html index f4ccdd38e3..a176d7c1c0 100644 --- a/src/lib/css-parse.html +++ b/src/lib/css-parse.html @@ -24,7 +24,7 @@ // remove stuff we don't care about that may hinder parsing _clean: function (cssText) { - return cssText.replace(rx.comments, '').replace(rx.port, ''); + return cssText.replace(this._rx.comments, '').replace(this._rx.port, ''); }, // super simple {...} lexer that returns a node tree @@ -64,16 +64,16 @@ // helps with mixin syntax t = t.substring(t.lastIndexOf(';')+1); var s = node.parsedSelector = node.selector = t.trim(); - node.atRule = (s.indexOf(AT_START) === 0); + node.atRule = (s.indexOf(this.AT_START) === 0); // note, support a subset of rule types... if (node.atRule) { - if (s.indexOf(MEDIA_START) === 0) { + if (s.indexOf(this.MEDIA_START) === 0) { node.type = this.types.MEDIA_RULE; - } else if (s.match(rx.keyframesRule)) { + } else if (s.match(this._rx.keyframesRule)) { node.type = this.types.KEYFRAMES_RULE; } } else { - if (s.indexOf(VAR_START) === 0) { + if (s.indexOf(this.VAR_START) === 0) { node.type = this.types.MIXIN_RULE; } else { node.type = this.types.STYLE_RULE; @@ -96,13 +96,13 @@ var cssText = ''; if (node.cssText || node.rules) { var r$ = node.rules; - if (r$ && (preserveProperties || !hasMixinRules(r$))) { + if (r$ && (preserveProperties || !this._hasMixinRules(r$))) { for (var i=0, l=r$.length, r; (i= 0); + }, + + removeCustomProps: function(cssText) { + cssText = this.removeCustomPropAssignment(cssText); + return this.removeCustomPropApply(cssText); + }, + + removeCustomPropAssignment: function(cssText) { + return cssText + .replace(this._rx.customProp, '') + .replace(this._rx.mixinProp, ''); + }, + + removeCustomPropApply: function(cssText) { + return cssText + .replace(this._rx.mixinApply, '') + .replace(this._rx.varApply, ''); + }, + types: { STYLE_RULE: 1, KEYFRAMES_RULE: 7, @@ -130,37 +151,26 @@ }, OPEN_BRACE: '{', - CLOSE_BRACE: '}' + CLOSE_BRACE: '}', + + // helper regexp's + _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/, + }, - }; + VAR_START: '--', + MEDIA_START: '@media', + AT_START: '@' - function hasMixinRules(rules) { - return (rules[0].selector.indexOf(VAR_START) >= 0); - } - - function removeCustomProps(cssText) { - return cssText - .replace(rx.customProp, '') - .replace(rx.mixinProp, '') - .replace(rx.mixinApply, '') - .replace(rx.varApply, ''); - } - - var VAR_START = '--'; - var MEDIA_START = '@media'; - var AT_START = '@'; - - // helper regexp's - var 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/, }; + // exports return api; diff --git a/src/lib/custom-style.html b/src/lib/custom-style.html index 1eb97416ac..64b7222652 100644 --- a/src/lib/custom-style.html +++ b/src/lib/custom-style.html @@ -71,6 +71,7 @@ var nativeShadow = Polymer.Settings.useNativeShadow; var propertyUtils = Polymer.StyleProperties; var styleUtil = Polymer.StyleUtil; + var cssParse = Polymer.CssParse; var styleDefaults = Polymer.StyleDefaults; var styleTransformer = Polymer.StyleTransformer; @@ -125,9 +126,15 @@ function(rule) { var css = rule.cssText = rule.parsedCssText; if (rule.propertyInfo && rule.propertyInfo.cssText) { - // TODO(sorvell): factor better - // remove property assignments so next function isn't confused - css = css.replace(propertyUtils.rx.VAR_ASSIGN, ''); + // 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 = cssParse.removeCustomPropAssignment(css); // replace with reified properties, scenario is same as mixin rule.cssText = propertyUtils.valueForProperties(css, props); } diff --git a/src/lib/style-properties.html b/src/lib/style-properties.html index f2a4271e33..2aee84081f 100644 --- a/src/lib/style-properties.html +++ b/src/lib/style-properties.html @@ -147,22 +147,24 @@ // note: we do not yet support mixin within mixin valueForProperties: function(property, props) { var parts = property.split(';'); - for (var i=0, p, m; (i