Skip to content

Commit bb7cef9

Browse files
alexander-akaitalexander-akait
authored
feat: use webpack logger to log sass messages (only for dart-sass), configure it using https://webpack.js.org/configuration/other-options/#infrastructurelogging (#991)
1 parent 3498284 commit bb7cef9

File tree

9 files changed

+1302
-1326
lines changed

9 files changed

+1302
-1326
lines changed

‎package-lock.json

+1,073-1,320
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@
7474
"del": "^6.0.0",
7575
"del-cli": "^4.0.1",
7676
"enhanced-resolve": "^5.8.2",
77-
"eslint": "^7.30.0",
77+
"eslint": "^8.1.0",
7878
"eslint-config-prettier": "^8.3.0",
7979
"eslint-plugin-import": "^2.23.3",
8080
"fibers": "^5.0.0",

‎src/utils.js

+40-4
Original file line numberDiff line numberDiff line change
@@ -168,10 +168,7 @@ async function getSassOptions(
168168
: content;
169169

170170
// opt.outputStyle
171-
if (
172-
typeof options.outputStyle === "undefined" &&
173-
isProductionLikeMode(loaderContext)
174-
) {
171+
if (!options.outputStyle && isProductionLikeMode(loaderContext)) {
175172
options.outputStyle = "compressed";
176173
}
177174

@@ -231,6 +228,45 @@ async function getSassOptions(
231228
options.charset = true;
232229
}
233230

231+
if (!options.logger) {
232+
const logger = loaderContext.getLogger("sass-loader");
233+
const formatSpan = (span) =>
234+
`${span.url || "-"}:${span.start.line}:${span.start.column}: `;
235+
236+
options.logger = {
237+
debug(message, loggerOptions) {
238+
let builtMessage = "";
239+
240+
if (loggerOptions.span) {
241+
builtMessage = formatSpan(loggerOptions.span);
242+
}
243+
244+
builtMessage += message;
245+
246+
logger.debug(builtMessage);
247+
},
248+
warn(message, loggerOptions) {
249+
let builtMessage = "";
250+
251+
if (loggerOptions.deprecation) {
252+
builtMessage += "Deprecation ";
253+
}
254+
255+
if (loggerOptions.span && !loggerOptions.stack) {
256+
builtMessage = formatSpan(loggerOptions.span);
257+
}
258+
259+
builtMessage += message;
260+
261+
if (loggerOptions.stack) {
262+
builtMessage += `\n\n${loggerOptions.stack}`;
263+
}
264+
265+
logger.warn(builtMessage);
266+
},
267+
};
268+
}
269+
234270
return options;
235271
}
236272

‎test/__snapshots__/loader.test.js.snap

+110
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,51 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

3+
exports[`loader should allow to use own logger (dart-sass) (sass): css 1`] = `
4+
"a {
5+
color: red;
6+
}"
7+
`;
8+
9+
exports[`loader should allow to use own logger (dart-sass) (sass): errors 1`] = `Array []`;
10+
11+
exports[`loader should allow to use own logger (dart-sass) (sass): logs 1`] = `
12+
Array [
13+
Object {
14+
"message": "My debug message",
15+
"type": "debug",
16+
},
17+
Object {
18+
"message": "My warning message",
19+
"type": "warn",
20+
},
21+
]
22+
`;
23+
24+
exports[`loader should allow to use own logger (dart-sass) (sass): warnings 1`] = `Array []`;
25+
26+
exports[`loader should allow to use own logger (dart-sass) (scss): css 1`] = `
27+
"a {
28+
color: red;
29+
}"
30+
`;
31+
32+
exports[`loader should allow to use own logger (dart-sass) (scss): errors 1`] = `Array []`;
33+
34+
exports[`loader should allow to use own logger (dart-sass) (scss): logs 1`] = `
35+
Array [
36+
Object {
37+
"message": "My debug message",
38+
"type": "debug",
39+
},
40+
Object {
41+
"message": "My warning message",
42+
"type": "warn",
43+
},
44+
]
45+
`;
46+
47+
exports[`loader should allow to use own logger (dart-sass) (scss): warnings 1`] = `Array []`;
48+
349
exports[`loader should import .import.sass files (dart-sass) (sass): css 1`] = `
450
"a {
551
display: block;
@@ -1326,6 +1372,70 @@ SassError: Can't find stylesheet to import.",
13261372

13271373
exports[`loader should throw an error with a explicit file and a file does not exist using "@use" rule (dart-sass) (scss): warnings 1`] = `Array []`;
13281374

1375+
exports[`loader should use webpack logger (dart-sass) (sass): css 1`] = `
1376+
"a {
1377+
color: red;
1378+
}"
1379+
`;
1380+
1381+
exports[`loader should use webpack logger (dart-sass) (sass): errors 1`] = `Array []`;
1382+
1383+
exports[`loader should use webpack logger (dart-sass) (sass): logs 1`] = `
1384+
Array [
1385+
Array [
1386+
Object {
1387+
"args": Array [
1388+
"file:///<cwd>/sass/logging.sass:0:0: My debug message",
1389+
],
1390+
"type": "debug",
1391+
},
1392+
Object {
1393+
"args": Array [
1394+
"My warning message
1395+
1396+
test/sass/logging.sass 2:1 root stylesheet
1397+
",
1398+
],
1399+
"type": "warn",
1400+
},
1401+
],
1402+
]
1403+
`;
1404+
1405+
exports[`loader should use webpack logger (dart-sass) (sass): warnings 1`] = `Array []`;
1406+
1407+
exports[`loader should use webpack logger (dart-sass) (scss): css 1`] = `
1408+
"a {
1409+
color: red;
1410+
}"
1411+
`;
1412+
1413+
exports[`loader should use webpack logger (dart-sass) (scss): errors 1`] = `Array []`;
1414+
1415+
exports[`loader should use webpack logger (dart-sass) (scss): logs 1`] = `
1416+
Array [
1417+
Array [
1418+
Object {
1419+
"args": Array [
1420+
"file:///<cwd>/scss/logging.scss:0:0: My debug message",
1421+
],
1422+
"type": "debug",
1423+
},
1424+
Object {
1425+
"args": Array [
1426+
"My warning message
1427+
1428+
test/scss/logging.scss 2:1 root stylesheet
1429+
",
1430+
],
1431+
"type": "warn",
1432+
},
1433+
],
1434+
]
1435+
`;
1436+
1437+
exports[`loader should use webpack logger (dart-sass) (scss): warnings 1`] = `Array []`;
1438+
13291439
exports[`loader should watch firstly in the "includePaths" values (dart-sass) (sass): css 1`] = `
13301440
".bar {
13311441
color: red;

