/
scss.test.ts
111 lines (93 loc) · 3.28 KB
/
scss.test.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
/* eslint-disable global-require */
/* eslint-disable @typescript-eslint/no-require-imports */
import { resolve } from 'path';
import autoPreprocess from '../../src';
import { preprocess } from '../utils';
import { Options } from '../../src/types';
const implementation: Options.Sass['implementation'] = {
render(options, callback) {
callback(null, {
css: Buffer.from('div#red{color:red}'),
stats: {
entry: 'data',
start: 0,
end: 1,
duration: 1,
includedFiles: [],
},
});
},
renderSync: () => ({
css: Buffer.from('div#green{color:green}'),
stats: {
entry: 'data',
start: 0,
end: 1,
duration: 1,
includedFiles: [],
},
}),
};
describe('transformer - scss', () => {
it('should return @imported files as dependencies - via default async render', async () => {
const template = `<style lang="scss">@import "fixtures/style.scss";</style>`;
const opts = autoPreprocess({
scss: {
// we force the node-sass implementation here because of
// https://github.com/sveltejs/svelte-preprocess/issues/163#issuecomment-639694477
implementation: require('node-sass'),
},
});
const preprocessed = await preprocess(template, opts);
expect(preprocessed.dependencies).toContain(
resolve(__dirname, '..', 'fixtures', 'style.scss').replace(/[\\/]/g, '/'),
);
});
it('should return @imported files as dependencies - via renderSync', async () => {
const template = `<style lang="scss">@import "fixtures/style.scss";</style>`;
const opts = autoPreprocess({
scss: {
// we force the node-sass implementation here because of
// https://github.com/sveltejs/svelte-preprocess/issues/163#issuecomment-639694477
implementation: require('node-sass'),
renderSync: true,
},
});
const preprocessed = await preprocess(template, opts);
expect(preprocessed.dependencies).toContain(
resolve(__dirname, '..', 'fixtures', 'style.scss').replace(/[\\/]/g, '/'),
);
});
it('should use the specified implementation via the `implementation` option property - via default async render', async () => {
const template = `<style lang="scss">h1{}</style>`;
const opts = autoPreprocess({
scss: {
implementation,
},
});
const preprocessed = await preprocess(template, opts);
expect(preprocessed.toString()).toContain('div#red{color:red}');
});
it('should prepend scss content via `data` option property - via renderSync', async () => {
const template = `<style lang="scss"></style>`;
const opts = autoPreprocess({
scss: {
prependData: '$color:blue;div{color:$color}',
renderSync: true,
},
});
const preprocessed = await preprocess(template, opts);
expect(preprocessed.toString()).toContain('blue');
});
it('should use the specified implementation via the `implementation` option property - via renderSync', async () => {
const template = `<style lang="scss">h1{}</style>`;
const opts = autoPreprocess({
scss: {
implementation,
renderSync: true,
},
});
const preprocessed = await preprocess(template, opts);
expect(preprocessed.toString()).toContain('div#green{color:green}');
});
});