1 | const Asset = require('../Asset');
|
2 | const localRequire = require('../utils/localRequire');
|
3 | const {promisify} = require('@parcel/utils');
|
4 | const Resolver = require('../Resolver');
|
5 | const fs = require('@parcel/fs');
|
6 | const path = require('path');
|
7 | const parseCSSImport = require('../utils/parseCSSImport');
|
8 |
|
9 | class LESSAsset extends Asset {
|
10 | constructor(name, options) {
|
11 | super(name, options);
|
12 | this.type = 'css';
|
13 | }
|
14 |
|
15 | async parse(code) {
|
16 |
|
17 | let less = await localRequire('less', this.name);
|
18 | let render = promisify(less.render.bind(less));
|
19 |
|
20 | let opts =
|
21 | (await this.getConfig(['.lessrc', '.lessrc.js'], {packageKey: 'less'})) ||
|
22 | {};
|
23 | opts.filename = this.name;
|
24 | opts.plugins = (opts.plugins || []).concat(urlPlugin(this));
|
25 | if (this.options.sourceMaps) {
|
26 | opts.sourceMap = {outputSourceFiles: true};
|
27 | }
|
28 |
|
29 | return render(code, opts);
|
30 | }
|
31 |
|
32 | collectDependencies() {
|
33 | for (let dep of this.ast.imports) {
|
34 | this.addDependency(dep, {includedInParent: true});
|
35 | }
|
36 | }
|
37 |
|
38 | generate() {
|
39 | let map;
|
40 | if (this.ast && this.ast.map) {
|
41 | map = JSON.parse(this.ast.map.toString());
|
42 | map.sources = map.sources.map(v =>
|
43 | path.relative(this.options.rootDir, v)
|
44 | );
|
45 | }
|
46 | return [
|
47 | {
|
48 | type: 'css',
|
49 | value: this.ast ? this.ast.css : '',
|
50 | hasDependencies: false,
|
51 | map
|
52 | }
|
53 | ];
|
54 | }
|
55 | }
|
56 |
|
57 | function urlPlugin(asset) {
|
58 | return {
|
59 | install: (less, pluginManager) => {
|
60 | let visitor = new less.visitors.Visitor({
|
61 | visitUrl: node => {
|
62 | node.value.value = asset.addURLDependency(
|
63 | node.value.value,
|
64 | node.currentFileInfo.filename
|
65 | );
|
66 | return node;
|
67 | }
|
68 | });
|
69 |
|
70 | visitor.run = visitor.visit;
|
71 | pluginManager.addVisitor(visitor);
|
72 |
|
73 | let LessFileManager = getFileManager(less, asset.options);
|
74 | pluginManager.addFileManager(new LessFileManager());
|
75 | }
|
76 | };
|
77 | }
|
78 |
|
79 | function getFileManager(less, options) {
|
80 | const resolver = new Resolver({
|
81 | extensions: ['.css', '.less'],
|
82 | rootDir: options.rootDir
|
83 | });
|
84 |
|
85 | class LessFileManager extends less.FileManager {
|
86 | supports() {
|
87 | return true;
|
88 | }
|
89 |
|
90 | supportsSync() {
|
91 | return false;
|
92 | }
|
93 |
|
94 | async loadFile(filename, currentDirectory) {
|
95 | filename = parseCSSImport(filename);
|
96 | let resolved = await resolver.resolve(
|
97 | filename,
|
98 | path.join(currentDirectory, 'index')
|
99 | );
|
100 | return {
|
101 | contents: await fs.readFile(resolved.path, 'utf8'),
|
102 | filename: resolved.path
|
103 | };
|
104 | }
|
105 | }
|
106 |
|
107 | return LessFileManager;
|
108 | }
|
109 |
|
110 | module.exports = LESSAsset;
|