fix(theming): fix CSS with nested rules parsing when registering a theme

Replace the regex used to split the CSS string with a function that takes into account nested rules.

Fixes #9869

Author: natete

src/core/services/theming/theming.js

@@ -898,11 +898,8 @@ function generateAllThemes($injector, $mdTheming) {
   // components as templates
 
   // Break the CSS into individual rules
-  var rules = themeCss
-                  .split(/\}(?!(\}|'|"|;))/)
-                  .filter(function(rule) { return rule && rule.trim().length; })
-                  .map(function(rule) { return rule.trim() + '}'; });
-
+  var rules = splitCss(themeCss)
+                .map(function(rule) { return rule.trim(); });
 
   var ruleMatchRegex = new RegExp('md-(' + THEME_COLOR_TYPES.join('|') + ')', 'g');
 
@@ -1003,6 +1000,48 @@ function generateAllThemes($injector, $mdTheming) {
       }
     });
   }
+
+  // Split a string representing a CSS file producing an array with a rule in each element of it.
+  function splitCss(themeCss) {
+    var result = [];
+    var currentRule = '';
+    var openedCurlies = 0;
+    var closedCurlies = 0;
+
+    for (var i = 0; i < themeCss.length; i++) {
+      var character = themeCss.charAt(i);
+
+      // Check for content in quotes
+      if (character === '\'' || character === '\"') {
+        // Find closing quote
+        var nextQuoteIndex = themeCss.indexOf(character, i + 1);
+        var textInQuotes = themeCss.substring(i, nextQuoteIndex);
+        currentRule += textInQuotes;
+        // Jump to the closing quote char
+        i = nextQuoteIndex;
+      } else {
+        currentRule += character;
+
+        if (character === '}') {
+          closedCurlies++;
+          if (closedCurlies === openedCurlies) {
+            closedCurlies = 0;
+            openedCurlies = 0;
+            result.push(currentRule);
+            currentRule = '';
+          }
+        } else if (character === '{') {
+          openedCurlies++;
+        }
+      }
+    }
+    // Add comments added after last valid rule.
+    if (currentRule !== '') {
+      result.push(currentRule);
+    }
+
+    return result;
+  }
 }
 
 function generateTheme(theme, name, nonce) {

src/core/services/theming/theming.spec.js

@@ -880,3 +880,89 @@ describe('md-themable directive', function() {
     expect(el.hasClass('md-default-theme')).toBe(true);
   }));
 });
+
+describe('$mdThemeProvider with custom styles that include nested rules', function() {
+  it('appends the custom styles taking into account nesting', function() {
+    module('material.core', function($mdThemingProvider) {
+      $mdThemingProvider.generateThemesOnDemand(false);
+      var styles =
+          "@media (min-width: 0) and (max-width: 700px) {\n\n"
+          + "  .md-THEME_NAME-theme .layout-row {\n"
+          + "    background-color: {{primary-500}};\n"
+          + "  }\n\n"
+          + "  .md-THEME_NAME-theme .layout-column {\n"
+          + "    color: blue;\n"
+          + "    font-weight: bold;\n"
+          + "  }\n"
+          + "}\n";
+
+      $mdThemingProvider.registerStyles(styles);
+      $mdThemingProvider.theme('register-custom-nested-styles');
+    });
+
+    inject(function($MD_THEME_CSS) {
+      // Verify that $MD_THEME_CSS is still set to '/**/' in the test environment.
+      // Check angular-material-mocks.js for $MD_THEME_CSS latest value if this test starts to fail.
+      expect($MD_THEME_CSS).toBe('/**/');
+    });
+
+    var compiledStyles =
+        "@media (min-width: 0) and (max-width: 700px) {\n\n"
+        + "  .md-register-custom-nested-styles-theme .layout-row {\n"
+        + "    background-color: rgb(63,81,181);\n"
+        + "  }\n\n"
+        + "  .md-register-custom-nested-styles-theme .layout-column {\n"
+        + "    color: blue;\n"
+        + "    font-weight: bold;\n"
+        + "  }\n"
+        + "}";
+
+    // Find the string containing nested rules in the head tag.
+    expect(document.head.innerHTML).toContain(compiledStyles);
+  });
+});
+
+describe('$mdThemeProvider with custom styles that include multiple nested rules', function() {
+  it('appends the custom styles taking into account multiple nesting', function() {
+    module('material.core', function($mdThemingProvider) {
+      $mdThemingProvider.generateThemesOnDemand(false);
+      var styles =
+          "@supports (display: bar) {\n\n"
+          + "  @media (min-width: 0) and (max-width: 700px) {\n\n"
+          + "    .md-THEME_NAME-theme .layout-row {\n"
+          + "      background-color: {{primary-500}};\n"
+          + "    }\n\n"
+          + "    .md-THEME_NAME-theme .layout-column {\n"
+          + "      color: blue;\n"
+          + "      font-weight: bold;\n"
+          + "    }\n"
+          + "  }\n"
+          + "}\n";
+
+      $mdThemingProvider.registerStyles(styles);
+      $mdThemingProvider.theme('register-custom-multiple-nested-styles');
+    });
+
+    inject(function($MD_THEME_CSS) {
+      // Verify that $MD_THEME_CSS is still set to '/**/' in the test environment.
+      // Check angular-material-mocks.js for $MD_THEME_CSS latest value if this test starts to fail.
+      expect($MD_THEME_CSS).toBe('/**/');
+    });
+
+    var compiledStyles =
+        "@supports (display: bar) {\n\n"
+        + "  @media (min-width: 0) and (max-width: 700px) {\n\n"
+        + "    .md-register-custom-multiple-nested-styles-theme .layout-row {\n"
+        + "      background-color: rgb(63,81,181);\n"
+        + "    }\n\n"
+        + "    .md-register-custom-multiple-nested-styles-theme .layout-column {\n"
+        + "      color: blue;\n"
+        + "      font-weight: bold;\n"
+        + "    }\n"
+        + "  }\n"
+        + "}";
+
+    // Find the string containing nested rules in the head tag.
+    expect(document.head.innerHTML).toContain(compiledStyles);
+  });
+});