mirror of
https://github.com/angular/angular.git
synced 2026-09-14 13:54:52 +08:00
Kristiyan Kostadinov
cbb8702143
The `@property` atrule allows users to define custom CSS variables. These changes update the compiler to account for when namespacing variables.
(cherry picked from commit 9b80d4ce9e)
690 lines
25 KiB
TypeScript
690 lines
25 KiB
TypeScript
/**
|
||
* @license
|
||
* Copyright Google LLC All Rights Reserved.
|
||
*
|
||
* Use of this source code is governed by an MIT-style license that can be
|
||
* found in the LICENSE file at https://angular.dev/license
|
||
*/
|
||
|
||
import {namespaceCssVariables} from '../../src/shadow_css';
|
||
import {shim} from './utils';
|
||
|
||
describe('ShadowCss', () => {
|
||
it('should handle empty string', () => {
|
||
expect(shim('', 'contenta')).toEqualCss('');
|
||
});
|
||
|
||
it('should add an attribute to every rule', () => {
|
||
const css = 'one {color: red;}two {color: red;}';
|
||
const expected = 'one[contenta] {color:red;}two[contenta] {color:red;}';
|
||
expect(shim(css, 'contenta')).toEqualCss(expected);
|
||
});
|
||
|
||
it('should handle invalid css', () => {
|
||
const css = 'one {color: red;}garbage';
|
||
const expected = 'one[contenta] {color:red;}garbage';
|
||
expect(shim(css, 'contenta')).toEqualCss(expected);
|
||
});
|
||
|
||
it('should add an attribute to every selector', () => {
|
||
const css = 'one, two {color: red;}';
|
||
const expected = 'one[contenta], two[contenta] {color:red;}';
|
||
expect(shim(css, 'contenta')).toEqualCss(expected);
|
||
});
|
||
|
||
it('should support newlines in the selector and content ', () => {
|
||
const css = `
|
||
one,
|
||
two {
|
||
color: red;
|
||
}
|
||
`;
|
||
const expected = `
|
||
one[contenta],
|
||
two[contenta] {
|
||
color: red;
|
||
}
|
||
`;
|
||
expect(shim(css, 'contenta')).toEqualCss(expected);
|
||
});
|
||
|
||
it('should support newlines in the same selector and content ', () => {
|
||
const selector = `.foo:not(
|
||
.bar) {
|
||
background-color:
|
||
green;
|
||
}`;
|
||
expect(shim(selector, 'contenta', 'a-host')).toEqualCss(
|
||
'.foo[contenta]:not( .bar) { background-color:green;}',
|
||
);
|
||
});
|
||
|
||
it('should handle complicated selectors', () => {
|
||
expect(shim('one::before {}', 'contenta')).toEqualCss('one[contenta]::before {}');
|
||
expect(shim('one two {}', 'contenta')).toEqualCss('one[contenta] two[contenta] {}');
|
||
expect(shim('one > two {}', 'contenta')).toEqualCss('one[contenta] > two[contenta] {}');
|
||
expect(shim('one + two {}', 'contenta')).toEqualCss('one[contenta] + two[contenta] {}');
|
||
expect(shim('one ~ two {}', 'contenta')).toEqualCss('one[contenta] ~ two[contenta] {}');
|
||
expect(shim('.one.two > three {}', 'contenta')).toEqualCss(
|
||
'.one.two[contenta] > three[contenta] {}',
|
||
);
|
||
expect(shim('one[attr="value"] {}', 'contenta')).toEqualCss('one[attr="value"][contenta] {}');
|
||
expect(shim('one[attr=value] {}', 'contenta')).toEqualCss('one[attr=value][contenta] {}');
|
||
expect(shim('one[attr^="value"] {}', 'contenta')).toEqualCss('one[attr^="value"][contenta] {}');
|
||
expect(shim('one[attr$="value"] {}', 'contenta')).toEqualCss('one[attr$="value"][contenta] {}');
|
||
expect(shim('one[attr*="value"] {}', 'contenta')).toEqualCss('one[attr*="value"][contenta] {}');
|
||
expect(shim('one[attr|="value"] {}', 'contenta')).toEqualCss('one[attr|="value"][contenta] {}');
|
||
expect(shim('one[attr~="value"] {}', 'contenta')).toEqualCss('one[attr~="value"][contenta] {}');
|
||
expect(shim('one[attr="va lue"] {}', 'contenta')).toEqualCss('one[attr="va lue"][contenta] {}');
|
||
expect(shim('one[attr] {}', 'contenta')).toEqualCss('one[attr][contenta] {}');
|
||
expect(shim('[is="one"] {}', 'contenta')).toEqualCss('[is="one"][contenta] {}');
|
||
expect(shim('[attr] {}', 'contenta')).toEqualCss('[attr][contenta] {}');
|
||
});
|
||
|
||
it('should transform :host with attributes', () => {
|
||
expect(shim(':host [attr] {}', 'contenta', 'hosta')).toEqualCss('[hosta] [attr][contenta] {}');
|
||
expect(shim(':host(create-first-project) {}', 'contenta', 'hosta')).toEqualCss(
|
||
'create-first-project[hosta] {}',
|
||
);
|
||
expect(shim(':host[attr] {}', 'contenta', 'hosta')).toEqualCss('[attr][hosta] {}');
|
||
expect(shim(':host[attr]:where(:not(.cm-button)) {}', 'contenta', 'hosta')).toEqualCss(
|
||
'[attr][hosta]:where(:not(.cm-button)) {}',
|
||
);
|
||
});
|
||
|
||
it('should handle escaped sequences in selectors', () => {
|
||
expect(shim('one\\/two {}', 'contenta')).toEqualCss('one\\/two[contenta] {}');
|
||
expect(shim('one\\:two {}', 'contenta')).toEqualCss('one\\:two[contenta] {}');
|
||
expect(shim('one\\\\:two {}', 'contenta')).toEqualCss('one\\\\[contenta]:two {}');
|
||
expect(shim('.one\\:two {}', 'contenta')).toEqualCss('.one\\:two[contenta] {}');
|
||
expect(shim('.one\\:\\fc ber {}', 'contenta')).toEqualCss('.one\\:\\fc ber[contenta] {}');
|
||
expect(shim('.one\\:two .three\\:four {}', 'contenta')).toEqualCss(
|
||
'.one\\:two[contenta] .three\\:four[contenta] {}',
|
||
);
|
||
expect(shim('div:where(.one) {}', 'contenta', 'hosta')).toEqualCss(
|
||
'div[contenta]:where(.one) {}',
|
||
);
|
||
expect(shim('div:where() {}', 'contenta', 'hosta')).toEqualCss('div[contenta]:where() {}');
|
||
expect(shim(':where(a):where(b) {}', 'contenta', 'hosta')).toEqualCss(
|
||
':where(a[contenta]):where(b[contenta]) {}',
|
||
);
|
||
expect(shim('*:where(.one) {}', 'contenta', 'hosta')).toEqualCss('*[contenta]:where(.one) {}');
|
||
expect(shim('*:where(.one) ::ng-deep .foo {}', 'contenta', 'hosta')).toEqualCss(
|
||
'*[contenta]:where(.one) .foo {}',
|
||
);
|
||
});
|
||
|
||
it('should handle pseudo functions correctly', () => {
|
||
// :where()
|
||
expect(shim(':where(.one) {}', 'contenta', 'hosta')).toEqualCss(':where(.one[contenta]) {}');
|
||
expect(shim(':where(div.one span.two) {}', 'contenta', 'hosta')).toEqualCss(
|
||
':where(div.one[contenta] span.two[contenta]) {}',
|
||
);
|
||
expect(shim(':where(.one) .two {}', 'contenta', 'hosta')).toEqualCss(
|
||
':where(.one[contenta]) .two[contenta] {}',
|
||
);
|
||
expect(shim(':where(:host) {}', 'contenta', 'hosta')).toEqualCss(':where([hosta]) {}');
|
||
expect(shim(':where(:host) .one {}', 'contenta', 'hosta')).toEqualCss(
|
||
':where([hosta]) .one[contenta] {}',
|
||
);
|
||
expect(shim(':where(.one) :where(:host) {}', 'contenta', 'hosta')).toEqualCss(
|
||
':where(.one) :where([hosta]) {}',
|
||
);
|
||
expect(shim(':where(.one :host) {}', 'contenta', 'hosta')).toEqualCss(
|
||
':where(.one [hosta]) {}',
|
||
);
|
||
expect(shim('div :where(.one) {}', 'contenta', 'hosta')).toEqualCss(
|
||
'div[contenta] :where(.one[contenta]) {}',
|
||
);
|
||
expect(shim(':host :where(.one .two) {}', 'contenta', 'hosta')).toEqualCss(
|
||
'[hosta] :where(.one[contenta] .two[contenta]) {}',
|
||
);
|
||
expect(shim(':where(.one, .two) {}', 'contenta', 'hosta')).toEqualCss(
|
||
':where(.one[contenta], .two[contenta]) {}',
|
||
);
|
||
expect(shim(':where(.one > .two) {}', 'contenta', 'hosta')).toEqualCss(
|
||
':where(.one[contenta] > .two[contenta]) {}',
|
||
);
|
||
expect(shim(':where(> .one) {}', 'contenta', 'hosta')).toEqualCss(
|
||
':where( > .one[contenta]) {}',
|
||
);
|
||
expect(shim(':where(:not(.one) ~ .two) {}', 'contenta', 'hosta')).toEqualCss(
|
||
':where([contenta]:not(.one) ~ .two[contenta]) {}',
|
||
);
|
||
expect(shim(':where([foo]) {}', 'contenta', 'hosta')).toEqualCss(':where([foo][contenta]) {}');
|
||
|
||
// :is()
|
||
expect(shim('div:is(.foo) {}', 'contenta', 'a-host')).toEqualCss('div[contenta]:is(.foo) {}');
|
||
expect(shim(':is(.dark :host) {}', 'contenta', 'a-host')).toEqualCss(':is(.dark [a-host]) {}');
|
||
expect(shim(':is(.dark) :is(:host) {}', 'contenta', 'a-host')).toEqualCss(
|
||
':is(.dark) :is([a-host]) {}',
|
||
);
|
||
expect(shim(':host:is(.foo) {}', 'contenta', 'a-host')).toEqualCss('[a-host]:is(.foo) {}');
|
||
expect(shim(':is(.foo) {}', 'contenta', 'a-host')).toEqualCss(':is(.foo[contenta]) {}');
|
||
expect(shim(':is(.foo, .bar, .baz) {}', 'contenta', 'a-host')).toEqualCss(
|
||
':is(.foo[contenta], .bar[contenta], .baz[contenta]) {}',
|
||
);
|
||
expect(shim(':is(.foo, .bar) :host {}', 'contenta', 'a-host')).toEqualCss(
|
||
':is(.foo, .bar) [a-host] {}',
|
||
);
|
||
|
||
// :is() and :where()
|
||
expect(
|
||
shim(
|
||
':is(.foo, .bar) :is(.baz) :where(.one, .two) :host :where(.three:first-child) {}',
|
||
'contenta',
|
||
'a-host',
|
||
),
|
||
).toEqualCss(
|
||
':is(.foo, .bar) :is(.baz) :where(.one, .two) [a-host] :where(.three[contenta]:first-child) {}',
|
||
);
|
||
expect(shim(':where(:is(a)) {}', 'contenta', 'hosta')).toEqualCss(
|
||
':where(:is(a[contenta])) {}',
|
||
);
|
||
expect(shim(':where(:is(a, b)) {}', 'contenta', 'hosta')).toEqualCss(
|
||
':where(:is(a[contenta], b[contenta])) {}',
|
||
);
|
||
expect(shim(':where(:host:is(.one, .two)) {}', 'contenta', 'hosta')).toEqualCss(
|
||
':where([hosta]:is(.one, .two)) {}',
|
||
);
|
||
expect(shim(':where(:host :is(.one, .two)) {}', 'contenta', 'hosta')).toEqualCss(
|
||
':where([hosta] :is(.one[contenta], .two[contenta])) {}',
|
||
);
|
||
expect(shim(':where(:is(a, b) :is(.one, .two)) {}', 'contenta', 'hosta')).toEqualCss(
|
||
':where(:is(a[contenta], b[contenta]) :is(.one[contenta], .two[contenta])) {}',
|
||
);
|
||
expect(
|
||
shim(
|
||
':where(:where(a:has(.foo), b) :is(.one, .two:where(.foo > .bar))) {}',
|
||
'contenta',
|
||
'hosta',
|
||
),
|
||
).toEqualCss(
|
||
':where(:where(a[contenta]:has(.foo), b[contenta]) :is(.one[contenta], .two[contenta]:where(.foo > .bar))) {}',
|
||
);
|
||
expect(shim(':where(.two):first-child {}', 'contenta', 'hosta')).toEqualCss(
|
||
'[contenta]:where(.two):first-child {}',
|
||
);
|
||
expect(shim(':first-child:where(.two) {}', 'contenta', 'hosta')).toEqualCss(
|
||
'[contenta]:first-child:where(.two) {}',
|
||
);
|
||
expect(shim(':where(.two):nth-child(3) {}', 'contenta', 'hosta')).toEqualCss(
|
||
'[contenta]:where(.two):nth-child(3) {}',
|
||
);
|
||
expect(shim('table :where(td, th):hover { color: lime; }', 'contenta', 'hosta')).toEqualCss(
|
||
'table[contenta] [contenta]:where(td, th):hover { color:lime;}',
|
||
);
|
||
|
||
// :nth
|
||
expect(shim(':nth-child(3n of :not(p, a), :is(.foo)) {}', 'contenta', 'hosta')).toEqualCss(
|
||
'[contenta]:nth-child(3n of :not(p, a), :is(.foo)) {}',
|
||
);
|
||
expect(shim('li:nth-last-child(-n + 3) {}', 'contenta', 'a-host')).toEqualCss(
|
||
'li[contenta]:nth-last-child(-n + 3) {}',
|
||
);
|
||
expect(shim('dd:nth-last-of-type(3n) {}', 'contenta', 'a-host')).toEqualCss(
|
||
'dd[contenta]:nth-last-of-type(3n) {}',
|
||
);
|
||
expect(shim('dd:nth-of-type(even) {}', 'contenta', 'a-host')).toEqualCss(
|
||
'dd[contenta]:nth-of-type(even) {}',
|
||
);
|
||
|
||
// complex selectors
|
||
expect(shim(':host:is([foo],[foo-2])>div.example-2 {}', 'contenta', 'a-host')).toEqualCss(
|
||
'[a-host]:is([foo],[foo-2]) > div.example-2[contenta] {}',
|
||
);
|
||
expect(shim(':host:is([foo], [foo-2]) > div.example-2 {}', 'contenta', 'a-host')).toEqualCss(
|
||
'[a-host]:is([foo], [foo-2]) > div.example-2[contenta] {}',
|
||
);
|
||
expect(shim(':host:has([foo],[foo-2])>div.example-2 {}', 'contenta', 'a-host')).toEqualCss(
|
||
'[a-host]:has([foo],[foo-2]) > div.example-2[contenta] {}',
|
||
);
|
||
|
||
// :has()
|
||
expect(shim('div:has(a) {}', 'contenta', 'hosta')).toEqualCss('div[contenta]:has(a) {}');
|
||
expect(shim('div:has(a) :host {}', 'contenta', 'hosta')).toEqualCss('div:has(a) [hosta] {}');
|
||
expect(shim(':has(a) :host :has(b) {}', 'contenta', 'hosta')).toEqualCss(
|
||
':has(a) [hosta] [contenta]:has(b) {}',
|
||
);
|
||
expect(shim('div:has(~ .one) {}', 'contenta', 'hosta')).toEqualCss(
|
||
'div[contenta]:has(~ .one) {}',
|
||
);
|
||
// Unlike `:is()` or `:where()` the attribute selector isn't placed inside
|
||
// of `:has()`. That is deliberate, `[contenta]:has(a)` would select all
|
||
// `[contenta]` with `a` inside, while `:has(a[contenta])` would select
|
||
// everything that contains `a[contenta]`, targeting elements outside of
|
||
// encapsulated scope.
|
||
expect(shim(':has(a) :has(b) {}', 'contenta', 'hosta')).toEqualCss(
|
||
'[contenta]:has(a) [contenta]:has(b) {}',
|
||
);
|
||
expect(shim(':has(a, b) {}', 'contenta', 'hosta')).toEqualCss('[contenta]:has(a, b) {}');
|
||
expect(shim(':has(a, b:where(.foo), :is(.bar)) {}', 'contenta', 'hosta')).toEqualCss(
|
||
'[contenta]:has(a, b:where(.foo), :is(.bar)) {}',
|
||
);
|
||
expect(
|
||
shim(':has(a, b:where(.foo), :is(.bar):first-child):first-letter {}', 'contenta', 'hosta'),
|
||
).toEqualCss('[contenta]:has(a, b:where(.foo), :is(.bar):first-child):first-letter {}');
|
||
expect(
|
||
shim(':where(a, b:where(.foo), :has(.bar):first-child) {}', 'contenta', 'hosta'),
|
||
).toEqualCss(
|
||
':where(a[contenta], b[contenta]:where(.foo), [contenta]:has(.bar):first-child) {}',
|
||
);
|
||
expect(shim(':has(.one :host, .two) {}', 'contenta', 'hosta')).toEqualCss(
|
||
'[contenta]:has(.one [hosta], .two) {}',
|
||
);
|
||
expect(shim(':has(.one, :host) {}', 'contenta', 'hosta')).toEqualCss(
|
||
'[contenta]:has(.one, [hosta]) {}',
|
||
);
|
||
});
|
||
|
||
it('should handle :host inclusions inside pseudo-selectors selectors', () => {
|
||
expect(shim('.header:not(.admin) {}', 'contenta', 'hosta')).toEqualCss(
|
||
'.header[contenta]:not(.admin) {}',
|
||
);
|
||
expect(shim('.header:is(:host > .toolbar, :host ~ .panel) {}', 'contenta', 'hosta')).toEqualCss(
|
||
'.header[contenta]:is([hosta] > .toolbar, [hosta] ~ .panel) {}',
|
||
);
|
||
expect(
|
||
shim('.header:where(:host > .toolbar, :host ~ .panel) {}', 'contenta', 'hosta'),
|
||
).toEqualCss('.header[contenta]:where([hosta] > .toolbar, [hosta] ~ .panel) {}');
|
||
expect(shim('.header:not(.admin, :host.super .header) {}', 'contenta', 'hosta')).toEqualCss(
|
||
'.header[contenta]:not(.admin, .super[hosta] .header) {}',
|
||
);
|
||
expect(
|
||
shim('.header:not(.admin, :host.super .header, :host.mega .header) {}', 'contenta', 'hosta'),
|
||
).toEqualCss('.header[contenta]:not(.admin, .super[hosta] .header, .mega[hosta] .header) {}');
|
||
|
||
expect(shim('.one :where(.two, :host) {}', 'contenta', 'hosta')).toEqualCss(
|
||
'.one :where(.two[contenta], [hosta]) {}',
|
||
);
|
||
expect(shim('.one :where(:host, .two) {}', 'contenta', 'hosta')).toEqualCss(
|
||
'.one :where([hosta], .two[contenta]) {}',
|
||
);
|
||
expect(shim(':is(.foo):is(:host):is(.two) {}', 'contenta', 'hosta')).toEqualCss(
|
||
':is(.foo):is([hosta]):is(.two[contenta]) {}',
|
||
);
|
||
expect(shim(':where(.one, :host .two):first-letter {}', 'contenta', 'hosta')).toEqualCss(
|
||
'[contenta]:where(.one, [hosta] .two):first-letter {}',
|
||
);
|
||
expect(shim(':first-child:where(.one, :host .two) {}', 'contenta', 'hosta')).toEqualCss(
|
||
'[contenta]:first-child:where(.one, [hosta] .two) {}',
|
||
);
|
||
expect(
|
||
shim(':where(.one, :host .two):nth-child(3):is(.foo, a:where(.bar)) {}', 'contenta', 'hosta'),
|
||
).toEqualCss('[contenta]:where(.one, [hosta] .two):nth-child(3):is(.foo, a:where(.bar)) {}');
|
||
});
|
||
|
||
it('should handle escaped selector with space (if followed by a hex char)', () => {
|
||
// When esbuild runs with optimization.minify
|
||
// selectors are escaped: .über becomes .\fc ber.
|
||
// The space here isn't a separator between 2 selectors
|
||
expect(shim('.\\fc ber {}', 'contenta')).toEqual('.\\fc ber[contenta] {}');
|
||
expect(shim('.\\fc ker {}', 'contenta')).toEqual('.\\fc[contenta] ker[contenta] {}');
|
||
expect(shim('.pr\\fc fung {}', 'contenta')).toEqual('.pr\\fc fung[contenta] {}');
|
||
});
|
||
|
||
it('should leave calc() unchanged', () => {
|
||
const styleStr = 'div {height:calc(100% - 55px);}';
|
||
const css = shim(styleStr, 'contenta');
|
||
expect(css).toEqualCss('div[contenta] {height:calc(100% - 55px);}');
|
||
});
|
||
|
||
it('should shim rules with quoted content', () => {
|
||
const styleStr = 'div {background-image: url("a.jpg"); color: red;}';
|
||
const css = shim(styleStr, 'contenta');
|
||
expect(css).toEqualCss('div[contenta] {background-image:url("a.jpg"); color:red;}');
|
||
});
|
||
|
||
it('should handle when quoted content contains a closing parenthesis', () => {
|
||
// Regression test for https://github.com/angular/angular/issues/65137
|
||
expect(shim('p { background-image: url(")") } p { color: red }', 'contenta')).toEqualCss(
|
||
'p[contenta] { background-image: url(")") } p[contenta] { color: red }',
|
||
);
|
||
});
|
||
|
||
it('should shim rules with an escaped quote inside quoted content', () => {
|
||
const styleStr = 'div::after { content: "\\"" }';
|
||
const css = shim(styleStr, 'contenta');
|
||
expect(css).toEqualCss('div[contenta]::after { content:"\\""}');
|
||
});
|
||
|
||
it('should shim rules with curly braces inside quoted content', () => {
|
||
const styleStr = 'div::after { content: "{}" }';
|
||
const css = shim(styleStr, 'contenta');
|
||
expect(css).toEqualCss('div[contenta]::after { content:"{}"}');
|
||
});
|
||
|
||
it('should keep retain multiline selectors', () => {
|
||
// This is needed as shifting in line number will cause sourcemaps to break.
|
||
const styleStr = '.foo,\n.bar { color: red;}';
|
||
const css = shim(styleStr, 'contenta');
|
||
expect(css).toEqual('.foo[contenta], \n.bar[contenta] { color: red;}');
|
||
});
|
||
|
||
describe('comments', () => {
|
||
// Comments should be kept in the same position as otherwise inline sourcemaps break due to
|
||
// shift in lines.
|
||
it('should remove inline comments without adding extra lines', () => {
|
||
expect(shim('/* b {} */ b {}', 'contenta')).toBe(' b[contenta] {}');
|
||
});
|
||
|
||
it('should preserve internal newlines from multiline comments', () => {
|
||
expect(shim('/* b {}\n */ b {}', 'contenta')).toBe('\n b[contenta] {}');
|
||
});
|
||
|
||
it('should remove multiple inline comments without adding extra lines', () => {
|
||
expect(shim('/* b {} */ b {} /* a {} */ a {}', 'contenta')).toBe(
|
||
' b[contenta] {} a[contenta] {}',
|
||
);
|
||
});
|
||
|
||
it('should keep sourceMappingURL comments', () => {
|
||
expect(shim('b {} /*# sourceMappingURL=data:x */', 'contenta')).toBe(
|
||
'b[contenta] {} /*# sourceMappingURL=data:x */',
|
||
);
|
||
expect(shim('b {}/* #sourceMappingURL=data:x */', 'contenta')).toBe(
|
||
'b[contenta] {}/* #sourceMappingURL=data:x */',
|
||
);
|
||
});
|
||
|
||
it('should handle adjacent comments', () => {
|
||
expect(shim('/* comment 1 */ /* comment 2 */ b {}', 'contenta')).toBe(' b[contenta] {}');
|
||
});
|
||
});
|
||
|
||
describe('CSS variable namespacing', () => {
|
||
it('should inject `%NS%` placeholder into CSS variable declarations and usages', () => {
|
||
const input = `
|
||
.foo {
|
||
--my-color: red;
|
||
color: var(--my-color, blue);
|
||
}
|
||
`.trim();
|
||
|
||
const expected = `
|
||
.foo {
|
||
--%NS%my-color: red;
|
||
color: var(--%NS%my-color, blue);
|
||
}
|
||
`.trim();
|
||
|
||
expect(namespaceCssVariables(input)).toEqualCss(expected);
|
||
});
|
||
|
||
it('should not inject `%NS%` when `--global--` prefix is present', () => {
|
||
const input = `
|
||
.foo {
|
||
--global--my-color: green;
|
||
background: var(--global--my-color);
|
||
}
|
||
`.trim();
|
||
|
||
const expected = `
|
||
.foo {
|
||
--my-color: green;
|
||
background: var(--my-color);
|
||
}
|
||
`.trim();
|
||
|
||
expect(namespaceCssVariables(input)).toEqualCss(expected);
|
||
});
|
||
|
||
it('should handle multiple variables with mixed namespacing', () => {
|
||
const input = `
|
||
.foo {
|
||
border: var(--global--border-size) solid var(--border-color);
|
||
box-shadow:
|
||
var(--shadow-1),
|
||
var(--global--shadow-2),
|
||
var(--shadow-3);
|
||
}
|
||
`.trim();
|
||
|
||
const expected = `
|
||
.foo {
|
||
border: var(--border-size) solid var(--%NS%border-color);
|
||
box-shadow:
|
||
var(--%NS%shadow-1),
|
||
var(--shadow-2),
|
||
var(--%NS%shadow-3);
|
||
}
|
||
`.trim();
|
||
|
||
expect(namespaceCssVariables(input)).toEqualCss(expected);
|
||
});
|
||
|
||
it('should not namespace or modify -- in comments', () => {
|
||
expect(namespaceCssVariables('/* --bar */')).toBe('/* --bar */');
|
||
expect(namespaceCssVariables('/* --global--bar */')).toBe('/* --global--bar */');
|
||
});
|
||
|
||
it('should not namespace or modify -- in strings', () => {
|
||
expect(namespaceCssVariables('div { content: "--bar"; }')).toBe('div { content: "--bar"; }');
|
||
expect(namespaceCssVariables('div { content: "--global--bar"; }')).toBe(
|
||
'div { content: "--global--bar"; }',
|
||
);
|
||
});
|
||
|
||
it('should not namespace or modify -- in the middle of identifiers', () => {
|
||
expect(namespaceCssVariables('.foo--bar { color: red; }')).toBe('.foo--bar { color: red; }');
|
||
expect(namespaceCssVariables('.foo--global--bar { color: red; }')).toBe(
|
||
'.foo--global--bar { color: red; }',
|
||
);
|
||
});
|
||
|
||
it('should not namespace or modify -- in attribute names', () => {
|
||
expect(namespaceCssVariables('[data---bar] { color: red; }')).toBe(
|
||
'[data---bar] { color: red; }',
|
||
);
|
||
expect(namespaceCssVariables('[data---global--bar] { color: red; }')).toBe(
|
||
'[data---global--bar] { color: red; }',
|
||
);
|
||
});
|
||
|
||
it('should not namespace or modify -- in unquoted attribute values', () => {
|
||
expect(namespaceCssVariables('[data-status=foo--bar] { color: red; }')).toBe(
|
||
'[data-status=foo--bar] { color: red; }',
|
||
);
|
||
expect(namespaceCssVariables('[data-status=foo--global--bar] { color: red; }')).toBe(
|
||
'[data-status=foo--global--bar] { color: red; }',
|
||
);
|
||
});
|
||
|
||
it('should not namespace or modify CDO and CDC tokens', () => {
|
||
expect(namespaceCssVariables('<!--foo')).toBe('<!--foo');
|
||
expect(namespaceCssVariables('--global-->')).toBe('--global-->');
|
||
});
|
||
|
||
it('should not namespace or modify -- in URLs', () => {
|
||
expect(namespaceCssVariables('div { background: url(--bar); }')).toBe(
|
||
'div { background: url(--bar); }',
|
||
);
|
||
expect(namespaceCssVariables('div { background: url(--global--bar); }')).toBe(
|
||
'div { background: url(--global--bar); }',
|
||
);
|
||
});
|
||
|
||
it('should not namespace or modify -- in custom media queries', () => {
|
||
expect(namespaceCssVariables('@custom-media --bar (max-width: 30em);')).toBe(
|
||
'@custom-media --bar (max-width: 30em);',
|
||
);
|
||
expect(namespaceCssVariables('@custom-media --global--bar (max-width: 30em);')).toBe(
|
||
'@custom-media --global--bar (max-width: 30em);',
|
||
);
|
||
});
|
||
|
||
it('should handle whitespace in variable declarations and usages', () => {
|
||
expect(
|
||
namespaceCssVariables(`
|
||
p {
|
||
color: var(
|
||
--bgc
|
||
);
|
||
--bgc
|
||
: red;
|
||
}
|
||
`),
|
||
).toBe(`
|
||
p {
|
||
color: var(
|
||
--%NS%bgc
|
||
);
|
||
--%NS%bgc
|
||
: red;
|
||
}
|
||
`);
|
||
|
||
expect(
|
||
namespaceCssVariables(`
|
||
p {
|
||
color: var(
|
||
--global--bgc
|
||
);
|
||
--global--bgc
|
||
: red;
|
||
}
|
||
`),
|
||
).toBe(`
|
||
p {
|
||
color: var(
|
||
--bgc
|
||
);
|
||
--bgc
|
||
: red;
|
||
}
|
||
`);
|
||
});
|
||
|
||
it('should handle non-ascii characters', () => {
|
||
expect(
|
||
namespaceCssVariables(`
|
||
p {
|
||
--🅰️ngular: red;
|
||
color: var(--🅰️ngular);
|
||
}
|
||
`),
|
||
).toEqualCss(`
|
||
p {
|
||
--%NS%🅰️ngular: red;
|
||
color: var(--%NS%🅰️ngular);
|
||
}
|
||
`);
|
||
|
||
expect(
|
||
namespaceCssVariables(`
|
||
p {
|
||
--global--🅰️ngular: red;
|
||
color: var(--global--🅰️ngular);
|
||
}
|
||
`),
|
||
).toEqualCss(`
|
||
p {
|
||
--🅰️ngular: red;
|
||
color: var(--🅰️ngular);
|
||
}
|
||
`);
|
||
});
|
||
|
||
// TODO: Enforce this in v23.
|
||
xit('should throw an error when a CSS variable has a single hyphen after --global', () => {
|
||
expect(() => namespaceCssVariables('p { --global-foo: red; }')).toThrowError(
|
||
'CSS variable "--global-foo" has a single hyphen after "--global". Use two hyphens ("--global--foo") to opt-out of namespacing.',
|
||
);
|
||
expect(() => namespaceCssVariables('p { color: var(--global-my-color); }')).toThrowError(
|
||
'CSS variable "--global-my-color" has a single hyphen after "--global". Use two hyphens ("--global--my-color") to opt-out of namespacing.',
|
||
);
|
||
expect(() => namespaceCssVariables('p { --global-: red; }')).toThrowError(
|
||
'CSS variable "--global-" has a single hyphen after "--global". Use two hyphens ("--global--") to opt-out of namespacing.',
|
||
);
|
||
});
|
||
|
||
it('should namespace @property declarations', () => {
|
||
const input = `
|
||
@property --myColor {
|
||
syntax: "<color>";
|
||
inherits: true;
|
||
initial-value: rebeccapurple;
|
||
}
|
||
|
||
@property --myWidth {
|
||
syntax: "<length> | <percentage>";
|
||
inherits: true;
|
||
initial-value: 200px;
|
||
}
|
||
|
||
p {
|
||
background-color: var(--myColor);
|
||
width: var(--myWidth);
|
||
color: white;
|
||
}
|
||
`.trim();
|
||
|
||
const expected = `
|
||
@property --%NS%myColor {
|
||
syntax: "<color>";
|
||
inherits: true;
|
||
initial-value: rebeccapurple;
|
||
}
|
||
|
||
@property --%NS%myWidth {
|
||
syntax: "<length> | <percentage>";
|
||
inherits: true;
|
||
initial-value: 200px;
|
||
}
|
||
|
||
p {
|
||
background-color: var(--%NS%myColor);
|
||
width: var(--%NS%myWidth);
|
||
color: white;
|
||
}
|
||
`.trim();
|
||
|
||
expect(namespaceCssVariables(input)).toBe(expected);
|
||
});
|
||
|
||
it('should not namespace @property if --global-- is present', () => {
|
||
const input = `
|
||
@property --global--my-color {
|
||
syntax: "<color>";
|
||
inherits: true;
|
||
initial-value: rebeccapurple;
|
||
}
|
||
|
||
@property --global--my-width {
|
||
syntax: "<length> | <percentage>";
|
||
inherits: true;
|
||
initial-value: 200px;
|
||
}
|
||
|
||
p {
|
||
background-color: var(--global--my-color);
|
||
width: var(--global--my-width);
|
||
color: white;
|
||
}
|
||
`.trim();
|
||
|
||
const expected = `
|
||
@property --my-color {
|
||
syntax: "<color>";
|
||
inherits: true;
|
||
initial-value: rebeccapurple;
|
||
}
|
||
|
||
@property --my-width {
|
||
syntax: "<length> | <percentage>";
|
||
inherits: true;
|
||
initial-value: 200px;
|
||
}
|
||
|
||
p {
|
||
background-color: var(--my-color);
|
||
width: var(--my-width);
|
||
color: white;
|
||
}
|
||
`.trim();
|
||
|
||
expect(namespaceCssVariables(input)).toBe(expected);
|
||
});
|
||
});
|
||
});
|