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.spec.js

@@ -612,6 +612,92 @@ describe('$mdThemeProvider with disabled themes', function() {
   });
 });
 
+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: pink;\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: pink;\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: pink;\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: pink;\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);
+  });
+});
+
 describe('$mdThemeProvider with nonce', function() {
   beforeEach(function() {