From cb0ee7307c27cbf2f0580e5633fe92007b12138f Mon Sep 17 00:00:00 2001 From: Marco Solazzi Date: Fri, 6 Jan 2023 19:17:05 +0900 Subject: [PATCH 1/5] feat(sass): allow importing from relative path and node_modules --- package.json | 1 + pnpm-lock.yaml | 7 +++++++ src/loaders/sass.ts | 13 +++++++++++-- test/fixture/src/_base.scss | 1 + test/fixture/src/components/js.vue | 7 +++++-- test/fixture/src/demo.scss | 6 ++++++ test/index.test.ts | 31 +++++++++++++++++++++++++++++- 7 files changed, 61 insertions(+), 5 deletions(-) create mode 100644 test/fixture/src/_base.scss create mode 100644 test/fixture/src/demo.scss diff --git a/package.json b/package.json index 6f9a7066..9e64c134 100644 --- a/package.json +++ b/package.json @@ -44,6 +44,7 @@ "c8": "latest", "eslint": "^8.29.0", "eslint-config-unjs": "^0.0.2", + "modern-normalize": "^1.1.0", "sass": "^1.56.2", "standard-version": "^9.5.0", "typescript": "^4.9.4", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 7563baec..9f4c05f2 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -13,6 +13,7 @@ specifiers: fs-extra: ^11.1.0 globby: ^13.1.3 jiti: ^1.16.0 + modern-normalize: ^1.1.0 mri: ^1.2.0 pathe: ^1.0.0 sass: ^1.56.2 @@ -38,6 +39,7 @@ devDependencies: c8: 7.12.0 eslint: 8.29.0 eslint-config-unjs: 0.0.2_ha6vam6werchizxrnqvarmz2zu + modern-normalize: 1.1.0 sass: 1.56.2 standard-version: 9.5.0 typescript: 4.9.4 @@ -3124,6 +3126,11 @@ packages: ufo: 1.0.0 dev: true + /modern-normalize/1.1.0: + resolution: {integrity: sha512-2lMlY1Yc1+CUy0gw4H95uNN7vjbpoED7NNRSBHE25nWfLBdmMzFCsPshlzbxHz+gYMcBEUN8V4pU16prcdPSgA==} + engines: {node: '>=6'} + dev: true + /modify-values/1.0.1: resolution: {integrity: sha512-xV2bxeN6F7oYjZWTe/YPAy6MN2M+sL4u/Rlm2AHCIVGfo2p1yGmBHQ6vHehl4bRTZBdHu3TSkWdYgkwpYzAGSw==} engines: {node: '>=0.10.0'} diff --git a/src/loaders/sass.ts b/src/loaders/sass.ts index c9c841a7..a883a4a4 100644 --- a/src/loaders/sass.ts +++ b/src/loaders/sass.ts @@ -1,10 +1,19 @@ +import { dirname, basename } from "pathe"; import type { Loader, LoaderResult } from "../loader"; export const sassLoader: Loader = async (input, { options }) => { if (![".sass", ".scss"].includes(input.extension)) { return; } - + if (basename(input.srcPath).startsWith("_")) { + // sass files starting with "_" are always considered partials + // and should not be compiled to standalone CSS + return [{ + contents: "", + path: input.path, + skip: true + }]; + } const compileString = await import("sass").then(r => r.compileString || r.default.compileString); const output: LoaderResult = []; @@ -12,7 +21,7 @@ export const sassLoader: Loader = async (input, { options }) => { const contents = await input.getContents(); output.push({ - contents: compileString(contents).css, + contents: compileString(contents, { loadPaths: [dirname(input.srcPath), "node_modules"] }).css, path: input.path, extension: `.${options.ext || "css"}` }); diff --git a/test/fixture/src/_base.scss b/test/fixture/src/_base.scss new file mode 100644 index 00000000..1822b861 --- /dev/null +++ b/test/fixture/src/_base.scss @@ -0,0 +1 @@ +$color: green; diff --git a/test/fixture/src/components/js.vue b/test/fixture/src/components/js.vue index 6664dbd2..666a0894 100644 --- a/test/fixture/src/components/js.vue +++ b/test/fixture/src/components/js.vue @@ -16,9 +16,12 @@ export default { diff --git a/test/fixture/src/demo.scss b/test/fixture/src/demo.scss new file mode 100644 index 00000000..d624b128 --- /dev/null +++ b/test/fixture/src/demo.scss @@ -0,0 +1,6 @@ +@use 'modern-normalize/modern-normalize.css'; +@use 'base'; + +.test { + color: base.$color; +} diff --git a/test/index.test.ts b/test/index.test.ts index 3e99fb2f..e4955811 100644 --- a/test/index.test.ts +++ b/test/index.test.ts @@ -1,6 +1,6 @@ import { resolve } from "pathe"; import { readFile } from "fs-extra"; -import { describe, it, expect } from "vitest"; +import { describe, it, expect, beforeEach } from "vitest"; import { mkdist } from "../src/make"; import { createLoader } from "../src/loader"; import { jsLoader, sassLoader, vueLoader } from "../src/loaders"; @@ -11,6 +11,7 @@ describe("mkdist", () => { const { writtenFiles } = await mkdist({ rootDir }); expect(writtenFiles.sort()).toEqual([ "dist/README.md", + "dist/demo.css", "dist/foo.mjs", "dist/foo.d.ts", // manual "dist/index.mjs", @@ -50,6 +51,7 @@ describe("mkdist", () => { const { writtenFiles } = await mkdist({ rootDir, declaration: true }); expect(writtenFiles.sort()).toEqual([ "dist/README.md", + "dist/demo.css", "dist/foo.mjs", "dist/foo.d.ts", "dist/index.mjs", @@ -70,6 +72,33 @@ describe("mkdist", () => { expect(await readFile(resolve(rootDir, "dist/foo.d.ts"), "utf8")).toMatch("manual declaration"); expect(await readFile(resolve(rootDir, "dist/bar/esm.d.mts"), "utf8")).toMatch("declare"); }, 50_000); + + describe("mkdist (sass compilation)", () => { + const rootDir = resolve(__dirname, "fixture"); + let writtenFiles: string[]; + beforeEach(async () => { + const results = await mkdist({ rootDir }); + writtenFiles = results.writtenFiles; + }); + + it("resolves local imports and excludes partials ", async () => { + const css = await readFile(resolve(rootDir, "dist/demo.css"), "utf8"); + + expect(writtenFiles).not.toContain("dist/_base.css"); + expect(css).toMatch("color: green"); + }); + + it("resolves node_modules imports", async () => { + const css = await readFile(resolve(rootDir, "dist/demo.css"), "utf8"); + expect(css).toMatch("box-sizing: border-box;"); + }); + + it("compiles sass blocks in vue SFC", async () => { + const vue = await readFile(resolve(rootDir, "dist/components/js.vue"), "utf8"); + + expect(vue).toMatch("color: green;\n background-color: red"); + }); + }); }); describe("createLoader", () => { From bbb0dc1cb3fd79979877022e2733090e5b029dfe Mon Sep 17 00:00:00 2001 From: Pooya Parsa Date: Mon, 9 Jan 2023 12:40:13 +0100 Subject: [PATCH 2/5] fix test with todo --- src/loaders/sass.ts | 22 ++++++++++++++-------- test/fixture/src/components/js.vue | 14 +++++++------- test/fixture/src/demo.scss | 5 +++-- test/index.test.ts | 2 +- 4 files changed, 25 insertions(+), 18 deletions(-) diff --git a/src/loaders/sass.ts b/src/loaders/sass.ts index e0539ddf..24ff31db 100644 --- a/src/loaders/sass.ts +++ b/src/loaders/sass.ts @@ -8,22 +8,28 @@ export const sassLoader: Loader = async (input) => { if (basename(input.srcPath).startsWith("_")) { // sass files starting with "_" are always considered partials // and should not be compiled to standalone CSS - return [{ - contents: "", - path: input.path, - skip: true - }]; + return [ + { + contents: "", + path: input.path, + skip: true, + }, + ]; } - const compileString = await import("sass").then(r => r.compileString || r.default.compileString); + const compileString = await import("sass").then( + (r) => r.compileString || r.default.compileString + ); const output: LoaderResult = []; const contents = await input.getContents(); output.push({ - contents: compileString(contents, { loadPaths: [dirname(input.srcPath), "node_modules"] }).css, + contents: compileString(contents, { + loadPaths: [dirname(input.srcPath), "node_modules"], + }).css, path: input.path, - extension: ".css" + extension: ".css", }); return output; diff --git a/test/fixture/src/components/js.vue b/test/fixture/src/components/js.vue index 666a0894..4a16d887 100644 --- a/test/fixture/src/components/js.vue +++ b/test/fixture/src/components/js.vue @@ -1,22 +1,22 @@