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,92 +612,6 @@ 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() {