Skip to content

Commit 3b83138

Browse files
megheaiulianmegheaiulian
committed
feat(sass): update sass types and tests
1 parent 24cf4fb commit 3b83138

File tree

10 files changed

+68
-232
lines changed

10 files changed

+68
-232
lines changed

‎__tests__/__snapshots__/index.test.ts.snap

Lines changed: 9 additions & 167 deletions
Original file line numberDiff line numberDiff line change
@@ -2107,7 +2107,7 @@ console.log(styles);
21072107
`;
21082108

21092109
exports[`extract absolute-path-fail 1`] = `
2110-
"Extraction path must be relative to the output directory,
2110+
"[plugin styles] Extraction path must be relative to the output directory,
21112111
which is __tests__/fixtures/dist/extract/absolute-path-fail"
21122112
`;
21132113

@@ -2293,7 +2293,7 @@ console.log(css, css$1);
22932293
`;
22942294

22952295
exports[`extract relative-path-fail 1`] = `
2296-
"Extraction path must be nested inside output directory,
2296+
"[plugin styles] Extraction path must be nested inside output directory,
22972297
which is __tests__/fixtures/dist/extract/relative-path-fail"
22982298
`;
22992299

@@ -3403,7 +3403,7 @@ exports[`modules extract: css 1`] = `
34033403
`;
34043404

34053405
exports[`modules extract: js 1`] = `
3406-
"var modules_5a199c00 = {"primary":"#BF4040","secondary":"#1F4F7F","module":"style_module","module2":"style_module2 composed_composition composition2_compositioned"};
3406+
"var modules_5a199c00 = {"module":"style_module"};
34073407
34083408
var modules_354770d7 = {"compositioned":"composition2_compositioned"};
34093409
@@ -3438,7 +3438,7 @@ exports[`modules extract-sourcemap-inline: css 1`] = `
34383438
`;
34393439

34403440
exports[`modules extract-sourcemap-inline: js 1`] = `
3441-
"var modules_5a199c00 = {"primary":"#BF4040","secondary":"#1F4F7F","module":"style_module","module2":"style_module2 composed_composition composition2_compositioned"};
3441+
"var modules_5a199c00 = {"module":"style_module"};
34423442
34433443
var modules_354770d7 = {"compositioned":"composition2_compositioned"};
34443444
@@ -3473,7 +3473,7 @@ exports[`modules extract-sourcemap-true: css 1`] = `
34733473
`;
34743474

