Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

WIP: Refactor loader dependencies #119

Closed
wants to merge 4 commits into from
Closed

WIP: Refactor loader dependencies #119

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
c2fe1a7
Refactor loader dependencies
RianFuro Jan 15, 2021
c272f40
Update babel dev dependencies
RianFuro Jan 15, 2021
1d1d55b
Cleanup parser
RianFuro Jan 15, 2021
0209f35
Move path resolving logic over to loader
RianFuro Jan 23, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
12 changes: 6 additions & 6 deletions src/css-loader-core/loader.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,18 @@
import fs from "fs";
import path from "path";

export default (newPath, relativeTo, root) => {
export default (imported, importee, projectRoot) => {
return new Promise((resolve, reject) => {
let relativeDir = path.dirname(relativeTo),
let importeeDir = path.dirname(importee),
absolutePath = path.resolve(
path.join(root, relativeDir),
newPath
path.join(projectRoot, importeeDir),
imported
);

// if the path is not relative or absolute, try to resolve it in node_modules
if (newPath[0] !== "." && newPath[0] !== "/") {
if (imported[0] !== "." && imported[0] !== "/") {
try {
absolutePath = require.resolve(newPath);
absolutePath = require.resolve(imported);
} catch (e) {
// noop
}
Expand Down
82 changes: 36 additions & 46 deletions src/css-loader-core/parser.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,54 +70,44 @@ export default class Parser {
exportNode.remove();
}

fetchImport(importNode, relativeTo, depNr) {
let file = importNode.selector.match(importRegexp)[1],
depTrace = this.trace + String.fromCharCode(depNr);
let newPath = file.replace(/^["']|["']$/g, "");
let relativeDir = path.dirname(relativeTo),
rootRelativePath = path.resolve(relativeDir, newPath),
async fetchImport(importNode, relativeTo, depNr) {
const file = importNode.selector.match(importRegexp)[1].replace(/^["']|["']$/g, ""),
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's split the declarations into separate statements everywhere for the readability sake

depTrace = this.trace + String.fromCharCode(depNr),
relativeDir = path.dirname(relativeTo),
rootRelativePath = path.resolve(relativeDir, file),
fileRelativePath = path.resolve(
path.join(this.root, relativeDir),
newPath
);
let subParser = new Parser(this.root, this.plugins, this.pathFetcher, depTrace, {
sources: this.sources,
traces: this.traces,
tokensByFile: this.tokensByFile
})
const tokens = this.tokensByFile[fileRelativePath]

const base = tokens
? Promise.resolve(tokens)
: this.pathFetcher(newPath, relativeTo, this.root)
.then(content => {
return postcss(this.plugins.concat([subParser.plugin()]))
.process(content, { from: "/" + rootRelativePath })
.then((result) => {
return {
injectableSource: result.css,
exportTokens: subParser.exportTokens,
};
})
.then(({ injectableSource, exportTokens }) => {
this.sources[fileRelativePath] = injectableSource;
this.traces[depTrace] = fileRelativePath;
this.tokensByFile[fileRelativePath] = exportTokens;
return exportTokens;
});
})
return base
.then(
(exports) => {
importNode.each((decl) => {
if (decl.type == "decl") {
this.translations[decl.prop] = exports[decl.value];
}
});
importNode.remove();
},
(err) => console.log(err)
);
file
),
subParser = new Parser(this.root, this.plugins, this.pathFetcher, depTrace, {
sources: this.sources,
traces: this.traces,
tokensByFile: this.tokensByFile
}),
tokens = this.tokensByFile[fileRelativePath];

try {
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This seems to be cleaner now 👍

let exports = tokens;
if (!exports) {
const content = await this.pathFetcher(file, relativeTo, this.root);
const { css } = await postcss(this.plugins.concat([subParser.plugin()]))
.process(content, { from: "/" + rootRelativePath });
exports = subParser.exportTokens;

this.sources[fileRelativePath] = css;
this.traces[depTrace] = fileRelativePath;
this.tokensByFile[fileRelativePath] = exports;
}

importNode.each((decl) => {
if (decl.type == "decl") {
this.translations[decl.prop] = exports[decl.value];
}
});
importNode.remove();
} catch (e) {
console.error(e);
}
}


Expand Down