-
Notifications
You must be signed in to change notification settings - Fork 28
/
Copy pathindex.test.mjs
147 lines (121 loc) · 5.6 KB
/
index.test.mjs
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
import { testRule } from 'stylelint-test-rule-node';
import plugin from './src/index.mjs';
const rule = plugin.rule;
const messages = plugin.rule.messages;
let accept = [], reject = [];
/* Test basic checks
/* ========================================================================== */
testRule({ plugins: ['.'], ruleName: rule.ruleName, config: null, accept: [{ code: '' }] });
testRule({ plugins: ['.'], ruleName: rule.ruleName, config: true, accept: [{ code: '' }] });
/* Test disabled
/* ========================================================================== */
accept = [
{ code: 'body { color: var(--brand-blue); }', description: 'ignored custom property' },
];
testRule({ plugins: ['.'], ruleName: rule.ruleName, config: null, accept });
/* Test enabled
/* ========================================================================== */
accept = [
{ code: 'body { --brand-blue: #33f; color: var(--brand-blue); }' },
{ code: ':root { --brand-blue: #33f; } body { color: var(--brand-blue); }' },
{ code: 'html { --brand-blue: #33f; } body { color: var(--brand-blue); }' },
{ code: '* { --brand-blue: #33f; } body { color: var(--brand-blue); }' },
{ code: '.anything { --brand-blue: #33f; } body { color: var(--brand-blue); }' },
{ code: ':root { --brand-blue: #33f; --brand-color: var(--brand-blue); }' },
{ code: '@import \'./test/import-custom-properties.css\'; body { color: var(--brand-red); }' },
{ code: '@import "./test/import-custom-properties.css" screen; body { color: var(--brand-red); }' },
{ code: '@import "./test/import-custom-properties.css"/**/; body { color: var(--brand-red); }' },
{ code: '@import url(./test/import-custom-properties.css); body { color: var(--brand-red); }' },
{ code: '@import url(\'./test/import-custom-properties.css\'); body { color: var(--brand-red); }' },
{ code: '@import url( \'./test/import-custom-properties.css\'/**/)/**/; body { color: var(--brand-red); }' },
{ code: '@import url(\t\'./test/import-custom-properties.css\'\t)\t; body { color: var(--brand-red); }' },
{ code: '@import url(./test/import-custom-properties.css) screen; body { color: var(--brand-red); }' },
{ code: '@import url("./test/import-custom-properties.css") screen; body { color: var(--brand-red); }' },
{ code: '@import url("./test/import-custom-properties.css" url-mod); body { color: var(--brand-red); }' },
{ code: '@import \'./test/import-custom-properties.css\'; @import \'./test/import-custom-properties123.css\'; body { color: var(--brand-red); }' },
{ code: 'color: var(--my-undefined-color, #ffffff);' },
];
reject = [
{ code: 'body { color: var(--brand-blue); }', message: messages.unexpected('--brand-blue', 'color') },
{ code: '@import \'./test/import-custom-properties123.css\'; body { color: var(--brand-red); }', message: messages.unexpected('--brand-red', 'color') },
];
testRule({ plugins: ['.'], ruleName: rule.ruleName, config: true, accept, reject });
/* Test fallbacks
/* ========================================================================== */
accept = [
{ code: 'body { color: var(--brand-blue, #33f); }' },
];
reject = [
{ code: 'body { color: var(--brand-blue, var(--brand-red)); }', message: messages.unexpected('--brand-red', 'color') },
];
testRule({ plugins: ['.'], ruleName: rule.ruleName, config: true, accept, reject });
/* Test enabled: not var()s
/* ========================================================================== */
accept = [
{ code: 'body { color: brand-blue; }' },
{ code: 'body { color: var(); }' },
];
testRule({ plugins: ['.'], ruleName: rule.ruleName, config: true, accept });
/* Test enabled: { importFrom }
/* ========================================================================== */
accept = [
{ code: 'body { color: var(--brand-blue); }' },
];
reject = [
{ code: 'body { color: var(--brand-blu); }', message: messages.unexpected('--brand-blu', 'color') },
{ code: 'body { color: var(--brand-bluez); }', message: messages.unexpected('--brand-bluez', 'color') },
];
testRule({
plugins: ['.'],
ruleName: rule.ruleName,
config: [true, {
importFrom: {
customProperties: {
'--brand-blue': '#fff',
},
},
}],
accept,
reject,
});
accept = [
{ code: 'body { background-color: var(--brand-red); background: var(--brand-green); color: var(--brand-blue); }' },
];
reject = [
{ code: 'body { color: var(--brand-blu); }', message: messages.unexpected('--brand-blu', 'color') },
{ code: 'body { color: var(--brand-bluez); }', message: messages.unexpected('--brand-bluez', 'color') },
];
testRule({
plugins: ['.'],
ruleName: rule.ruleName,
config: [true, {
importFrom: [
'./test/import-custom-properties.json',
'./test/import-custom-properties.css',
],
}],
accept,
reject,
});
accept = [
{ code: 'body { border-color: var(--brand-white); }' },
];
testRule({ plugins: ['.'], ruleName: rule.ruleName, config: [true, { importFrom: ['./test/dummy-module-package/import-custom-properties.js'] }], accept, reject });
testRule({ plugins: ['.'], ruleName: rule.ruleName, config: [true, { importFrom: ['./test/dummy-package/import-custom-properties.js'] }], accept, reject });
testRule({ plugins: ['.'], ruleName: rule.ruleName, config: [true, { importFrom: ['./test/import-custom-properties.cjs'] }], accept, reject });
testRule({ plugins: ['.'], ruleName: rule.ruleName, config: [true, { importFrom: ['./test/import-custom-properties.mjs'] }], accept, reject });
accept = [
{ code: '@import "import-custom-properties-absolute.css"; body { background-color: var(--brand-red); background: var(--brand-green); }' },
];
reject = [];
testRule({
plugins: ['.'],
ruleName: rule.ruleName,
config: [true, {
resolver: {
paths: './test',
},
}],
accept,
reject,
});