Skip to content
This repository was archived by the owner on Sep 5, 2024. It is now read-only.

Commit f173fba

Browse files
committed
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
2 parents 40dae3e + f190436 commit f173fba

File tree

1 file changed

+86
-0
lines changed

1 file changed

+86
-0
lines changed

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

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -612,6 +612,92 @@ describe('$mdThemeProvider with disabled themes', function() {
612612
});
613613
});
614614

615+
describe('$mdThemeProvider with custom styles that include nested rules', function() {
616+
it('appends the custom styles taking into account nesting', function() {
617+
module('material.core', function($mdThemingProvider) {
618+
$mdThemingProvider.generateThemesOnDemand(false);
619+
var styles =
620+
"@media (min-width: 0) and (max-width: 700px) {\n\n"
621+
+ " .md-THEME_NAME-theme .layout-row {\n"
622+
+ " background-color: pink;\n"
623+
+ " }\n\n"
624+
+ " .md-THEME_NAME-theme .layout-column {\n"
625+
+ " color: blue;\n"
626+
+ " font-weight: bold;\n"
627+
+ " }\n"
628+
+ "}\n";
629+
630+
$mdThemingProvider.registerStyles(styles);
631+
$mdThemingProvider.theme('register-custom-nested-styles');
632+
});
633+
634+
inject(function($MD_THEME_CSS) {
635+
// Verify that $MD_THEME_CSS is still set to '/**/' in the test environment.
636+
// Check angular-material-mocks.js for $MD_THEME_CSS latest value if this test starts to fail.
637+
expect($MD_THEME_CSS).toBe('/**/');
638+
});
639+
640+
var compiledStyles =
641+
"@media (min-width: 0) and (max-width: 700px) {\n\n"
642+
+ " .md-register-custom-nested-styles-theme .layout-row {\n"
643+
+ " background-color: pink;\n"
644+
+ " }\n\n"
645+
+ " .md-register-custom-nested-styles-theme .layout-column {\n"
646+
+ " color: blue;\n"
647+
+ " font-weight: bold;\n"
648+
+ " }\n"
649+
+ "}";
650+
651+
// Find the string containing nested rules in the head tag.
652+
expect(document.head.innerHTML).toContain(compiledStyles);
653+
});
654+
});
655+
656+
describe('$mdThemeProvider with custom styles that include multiple nested rules', function() {
657+
it('appends the custom styles taking into account multiple nesting', function() {
658+
module('material.core', function($mdThemingProvider) {
659+
$mdThemingProvider.generateThemesOnDemand(false);
660+
var styles =
661+
"@supports (display: bar) {\n\n"
662+
+ " @media (min-width: 0) and (max-width: 700px) {\n\n"
663+
+ " .md-THEME_NAME-theme .layout-row {\n"
664+
+ " background-color: pink;\n"
665+
+ " }\n\n"
666+
+ " .md-THEME_NAME-theme .layout-column {\n"
667+
+ " color: blue;\n"
668+
+ " font-weight: bold;\n"
669+
+ " }\n"
670+
+ " }\n"
671+
+ "}\n";
672+
673+
$mdThemingProvider.registerStyles(styles);
674+
$mdThemingProvider.theme('register-custom-multiple-nested-styles');
675+
});
676+
677+
inject(function($MD_THEME_CSS) {
678+
// Verify that $MD_THEME_CSS is still set to '/**/' in the test environment.
679+
// Check angular-material-mocks.js for $MD_THEME_CSS latest value if this test starts to fail.
680+
expect($MD_THEME_CSS).toBe('/**/');
681+
});
682+
683+
var compiledStyles =
684+
"@supports (display: bar) {\n\n"
685+
+ " @media (min-width: 0) and (max-width: 700px) {\n\n"
686+
+ " .md-register-custom-multiple-nested-styles-theme .layout-row {\n"
687+
+ " background-color: pink;\n"
688+
+ " }\n\n"
689+
+ " .md-register-custom-multiple-nested-styles-theme .layout-column {\n"
690+
+ " color: blue;\n"
691+
+ " font-weight: bold;\n"
692+
+ " }\n"
693+
+ " }\n"
694+
+ "}";
695+
696+
// Find the string containing nested rules in the head tag.
697+
expect(document.head.innerHTML).toContain(compiledStyles);
698+
});
699+
});
700+
615701
describe('$mdThemeProvider with nonce', function() {
616702
beforeEach(function() {
617703

0 commit comments

Comments
 (0)