@moritzloewenstein/vite-plugin-sass-glob-import 5.0.0

package/.github/workflows/lint-test.yml

@@ -0,0 +1,34 @@
+name: Lint and Test
+
+on:
+  push:
+    branches: [ main ]
+  pull_request:
+    branches: [ main ]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v5
+
+      - uses: actions/setup-node@v5
+        with:
+          node-version: 22.x
+          cache: 'npm'
+
+      - uses: actions/cache@v4
+        with:
+          path: ~/.npm
+          key: npm-${{ hashFiles('package-lock.json') }}
+          restore-keys: npm-
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Run Biome
+        run: npm run biome:ci
+
+      - name: Run tests
+        run: npm run test

package/.github/workflows/publish.yml

@@ -0,0 +1,38 @@
+name: Publish
+
+on:
+  workflow_run:
+    workflows: ["Lint and Test"]
+    branches: [main]
+    types:
+      - completed
+
+permissions:
+  id-token: write
+  contents: read
+
+jobs:
+  publish:
+    if: ${{ github.event.workflow_run.conclusion == 'success' }}
+    runs-on: ubuntu-latest
+
+    steps:
+    - uses: actions/checkout@v5
+    - uses: actions/setup-node@v5
+      with:
+        node-version: '22.x'
+        registry-url: 'https://registry.npmjs.org'
+    - uses: actions/cache@v4
+      with:
+        path: ~/.npm
+        key: npm-${{ hashFiles('package-lock.json') }}
+        restore-keys: npm-
+    - name: Install deps and build
+      run: |
+        set -e
+        npm ci
+        npm run build
+    - name: Publish to npm
+      run: npm publish --tag latest --access public --provenance
+      env:
+        NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

package/.nvmrc

@@ -0,0 +1 @@
+20

package/LICENSE.txt

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023-present, Malven LLC
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,55 @@
+## Note
+
+Fork of [vite-plugin-sass-glob-import](https://github.com/cmalven/vite-plugin-sass-glob-import) which implements some stuff:
+
+- Use namespaces (`@use "foo/a/bar.scss" as bar_1;`) to glob import multiple files with the same name (`@use "./foo/*/bar.scss";`)
+- TODO: vite-rolldown hook filters: https://rolldown.rs/plugins/hook-filters
+
+# vite-plugin-sass-glob-import
+
+> Use glob syntax for @import or @use in your main Sass or SCSS file.
+
+## Install
+
+```shell
+npm i -D vite-plugin-sass-glob-import
+```
+
+```js
+// In vite.config.js
+
+import { defineConfig } from "vite";
+import sassGlobImports from "vite-plugin-sass-glob-import";
+
+export default defineConfig({
+  plugins: [sassGlobImports()],
+});
+```
+
+## Usage
+
+**Note:** Globbing only work in a top-level file, not within referenced files.
+
+```scss
+// In src/styles/main.scss
+
+@use "vars/**/*.scss";
+@import "utils/**/*.scss";
+@import "objects/**/*.scss";
+```
+
+The above will be transformed into something like the following before Vite processes it with Sass:
+
+```scss
+@use "vars/var-a.scss";
+@use "vars/var-b.scss";
+@import "utils/utils-a.scss";
+@import "utils/utils-b.scss";
+@import "objects/objects-a.scss";
+@import "objects/objects-b.scss";
+@import "objects/objects-c.scss";
+```
+
+## Caveats
+
+This plugin is intentionally simple and doesn't attempt to support every feature offered by Vite. If your use-case isn't similar to the examples in the README above, it probably isn't supported by this plugin.

package/biome.json

@@ -0,0 +1,54 @@
+{
+	"$schema": "node_modules/@biomejs/biome/configuration_schema.json",
+	"assist": { "actions": { "source": { "organizeImports": "on" } } },
+	"files": {
+		"ignoreUnknown": true,
+		"includes": ["**", "!dist"]
+	},
+	"vcs": {
+		"enabled": true,
+		"clientKind": "git",
+		"defaultBranch": "main",
+		"useIgnoreFile": true
+	},
+	"linter": {
+		"enabled": true,
+		"rules": {
+			"recommended": true,
+			"complexity": {
+				"noForEach": "off"
+			},
+			"style": {
+				"noParameterAssign": "error",
+				"useAsConstAssertion": "error",
+				"useDefaultParameterLast": "error",
+				"useEnumInitializers": "error",
+				"useSelfClosingElements": "error",
+				"useSingleVarDeclarator": "error",
+				"noUnusedTemplateLiteral": "error",
+				"useNumberNamespace": "error",
+				"noInferrableTypes": "error",
+				"noUselessElse": "error"
+			}
+		}
+	},
+	"formatter": {
+		"enabled": true
+	},
+	"css": {
+		"formatter": {
+			"enabled": false
+		},
+		"linter": {
+			"enabled": false
+		}
+	},
+	"graphql": {
+		"formatter": {
+			"enabled": false
+		},
+		"linter": {
+			"enabled": false
+		}
+	}
+}

package/package.json

@@ -0,0 +1,50 @@
+{
+	"name": "@moritzloewenstein/vite-plugin-sass-glob-import",
+	"version": "5.0.0",
+	"description": "Use glob syntax for imports in your main Sass or SCSS file.",
+	"main": "./dist/index.mjs",
+	"types": "./dist/index.d.mts",
+	"scripts": {
+		"dev": "vitest",
+		"build": "tsup src/index.ts --format esm --dts",
+		"test": "vitest run",
+		"biome:check": "biome check .",
+		"biome:write": "biome check . --write",
+		"biome:ci": "biome ci"
+	},
+	"author": {
+		"name": "Malven Co.",
+		"email": "chris@malven.co",
+		"url": "https://malven.co"
+	},
+	"keywords": [
+		"vite",
+		"vite-plugin",
+		"sass"
+	],
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/MoritzLoewenstein/vite-plugin-sass-glob-import.git"
+	},
+	"license": "MIT",
+	"dependencies": {
+		"ansi-colors": "^4.1.3",
+		"glob": "^11.0.3",
+		"minimatch": "^10.0.3"
+	},
+	"peerDependencies": {
+		"vite": "^5.0.0 || ^6.0.0"
+	},
+	"devDependencies": {
+		"@biomejs/biome": "^2.2.4",
+		"@types/glob": "^8.1.0",
+		"@types/node": "^22.18.6",
+		"tsup": "^8.5.0",
+		"typescript": "^5.9.2",
+		"vite": "^6.3.6",
+		"vitest": "^2.1.9"
+	},
+	"volta": {
+		"node": "22.19.0"
+	}
+}

