-
Notifications
You must be signed in to change notification settings - Fork 413
/
index.ts
110 lines (94 loc) · 3.08 KB
/
index.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
/**
* This file contains an esbuild loader for Linaria.
* It uses the transform.ts function to generate class names from source code,
* returns transformed code without template literals and attaches generated source maps
*/
import path from 'path';
import fs from 'fs';
import type { PluginOptions, Preprocessor } from '@linaria/babel-preset';
import { slugify, transform } from '@linaria/babel-preset';
import { transformSync, Plugin, TransformOptions, Loader } from 'esbuild';
type EsbuildPluginOptions = {
sourceMap?: boolean;
preprocessor?: Preprocessor;
esbuildOptions?: TransformOptions;
} & Partial<PluginOptions>;
const nodeModulesRegex = /^(?:.*[\\/])?node_modules(?:[\\/].*)?$/;
export default function linaria({
sourceMap,
preprocessor,
esbuildOptions,
...rest
}: EsbuildPluginOptions = {}): Plugin {
return {
name: 'linaria',
setup(build) {
const cssLookup = new Map<string, string>();
build.onResolve({ filter: /\.linaria\.css$/ }, (args) => {
return {
namespace: 'linaria',
path: args.path,
};
});
build.onLoad({ filter: /.*/, namespace: 'linaria' }, (args) => {
return {
contents: cssLookup.get(args.path),
loader: 'css',
resolveDir: path.basename(args.path),
};
});
build.onLoad({ filter: /\.(js|jsx|ts|tsx)$/ }, (args) => {
const rawCode = fs.readFileSync(args.path, 'utf8');
const { ext, name: filename } = path.parse(args.path);
const loader = ext.replace(/^\./, '') as Loader;
if (nodeModulesRegex.test(args.path)) {
return {
loader,
contents: rawCode,
};
}
if (typeof esbuildOptions === 'undefined') {
esbuildOptions = {};
if ('jsxFactory' in build.initialOptions) {
esbuildOptions.jsxFactory = build.initialOptions.jsxFactory;
}
if ('jsxFragment' in build.initialOptions) {
esbuildOptions.jsxFragment = build.initialOptions.jsxFragment;
}
}
const { code } = transformSync(rawCode, {
...esbuildOptions,
loader,
});
const result = transform(code, {
filename: args.path,
preprocessor,
pluginOptions: rest,
});
if (!result.cssText) {
return {
contents: code,
loader,
resolveDir: path.basename(args.path),
};
}
let { cssText } = result;
const slug = slugify(cssText);
const cssFilename = `${filename}_${slug}.linaria.css`;
if (sourceMap && result.cssSourceMapText) {
const map = Buffer.from(result.cssSourceMapText).toString('base64');
cssText += `/*# sourceMappingURL=data:application/json;base64,${map}*/`;
}
cssLookup.set(cssFilename, cssText);
return {
contents: `
import ${JSON.stringify(cssFilename)};
${result.code}
`,
loader,
resolveDir: path.basename(args.path),
};
});
},
};
}