added query string properties to work in the template name #44 and so…

…urceInputFile to the fileMeta #42
geut · Jul 20, 2016 · e3a8553 · e3a8553
1 parent 86fb2e8
commit e3a8553
Show file tree

Hide file tree

Showing 7 changed files with 138 additions and 46 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,15 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 
 ## [Unreleased]
 
+## [5.0.0] - 2016-07-20
+### Added
+- Query string attributes in the fileMeta: **query**, **qparams** and **qhash**
+- sourceInputFile attribute in the fileMeta
+- sourceValue attribute in the fileMeta
+
+### Changed
+- Change default template to ```[hash].[ext][query]``` **(Breaking change)**
+
 ## [4.0.2] - 2016-04-22
 ### Fixed
 - issue with the ignore option

diff --git a/README.md b/README.md
@@ -15,6 +15,7 @@ Sections |
 [Input Path](#input-path) |
 [Using Relative Path](#using-relative-path) |
 [Transform](#using-transform) |
+[About lifecyle and the fileMeta object](#lifecyle)
 [Using postcss-import](#using-postcss-import) |
 [Roadmap](#roadmap) |
 [Credits](#credits) |
@@ -60,13 +61,16 @@ Define the base src path of your CSS files.
 #### dest ({string} required)
 Define the dest path of your CSS files and assets.
 
-#### template ({string | function} default = '[hash].[ext]')
+#### template ({string | function} default = '[hash].[ext][query]')
 Define a template name for your final url assets.
 * string template
     * **[hash]**: Let you use a hash name based on the contents of the file.
     * **[name]**: Real name of your asset.
     * **[path]**: Original relative path of your asset.
     * **[ext]**: Extension of the asset.
+    * **[query]**: Query string.
+    * **[qparams]**: Query string params without the ```?```.
+    * **[qhash]**: Query string hash without the ```#```.
 * function template
 ```js
 var copyOpts = {
@@ -198,6 +202,41 @@ var copyOpts = {
 };
 ```
 
+#### <a name="lifecyle"></a> About lifecyle and the fileMeta object
+The fileMeta is a literal object with meta information about the copy process. Its information grows with the progress of the copy process.
+
+The lifecyle of the copy process is:
+1. Detect the url in the CSS files
+2. Validate url
+3. Get the inputPath
+4. Initialize the fileMeta:
+```js
+{
+    sourceInputFile, // path to the origin CSS file
+    sourceValue, // origin asset value taked from the CSS file
+    filename, // filename normalized without query string
+    absolutePath, // absolute path of the asset file
+    fullName, // name of the asset file
+    path, // relative path of the asset file
+    name, // name without extension
+    ext, // extension name
+    query, // full query string
+    qparams, // query string params without the char '?'
+    qhash, // query string hash without the char '#'
+    src // source path
+}
+```
+5. Check ignore function
+6. Read the asset file (using a cache buffer if exists)
+7. Add ```content``` property in the fileMeta object
+8. Create hash name
+9. Add ```hash``` property in the fileMeta object
+10. Define template for the new asset
+11. Add ```resultAbsolutePath``` and ```extra``` properties in the fileMeta object
+12. Execute custom transform
+13. Write in destination
+14. Write the new URL in the PostCSS node value.
+
 #### <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.
 Since this plugin create at the end only one file with all your CSS files inline (loaded with the @import keyword) you need customized the ```relativePath``` function.

diff --git a/package.json b/package.json
@@ -4,36 +4,36 @@
   "description": "A postcss plugin to copy all assets referenced in CSS to a custom destination folder and updating the URLs.",
   "main": "dist/index.js",
   "dependencies": {
-    "micromatch": "^2.3.7",
+    "micromatch": "^2.3.11",
     "mkdirp": "^0.5.1",
     "pify": "^2.3.0",
-    "postcss": "^5.0.10",
+    "postcss": "^5.1.0",
     "postcss-value-parser": "^3.3.0"
   },
   "devDependencies": {
-    "ava": "^0.14.0",
-    "babel-cli": "^6.7.5",
-    "babel-plugin-add-module-exports": "^0.1.2",
-    "babel-plugin-transform-object-assign": "^6.5.0",
-    "babel-preset-es2015": "^6.5.0",
-    "babel-register": "^6.5.2",
-    "coveralls": "^2.11.9",
+    "ava": "^0.15.2",
+    "babel-cli": "^6.11.4",
+    "babel-plugin-add-module-exports": "^0.2.1",
+    "babel-plugin-transform-object-assign": "^6.8.0",
+    "babel-preset-es2015": "^6.9.0",
+    "babel-register": "^6.9.0",
+    "coveralls": "^2.11.11",
     "del-cli": "^0.2.0",
     "escape-string-regexp": "^1.0.4",
-    "eslint": "^2.8.0",
+    "eslint": "^3.1.1",
     "eslint-config-postcss": "^2.0.0",
     "eslint-config-tinchoz49": "^2.1.0",
     "hasha": "^2.2.0",
-    "jimp": "^0.2.21",
-    "nyc": "^6.4.0",
-    "path-exists": "^2.1.0"
+    "jimp": "^0.2.24",
+    "nyc": "^7.0.0",
+    "path-exists": "^3.0.0"
   },
   "files": [
     "dist"
   ],
   "scripts": {
     "pretest": "del-cli src/__tests__/dest",
-    "test": "nyc --cache ava src/__tests__ --verbose",
+    "test": "nyc --cache ava --verbose",
     "posttest": "eslint src",
     "coverage": "nyc report --reporter=text-lcov | coveralls",
     "build": "del-cli dist && babel src --out-dir dist --ignore __tests__",
@@ -53,7 +53,10 @@
     ]
   },
   "ava": {
-    "require": "babel-register"
+    "require": "babel-register",
+    "files": [
+      "src/__tests__/*.js"
+    ]
   },
   "nyc": {
     "exclude": [

diff --git a/src/__tests__/common-tests.json b/src/__tests__/common-tests.json
@@ -1,7 +1,7 @@
 [{
-  "name": "default process test => template: 'assets/[hash].[ext]'",
+  "name": "default process test => template: 'assets/[hash].[ext][query]'",
   "opts": {
-    "template": "assets/[hash].[ext]"
+    "template": "assets/[hash].[ext][query]"
   },
   "assertions": {
     "index": [{
@@ -50,9 +50,9 @@
     "no-modified": "assets/0ed7c955a2951f04.jpg"
   }
 }, {
-  "name": "process test => template: '[path]/[hash].[ext]'",
+  "name": "process test => template: '[path]/[hash].[ext][query]'",
   "opts": {
-    "template": "[path]/[hash].[ext]"
+    "template": "[path]/[hash].[ext][query]"
   },
   "assertions": {
     "index": [{
@@ -101,9 +101,9 @@
     "no-modified": "images/0ed7c955a2951f04.jpg"
   }
 },{
-  "name": "process test => template: '[path]/[name].[ext]'",
+  "name": "process test => template: '[path]/[name].[ext][query]'",
   "opts": {
-    "template": "[path]/[name].[ext]"
+    "template": "[path]/[name].[ext][query]"
   },
   "assertions": {
     "index": [{
@@ -152,7 +152,7 @@
     "no-modified": "images/test.jpg"
   }
 },{
-  "name": "process test => template: '[hash].[ext]', relativePath from the to option",
+  "name": "process test => template: '[hash].[ext][query]', relativePath from the to option",
   "opts": {
     "relativePath": false
   },
@@ -203,7 +203,7 @@
     "no-modified": "0ed7c955a2951f04.jpg"
   }
 },{
-  "name": "process test => template: '[hash].[ext]', hashFunction: {custom}",
+  "name": "process test => template: '[hash].[ext][query]', hashFunction: {custom}",
   "opts": {
     "hashFunction": "custom"
   },
@@ -254,9 +254,9 @@
     "no-modified": "DtfJVaKVHwRz_PkVXOweAq13S0o.jpg"
   }
 }, {
-  "name": "process test => template: 'assets/[hash].[ext]', inputPath: {custom}",
+  "name": "process test => template: 'assets/[hash].[ext][query]', inputPath: {custom}",
   "opts": {
-    "template": "assets/[hash].[ext]",
+    "template": "assets/[hash].[ext][query]",
     "inputPath": true
   },
   "assertions": {
@@ -305,4 +305,29 @@
     ],
     "no-modified": "assets/0ed7c955a2951f04.jpg"
   }
+}, {
+  "name": "process test => template: 'assets/[hash].[ext]?custom=1&[qparams]#[qhash]'",
+  "opts": {
+    "template": "assets/[hash].[ext]?custom=1&[qparams]#[qhash]"
+  },
+  "assertions": {
+    "index": [{
+      "desc": "@index.css => process url image (simple)",
+      "match": "assets/b6c8f21e92b50900.jpg?custom=1&#"
+    }, {
+      "desc": "@index.css => process url image (with parameters)",
+      "match": "assets/0ed7c955a2951f04.jpg?custom=1&#iefix&v=4.4.0"
+    }, {
+      "desc": "@index.css => extra rules in image (simple)",
+      "match": "url('assets/b6c8f21e92b50900.jpg?custom=1&#') center center",
+      "regex-simple": true
+    }],
+    "component": [],
+    "external_libs": [],
+    "exists": [
+      "assets/b6c8f21e92b50900.jpg",
+      "assets/0ed7c955a2951f04.jpg"
+    ],
+    "no-modified": "assets/0ed7c955a2951f04.jpg"
+  }
 }]
diff --git a/src/__tests__/ignore.js b/src/__tests__/ignore.js
@@ -7,7 +7,7 @@ test('should keep working if the ignore option is invalid', t => {
     return processStyle('src/ignore.css', {
         src: 'src',
         dest: randomFolder('dest', t.title),
-        template: 'invalid-ignore-option/[path]/[name].[ext]',
+        template: 'invalid-ignore-option/[path]/[name].[ext][query]',
         ignore: 4
     })
     .then(result => {
@@ -22,7 +22,7 @@ test('should ignore files with string expression', t => {
     return processStyle('src/ignore.css', {
         src: 'src',
         dest: randomFolder('dest', t.title),
-        template: 'ignore-path-array/[path]/[name].[ext]',
+        template: 'ignore-path-array/[path]/[name].[ext][query]',
         ignore: 'images/other.+(jpg|png)'
     })
     .then(result => {
@@ -37,7 +37,7 @@ test('should ignore files with array of paths', t => {
     return processStyle('src/ignore.css', {
         src: 'src',
         dest: randomFolder('dest', t.title),
-        template: 'ignore-path-array/[path]/[name].[ext]',
+        template: 'ignore-path-array/[path]/[name].[ext][query]',
         ignore: ['images/other.jpg']
     })
     .then(result => {
@@ -52,7 +52,7 @@ test('should ignore files with custom function', t => {
     return processStyle('src/ignore.css', {
         src: 'src',
         dest: randomFolder('dest', t.title),
-        template: 'ignore-path-func/[path]/[name].[ext]',
+        template: 'ignore-path-func/[path]/[name].[ext][query]',
         ignore(fileMeta) {
             return fileMeta.filename === 'images/other.jpg';
         }

diff --git a/src/__tests__/template.js b/src/__tests__/template.js
@@ -29,7 +29,7 @@ test('should rename files via custom template', t => {
     return processStyle('src/index.css', {
         src: 'src',
         dest: tempFolder,
-        template: '[path]/[name]-[hash].[ext]'
+        template: '[path]/[name]-[hash].[ext][query]'
     })
     .then(result => {
         const css = result.css;
@@ -52,7 +52,8 @@ test('should rename files via template function', t => {
         src: 'src',
         dest: tempFolder,
         template(fileMeta) {
-            return `custom-path/custom-name-${fileMeta.name}.${fileMeta.ext}`;
+            return `custom-path/custom-name-${fileMeta.name}.` +
+            `${fileMeta.ext}${fileMeta.query}`;
         }
     })
     .then(result => {