fix: extract relative path (#262)

* test: add extract relative path * fix: extract relative path
egoist · Apr 19, 2020 · 0e71f75 · 0e71f75
1 parent df71f37
commit 0e71f75
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 5 deletions.
diff --git a/src/index.js b/src/index.js
@@ -137,10 +137,15 @@ export default (options = {}) => {
           Object.keys(bundle).find(fileName => bundle[fileName].isEntry)
         )
       const getExtracted = () => {
-        const fileName =
-          typeof postcssLoaderOptions.extract === 'string' ?
-            normalizePath(path.relative(dir, postcssLoaderOptions.extract)) :
-            `${path.basename(file, path.extname(file))}.css`
+        let fileName = `${path.basename(file, path.extname(file))}.css`
+        if (typeof postcssLoaderOptions.extract === 'string') {
+          if (path.isAbsolute(postcssLoaderOptions.extract)) {
+            fileName = normalizePath(path.relative(dir, postcssLoaderOptions.extract))
+          } else {
+            fileName = normalizePath(postcssLoaderOptions.extract)
+          }
+        }
+
         const concat = new Concat(true, fileName, '\n')
         const entries = [...extracted.values()]
         const { modules } = bundle[normalizePath(path.relative(dir, file))]

diff --git a/test/__snapshots__/index.test.js.snap b/test/__snapshots__/index.test.js.snap
@@ -195,6 +195,44 @@ console.log(undefined, undefined);
 "
 `;
 
+exports[`extract relative-path: css code 1`] = `
+"body {
+  color: red;
+}
+
+.bar {
+  color: red;
+}
+
+body {
+  color: #f00;
+  background: #f00;
+}
+/*# sourceMappingURL=test/fixtures/simple/style.css.map */
+#sidebar {
+  width: 30%;
+  background-color: #faa; }
+
+#header {
+  color: #6c94be;
+}
+
+.pcss {
+  color: red;
+}
+
+/*# sourceMappingURL=this/is/extracted.css.map */"
+`;
+
+exports[`extract relative-path: css map 1`] = `"{\\"version\\":3,\\"sources\\":[\\"foo.css\\",\\"bar.css\\",\\"test/fixtures/simple/style.styl\\",\\"style.styl\\",\\"style.sass\\",\\"test/fixtures/simple/style.less\\",\\"style.less\\",\\"style.pcss\\"],\\"names\\":[],\\"mappings\\":\\"AAAA;EACE,UAAU;AACZ;;ACFA;EACE,UAAU;AACZ;;ACFA;EACE,WAAO;EACP,gBAAY;ACCd;AACA,yDAAyD;ACJzD;EACE,UAAU;EACV,sBAAsB,EAAE;;ACC1B;EACE,cAAA;ACFF;;ACFA;EACE,UAAU;AACZ\\",\\"file\\":\\"this/is/extracted.css\\",\\"sourcesContent\\":[\\"body {\\\\n  color: red;\\\\n}\\\\n\\",\\".bar {\\\\n  color: red;\\\\n}\\\\n\\",null,null,\\"#sidebar {\\\\n  width: 30%;\\\\n  background-color: #faa; }\\\\n\\",null,null,\\".pcss {\\\\n  color: red;\\\\n}\\\\n\\"]}"`;
+
+exports[`extract relative-path: js code 1`] = `
+"'use strict';
+
+console.log(undefined, undefined);
+"
+`;
+
 exports[`extract sourcemap-inline: css code 1`] = `
 "body {
   color: red;

diff --git a/test/index.test.js b/test/index.test.js
@@ -31,7 +31,15 @@ async function write({
     format: 'cjs',
     file: path.join(outDir, 'bundle.js')
   })
-  const cssCodePath = typeof options.extract === 'string' ? options.extract : path.join(outDir, 'bundle.css')
+  let cssCodePath = path.join(outDir, 'bundle.css')
+  if (typeof options.extract === 'string') {
+    if (path.isAbsolute(options.extract)) {
+      cssCodePath = options.extract
+    } else {
+      cssCodePath = path.join(outDir, options.extract)
+    }
+  }
+
   const cssMapPath = `${cssCodePath}.map`
   const jsCodePath = path.join(outDir, 'bundle.js')
   return {
@@ -263,6 +271,14 @@ snapshotMany('extract', [
       sourceMap: true
     }
   },
+  {
+    title: 'relative-path',
+    input: 'simple/index.js',
+    options: {
+      extract: 'this/is/extracted.css',
+      sourceMap: true
+    }
+  },
   {
     title: 'sourcemap-true',
     input: 'simple/index.js',