‎test/helpers/getCodeFromSass.js

+2
Original file line numberDiff line numberDiff line change
@@ -781,6 +781,8 @@ function getCodeFromSass(testId, options) {
781781
.concat([testImporter])
782782
: [testImporter];
783783

784+
sassOptions.logger = { debug: () => {}, warn: () => {} };
785+
784786
const { css, map } = implementation.renderSync(sassOptions);
785787

786788
return { css: css.toString(), sourceMap: map };

‎test/helpers/getCompiler.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,7 @@ export default function getCompiler(fixture, config = {}, options = {}) {
5959
// eslint-disable-next-line no-undefined
6060
resolve: config.resolve || undefined,
6161
};
62+
6263
// Compiler Options
6364
// eslint-disable-next-line no-param-reassign
6465
options = Object.assign({ output: false }, options);
@@ -71,7 +72,6 @@ export default function getCompiler(fixture, config = {}, options = {}) {
7172

7273
if (!options.output) {
7374
compiler.outputFileSystem = createFsFromVolume(new Volume());
74-
compiler.outputFileSystem.join = path.join.bind(path);
7575
}
7676

7777
return compiler;

‎test/loader.test.js

+64
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import path from "path";
2+
import url from "url";
23

34
import nodeSass from "node-sass";
45
import dartSass from "sass";
@@ -1737,6 +1738,69 @@ describe("loader", () => {
17371738
expect(getWarnings(stats)).toMatchSnapshot("warnings");
17381739
expect(getErrors(stats)).toMatchSnapshot("errors");
17391740
});
1741+
1742+
it(`should use webpack logger (${implementationName}) (${syntax})`, async () => {
1743+
const testId = getTestId("logging", syntax);
1744+
const options = {
1745+
implementation: getImplementationByName(implementationName),
1746+
};
1747+
const compiler = getCompiler(testId, { loader: { options } });
1748+
const stats = await compile(compiler);
1749+
const codeFromBundle = getCodeFromBundle(stats, compiler);
1750+
const codeFromSass = getCodeFromSass(testId, options);
1751+
const logs = [];
1752+
1753+
for (const [name, value] of stats.compilation.logging) {
1754+
if (/sass-loader/.test(name)) {
1755+
logs.push(
1756+
value.map((item) => {
1757+
return {
1758+
type: item.type,
1759+
args: item.args.map((arg) =>
1760+
arg
1761+
.replace(url.pathToFileURL(__dirname), "file:///<cwd>")
1762+
.replace(/\\/g, "/")
1763+
),
1764+
};
1765+
})
1766+
);
1767+
}
1768+
}
1769+
1770+
expect(codeFromBundle.css).toBe(codeFromSass.css);
1771+
expect(codeFromBundle.css).toMatchSnapshot("css");
1772+
expect(getWarnings(stats)).toMatchSnapshot("warnings");
1773+
expect(getErrors(stats)).toMatchSnapshot("errors");
1774+
expect(logs).toMatchSnapshot("logs");
1775+
});
1776+
1777+
it(`should allow to use own logger (${implementationName}) (${syntax})`, async () => {
1778+
const testId = getTestId("logging", syntax);
1779+
const logs = [];
1780+
const options = {
1781+
implementation: getImplementationByName(implementationName),
1782+
sassOptions: {
1783+
logger: {
1784+
warn: (message) => {
1785+
logs.push({ type: "warn", message });
1786+
},
1787+
debug: (message) => {
1788+
logs.push({ type: "debug", message });
1789+
},
1790+
},
1791+
},
1792+
};
1793+
const compiler = getCompiler(testId, { loader: { options } });
1794+
const stats = await compile(compiler);
1795+
const codeFromBundle = getCodeFromBundle(stats, compiler);
1796+
const codeFromSass = getCodeFromSass(testId, options);
1797+
1798+
expect(codeFromBundle.css).toBe(codeFromSass.css);
1799+
expect(codeFromBundle.css).toMatchSnapshot("css");
1800+
expect(getWarnings(stats)).toMatchSnapshot("warnings");
1801+
expect(getErrors(stats)).toMatchSnapshot("errors");
1802+
expect(logs).toMatchSnapshot("logs");
1803+
});
17401804
}
17411805
});
17421806
});

‎test/sass/logging.sass

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
@debug "My debug message"
2+
@warn "My warning message"
3+
4+
a
5+
color: red

‎test/scss/logging.scss

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
@debug "My debug message";
2+
@warn "My warning message";
3+
4+
a {
5+
color: red;
6+
}

0 commit comments

Comments
 (0)