-
Notifications
You must be signed in to change notification settings - Fork 24.8k
/
shadow_css_spec.ts
159 lines (139 loc) · 6.67 KB
/
shadow_css_spec.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
/**
* @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.io/license
*/
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 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] {}');
});
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] {}',
);
});
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 handle ::shadow', () => {
const css = shim('x::shadow > y {}', 'contenta');
expect(css).toEqualCss('x[contenta] > y[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 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 replace multiline comments with newline', () => {
expect(shim('/* b {c} */ b {c}', 'contenta')).toBe('\n b[contenta] {c}');
});
it('should replace multiline comments with newline in the original position', () => {
expect(shim('/* b {c}\n */ b {c}', 'contenta')).toBe('\n\n b[contenta] {c}');
});
it('should replace comments with newline in the original position', () => {
expect(shim('/* b {c} */ b {c} /* a {c} */ a {c}', 'contenta')).toBe(
'\n b[contenta] {c} \n a[contenta] {c}',
);
});
it('should keep sourceMappingURL comments', () => {
expect(shim('b {c} /*# sourceMappingURL=data:x */', 'contenta')).toBe(
'b[contenta] {c} /*# sourceMappingURL=data:x */',
);
expect(shim('b {c}/* #sourceMappingURL=data:x */', 'contenta')).toBe(
'b[contenta] {c}/* #sourceMappingURL=data:x */',
);
});
it('should handle adjacent comments', () => {
expect(shim('/* comment 1 */ /* comment 2 */ b {c}', 'contenta')).toBe(
'\n \n b[contenta] {c}',
);
});
});
});