fix(extract): allow paths relative to cwd

Anidetrix · Mar 18, 2020 · bdfc266 · bdfc266
1 parent 1d4d533
commit bdfc266
Show file tree

Hide file tree

Showing 7 changed files with 72 additions and 11 deletions.
diff --git a/README.md b/README.md
@@ -46,6 +46,9 @@ This plugin will also automatically detect and use local PostCSS config files.
 ```js
 styles({
   extract: true,
+  // ...or with absolute/relative to current working directory path
+  // Note: also acts as `to` for PostCSS
+  extract: "dist/awesome-bundle.css",
 });
 ```
 

diff --git a/src/loaders/postcss/index.ts b/src/loaders/postcss/index.ts
@@ -82,7 +82,7 @@ const loader: Loader<PostCSSLoaderOptions> = {
       ...config.options,
       from: this.id,
       // Set `to` to extract location, required for some plugins
-      to: typeof options.extract === "string" ? options.extract : this.id,
+      to: typeof options.extract === "string" ? path.resolve(options.extract) : this.id,
       // Annotation are still enabled if you have set {inline: true} in PostCSS `map` option
       map: Boolean(this.sourceMap) && { inline: false, annotation: false, sourcesContent: true },
     };

diff --git a/src/types.ts b/src/types.ts
@@ -241,7 +241,7 @@ export interface Options {
     | ((varname: string, id: string) => string);
   /**
    * Extract CSS to the same location where JS file is generated but with .css extension.
-   * You can also set it to an absolute path, which will also act as `to` option for PostCSS
+   * You can also set it to an absolute or relative to current working directory path, which will also act as `to` option for PostCSS
    * @default false
    * */
   extract?: boolean | string;

diff --git a/src/utils/path-utils.ts b/src/utils/path-utils.ts
@@ -8,6 +8,14 @@ export function normalizePath(file: string): string {
   return file.replace(/\\/g, "/");
 }
 
+/**
+ * @param paths Array of paths
+ * @returns Normalized absolute path
+ */
+export function resolvePath(...paths: string[]): string {
+  return normalizePath(path.resolve(...paths));
+}
+
 /**
  * @param dir Directory path
  * @param file File path

diff --git a/src/utils/sourcemap-utils.ts b/src/utils/sourcemap-utils.ts
@@ -1,6 +1,12 @@
 import path from "path";
 import fs from "fs-extra";
-import { relativePath, isAbsolutePath, normalizePath, isRelativePath } from "./path-utils";
+import {
+  relativePath,
+  isAbsolutePath,
+  normalizePath,
+  isRelativePath,
+  resolvePath,
+} from "./path-utils";
 import { SourceMap } from "../types";
 
 export const dataURIRe = /data:[^\n\r;]+?(?:;charset=[^\n\r;]+?)?;base64,([\d+/A-Za-z]+={0,2})/;
@@ -89,9 +95,7 @@ export class MapModifier {
    */
   resolve(dir: string): this {
     if (this.map.sources) {
-      this.map.sources = this.map.sources.map(source =>
-        normalizePath(path.resolve(path.join(dir, source))),
-      );
+      this.map.sources = this.map.sources.map(source => resolvePath(dir, source));
     }
     return this;
   }

diff --git a/test/__snapshots__/index.test.ts.snap b/test/__snapshots__/index.test.ts.snap
@@ -318,7 +318,7 @@ injector_14187a73(css_2f84417a);
 "
 `;
 
-exports[`extract custom-path: css 1`] = `
+exports[`extract custom-path-absolute: css 1`] = `
 ".foo {
   color: red;
 }
@@ -347,14 +347,52 @@ exports[`extract custom-path: css 1`] = `
 /*# sourceMappingURL=extracted.css.map */"
 `;
 
-exports[`extract custom-path: js 1`] = `
+exports[`extract custom-path-absolute: js 1`] = `
 "'use strict';
 
 console.log(undefined, undefined);
 "
 `;
 
-exports[`extract custom-path: 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\\":\\"extracted.css\\",\\"sourcesContent\\":[\\".foo {\\\\n  color: red;\\\\n}\\\\n\\",\\".bar {\\\\n  color: red;\\\\n}\\\\n\\",\\".stylus {\\\\n  color: #f00;\\\\n  background: #f00;\\\\n}\\\\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-absolute: 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\\":\\"extracted.css\\",\\"sourcesContent\\":[\\".foo {\\\\n  color: red;\\\\n}\\\\n\\",\\".bar {\\\\n  color: red;\\\\n}\\\\n\\",\\".stylus {\\\\n  color: #f00;\\\\n  background: #f00;\\\\n}\\\\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-relative: 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=extracted.css.map */"
+`;
+
+exports[`extract custom-path-relative: js 1`] = `
+"'use strict';
+
+console.log(undefined, undefined);
+"
+`;
+
+exports[`extract custom-path-relative: 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\\":\\"extracted.css\\",\\"sourcesContent\\":[\\".foo {\\\\n  color: red;\\\\n}\\\\n\\",\\".bar {\\\\n  color: red;\\\\n}\\\\n\\",\\".stylus {\\\\n  color: #f00;\\\\n  background: #f00;\\\\n}\\\\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 sourcemap-inline: css 1`] = `
 ".foo {

diff --git a/test/index.test.ts b/test/index.test.ts
@@ -275,10 +275,18 @@ validateMany("extract", [
     options: { extract: true },
   },
   {
-    title: "custom-path",
+    title: "custom-path-absolute",
     input: "simple/index.js",
     options: {
-      extract: fixture("dist/extract/custom-path/this/is/extracted.css"),
+      extract: fixture("dist/extract/custom-path-absolute/this/is/extracted.css"),
+      sourceMap: true,
+    },
+  },
+  {
+    title: "custom-path-relative",
+    input: "simple/index.js",
+    options: {
+      extract: "test/fixtures/dist/extract/custom-path-relative/this/is/too/extracted.css",
       sourceMap: true,
     },
   },