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