refactory preservePath resolution

Author: tinchoz49

README.md

@@ -13,7 +13,6 @@ Sections |
 [Options](#options) |
 [Custom Hash Function](#custom-hash-function) |
 [Transform](#using-transform) |
-[Preserving paths](#preserving-paths) |
 [Using postcss-import](#using-postcss-import) |
 [About lifecyle and the fileMeta object](#lifecyle) |
 [Roadmap](#roadmap) |
@@ -25,11 +24,26 @@ Sections |
 With [npm](https://npmjs.com/package/postcss-copy) do:
 
 ```
-npm install postcss-copy
+$ npm install postcss-copy
 ```
 
 ## <a name="quick-start"></a> Quick Start
 
+### Using [postcss-cli](https://github.com/postcss/postcss-cli)
+```js
+// postcss.config.js
+module.exports = {
+    plugins: [
+        require('postcss-copy')({
+            dest: 'dist'
+        })
+    ]
+};
+```
+```bash
+$ postcss src/index.css
+```
+
 ### Using [Gulp](https://github.com/postcss/gulp-postcss)
 
 ```js
@@ -40,13 +54,13 @@ var postcssCopy = require('postcss-copy');
 gulp.task('buildCss', function () {
     var processors = [
         postcssCopy({
-            basePath: 'src',
+            basePath: ['src', 'otherSrc']
             dest: 'dist'
         })
     ];
 
     return gulp
-        .src('src/**/*.css')
+        .src(['src/**/*.css', 'otherSrc/**/*.css'])
         .pipe(postcss(processors))
         .pipe(gulp.dest('dist'));
 });
@@ -81,7 +95,8 @@ var copyOpts = {
 ```
 
 #### preservePath ({boolean} default = false)
-Flag option that can be used to preserve the directory structure of your assets
+Flag option to notify to postcss-copy that your CSS files destination are going to preserve the directory structure.
+It's helpful if you are using `postcss-cli` with the --base option or `gulp-postcss` with multiple files (e.g: `gulp.src('src/**/*.css')`)
 
 #### ignore ({string | string[] | function} default = [])
 Option to ignore assets in your CSS file.
@@ -170,15 +185,6 @@ var copyOpts = {
 };
 ```
 
-#### <a name="preserving-paths"></a> Preserving paths
-Some tools of postcss like postcss-cli or gulp-postcss can be used to preserve the relative paths of each src CSS files.
-There is some conditions in postcss-copy where we keep the structure directories and others where we not based on the `to` and `from` postcss options.
-
-These are the rules:
-- If the `to` option is not set, postcss-copy is going to use the `dest` path and will not preserve the original path.
-- If the `to` option is set and is the same as `from` (e.g: gulp-postcss do that by default) is going to preserve the directory structure.
-- If you are running postcss for multiple files (e.g: in gulp-postcss `gulp.src('src/**/*.css')`) and `to` option is set, you have to change `preservePath` to true.
-
 #### <a name="using-postcss-import"></a> Using copy with postcss-import
 [postcss-import](https://github.com/postcss/postcss-import) is a great plugin that allow us work our css files in a modular way with the same behavior of CommonJS.
 
@@ -252,7 +258,7 @@ The lifecyle of the copy process is:
 10. Define template for the new asset
 11. Add ```resultAbsolutePath``` and ```extra``` properties in the fileMeta object
 12. Write in destination
-13. Write the new URL in the PostCSS node value. ([read more about preserving paths](#preserving-paths))
+13. Write the new URL in the PostCSS node value.
 
 ## <a name="roadmap"></a> On roadmap
 

src/__tests__/common-tests.json

@@ -227,73 +227,4 @@
     ],
     "no-modified": "assets/0ed7c955a2951f04.jpg"
   }
-}, {
-  "name": "template: 'assets/[hash].[ext][query]', with postcss.to && preservePath === false",
-  "opts": {
-    "template": "assets/[hash].[ext][query]",
-    "to": "styles/index.css"
-  },
-  "assertions": {
-    "index": [{
-      "desc": "@index.css => process url image (simple)",
-      "match": "../assets/b6c8f21e92b50900.jpg"
-    }, {
-      "desc": "@index.css => process url image (with parameters)",
-      "match": "../assets/0ed7c955a2951f04.jpg?#iefix&v=4.4.0"
-    }, {
-      "desc": "@index.css => extra rules in image (simple)",
-      "match": "url('../assets/b6c8f21e92b50900.jpg') center center",
-      "regex-simple": true
-    }],
-    "component": [],
-    "external_libs": [],
-    "exists": [
-      "assets/b6c8f21e92b50900.jpg",
-      "assets/0ed7c955a2951f04.jpg"
-    ],
-    "no-modified": "assets/0ed7c955a2951f04.jpg"
-  }
-}, {
-  "name": "template: '[path]/[name].[ext][query]', with postcss.to == postcss.from",
-  "opts": {
-    "template": "[path]/[name].[ext][query]",
-    "to": "equal-from"
-  },
-  "assertions": {
-    "index": [],
-    "component": [{
-      "desc": "@component/index.css => process url image (simple)",
-      "match": "images/component.jpg"
-    }, {
-      "desc": "@component/index.css => process url image (with parameters)",
-      "match": "../images/test.jpg?#iefix&v=4.4.0"
-    }],
-    "external_libs": [],
-    "exists": [
-      "component/images/component.jpg",
-      "images/test.jpg"
-    ]
-  }
-}, {
-  "name": "template: '[path]/[name].[ext][query]', with preservePath === true",
-  "opts": {
-    "template": "[path]/[name].[ext][query]",
-    "preservePath": true,
-    "to": "component/index.css"
-  },
-  "assertions": {
-    "index": [],
-    "component": [{
-      "desc": "@component/index.css => process url image (simple)",
-      "match": "images/component.jpg"
-    }, {
-      "desc": "@component/index.css => process url image (with parameters)",
-      "match": "../images/test.jpg?#iefix&v=4.4.0"
-    }],
-    "external_libs": [],
-    "exists": [
-      "component/images/component.jpg",
-      "images/test.jpg"
-    ]
-  }
 }]

src/index.js

@@ -56,27 +56,43 @@ function findBasePath(paths, pathname) {
  * @returns {string}
  */
 function defineCSSDestPath(dirname, fileMeta, result, opts) {
-    if (!result.opts.to) {
-        return opts.dest;
-    }
-
     const from = path.resolve(result.opts.from);
-    const to = path.resolve(result.opts.to);
+    let to;
 
-    if (to === from || opts.preservePath && dirname === path.dirname(from)) {
+    if (result.opts.to) {
         /**
-         * if to === results.opts.from we can't use it as a valid dest path
+         * if to === from we can't use it as a valid dest path
          * e.g: gulp-postcss comes with this problem
          *
-         * if dirname === path.dirname(result.opts.from) with this
-         * condition we can check if the postcss-copy runs after postcss-import
-         * and if preservePath is activated preserve the structure of
-         * the assets directory
          */
-        return path.join(opts.dest, path.relative(fileMeta.basePath, dirname));
+        to = path.resolve(result.opts.to);
+        to = to === from ? opts.dest : path.dirname(to);
+    } else {
+        to = opts.dest;
+    }
+
+    if (opts.preservePath) {
+        let srcPath;
+        let basePath;
+
+        if (dirname === path.dirname(from)) {
+            srcPath = dirname;
+            basePath = fileMeta.basePath;
+        } else {
+            /**
+             * dirname !== path.dirname(result.opts.from) means that
+             * postcss-import is grouping different css files in
+             * only one destination, so, the relative path must be defined
+             * based on the CSS file where we read the @imports
+             */
+            srcPath = path.dirname(from);
+            basePath = findBasePath(opts.basePath, from);
+        }
+
+        return path.join(to, path.relative(basePath, srcPath));
     }
 
-    return path.dirname(to);
+    return to;
 }
 
 /**