Skip to content

Commit 9adbc61

Browse files
joshblackjoshblack
authored
feat(test-utils): add dart sass renderer (#7583)
* feat(test-utils): add dart sass renderer * test(colors): add public api test for colors sass modules * chore(project): run yarn dedupe
1 parent 7296ddc commit 9adbc61

File tree

8 files changed

+501
-65
lines changed

8 files changed

+501
-65
lines changed

‎packages/colors/__tests__/__snapshots__/modules-test.js.snap‎

Lines changed: 256 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,256 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`modules.scss Public API 1`] = `
4+
Object {
5+
"black": "#000000",
6+
"black-100": "#000000",
7+
"blue-10": "#edf5ff",
8+
"blue-100": "#001141",
9+
"blue-20": "#d0e2ff",
10+
"blue-30": "#a6c8ff",
11+
"blue-40": "#78a9ff",
12+
"blue-50": "#4589ff",
13+
"blue-60": "#0f62fe",
14+
"blue-70": "#0043ce",
15+
"blue-80": "#002d9c",
16+
"blue-90": "#001d6c",
17+
"colors": Object {
18+
"black": Object {
19+
"100": "#000000",
20+
},
21+
"blue": Object {
22+
"10": "#edf5ff",
23+
"100": "#001141",
24+
"20": "#d0e2ff",
25+
"30": "#a6c8ff",
26+
"40": "#78a9ff",
27+
"50": "#4589ff",
28+
"60": "#0f62fe",
29+
"70": "#0043ce",
30+
"80": "#002d9c",
31+
"90": "#001d6c",
32+
},
33+
"cool-gray": Object {
34+
"10": "#f2f4f8",
35+
"100": "#121619",
36+
"20": "#dde1e6",
37+
"30": "#c1c7cd",
38+
"40": "#a2a9b0",
39+
"50": "#878d96",
40+
"60": "#697077",
41+
"70": "#4d5358",
42+
"80": "#343a3f",
43+
"90": "#21272a",
44+
},
45+
"cyan": Object {
46+
"10": "#e5f6ff",
47+
"100": "#061727",
48+
"20": "#bae6ff",
49+
"30": "#82cfff",
50+
"40": "#33b1ff",
51+
"50": "#1192e8",
52+
"60": "#0072c3",
53+
"70": "#00539a",
54+
"80": "#003a6d",
55+
"90": "#012749",
56+
},
57+
"gray": Object {
58+
"10": "#f4f4f4",
59+
"100": "#161616",
60+
"20": "#e0e0e0",
61+
"30": "#c6c6c6",
62+
"40": "#a8a8a8",
63+
"50": "#8d8d8d",
64+
"60": "#6f6f6f",
65+
"70": "#525252",
66+
"80": "#393939",
67+
"90": "#262626",
68+
},
69+
"green": Object {
70+
"10": "#defbe6",
71+
"100": "#071908",
72+
"20": "#a7f0ba",
73+
"30": "#6fdc8c",
74+
"40": "#42be65",
75+
"50": "#24a148",
76+
"60": "#198038",
77+
"70": "#0e6027",
78+
"80": "#044317",
79+
"90": "#022d0d",
80+
},
81+
"magenta": Object {
82+
"10": "#fff0f7",
83+
"100": "#2a0a18",
84+
"20": "#ffd6e8",
85+
"30": "#ffafd2",
86+
"40": "#ff7eb6",
87+
"50": "#ee5396",
88+
"60": "#d02670",
89+
"70": "#9f1853",
90+
"80": "#740937",
91+
"90": "#510224",
92+
},
93+
"orange": Object {
94+
"40": "#ff832b",
95+
"60": "#ba4e00",
96+
"70": "#8a3800",
97+
},
98+
"purple": Object {
99+
"10": "#f6f2ff",
100+
"100": "#1c0f30",
101+
"20": "#e8daff",
102+
"30": "#d4bbff",
103+
"40": "#be95ff",
104+
"50": "#a56eff",
105+
"60": "#8a3ffc",
106+
"70": "#6929c4",
107+
"80": "#491d8b",
108+
"90": "#31135e",
109+
},
110+
"red": Object {
111+
"10": "#fff1f1",
112+
"100": "#2d0709",
113+
"20": "#ffd7d9",
114+
"30": "#ffb3b8",
115+
"40": "#ff8389",
116+
"50": "#fa4d56",
117+
"60": "#da1e28",
118+
"70": "#a2191f",
119+
"80": "#750e13",
120+
"90": "#520408",
121+
},
122+
"teal": Object {
123+
"10": "#d9fbfb",
124+
"100": "#081a1c",
125+
"20": "#9ef0f0",
126+
"30": "#3ddbd9",
127+
"40": "#08bdba",
128+
"50": "#009d9a",
129+
"60": "#007d79",
130+
"70": "#005d5d",
131+
"80": "#004144",
132+
"90": "#022b30",
133+
},
134+
"warm-gray": Object {
135+
"10": "#f7f3f2",
136+
"100": "#171414",
137+
"20": "#e5e0df",
138+
"30": "#cac5c4",
139+
"40": "#ada8a8",
140+
"50": "#8f8b8b",
141+
"60": "#726e6e",
142+
"70": "#565151",
143+
"80": "#3c3838",
144+
"90": "#272525",
145+
},
146+
"white": Object {
147+
"0": "#ffffff",
148+
},
149+
"yellow": Object {
150+
"20": "#fdd13a",
151+
"30": "#f1c21b",
152+
"40": "#d2a106",
153+
"50": "#b28600",
154+
},
155+
},
156+
"cool-gray-10": "#f2f4f8",
157+
"cool-gray-100": "#121619",
158+
"cool-gray-20": "#dde1e6",
159+
"cool-gray-30": "#c1c7cd",
160+
"cool-gray-40": "#a2a9b0",
161+
"cool-gray-50": "#878d96",
162+
"cool-gray-60": "#697077",
163+
"cool-gray-70": "#4d5358",
164+
"cool-gray-80": "#343a3f",
165+
"cool-gray-90": "#21272a",
166+
"cyan-10": "#e5f6ff",
167+
"cyan-100": "#061727",
168+
"cyan-20": "#bae6ff",
169+
"cyan-30": "#82cfff",
170+
"cyan-40": "#33b1ff",
171+
"cyan-50": "#1192e8",
172+
"cyan-60": "#0072c3",
173+
"cyan-70": "#00539a",
174+
"cyan-80": "#003a6d",
175+
"cyan-90": "#012749",
176+
"gray-10": "#f4f4f4",
177+
"gray-100": "#161616",
178+
"gray-20": "#e0e0e0",
179+
"gray-30": "#c6c6c6",
180+
"gray-40": "#a8a8a8",
181+
"gray-50": "#8d8d8d",
182+
"gray-60": "#6f6f6f",
183+
"gray-70": "#525252",
184+
"gray-80": "#393939",
185+
"gray-90": "#262626",
186+
"green-10": "#defbe6",
187+
"green-100": "#071908",
188+
"green-20": "#a7f0ba",
189+
"green-30": "#6fdc8c",
190+
"green-40": "#42be65",
191+
"green-50": "#24a148",
192+
"green-60": "#198038",
193+
"green-70": "#0e6027",
194+
"green-80": "#044317",
195+
"green-90": "#022d0d",
196+
"magenta-10": "#fff0f7",
197+
"magenta-100": "#2a0a18",
198+
"magenta-20": "#ffd6e8",
199+
"magenta-30": "#ffafd2",
200+
"magenta-40": "#ff7eb6",
201+
"magenta-50": "#ee5396",
202+
"magenta-60": "#d02670",
203+
"magenta-70": "#9f1853",
204+
"magenta-80": "#740937",
205+
"magenta-90": "#510224",
206+
"orange-40": "#ff832b",
207+
"orange-60": "#ba4e00",
208+
"orange-70": "#8a3800",
209+
"purple-10": "#f6f2ff",
210+
"purple-100": "#1c0f30",
211+
"purple-20": "#e8daff",
212+
"purple-30": "#d4bbff",
213+
"purple-40": "#be95ff",
214+
"purple-50": "#a56eff",
215+
"purple-60": "#8a3ffc",
216+
"purple-70": "#6929c4",
217+
"purple-80": "#491d8b",
218+
"purple-90": "#31135e",
219+
"red-10": "#fff1f1",
220+
"red-100": "#2d0709",
221+
"red-20": "#ffd7d9",
222+
"red-30": "#ffb3b8",
223+
"red-40": "#ff8389",
224+
"red-50": "#fa4d56",
225+
"red-60": "#da1e28",
226+
"red-70": "#a2191f",
227+
"red-80": "#750e13",
228+
"red-90": "#520408",
229+
"teal-10": "#d9fbfb",
230+
"teal-100": "#081a1c",
231+
"teal-20": "#9ef0f0",
232+
"teal-30": "#3ddbd9",
233+
"teal-40": "#08bdba",
234+
"teal-50": "#009d9a",
235+
"teal-60": "#007d79",
236+
"teal-70": "#005d5d",
237+
"teal-80": "#004144",
238+
"teal-90": "#022b30",
239+
"warm-gray-10": "#f7f3f2",
240+
"warm-gray-100": "#171414",
241+
"warm-gray-20": "#e5e0df",
242+
"warm-gray-30": "#cac5c4",
243+
"warm-gray-40": "#ada8a8",
244+
"warm-gray-50": "#8f8b8b",
245+
"warm-gray-60": "#726e6e",
246+
"warm-gray-70": "#565151",
247+
"warm-gray-80": "#3c3838",
248+
"warm-gray-90": "#272525",
249+
"white": "#ffffff",
250+
"white-0": "#ffffff",
251+
"yellow-20": "#fdd13a",
252+
"yellow-30": "#f1c21b",
253+
"yellow-40": "#d2a106",
254+
"yellow-50": "#b28600",
255+
}
256+
`;

