fix(theming): match preceding selectors as well (#9484)

* The theming service currently only matches from the beginning of the `md-default-theme`, but all preceding selectors are being ignored.

Fixes #9480

Author: devversion

gulp/util.js

@@ -84,13 +84,15 @@ function autoprefix () {
   ]});
 }
 
-function minifyCss() {
-  return nano({
+function minifyCss(extraOptions) {
+  var options = {
     autoprefixer: false,
     reduceTransforms: false,
     svgo: false,
     safe: true
-  });
+  };
+
+  return nano(_.assign(options, extraOptions));
 }
 
 function buildModule(module, opts) {
@@ -229,6 +231,8 @@ function themeBuildStream() {
       .pipe(utils.hoistScssVariables())
       .pipe(sass())
       .pipe(dedupeCss())
+      // The PostCSS orderedValues plugin modifies the theme color expressions.
+      .pipe(minifyCss({ orderedValues: false }))
       .pipe(utils.cssToNgConstant('material.core', '$MD_THEME_CSS'));
 }
 

src/core/services/theming/theming.js

@@ -744,9 +744,10 @@ function parseRules(theme, colorType, rules) {
     // Don't apply a selector rule to the default theme, making it easier to override
     // styles of the base-component
     if (theme.name == 'default') {
-      var themeRuleRegex = /((?:(?:(?: |>|\.|\w|-|:|\(|\)|\[|\]|"|'|=)+) )?)((?:(?:\w|\.|-)+)?)\.md-default-theme((?: |>|\.|\w|-|:|\(|\)|\[|\]|"|'|=)*)/g;
-      newRule = newRule.replace(themeRuleRegex, function(match, prefix, target, suffix) {
-        return match + ', ' + prefix + target + suffix;
+      var themeRuleRegex = /((?:\s|>|\.|\w|-|:|\(|\)|\[|\]|"|'|=)*)\.md-default-theme((?:\s|>|\.|\w|-|:|\(|\)|\[|\]|"|'|=)*)/g;
+
+      newRule = newRule.replace(themeRuleRegex, function(match, start, end) {
+        return match + ', ' + start + end;
       });
     }
     generatedRules.push(newRule);