postcss-url - npm Package Compare versions

Comparing version 5.1.2 to 6.0.0

CHANGELOG.md

@@ -0,1 +1,13 @@
+# 6.0.0 - 2017-04-02
+
+- Changed: es5 -> es6
+- Added: multiple options for postcss-url as array
+- Added: multiple `basePath` as array
+- Added: _copy_ accept `basePath` param
+- Changed: hash function to xxhash
+- Changed: arguments in custom url callback
+- Changed: no processing callback in _inline_ without `maxSize`
+- Changed: `filter` matches by asset path, relative to project (process.cwd)
+- Changed: _copy_ can work without postcss `to` option, but required `assetPath`
+
 # 5.1.2 - 2016-05-01
@@ -2,0 +14,0 @@

package.json

 {
   "name": "postcss-url",
-  "version": "5.1.2",
+  "version": "6.0.0",
   "description": "PostCSS plugin to rebase or inline on url().",
@@ -18,30 +18,26 @@ "keywords": [
   "repository": "https://github.com/postcss/postcss-url.git",
+  "main": "src/index.js",
   "files": [
-    "index.js"
+    "src"
   ],
   "dependencies": {
-    "directory-encoder": "^0.7.2",
-    "js-base64": "^2.1.5",
     "mime": "^1.2.11",
     "minimatch": "^3.0.0",
     "mkdirp": "^0.5.0",
-    "path-is-absolute": "^1.0.0",
-    "postcss": "^5.0.0"
+    "postcss": "^5.0.0",
+    "xxhashjs": "^0.2.1"
   },
   "devDependencies": {
-    "eslint": "^1.10.3",
-    "eslint-config-i-am-meticulous": "^2.0.0",
+    "chai": "^3.5.0",
+    "eslint": "^3.16.1",
+    "mocha": "^3.2.0",
     "npmpub": "^3.0.1",
-    "postcss-import": "^7.0.0",
-    "tape": "^4.0.3"
+    "postcss-import": "^7.0.0"
   },
   "scripts": {
     "lint": "eslint --fix .",
-    "tests": "tape test",
+    "tests": "mocha",
     "test": "npm run lint && npm run tests",
     "release": "npmpub"
-  },
-  "eslintConfig": {
-    "extends": "eslint-config-i-am-meticulous/es5"
   }
 }

README.md

@@ -14,57 +14,160 @@ # postcss-url
 
-## Usage
+## Basic example - rebase
 
 ```js
 // dependencies
-var fs = require("fs")
-var postcss = require("postcss")
-var url = require("postcss-url")
+const fs = require("fs")
+const postcss = require("postcss")
+const url = require("postcss-url")
 
 // css to be processed
-var css = fs.readFileSync("input.css", "utf8")
+const css = fs.readFileSync("input.css", "utf8")
 
 // process css
-var output = postcss()
+const output = postcss()
   .use(url({
-    url: "rebase" // or "inline" or "copy"
+    url: "rebase"
   }))
   .process(css, {
-    // "rebase" mode need at least one of those options
-    // "inline" mode might need `from` option only
-    // "copy" mode need `from` and `to` option to work
     from: "src/stylesheet/index.css",
     to: "dist/index.css"
   })
-  .css
 ```
+before:
+```css
+.element {
+    background: url('images/sprite.png');
+}
+```
+after:
+```css
+.element {
+    /* rebasing path by new destination */
+    background: url('../src/stylesheet/images/sprite.png');
+}
+```
 
-Checkout [tests](test) for examples.
 
-### Options
+## Inline
+```js
+// postcss-url options
+const options = {
+    url: 'inline'
+};
 
-#### `url`
+postcss()
+  .use(url(options))
+  .process(css, {
+    from: "src/stylesheet/index.css",
+    to: "dist/index.css"
+  })
+```
+before:
+```css
+.element {
+    background: url('/images/sprite.png');
+    filter: url('/images/circle.svg');
+}
+```
+after:
+```css
+.element {
+    /* inlined png as base64 */
+    background: url('data:image/png;base64,R0lGODlhAQABAJH/AP///wAAAP///wAAACH/C0FET0JFOklSMS4');
+    /* inlined svg as encodeURIComponent */
+    filter: url('data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%2F%3E');
+}
+```
 
-_(default: `"rebase"`)_
+## Copy
+```js
+// postcss-url options
+const options = {
+    url: 'copy',
+    // base path to search assets from
+    basePath: path.resolve('node_modules/bootstrap'),
+    // dir to copy assets
+    assetsPath: 'img',
+    // using hash names for assets (generates from asset content)
+    useHash: true
+};
 
-##### `url: "rebase"`
+postcss()
+  .use(url(options))
+  .process(css, {
+    from: "src/stylesheet/index.css",
+    to: "dist/index.css"
+  })
+```
+before:
+```css
+.element {
+    background: url('/images/sprite.png');
+}
+```
+after:
+```css
+.element {
+    /* copy 'sprite.png' from 'node_modules/bootstrap/images/' to 'dist/img/' */
+    /* and rename it by hash function */
+    background: url('img/a2ds3kfu.png');
+}
+```
 
-Allow you to fix `url()` according to postcss `to` and/or `from` options (rebase to `to` first if available, otherwise `from` or `process.cwd()`).
+### Muiltiple options
 
-##### `url: "inline"`
+```js
+const options = [
+    { filter: '**/assets/copy/*.png', url: 'copy', assetsPath: 'img', useHash: true },
+    { filter: '**/assets/inline/*.svg', url: 'inline' },
+    { filter: '**/assets/**/*.gif', url: 'rebase' },
+    // using custom function to build url
+    { filter: 'cdn/**/*', url: (asset) => `https://cdn.url/${asset.url}` }
+];
 