34753475
exports[`modules extract-sourcemap-true: js 1`] = `
3476-
"var modules_5a199c00 = {"primary":"#BF4040","secondary":"#1F4F7F","module":"style_module","module2":"style_module2 composed_composition composition2_compositioned"};
3476+
"var modules_5a199c00 = {"module":"style_module"};
34773477
34783478
var modules_354770d7 = {"compositioned":"composition2_compositioned"};
34793479
@@ -3644,7 +3644,7 @@ function injector_d9f9689a (css, options) {
36443644
}
36453645
36463646
var css$2 = ".style_module {\\n color: #1F4F7F;\\n}\\n\\n.style_module2 {\\n}\\n";
3647-
var modules_5a199c00 = {"primary":"#BF4040","secondary":"#1F4F7F","module":"style_module","module2":"style_module2 composed_composition composition2_compositioned"};
3647+
var modules_5a199c00 = {"module":"style_module"};
36483648
injector_d9f9689a(css$2,{});
36493649
36503650
var css$1 = "@media screen and (min-width: 900px) {\\n .composed_composition {\\n background-color: aqua;\\n }\\n}\\n\\n.composed_composition {\\n background-color: #BF4040;\\n}\\n";
@@ -3662,7 +3662,7 @@ else console.log(modules_5a199c00.module, modules_354770d7.compositioned);
36623662
exports[`modules inject-fn: js 1`] = `
36633663
"var css$2 = ".style_module {\\n color: #1F4F7F;\\n}\\n\\n.style_module2 {\\n}\\n";
36643664
console.log(css$2, true);
3665-
var modules_5a199c00 = {"primary":"#BF4040","secondary":"#1F4F7F","module":"style_module","module2":"style_module2 composed_composition composition2_compositioned"};
3665+
var modules_5a199c00 = {"module":"style_module"};
36663666
36673667
var css$1 = "@media screen and (min-width: 900px) {\\n .composed_composition {\\n background-color: aqua;\\n }\\n}\\n\\n.composed_composition {\\n background-color: #BF4040;\\n}\\n";
36683668
console.log(css$1, true);
@@ -3748,11 +3748,7 @@ function injector_d9f9689a (css, options) {
37483748
37493749
var css$1 = ".style_module {\\n color: #1F4F7F;\\n}\\n\\n.style_module2 {\\n}\\n";
37503750
var injected$1 = false;
3751-
var modules_5a199c00 = {get "primary"() { if (!injected$1) { injected$1 = true; injector_d9f9689a(css$1,{}); } return "#BF4040"; },
3752-
get "secondary"() { if (!injected$1) { injected$1 = true; injector_d9f9689a(css$1,{}); } return "#1F4F7F"; },
3753-
get "module"() { if (!injected$1) { injected$1 = true; injector_d9f9689a(css$1,{}); } return "style_module"; },
3754-
get "module2"() { if (!injected$1) { injected$1 = true; injector_d9f9689a(css$1,{}); } return "style_module2 composed_composition composition2_compositioned"; },
3755-
inject: function inject() { if (!injected$1) { injected$1 = true; injector_d9f9689a(css$1,{}); } },};
3751+
var modules_5a199c00 = {get "module"() { if (!injected$1) { injected$1 = true; injector_d9f9689a(css$1,{}); } return "style_module"; }};
37563752
37573753
var css = ".composition2_compositioned {\\n width: 30%;\\n}\\n";
37583754
var injected = false;
@@ -3836,11 +3832,7 @@ function injector_d9f9689a (css, options) {
38363832
38373833
var css$1 = ".style_module {\\n color: #1F4F7F;\\n}\\n\\n.style_module2 {\\n}\\n";
38383834
var injected$1 = false;
3839-
var modules_5a199c00 = {get "primary"() { if (!injected$1) { injected$1 = true; injector_d9f9689a(css$1,{}); } return "#BF4040"; },
3840-
get "secondary"() { if (!injected$1) { injected$1 = true; injector_d9f9689a(css$1,{}); } return "#1F4F7F"; },
3841-
get "module"() { if (!injected$1) { injected$1 = true; injector_d9f9689a(css$1,{}); } return "style_module"; },
3842-
get "module2"() { if (!injected$1) { injected$1 = true; injector_d9f9689a(css$1,{}); } return "style_module2 composed_composition composition2_compositioned"; },
3843-
inject: function inject() { if (!injected$1) { injected$1 = true; injector_d9f9689a(css$1,{}); } },};
3835+
var modules_5a199c00 = {get "module"() { if (!injected$1) { injected$1 = true; injector_d9f9689a(css$1,{}); } return "style_module"; }};
38443836
38453837
var css = ".composition2_compositioned {\\n width: 30%;\\n}\\n";
38463838
var injected = false;
@@ -4571,81 +4563,6 @@ injector_f31f2858(css,{});
45714563
"
45724564
`;
45734565

4574-
exports[`sass importer-node: js 1`] = `
4575-
"/** @type {HTMLElement[]} */
4576-
var containers = [];
4577-
/** @type {{prepend:HTMLStyleElement,append:HTMLStyleElement}[]} */
4578-
var styleTags = [];
4579-
4580-
/**
4581-
* @param {string} css
4582-
* @param {object} options
4583-
* @param {boolean} [options.prepend]
4584-
* @param {boolean} [options.singleTag]
4585-
* @param {string} [options.container]
4586-
* @param {Record<string,string>} [options.attributes]
4587-
* @returns {void}
4588-
*/
4589-
function injector_f31f2858 (css, options) {
4590-
if (!css || typeof document === "undefined") return;
4591-
4592-
var position = options.prepend === true ? "prepend" : "append";
4593-
var singleTag = options.singleTag === true;
4594-
4595-
var container =
4596-
typeof options.container === "string"
4597-
? document.querySelector(options.container)
4598-
: document.getElementsByTagName("head")[0];
4599-
4600-
function createStyleTag() {
4601-
var styleTag = document.createElement("style");
4602-
styleTag.setAttribute("type", "text/css");
4603-
if (options.attributes) {
4604-
var k = Object.keys(options.attributes);
4605-
for (var i = 0; i < k.length; i++) {
4606-
styleTag.setAttribute(k[i], options.attributes[k[i]]);
4607-
}
4608-
}
4609-
var pos = position === "prepend" ? "afterbegin" : "beforeend";
4610-
container.insertAdjacentElement(pos, styleTag);
4611-
return styleTag;
4612-
}
4613-
4614-
/** @type {HTMLStyleElement} */
4615-
var styleTag;
4616-
4617-
if (singleTag) {
4618-
var id = containers.indexOf(container);
4619-
4620-
if (id === -1) {
4621-
id = containers.push(container) - 1;
4622-
styleTags[id] = {};
4623-
}
4624-
4625-
if (styleTags[id] && styleTags[id][position]) {
4626-
styleTag = styleTags[id][position];
4627-
} else {
4628-
styleTag = styleTags[id][position] = createStyleTag();
4629-
}
4630-
} else {
4631-
styleTag = createStyleTag();
4632-
}
4633-
4634-
// strip potential UTF-8 BOM if css was read from a file
4635-
if (css.charCodeAt(0) === 0xfeff) css = css.substring(1);
4636-
4637-
if (styleTag.styleSheet) {
4638-
styleTag.styleSheet.cssText += css;
4639-
} else {
4640-
styleTag.appendChild(document.createTextNode(css));
4641-
}
4642-
}
4643-
4644-
var css = ".virtual {\\n color: red; }\\n\\n.modularvirtual {\\n color: blue; }\\n";
4645-
injector_f31f2858(css,{});
4646-
"
4647-
`;
4648-
46494566
exports[`sass importer-sync: js 1`] = `
46504567
"/** @type {HTMLElement[]} */
46514568
var containers = [];
@@ -4721,81 +4638,6 @@ injector_f31f2858(css,{});
47214638
"
47224639
`;
47234640

4724-
exports[`sass importer-sync-node: js 1`] = `
4725-
"/** @type {HTMLElement[]} */
4726-
var containers = [];
4727-
/** @type {{prepend:HTMLStyleElement,append:HTMLStyleElement}[]} */
4728-
var styleTags = [];
4729-
4730-
/**
4731-
* @param {string} css
4732-
* @param {object} options
4733-
* @param {boolean} [options.prepend]
4734-
* @param {boolean} [options.singleTag]
4735-
* @param {string} [options.container]
4736-
* @param {Record<string,string>} [options.attributes]
4737-
* @returns {void}
4738-
*/
4739-
function injector_f31f2858 (css, options) {
4740-
if (!css || typeof document === "undefined") return;
4741-
4742-
var position = options.prepend === true ? "prepend" : "append";
4743-
var singleTag = options.singleTag === true;
4744-
4745-
var container =
4746-
typeof options.container === "string"
4747-
? document.querySelector(options.container)
4748-
: document.getElementsByTagName("head")[0];
4749-
4750-
function createStyleTag() {
4751-
var styleTag = document.createElement("style");
4752-
styleTag.setAttribute("type", "text/css");
4753-
if (options.attributes) {
4754-
var k = Object.keys(options.attributes);
4755-
for (var i = 0; i < k.length; i++) {
4756-
styleTag.setAttribute(k[i], options.attributes[k[i]]);
4757-
}
4758-
}
4759-
var pos = position === "prepend" ? "afterbegin" : "beforeend";
4760-
container.insertAdjacentElement(pos, styleTag);
4761-
return styleTag;
4762-
}
4763-
4764-
/** @type {HTMLStyleElement} */
4765-
var styleTag;
4766-
4767-
if (singleTag) {
4768-
var id = containers.indexOf(container);
4769-
4770-
if (id === -1) {
4771-
id = containers.push(container) - 1;
4772-
styleTags[id] = {};
4773-
}
4774-
4775-
if (styleTags[id] && styleTags[id][position]) {
4776-
styleTag = styleTags[id][position];
4777-
} else {
4778-
styleTag = styleTags[id][position] = createStyleTag();
4779-
}
4780-
} else {
4781-
styleTag = createStyleTag();
4782-
}
4783-
4784-
// strip potential UTF-8 BOM if css was read from a file
4785-
if (css.charCodeAt(0) === 0xfeff) css = css.substring(1);
4786-
4787-
if (styleTag.styleSheet) {
4788-
styleTag.styleSheet.cssText += css;
4789-
} else {
4790-
styleTag.appendChild(document.createTextNode(css));
4791-
}
4792-
}
4793-
4794-
var css = ".virtual {\\n color: red; }\\n\\n.modularvirtual {\\n color: blue; }\\n";
4795-
injector_f31f2858(css,{});
4796-
"
4797-
`;
4798-
47994641
exports[`sass modules: js 1`] = `
48004642
"/** @type {HTMLElement[]} */
48014643
var containers = [];

‎__tests__/index.test.ts

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { humanlizePath } from "../src/utils/path";
88
import { litCss } from "rollup-plugin-lit-css";
99

1010
import { fixture, validateMany, write } from "./helpers";
11+
import type { Data } from "../src/loaders/sass/types";
1112

1213
beforeAll(async () => fs.remove(fixture("dist")));
1314

@@ -490,7 +491,7 @@ validateMany("sass", [
490491
options: {
491492
sass: {
492493
sync: true,
493-
importer(url): sass.Data {
494+
importer(url: string): Data {
494495
if (url === "~modularvirtualimport") return { contents: ".modularvirtual{color:blue}" };
495496
return { contents: ".virtual{color:red}" };
496497
},
@@ -504,7 +505,7 @@ validateMany("sass", [
504505
sass: {
505506
impl: "node-sass",
506507
sync: true,
507-
importer(url): sass.Data {
508+
importer(url: string): Data {
508509
if (url === "~modularvirtualimport") return { contents: ".modularvirtual{color:blue}" };
509510
return { contents: ".virtual{color:red}" };
510511
},

‎rollup.config.mjs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import replace from "@rollup/plugin-replace";
1111
import resolve from "@rollup/plugin-node-resolve";
1212
import typescript from "@rollup/plugin-typescript";
1313
import { URL } from "url";
14-
import pkg from "./package.json" assert { type: "json" };
14+
import pkg from "./package.json" with { type: "json" };
1515

1616
const extensions = [".ts", ".mjs", ".js", ".cjs", ".json"];
1717
const __dirname = new URL(".", import.meta.url).pathname;

‎src/index.ts

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -294,7 +294,14 @@ export default (options: Options = {}): Plugin => {
294294
res.map = resMin.map?.toString();
295295
}
296296

297-
const cssFile = { type: "asset" as const, name: res.name, source: res.css };
297+
const cssFile = {
298+
type: "asset" as const,
299+
name: res.name,
300+
names: [res.name],
301+
source: res.css,
302+
originalFileName: null,
303+
originalFileNames: [],
304+
};
298305
const cssFileId = this.emitFile(cssFile);
299306

300307
if (res.map && sourceMap) {

‎src/loaders/sass/importer.ts

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
import path from "path";
22
import { packageFilterBuilder, resolveAsync, resolveSync } from "../../utils/resolve";
33
import { getUrlOfPartial, isModule, normalizeUrl } from "../../utils/url";
4+
import { Data, AsyncImporter, SyncImporter } from "./types";
45

56
const extensions = [".scss", ".sass", ".css"];
67
const conditions = ["sass", "style"];
78

8-
export const importer: sass.Importer = (url, importer, done): void => {
9+
export const importer: AsyncImporter = (url, importer, done): void => {
910
const finalize = (id: string): void => done({ file: id.replace(/\.css$/i, "") });
1011
const next = (): void => done(null);
1112

@@ -22,8 +23,8 @@ export const importer: sass.Importer = (url, importer, done): void => {
2223
resolveAsync([partialUrl, moduleUrl], options).then(finalize).catch(next);
2324
};
2425

25-
const finalize = (id: string): sass.Data => ({ file: id.replace(/\.css$/i, "") });
26-
export const importerSync: sass.Importer = (url, importer): sass.Data => {
26+
const finalize = (id: string): Data => ({ file: id.replace(/\.css$/i, "") });
27+
export const importerSync: SyncImporter = (url, importer): Data => {
2728
if (!isModule(url)) return null;
2829
const moduleUrl = normalizeUrl(url);
2930
const partialUrl = getUrlOfPartial(moduleUrl);

‎src/loaders/sass/index.ts

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,10 @@ import { normalizePath } from "../../utils/path";
22
import { Loader } from "../types";
33
import loadSass from "./load";
44
import { importer, importerSync } from "./importer";
5+
import { Options, PublicOptions, Result } from "./types";
56

67
/** Options for Sass loader */
7-
export interface SASSLoaderOptions extends Record<string, unknown>, sass.PublicOptions {
8+
export interface SASSLoaderOptions extends Record<string, unknown>, PublicOptions {
89
/** Force Sass implementation */
910
impl?: string;
1011
/** Forcefully enable/disable sync mode */
@@ -16,6 +17,7 @@ const loader: Loader<SASSLoaderOptions> = {
1617
test: /\.(sass|scss)$/i,
1718
async process({ code, map }) {
1819
const options = { ...this.options };
20+
options.silenceDeprecations = [...(options.silenceDeprecations ?? []), "legacy-js-api"];
1921
const [sass, type] = await loadSass(options.impl);
2022
const sync = options.sync ?? type !== "node-sass";
2123
const importers = [sync ? importerSync : importer];
@@ -27,10 +29,10 @@ const loader: Loader<SASSLoaderOptions> = {
2729
? importers.push(...options.importer)
2830
: importers.push(options.importer);
2931

30-
const render = async (options: sass.Options): Promise<sass.Result> =>
32+
const render = async (options: Options): Promise<Result> =>
3133
new Promise((resolve, reject) => {
32-
if (sync) resolve(sass.renderSync(options));
33-
else sass.render(options, (err, css) => (err ? reject(err) : resolve(css)));
34+
if (sync) resolve(sass.renderSync(options as Options<"sync">));
35+
else sass.render(options, (err, css) => (err ? reject(err) : resolve(css!)));
3436
});
3537

3638
// Remove non-Sass options

‎src/loaders/sass/load.ts

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
11
import arrayFmt from "../../utils/array-fmt";
2+
import type { SassModule } from "./types";
23

34
const ids = ["sass", "node-sass"];
45
const idsFmt = arrayFmt(ids);
5-
export default async function (impl?: string): Promise<[sass.Sass, string]> {
6+
export default async function (impl?: string): Promise<readonly [SassModule, string]> {
67
// Loading provided implementation
78
if (impl) {
89
return import(impl)
9-
.then((provided: sass.Sass) => {
10-
if (provided) return [provided, impl] as [sass.Sass, string];
10+
.then((provided: SassModule) => {
11+
if (provided) return [provided, impl] as const;
1112
throw undefined;
1213
})
1314
.catch(() => {
@@ -19,8 +20,8 @@ export default async function (impl?: string): Promise<[sass.Sass, string]> {
1920
for (const id of ids) {
2021
try {
2122
// eslint-disable-next-line no-await-in-loop
22-
const sass = (await import(id)) as sass.Sass;
23-
if (sass) return [sass, id];
23+
const sass: SassModule = (await import(id)) as SassModule;
24+
if (sass) return [sass, id] as const;
2425
// eslint-disable-next-line no-empty
2526
} catch {}
2627
}

0 commit comments

Comments
 (0)