package/src/index.ts

@@ -0,0 +1,122 @@
+import fs from "node:fs";
+import path from "node:path";
+import c from "ansi-colors";
+import { globSync } from "glob";
+import { minimatch } from "minimatch";
+import type { Plugin } from "vite";
+import type { PluginOptions, TransformResult } from "./types";
+
+let IMPORT_REGEX: RegExp;
+let options: PluginOptions;
+export default function sassGlobImports(_options: PluginOptions = {}): Plugin {
+	IMPORT_REGEX =
+		/^([ \t]*(?:\/\*.*)?)@(import|use)\s+["']([^"']+\*[^"']*(?:\.scss|\.sass)?)["'];?([ \t]*(?:\/[/*].*)?)$/gm;
+	options = _options;
+	return {
+		name: "sass-glob-import",
+		enforce: "pre",
+		transform(src: string, id: string): TransformResult {
+			const fileName = path.basename(id);
+			const filePath = path.dirname(id);
+			return {
+				code: transform(src, fileName, filePath),
+				map: null, // provide source map if available
+			};
+		},
+	};
+}
+
+function isSassOrScss(filename: string) {
+	return (
+		!fs.statSync(filename).isDirectory() &&
+		path.extname(filename).match(/\.sass|\.scss/i)
+	);
+}
+
+function transform(src: string, fileName: string, filePath: string): string {
+	// Determine if this is Sass (vs SCSS) based on file extension
+	const isSass = path.extname(fileName).match(/\.sass/i);
+
+	// Store base locations
+	const searchBases = [filePath];
+	const ignorePaths = options.ignorePaths || [];
+	const contentLinesCount = src.split("\n").length;
+
+	for (let i = 0; i < contentLinesCount; i++) {
+		const result = [...src.matchAll(IMPORT_REGEX)];
+		if (result.length === 0) continue;
+
+		const [importRule, startComment, importType, globPattern, endComment] =
+			result[0];
+
+		let files: string[] = [];
+		let basePath = "";
+		for (let i = 0; i < searchBases.length; i++) {
+			basePath = searchBases[i];
+
+			files = globSync(path.join(basePath, globPattern), {
+				cwd: "./",
+				windowsPathsNoEscape: true,
+			}).sort((a, b) => a.localeCompare(b, "en"));
+
+			// Do directories exist matching the glob pattern?
+			const globPatternWithoutWildcard = globPattern.split("*")[0];
+			if (globPatternWithoutWildcard.length) {
+				const directoryExists = fs.existsSync(
+					path.join(basePath, globPatternWithoutWildcard),
+				);
+				if (!directoryExists) {
+					console.warn(
+						c.yellow(
+							`Sass Glob Import: Directories don't exist for the glob pattern "${globPattern}"`,
+						),
+					);
+				}
+			}
+
+			if (files.length > 0) {
+				break;
+			}
+		}
+
+		const isGlobTrailStatic = !globPattern.split("/").at(-1)?.includes("*");
+		const imports = [];
+		files.forEach((anyFilename: string, index: number) => {
+			if (!isSassOrScss(anyFilename)) {
+				return;
+			}
+
+			const scssFilename = path
+				// Remove parent base path
+				.relative(basePath, anyFilename)
+				.replace(/\\/g, "/")
+				// Remove leading slash
+				.replace(/^\//, "");
+			if (
+				!ignorePaths.some((ignorePath: string) => {
+					return minimatch(scssFilename, ignorePath);
+				})
+			) {
+				const file = isGlobTrailStatic
+					? `"${scssFilename}" as ${path.parse(scssFilename).name}_${index}`
+					: `"${scssFilename}"`;
+				imports.push(`@${importType} ${file}${isSass ? "" : ";"}`);
+			}
+		});
+
+		if (startComment) {
+			imports.unshift(startComment);
+		}
+
+		if (endComment) {
+			imports.push(endComment);
+		}
+
+		const replaceString = imports.join("\n");
+		// biome-ignore lint: easier for now
+		src = src.replace(importRule, replaceString);
+	}
+
+	// Return the transformed source
+	return src;
+}

package/src/types.ts

@@ -0,0 +1,8 @@
+export interface PluginOptions {
+	ignorePaths?: string[];
+}
+
+export interface TransformResult {
+	code: string;
+	map: null;
+}

package/test/basic.test.ts

@@ -0,0 +1,107 @@
+import { describe, expect, it, vi } from "vitest";
+import sassGlobImportPlugin from "../src";
+
+const source = `
+body {}
+@import "files/*.scss";
+`;
+
+describe("it correctly converts glob patterns to inline imports", () => {
+	// biome-ignore lint: TODO
+	const plugin: any = sassGlobImportPlugin();
+
+	it("for SCSS", () => {
+		const expected = `
+body {}
+@import "files/_file-a.scss";
+@import "files/_file-b.scss";
+`;
+		const path = `${__dirname}/virtual-file.scss`;
+		expect(plugin.transform(source, path)?.code).toEqual(expected);
+	});
+
+	it("for Sass", () => {
+		const expected = `
+body {}
+@import "files/_file-a.scss"
+@import "files/_file-b.scss"
+`;
+		const path = `${__dirname}/virtual-file.sass`;
+		expect(plugin.transform(source, path)?.code).toEqual(expected);
+	});
+
+	it("with @use", () => {
+		const source = `
+body {}
+@use "files/*.scss";
+`;
+		const expected = `
+body {}
+@use "files/_file-a.scss";
+@use "files/_file-b.scss";
+`;
+		const path = `${__dirname}/virtual-file.scss`;
+		expect(plugin.transform(source, path)?.code).toEqual(expected);
+	});
+});
+
+describe("it warns for invalid glob paths", () => {
+	// biome-ignore lint: TODO
+	const plugin: any = sassGlobImportPlugin();
+
+	it("for SCSS", () => {
+		const source = `
+body {}
+@use "foo/**/*.scss";
+`;
+		const expected = `
+body {}
+
+`;
+		const path = `${__dirname}/virtual-file.scss`;
+		vi.spyOn(console, "warn");
+		expect(plugin.transform(source, path)?.code).toEqual(expected);
+		expect(console.warn).toHaveBeenCalledTimes(1);
+	});
+});
+
+describe("it correctly converts glob patterns with static trail to namespace imports", () => {
+	// biome-ignore lint: TODO
+	const plugin: any = sassGlobImportPlugin();
+
+	it.todo("for SCSS", () => {
+		//TODO does this even work?
+		const expected = `
+body {}
+@import "files/a/foo.scss";
+@import "files/b/foo.scss";
+`;
+		const path = `${__dirname}/virtual-file.scss`;
+		expect(plugin.transform(source, path)?.code).toEqual(expected);
+	});
+
+	it.todo("for Sass", () => {
+		//TODO does this even work?
+		const expected = `
+body {}
+@import "files/a/foo.scss"
+@import "files/b/foo.scss"
+`;
+		const path = `${__dirname}/virtual-file.sass`;
+		expect(plugin.transform(source, path)?.code).toEqual(expected);
+	});
+
+	it("with @use", () => {
+		const source = `
+body {}
+@use "files/*/foo.scss";
+`;
+		const expected = `
+body {}
+@use "files/a/foo.scss" as foo_0;
+@use "files/b/foo.scss" as foo_1;
+`;
+		const path = `${__dirname}/virtual-file.scss`;
+		expect(plugin.transform(source, path)?.code).toEqual(expected);
+	});
+});

package/tsconfig.json

@@ -0,0 +1,12 @@
+{
+	"compilerOptions": {
+		"target": "ESNext",
+		"module": "ESNext",
+		"lib": ["ESNext", "DOM"],
+		"moduleResolution": "Node",
+		"allowSyntheticDefaultImports": true,
+		"strict": true,
+		"sourceMap": true
+	},
+	"include": ["./src"]
+}