postcss-svg - npm Package Compare versions

Comparing version 1.0.6 to 2.0.0

CHANGELOG.md

@@ -0,1 +1,8 @@
+# Changes to PostCSS SVG
+
+### 2.0.0 - 2017-05-15
+
+Refactored plugin:
+* Functionality from PostCSS SVG Fragments
+
 ### 1.0.6 - 2016-05-07
@@ -2,0 +9,0 @@

package.json

 {
   "name": "postcss-svg",
-  "version": "1.0.6",
-  "description": "Postcss plugin for insert inline SVG to CSS",
-  "main": "dist/index.js",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/Pavliko/postcss-svg.git"
+  "version": "2.0.0",
+  "description": "Inline SVGs in CSS. Supports SVG Fragments, SVG Parameters.",
+  "author": "Jonathan Neal <[e-mail]>",
+  "contributors": [
+    "Pavel Gorlov <[e-mail]>",
+    "Jonathan Neal <[e-mail]>"
+  ],
+  "license": "CC0-1.0",
+  "repository": "jonathantneal/postcss-svg",
+  "homepage": "https://github.com/jonathantneal/postcss-svg#readme",
+  "bugs": "https://github.com/jonathantneal/postcss-svg/issues",
+  "main": "index.js",
+  "files": [
+    "index.js",
+    "lib"
+  ],
+  "scripts": {
+    "clean": "git clean -X -d -f",
+    "prepublish": "npm test",
+    "test": "echo 'Running tests...'; npm run test:js && npm run test:tape",
+    "test:js": "eslint *.js --cache --ignore-pattern .gitignore",
+    "test:tape": "postcss-tape"
   },
+  "engines": {
+    "node": ">=4.0.0"
+  },
+  "dependencies": {
+    "postcss": "^6.0.1",
+    "postcss-value-parser": "^3.3.0",
+    "xmldoc": "^1.1.0"
+  },
+  "devDependencies": {
+    "eslint": "^3.19.0",
+    "eslint-config-dev": "2.0.0",
+    "postcss-tape": "2.0.1",
+    "pre-commit": "^1.2.2",
+    "test-sprite-module": "file:test/sprite-module"
+  },
+  "eslintConfig": {
+    "extends": "dev"
+  },
   "keywords": [
     "postcss",
-    "plugin",
-    "svg",
-    "inline",
-    "colorize",
-    "color",
     "css",
+    "postcss-plugin",
+    "svgs",
+    "scalable",
+    "vector",
+    "graphic",
     "image",
-    "background",
-    "postcss-plugin"
-  ],
-  "author": "Pavel Gorlov",
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/Pavliko/postcss-svg/issues"
-  },
-  "homepage": "https://github.com/Pavliko/postcss-svg#readme",
-  "dependencies": {
-    "color": "0.10.1",
-    "dot": "1.0.3",
-    "evil-icons": "1.7.8",
-    "lodash": "3.10.1",
-    "postcss": "5.0.10",
-    "svgo": "0.5.6",
-    "xmldom": "0.1.19"
-  },
-  "devDependencies": {
-    "autoprefixer-core": "6.0.1",
-    "gulp": "3.9.0",
-    "gulp-coffee": "2.3.1",
-    "gulp-livereload": "3.8.1",
-    "gulp-load-plugins": "1.1.0",
-    "gulp-postcss": "6.0.1",
-    "gulp-rename": "1.2.2",
-    "open": "0.0.5"
-  }
+    "img",
+    "picture",
+    "pic",
+    "fragment",
+    "identifier",
+    "id",
+    "hash",
+    "url",
+    "inline",
+    "utf8",
+    "base64"
+  ]
 }

README.md

