forked from madyankin/postcss-modules
/
test.js
165 lines (126 loc) · 5.01 KB
/
test.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
163
164
165
import test from 'ava';
import postcss from 'postcss';
import autoprefixer from 'autoprefixer';
import fs from 'fs';
import path from 'path';
import plugin from '../src';
import { behaviours } from '../src/behaviours';
const fixturesPath = path.resolve(__dirname, './fixtures');
const cases = {
plugins: 'saves origin plugins',
classes: 'processes classes',
comments: 'preserves comments',
composes: 'composes rules',
values: 'processes values',
interpolated: 'generates scoped name with interpolated string',
global: 'allows to make CSS global',
};
function generateScopedName(name, filename) {
const file = path.basename(filename, '.css').replace(/\./g, '_');
return `_${ file }_${ name }`;
}
Object.keys(cases).forEach((name) => {
const description = cases[name];
const scopedNameGenerator = name === 'interpolated'
? '[name]__[local]___[hash:base64:5]'
: generateScopedName;
const scopeBehaviour = name === behaviours.GLOBAL
? behaviours.GLOBAL
: behaviours.LOCAL;
test(description, async (t) => {
const sourceFile = path.join(fixturesPath, 'in', `${ name }.css`);
const expectedFile = path.join(fixturesPath, 'out', name);
const source = fs.readFileSync(sourceFile).toString();
const expectedCSS = fs.readFileSync(`${ expectedFile }.css`).toString();
const expectedJSON = fs.readFileSync(`${ expectedFile }.json`).toString();
let resultJson;
const plugins = [
autoprefixer,
plugin({
scopeBehaviour,
generateScopedName: scopedNameGenerator,
getJSON: (cssFile, json) => {
resultJson = json;
},
}),
];
const result = await postcss(plugins).process(source, { from: sourceFile });
t.deepEqual(result.css, expectedCSS);
t.deepEqual(resultJson, JSON.parse(expectedJSON));
});
});
test('saves JSON next to CSS by default', async (t) => {
const sourceFile = path.join(fixturesPath, 'in', 'saveJSON.css');
const source = fs.readFileSync(sourceFile).toString();
const jsonFile = path.join(fixturesPath, 'in', 'saveJSON.css.json');
if (fs.existsSync(jsonFile)) fs.unlinkSync(jsonFile);
await postcss([plugin({ generateScopedName })])
.process(source, { from: sourceFile });
const json = fs.readFileSync(jsonFile).toString();
fs.unlinkSync(jsonFile);
t.deepEqual(JSON.parse(json), { title: '_saveJSON_title' });
});
test('processes globalModulePaths option', async (t) => {
const sourceFile = path.join(fixturesPath, 'in', 'globalModulePaths.css');
const source = fs.readFileSync(sourceFile).toString();
const outFile = path.join(fixturesPath, 'out', 'globalModulePaths.css');
const out = fs.readFileSync(outFile).toString();
const thePlugin = plugin({
generateScopedName,
globalModulePaths: [/globalModulePaths/],
getJSON: () => {},
});
const result = await postcss([thePlugin]).process(source, { from: sourceFile });
t.is(result.css, out);
});
test('processes camelCase option', async (t) => {
const sourceFile = path.join(fixturesPath, 'in', 'camelCase.css');
const source = fs.readFileSync(sourceFile).toString();
const jsonFile = path.join(fixturesPath, 'in', 'camelCase.css.json');
if (fs.existsSync(jsonFile)) fs.unlinkSync(jsonFile);
await postcss([plugin({ generateScopedName, camelCase: true })])
.process(source, { from: sourceFile });
const json = fs.readFileSync(jsonFile).toString();
fs.unlinkSync(jsonFile);
t.deepEqual(JSON.parse(json), {
camelCase: '_camelCase_camel-case',
'camel-case': '_camelCase_camel-case',
});
});
test('different instances have different generateScopedName functions', async (t) => {
const one = plugin({
generateScopedName: () => 'one',
getJSON: () => {},
});
const two = plugin({
generateScopedName: () => 'two',
getJSON: () => {},
});
const css = '.foo {}';
const params = { from: 'test.css' };
const resultOne = await postcss([one]).process(css, params);
const resultTwo = await postcss([two]).process(css, params);
t.is(resultOne.css, '.one {}');
t.is(resultTwo.css, '.two {}');
t.not(resultOne.css, resultTwo.css);
});
test('getJSON with outputFileName', async (t) => {
const sourceFile = path.join(fixturesPath, 'in', 'test', 'getJSON.css');
const expectedFile = path.join(fixturesPath, 'out', 'test', 'getJSON');
const source = fs.readFileSync(sourceFile).toString();
const expectedJSON = fs.readFileSync(`${ expectedFile }.json`).toString();
let jsonFileName;
let resultJson;
const plugins = [
plugin({
generateScopedName,
getJSON: (cssFile, json, outputFileName) => {
jsonFileName = outputFileName.replace('.css', '.json');
resultJson = json;
},
}),
];
await postcss(plugins).process(source, { from: sourceFile, to: `${ expectedFile }.css` });
t.deepEqual(jsonFileName, `${ expectedFile }.json`);
t.deepEqual(resultJson, JSON.parse(expectedJSON));
});