‎packages/colors/__tests__/modules-test.js‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
/**
2+
* Copyright IBM Corp. 2015, 2018
3+
*
4+
* This source code is licensed under the Apache-2.0 license found in the
5+
* LICENSE file in the root directory of this source tree.
6+
*
7+
* @jest-environment node
8+
*/
9+
10+
'use strict';
11+
12+
const { SassRenderer } = require('@carbon/test-utils/scss');
13+
14+
const { render } = SassRenderer.create(__dirname);
15+
16+
describe('modules.scss', () => {
17+
test('Public API', async () => {
18+
const { getValue } = await render(`
19+
@use 'sass:meta';
20+
@use '../scss/module';
21+
22+
$_: get-value(meta.module-variables('module'));
23+
`);
24+
25+
const variables = getValue(0);
26+
expect(variables).toMatchSnapshot();
27+
});
28+
});

‎packages/test-utils/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@
2828
"dependencies": {
2929
"prettier": "^2.2.1",
3030
"resolve": "^1.12.0",
31+
"sass": "^1.32.4",
3132
"tabbable": "^4.0.0"
3233
},
3334
"devDependencies": {

‎packages/test-utils/scss.js‎

Lines changed: 8 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,9 @@
77

88
'use strict';
99

10-
const fs = require('fs');
1110
const { render, types } = require('node-sass');
12-
const path = require('path');
13-
const resolve = require('resolve');
11+
const { SassRenderer } = require('./src/renderer');
12+
const { Importer } = require('./src/importer');
1413

1514
function sassAsync(options) {
1615
return new Promise((resolve, reject) => {
@@ -24,65 +23,6 @@ function sassAsync(options) {
2423
});
2524
}
2625

27-
const defaultResolveOptions = {
28-
extensions: ['.scss'],
29-
};
30-
31-
/**
32-
* Create an importer for sass with the given `cwd`. This importer will try and
33-
* mimic the default sass resolution algorithm
34-
* @param {string} cwd
35-
* @returns {Function}
36-
*/
37-
function createImporter(cwd) {
38-
return (url, prev, done) => {
39-
const baseDirectory = prev !== 'stdin' ? path.dirname(prev) : cwd;
40-
41-
if (url.startsWith('@')) {
42-
const file = resolve.sync(url, {
43-
...defaultResolveOptions,
44-
basedir: cwd,
45-
packageFilter(pkg) {
46-
if (pkg.eyeglass !== undefined) {
47-
// Replace JavaScript entrypoint with Sass module entrypoing
48-
pkg.main = `${pkg.eyeglass.sassDir}/index.scss`;
49-
}
50-
return pkg;
51-
},
52-
pathFilter(pkg, path, relativePath) {
53-
// Transforms `scss/filename` to `scss/_filename.scss`
54-
return relativePath.replace(/^(scss[\\/])([a-z-]+)/, '$1_$2.scss');
55-
},
56-
});
57-
done({ file });
58-
return;
59-
}
60-
61-
const partialFilepath = path.resolve(
62-
baseDirectory,
63-
path.dirname(url),
64-
`_${path.basename(url)}.scss`
65-
);
66-
const filepath = path.resolve(
67-
baseDirectory,
68-
path.dirname(url),
69-
`${path.basename(url)}.scss`
70-
);
71-
72-
if (fs.existsSync(partialFilepath)) {
73-
done({ file: partialFilepath });
74-
return;
75-
}
76-
77-
if (fs.existsSync(filepath)) {
78-
done({ file: filepath });
79-
return;
80-
}
81-
82-
done();
83-
};
84-
}
85-
8626
/**
8727
* Create a sass renderer for the given current working directory. Setting `cwd`
8828
* is useful so that we can resolve sass files relative to the test file.
@@ -91,7 +31,7 @@ function createImporter(cwd) {
9131
* @returns {Function}
9232
*/
9333
function createSassRenderer(cwd, initialData = '') {
94-
const importer = createImporter(cwd);
34+
const importer = Importer.create(cwd);
9535
return async (data) => {
9636
const calls = [];
9737
const warn = jest.fn(() => types.Null());
@@ -217,8 +157,11 @@ function convert(value) {
217157
}
218158

219159
module.exports = {
220-
convert,
160+
// Existing sass renderer using node-sass
221161
createSassRenderer,
222-
createImporter,
162+
convert,
223163
types,
164+
165+
// New sass renderer using sass
166+
SassRenderer,
224167
};

0 commit comments

Comments
 (0)