@@ -1,155 +0,158 @@
-# [postcss-svg](http://pavliko.github.io/postcss-svg/)
-[PostCSS](https://github.com/postcss/postcss) plug-in which to insert inline SVG to CSS and allows you to manage it colors.
-Examples [here](http://pavliko.github.io/postcss-svg/#examples)
+# PostCSS SVG [<img src="https://postcss.github.io/postcss/logo.svg" alt="PostCSS Logo" width="90" height="90" align="right">][postcss]
 
-**Features:**
+[![NPM Version][npm-img]][npm-url]
+[![Linux Build Status][cli-img]][cli-url]
+[![Windows Build Status][win-img]][win-url]
+[![Gitter Chat][git-img]][git-url]
 
-* Easy insert inline SVG to CSS
-* Manage colors of your SVG image without editinig it
-* Symbols sprites support
-* Compression with svgo
-* Support Evil Icons from box
+[PostCSS SVG] lets you inline SVGs in CSS.
 
-## Installation
+```css
+.icon--square {
+  content: url("shared-sprites#square" param(--color blue));
+}
 
-```bash
-npm install postcss-svg --save-dev
-```
+/* after postcss-svg ↓ */
 
-## Usage
-PostCSS:
-
-```javascript
-//...
-var postcss = require('postcss');
-var postcssSVG = require('postcss-svg');
-var processors = [
-  //... ,
-  postcssSVG({
-    paths: ['pathToSVGDir1', 'pathToSVGDir2'],
-    defaults: "[fill]: #000000",
-    //more options...
-  });
-];
-
-postcss(processors)
-  .process(css, { from: './src/app.css', to: './dist/app.css' })
-  .then(function (result) {
-    fs.writeFileSync('./dist/app.css', result.css);
-  });
+.icon--square {
+  content: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Crect style='fill:blue' width='100%25' height='100%25'/%3E%3C/svg%3E");
+}
 ```
 
-Gulp:
+[SVG Fragments] let you reference elements within an SVG. [SVG Parameters] let
+you push compiled CSS variables into your SVGs.
 
-```javascript
-var gulp = require('gulp');
-var postcss = require('gulp-postcss');
-
-gulp.task('styles', function() {
-  var postcssProcessors;
-  postcssSVG = require.reload('postcss-svg');
-  postcssProcessors = [
-    postcssSVG({ defaults: '[fill]: green' })
-  ];
-
-  gulp.src('app/style.css')
-    .pipe(postcss(postcssProcessors))
-    .pipe(gulp.dest('.tmp'));
-});
+```svg
+<svg xmlns="http://www.w3.org/2000/svg">
+  <symbol id="square">
+    <rect style="fill:var(--color,black)" width="100%" height="100%"/>
+  </symbol>
+</svg>
 ```
 
-Using this `input.css`:
+[Modules] let you reference the `media` or `main` fields from a `package.json`:
 
-```css
-body {
-  background-image: svg("ei#sc-github", "[fill]: black");
+```json
+{
+  "name": "shared-sprites",
+  "media": "sprites.svg"
 }
 ```
 
-you will get:
+## Usage
 
-```css
-body {
-  background-image: url("data:image/svg+xml,%3Csvg%20id%3D%22ei-sc-github-icon%22%20viewBox%3D%220%200%2050%2050%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20style%3D%22fill%3Ablack%3B%22%20height%3D%22100%25%22%20width%3D%22100%25%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M25%2010c-8.3%200-15%206.7-15%2015%200%206.6%204.3%2012.2%2010.3%2014.2.8.1%201-.3%201-.7v-2.6c-4.2.9-5.1-2-5.1-2-.7-1.7-1.7-2.2-1.7-2.2-1.4-.9.1-.9.1-.9%201.5.1%202.3%201.5%202.3%201.5%201.3%202.3%203.5%201.6%204.4%201.2.1-1%20.5-1.6%201-2-3.3-.4-6.8-1.7-6.8-7.4%200-1.6.6-3%201.5-4-.2-.4-.7-1.9.1-4%200%200%201.3-.4%204.1%201.5%201.2-.3%202.5-.5%203.8-.5%201.3%200%202.6.2%203.8.5%202.9-1.9%204.1-1.5%204.1-1.5.8%202.1.3%203.6.1%204%201%201%201.5%202.4%201.5%204%200%205.8-3.5%207-6.8%207.4.5.5%201%201.4%201%202.8v4.1c0%20.4.3.9%201%20.7%206-2%2010.2-7.6%2010.2-14.2C40%2016.7%2033.3%2010%2025%2010z%22%2F%3E%3C%2Fsvg%3E");
-}
+Add [PostCSS SVG] to your build tool:
+
+```bash
+npm install postcss-svg --save-dev
 ```
 
-## Options
-#### paths
-Type: `Array` Default: `['svg']` Example: `['pathToSVGDir1', 'pathToSVGDir2']` Required: `false`
+#### Node
 
-You can define relative path to folders with SVG files.
+Use [PostCSS SVG] to process your CSS:
 
-#### func
-Type: `String` Default: 'svg' Example: 'url' Required: `false`
+```js
+require('postcss-svg').process(YOUR_CSS);
+```
 
-You can set func option to 'url' to support fallback to url("*.svg") links.
+#### PostCSS
 
-#### svgo
-Type: `Boolean`, `Object` Default: `false` Example: `true` Required: `false`
+Add [PostCSS] to your build tool:
 
-You can set custom config for svgo module. Recommend to set true only for production build.
+```bash
+npm install postcss --save-dev
+```
 
-#### defaults
-Type: `String` Default: `''` Example: `'[fill]: #00F800; .glass[fill]: rgba(0, 0, 255, 0.1);'` Required: `false`
+Use [PostCSS SVG] as a plugin:
 
-You can set default rules for all included SVG
+```js
+postcss([
+  require('postcss-svg')()
+]).process(YOUR_CSS);
+```
 
-#### ei
-Type: `Boolean`, `Object` Default: `true` Example: `{ "dfaults": "[fill]: red" }` Required: `false`
+#### Gulp
 
-You can set false to disable initializing Evil Icons. Or you can set different defaults only for Evil Icons.
+Add [Gulp PostCSS] to your build tool:
 
-#### debug
-Type: `Boolean` Default: `false` Required: `false`
+```bash
+npm install gulp-postcss --save-dev
+```
 
-You can set false to disable initializing Evil Icons. Or you can set different defaults only for Evil Icons.
+Use [PostCSS SVG] in your Gulpfile:
 
-#### silent
-Type: `Boolean` Default: `true` Required: `false`
-Do not throw errors
+```js
+var postcss = require('gulp-postcss');
 
-## Colors API
-You can replace only **existing** values of `fill` and `stroke` attributes.
+gulp.task('css', function () {
+  return gulp.src('./src/*.css').pipe(
+    postcss([
+      require('postcss-svg')()
+    ])
+  ).pipe(
+    gulp.dest('.')
+  );
+});
+```
 
-To replace colors you can use simple selectors.
+#### Grunt
 
-You can use several selectors for one SVG.
+Add [Grunt PostCSS] to your build tool:
 
-In the bottom you can see this selectors in ascending order.
+```bash
+npm install grunt-postcss --save-dev
+```
 
-For better understanding of selectors check [examples](http://pavliko.github.io/postcss-svg/#examples).
+Use [PostCSS SVG] in your Gruntfile:
 
-### Selectors:
+```js
+grunt.loadNpmTasks('grunt-postcss');
 
-#### [color]
-All `fill` and `stroke` attributes
-#### [fill]|[stroke]
-All `fill` or `stroke` attributes
-#### tagName[fill]|tagName[stroke]
-`fill` or `stroke` tag attributes with name tagName
-#### .className[fill]|.className[stroke]
-`fill` or `stroke` tag attributes with class className
-#### colorGroupN
-All colors in SVG are grouped in color groups. N - group index, starts from 0 (from the top of SVG document)
-#### \#identifier[fill]|\#identifier[stroke]
-`fill` or `stroke` tag attributes with id identifier
-#### colorN
-All colors in SVG have index. N - index, starts from 0 (from the top of SVG document)
+grunt.initConfig({
+  postcss: {
+    options: {
+      use: [
+        require('postcss-svg')()
+      ]
+    },
+    dist: {
+      src: '*.css'
+    }
+  }
+});
+```
 
-## [Examples](http://pavliko.github.io/postcss-svg/#examples)
+## Advanced Usage
 
-## Contributing
-Pull requests are welcome.
-To run development envirement
+Additional directories can be specified for locating SVGs.
 
+```js
+require('postcss-svg')({
+  dirs: ['some-folder', 'another-folder'] /* Just a string will work, too */
+})
 ```
-git clone [e-mail]:Pavliko/postcss-svg.git
-cd postcss-svg
-npm install
-gulp watch
+
+UTF-8 encoding can be swapped for base64 encoding.
+
+```js
+require('postcss-svg')({
+  utf8: false /* Whether to use utf-8 or base64 encoding. Default is true. */
+})
 ```
 
-## [Changelog](CHANGELOG.md)
+[npm-url]: https://www.npmjs.com/package/postcss-svg
+[npm-img]: https://img.shields.io/npm/v/postcss-svg.svg
+[cli-url]: https://travis-ci.org/jonathantneal/postcss-svg
+[cli-img]: https://img.shields.io/travis/jonathantneal/postcss-svg.svg
+[win-url]: https://ci.appveyor.com/project/jonathantneal/postcss-svg
+[win-img]: https://img.shields.io/appveyor/ci/jonathantneal/postcss-svg.svg
+[git-url]: https://gitter.im/postcss/postcss
+[git-img]: https://img.shields.io/badge/chat-gitter-blue.svg
 
-## [License](LCENSE)
+[PostCSS SVG]: https://github.com/jonathantneal/postcss-svg
+[PostCSS]: https://github.com/postcss/postcss
+[SVG Fragments]: https://css-tricks.com/svg-fragment-identifiers-work/
+[SVG Parameters]: https://tabatkins.github.io/specs/svg-params/
+[Modules]: https://nodejs.org/api/modules.html#modules_modules
+[Gulp PostCSS]: https://github.com/postcss/gulp-postcss
+[Grunt PostCSS]: https://github.com/nDmitry/grunt-postcss

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

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

No bug tracker

Maintenance

Package does not have a linked bug tracker in package.json.

Found 1 instance in 1 package

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Dependency count

3

decreased by-57.14%

Dev dependency count

5

decreased by-37.5%

Number of lines in readme file

159

increased by1.92%

Worsened metrics

Total package byte prevSize

35691

decreased by-36.77%

Number of package files

14

decreased by-17.65%

Lines of code

476

decreased by-34.53%

Number of low maintenance alerts

2

increased by100%

Number of medium supply chain risk alerts

2

increased byInfinity%

Dependency changes

• + Addedpostcss-value-parser@^3.3.0

• + Addedxmldoc@^1.1.0

• + Addedansi-styles@3.2.1(transitive)

• + Addedchalk@2.4.2(transitive)

• + Addedcolor-convert@1.9.3(transitive)

• + Addedcolor-name@1.1.3(transitive)

• + Addedescape-string-regexp@1.0.5(transitive)

• + Addedhas-flag@3.0.0(transitive)

• + Addedpostcss@6.0.23(transitive)

• + Addedpostcss-value-parser@3.3.1(transitive)

• + Addedsax@1.4.1(transitive)

• + Addedsource-map@0.6.1(transitive)

• + Addedsupports-color@5.5.0(transitive)

• + Addedxmldoc@1.3.0(transitive)

• - Removedcolor@0.10.1

• - Removeddot@1.0.3

• - Removedevil-icons@1.7.8

• - Removedlodash@3.10.1

• - Removedsvgo@0.5.6

• - Removedxmldom@0.1.19

• - Removedargparse@1.0.10(transitive)

• - Removedcoa@1.0.4(transitive)

• - Removedcolor@0.10.1(transitive)

• - Removedcolor-convert@0.5.3(transitive)

• - Removedcolor-name@1.1.4(transitive)

• - Removedcolor-string@0.3.0(transitive)

• - Removedcolors@1.1.2(transitive)

• - Removeddot@1.0.3(transitive)

• - Removedesprima@2.2.0(transitive)

• - Removedevil-icons@1.7.8(transitive)

• - Removedhas-flag@1.0.0(transitive)

• - Removedjs-base64@2.6.4(transitive)

• - Removedjs-yaml@3.3.1(transitive)

• - Removedlodash@3.10.1(transitive)

• - Removedminimist@1.2.8(transitive)

• - Removedmkdirp@0.5.6(transitive)

• - Removedpostcss@5.0.10(transitive)

• - Removedq@1.5.1(transitive)

• - Removedsax@1.1.6(transitive)

• - Removedsource-map@0.5.7(transitive)

• - Removedsprintf-js@1.0.3(transitive)

• - Removedsupports-color@3.2.3(transitive)

• - Removedsvgo@0.5.6(transitive)

• - Removedwhet.extend@0.9.9(transitive)

• - Removedxmldom@0.1.19(transitive)

• Updatedpostcss@^6.0.1