feat: support functional assetFileNames

__tests__/__snapshots__/index.test.ts.snap

@@ -2068,6 +2068,46 @@ exports[`extract absolute-path-fail 1`] = `
 which is __tests__/fixtures/dist/extract/absolute-path-fail"
 `;
 
+exports[`extract asset-file-names: css 1`] = `
+".foo {
+  color: red;
+}
+
+.bar {
+  color: red;
+}
+
+.stylus {
+  color: #f00;
+  background: #f00;
+}
+
+.pcss {
+  color: red;
+}
+
+.sass {
+  width: 30%;
+  color: red; }
+
+.less {
+  color: #6c94be;
+}
+
+/*# sourceMappingURL=index.css.map */"
+`;
+
+exports[`extract asset-file-names: js 1`] = `
+"var css = \\".foo {\\\\n  color: red;\\\\n}\\\\n\\";
+
+var css$1 = \\".bar {\\\\n  color: red;\\\\n}\\\\n\\";
+
+console.log(css, css$1);
+"
+`;
+
+exports[`extract asset-file-names: map 1`] = `"{\\"version\\":3,\\"sources\\":[\\"../../../../simple/foo.css\\",\\"../../../../simple/bar.css\\",\\"../../../../simple/style.styl\\",\\"../../../../simple/style.pcss\\",\\"../../../../simple/style.sass\\",\\"../../../../simple/style.less\\"],\\"names\\":[],\\"mappings\\":\\"AAAA;EACE,UAAU;AACZ;;ACFA;EACE,UAAU;AACZ;;ACFA;EACE,WAAO;EACP,gBAAY;AACd;;ACHA;EACE,UAAU;AACZ;;ACFA;EACE,UAAU;EACV,UAAU,EAAA;;ACCZ;EACE,cAAA;AAFF\\",\\"file\\":\\"index.css\\",\\"sourcesContent\\":[\\".foo {\\\\n  color: red;\\\\n}\\\\n\\",\\".bar {\\\\n  color: red;\\\\n}\\\\n\\",\\".stylus\\\\n  color: red\\\\n  background: @color\\\\n\\",\\".pcss {\\\\n  color: red;\\\\n}\\\\n\\",\\".sass {\\\\n  width: 30%;\\\\n  color: red; }\\\\n\\",\\"@nice-blue: #5b83ad;\\\\n@light-blue: @nice-blue + #111;\\\\n\\\\n.less {\\\\n  color: @light-blue;\\\\n}\\\\n\\"]}"`;
+
 exports[`extract custom-path: css 1`] = `
 ".foo {
   color: red;

__tests__/index.test.ts

@@ -365,6 +365,20 @@ validateMany("extract", [
     input: "simple/index.js",
     options: { mode: "extract", sourceMap: "inline" },
   },
+  {
+    title: "asset-file-names",
+    input: "simple/index.js",
+    outputOpts: {
+      assetFileNames({ name }) {
+        const p = "[name][extname]";
+        if (!name) return p;
+        if (name.endsWith(".css")) return `css/${p}`;
+        if (name.endsWith(".map")) return `map/${p}`;
+        return p;
+      },
+    },
+    options: { mode: "extract", sourceMap: true },
+  },
 ]);
 
 validateMany("inject", [

lint-staged.config.js

@@ -1,4 +1,4 @@
 module.exports = {
-  "*.{ts,js}": "eslint --cache --fix",
   "*.{ts,js,json,yml,yaml,md}": "prettier --write",
+  "*.{ts,js}": "eslint --cache --fix",
 };

src/index.ts

@@ -292,27 +292,21 @@ export default (options: Options = {}): Plugin => {
           res.map = resMin.map?.toString();
         }
 
-        const cssFileId = this.emitFile({
-          type: "asset",
-          name: res.name,
-          source: res.css,
-        });
+        const cssFile = { type: "asset" as const, name: res.name, source: res.css };
+        const cssFileId = this.emitFile(cssFile);
 
         if (res.map && sourceMap) {
           const fileName = this.getFileName(cssFileId);
 
-          if (opts.assetFileNames && typeof opts.assetFileNames !== "string") {
-            throw new TypeError("`assetFileNames` must be a string.");
-          }
-
-          const assetDir = opts.assetFileNames
-            ? normalizePath(path.dirname(opts.assetFileNames))
-            : "assets"; // Default for Rollup v2
+          const assetDir =
+            typeof opts.assetFileNames === "string"
+              ? normalizePath(path.dirname(opts.assetFileNames))
+              : typeof opts.assetFileNames === "function"
+              ? normalizePath(path.dirname(opts.assetFileNames(cssFile)))
+              : "assets"; // Default for Rollup v2
 
           const map = mm(res.map)
-            .modify(m => {
-              m.file = path.basename(fileName);
-            })
+            .modify(m => (m.file = path.basename(fileName)))
             .modifySources(s => {
               // Compensate for possible nesting depending on `assetFileNames` value
               if (s === "<no source>") return s;

src/loaders/sass/importer.ts

@@ -23,7 +23,6 @@ export const importerSync: sass.Importer = (url, importer): sass.Data => {
   const moduleUrl = normalizeUrl(url);
   const partialUrl = getUrlOfPartial(moduleUrl);
   const options = { basedir: path.dirname(importer), extensions };
-
   // Give precedence to importing a partial
   try {
     try {