-Allow you to inline assets using base64 encoding. Can use postcss `from` option to find ressources.
+postcss().use(url(options))
+```
 
-##### `url: "copy"`
+Checkout [tests](test) for examples.
 
+### Options combinations
+
+* `rebase` - _default_
+* `inline`
+  * `basePath` - path or array of paths to search assets (relative to `from`, or absolute)
+  * `encodeType` - `base64`, `encodeURI`, `encodeURIComponent`
+  * `maxSize` - file size in kbytes
+  * `fallback` - `copy` or custom function for files > `maxSize`
+* `copy`
+    * `basePath` - path or array of paths to search assets (relative to `from`, or absolute)
+    * `assetsPath` - directory to copy assets (relative to `to` or absolute)
+    * `useHash` - use filehash(xxhash) for naming
+    * `hashOptions` - options for hash function
+* `custom {Function}`
+
+### Options list
+
+#### `url`
+##### `rebase` - _(default)_
+Allow you to fix `url()` according to postcss `to` and/or `from` options (rebase to `to` first if available, otherwise `from` or `process.cwd()`).
+##### `inline` 
+Allow you to inline assets using base64 encoding. Can use postcss `from` option to find ressources.
+##### `copy`
 Allow you to copy and rebase assets according to postcss `to`, `assetsPath` and `from` options (`assetsPath` is relative to the option `to`).
-
 ##### `url: {Function}`
-
 Custom transform function. Takes following arguments:
-* `URL` – original url
+* `asset`
+  * `url` - original url
+  * `pathname` - url pathname (url without search or hash)
+  * `absolutePath` - absolute path to asset
+  * `relativePath` - current relative path to asset
+  * `search` - _search_ from `url`, ex. `?query=1` from `./image.png?query=1`
+  * `hash` - _hash_ from `url`, ex. `#spriteLink` from `../asset.svg#spriteLink`
+* `dir`
+  * `from` - postcss option from
+  * `to` - postcss option to
+  * `file` - decl file path
+* `options` - postcss-url matched options
 * `decl` - related postcss declaration object
-* `from` - from postcss option
-* `dirname` – dirname of processing file
-* `to` – from postcss option
-* `options` – plugin options
+* `warn` - wrapped function `result.warn` for current `decl`
 * `result` – postcss result object
@@ -91,3 +194,3 @@
 
-Specify the base path where to search images from
+Specify the base path or list of base paths where to search images from
 
@@ -107,2 +210,15 @@ #### `assetsPath`
 
+#### `hashOptions`
+
+##### `method`
+
+_(default: `xxhash32`)_
+
+Hash method `xxhash32|xxhash64` or custom function (accept file buffer)
+##### `shrink`
+
+_(default: `8`)_
+
+Result hash shrink count
+
 ---
@@ -109,0 +225,0 @@

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Dynamic require

Supply chain risk

Dynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.

Found 1 instance in 1 package

Filesystem access

Supply chain risk

Accesses the file system, and could potentially read sensitive data.

Found 1 instance in 1 package

Fixed alerts

Filesystem access

Supply chain risk

Accesses the file system, and could potentially read sensitive data.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

28893

increased by55.82%

Dependency count

5

decreased by-28.57%

Number of package files

14

increased by180%

Lines of code

503

increased by61.74%

Number of lines in readme file

237

increased by95.87%

Worsened metrics

Number of low supply chain risk alerts

5

increased by150%

Number of medium supply chain risk alerts

2

increased byInfinity%

Dependency changes

• + Addedxxhashjs@^0.2.1

• + Addedcuint@0.2.2(transitive)

• + Addedxxhashjs@0.2.2(transitive)

• - Removeddirectory-encoder@^0.7.2

• - Removedjs-base64@^2.1.5

• - Removedpath-is-absolute@^1.0.0

• - Removedamdefine@1.0.1(transitive)

• - Removedasync@0.2.10(transitive)

• - Removeddirectory-encoder@0.7.2(transitive)

• - Removedfs-extra@0.23.1(transitive)

• - Removedfs.realpath@1.0.0(transitive)

• - Removedglob@7.2.3(transitive)

• - Removedgraceful-fs@4.2.11(transitive)

• - Removedhandlebars@1.3.0(transitive)

• - Removedimg-stats@0.5.2(transitive)

• - Removedinflight@1.0.6(transitive)

• - Removedinherits@2.0.4(transitive)

• - Removedjsonfile@2.4.0(transitive)

• - Removedonce@1.4.0(transitive)

• - Removedoptimist@0.3.7(transitive)

• - Removedpath-is-absolute@1.0.1(transitive)

• - Removedrimraf@2.7.1(transitive)

• - Removedsource-map@0.1.43(transitive)

• - Removeduglify-js@2.3.6(transitive)

• - Removedwordwrap@0.0.3(transitive)

• - Removedwrappy@1.0.2(transitive)

• - Removedxmldom@0.1.31(transitive)