-
Notifications
You must be signed in to change notification settings - Fork 8
/
.tape.js
162 lines (157 loc) · 6.49 KB
/
.tape.js
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
160
161
162
export default {
'csstools/use-nesting': [
/* Test Nesting Rules */
{
source: '.foo { color: blue; } .foo:hover, .foo:focus { color: rebeccapurple; } .foo:focus-within { color: red; }',
warnings: [
'Expected ".foo:hover, .foo:focus" inside ".foo". (csstools/use-nesting)'
]
},
{
source: '.foo { color: blue; } .foo:hover, .foo:focus { color: rebeccapurple; } .foo:focus-within { color: red; }',
warnings: 0,
args: ['always', { except: /^:(hover|:focus)$/i }]
},
{
source: '.foo { color: blue; } .foo:hover, .foo:focus { color: rebeccapurple; } .foo:focus-within { color: red; }',
warnings: 0,
args: ['always', { only: /^:focus-within$/i }]
},
{
source: '.foo { color: blue; } .foo:hover, .foo:focus { color: rebeccapurple; } .foo:focus-within { color: red; }',
expect: '.foo { color: blue; &:hover, &:focus { color: rebeccapurple; } &:focus-within { color: red; } }',
args: ['always']
},
{
source: '.foo { color: blue; } .foo[data-bar] { color: red; }',
expect: '.foo { color: blue; &[data-bar] { color: red; } }',
args: ['always']
},
{
source: '.foo { color: blue; } .foo:hover, .foo:focus { color: rebeccapurple; } .foo:focus-within { color: red; }',
expect: '.foo { color: blue; &:hover, &:focus { color: rebeccapurple; } } .foo:focus-within { color: red; }',
args: ['always', { except: /^:focus-within/i }]
},
{
source: '.foo { color: blue; } .foo:hover, .foo:focus { color: rebeccapurple; } .foo:focus-within { color: red; }',
expect: '.foo { color: blue; &:hover, &:focus { color: rebeccapurple; } } .foo:focus-within { color: red; }',
args: ['always', { except: ':focus-within' }]
},
{
source: '.foo { color: blue; } .foo:hover, .foo:focus { color: rebeccapurple; } .foo:focus-within { color: red; }',
expect: '.foo { color: blue; &:hover, &:focus { color: rebeccapurple; } } .foo:focus-within { color: red; }',
args: ['always', { only: /^:(hover|focus)$/i }]
},
{
source: '.foo { color: blue; } .foo:hover, .foo:focus { color: rebeccapurple; } .foo:focus-within { color: red; }',
expect: '.foo { color: blue; &:hover, &:focus { color: rebeccapurple; } } .foo:focus-within { color: red; }',
args: ['always', { only: [':hover', ':focus'] }]
},
/* Test Nesting At-Rules */
{
source: '.foo { color: blue; } body .foo { color: rebeccapurple; } html .foo { color: red; }',
warnings: 1
},
{
source: '.foo { color: blue; } body .foo { color: rebeccapurple; } html .foo { color: red; }',
warnings: 0,
args: ['always', { except: /^body$/i }]
},
{
source: '.foo { color: blue; } body .foo { color: rebeccapurple; } html .foo { color: red; }',
warnings: 0,
args: ['always', { only: /^html$/i }]
},
// Proposal nesting syntax
{
source: '.foo { color: blue; } body .foo { color: rebeccapurple; } html .foo { color: red; }',
expect: '.foo { color: blue; body & { color: rebeccapurple; } html & { color: red; } }',
args: ['always']
},
{
source: '.foo { color: blue; } body .foo { color: rebeccapurple; } html .foo { color: red; }',
expect: '.foo { color: blue; body & { color: rebeccapurple; } } html .foo { color: red; }',
args: ['always', { except: /^html$/i }]
},
{
source: '.foo { color: blue; } body .foo { color: rebeccapurple; } html .foo { color: red; }',
expect: '.foo { color: blue; body & { color: rebeccapurple; } } html .foo { color: red; }',
args: ['always', { except: 'html' }]
},
{
source: '.foo { color: blue; } body .foo { color: rebeccapurple; } html .foo { color: red; }',
expect: '.foo { color: blue; body & { color: rebeccapurple; } } html .foo { color: red; }',
args: ['always', { only: /^body$/i }]
},
{
source: '.foo { color: blue; } body .foo { color: rebeccapurple; } html .foo { color: red; }',
expect: '.foo { color: blue; body & { color: rebeccapurple; } } html .foo { color: red; }',
args: ['always', { only: 'body' }]
},
// SCSS nesting syntax
{
source: '.foo { color: blue; } body .foo { color: rebeccapurple; } html .foo { color: red; }',
expect: '.foo { color: blue; body & { color: rebeccapurple; } html & { color: red; } }',
args: ['always', { syntax: 'scss' }]
},
{
source: '.foo { color: blue; } body .foo { color: rebeccapurple; } html .foo { color: red; }',
expect: '.foo { color: blue; body & { color: rebeccapurple; } } html .foo { color: red; }',
args: ['always', { syntax: 'scss', except: /^html$/i }]
},
{
source: '.foo { color: blue; } body .foo { color: rebeccapurple; } html .foo { color: red; }',
expect: '.foo { color: blue; body & { color: rebeccapurple; } } html .foo { color: red; }',
args: ['always', { syntax: 'scss', except: 'html' }]
},
{
source: '.foo { color: blue; } body .foo { color: rebeccapurple; } html .foo { color: red; }',
expect: '.foo { color: blue; body & { color: rebeccapurple; } } html .foo { color: red; }',
args: ['always', { syntax: 'scss', only: /^body$/i }]
},
{
source: '.foo { color: blue; } body .foo { color: rebeccapurple; } html .foo { color: red; }',
expect: '.foo { color: blue; body & { color: rebeccapurple; } } html .foo { color: red; }',
args: ['always', { syntax: 'scss', only: 'body' }]
},
/* Test Nesting Media Rules */
{
source: '.foo { color: blue; } @media (min-width: 960px) { .foo { color: rebeccapurple; } }',
warnings: [
'Expected "@media (min-width: 960px)" inside ".foo". (csstools/use-nesting)'
]
},
{
source: '.foo { color: blue; } @media (min-width: 960px) { .foo { color: rebeccapurple; } }',
warnings: 0,
args: ['always', { except: /foo$/i }]
},
{
source: '.foo { color: blue; } @media (min-width: 960px) { .foo { color: rebeccapurple; } }',
warnings: 0,
args: ['always', { only: /bar/i }]
},
{
source: '.foo { color: blue; } @media (min-width: 960px) { .foo { color: rebeccapurple; } }',
expect: '.foo { color: blue; @media (min-width: 960px) { color: rebeccapurple } }',
args: ['always']
},
/* Test Ignores Rules */
{
source: '.foo { color: blue; } .foo__bar { color: rebeccapurple; } .foo--bar { color: red; }',
warnings: 0,
args: ['always']
},
{
source: '.foo { color: blue; } .foo__bar { color: rebeccapurple; } .foo--bar { color: red; }',
expect: '.foo { color: blue; } .foo__bar { color: rebeccapurple; } .foo--bar { color: red; }',
args: ['always']
},
{
source: '.test-foo__bar {} .test-foo__bar svg, .test-qux__bar svg {}',
expect: '.test-foo__bar {} .test-foo__bar svg, .test-qux__bar svg {}',
warnings: 0,
args: ['always']
}
]
};