dev(module): Refactoring colors API. Release 1.0.0

.gitignore

@@ -25,6 +25,3 @@ build/Release
 # Dependency directory
 # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
 node_modules
-
-# Example output
-example/output.css

CHANGELOG.md

@@ -0,0 +1,3 @@
+# 1.0.0 - 2015-07-10
+
+Initial release from [postcss-svg](https://github.com/Pavliko/postcss-svg)

README.md

@@ -1,19 +1,36 @@
-# postcss-svg
-[PostCSS](https://github.com/postcss/postcss) plugin that insert inline SVG.
+#[postcss-svg](http://pavliko.github.io/postcss-svg/)
+[PostCSS](https://github.com/postcss/postcss) plug-in which to insert a built-in SVG and allows you to manage it colors.
+Examples [here](http://pavliko.github.io/postcss-svg/#examples)
+
+**Features:**
+
+* 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
+
+##Installation
 
-## Install
 ```bash
 npm install postcss-svg --save-dev
 ```
-## Usage
+
+##Usage
+PostCSS:
+
 ```javascript
 //...
 var postcss = require('postcss');
 var postcssSVG = require('postcss-svg');
 var processors = [
   //... ,
-  postcssSVG({paths: ['pathToSVGDir1', 'pathToSVGDir2']})
-]
+  postcssSVG({
+    paths: ['pathToSVGDir1', 'pathToSVGDir2'],
+    defaults: "[fill]: #000000",
+    //more options...
+  });
+];
 
 postcss(processors)
   .process(css, { from: './src/app.css', to: './dist/app.css' })
@@ -22,119 +39,117 @@ postcss(processors)
   });
 ```
 
-## Options
-
-### paths
-Type: `Array` Default: `['svg']` Example: `['pathToSVGDir1', 'pathToSVGDir2']` Required: `false`
-
-Can define relative path to folders with SVG files.
-
-## Example
-To look result, click [index.html](http://pavliko.github.io/postcss-svg/)
-
-
-### Example [source](https://github.com/Pavliko/postcss-svg/tree/master/example)
-*example/script.js:*
+Gulp:
 
 ```javascript
-var postcss = require('postcss');
-var postcssSVG = require('postcss-svg');
-var open = require("open");
-var fs = require('fs');
-var css = fs.readFileSync('./example/style.css').toString();
-
-css = postcss([ postcssSVG({paths: ['./example']}) ]).process(css).css
-fs.writeFileSync('./example/output.css', css)
-open("./example/index.html");
+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'));
+});
 ```
 
-*example/style.css:*
+Using this `input.css`:
 
 ```css
 body {
-  height: 100%;
-  width: 100%;
-  background-image: svg("loupe");
-  background-size: 20px;
+  background-image: svg("ei#sc-github", "[fill]: black");
 }
+```
 
-body:before {
-  content: '';
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  width: 50vh;
-  height: 50vh;
-  background: svg("loupe", "frameColor: #7D7779; handleColor: #9E4200;") no-repeat;
-  margin-left: -25vh;
-  margin-top: -25vh;
-}
+you will get:
 
+```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");
+}
 ```
 
-*example/loupe.svg:*
+##Options
+####paths
+Type: `Array` Default: `['svg']` Example: `['pathToSVGDir1', 'pathToSVGDir2']` Required: `false`
+
+You can define relative path to folders with SVG files.
 
-You can use features from [doT](http://olado.github.io/doT/) template engine.
+####func
+Type: `String` Default: 'svg' Example: 'url' Required: `false`
 
-```xml
-<svg viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg">
-  <path d="M12 12L8 8" stroke-linecap="square" stroke-width="2" stroke="{{=it.handleColor || '#000000'}}"/>
-  <circle cx="5" cy="5" fill="rgba(15, 100, 250, .15)" r="4" stroke-width="2" stroke="{{=it.frameColor || '#000000'}}"/>
-</svg>
+You can set func option to 'url' to support fallback to url("*.svg") links.
 
+####svgo
+Type: `Boolean`, `Object` Default: `false` Example: `true` Required: `false`
 
-```
+You can set custom config for svgo module. Recommend to set true only for production build.
 
-***example/output.css:***
+####defaults
+Type: `String` Default: `''` Example: `'[fill]: #00F800; .glass[fill]: rgba(0, 0, 255, 0.1);'` Required: `false`
 
-```css
-body {
-  height: 100%;
-  width: 100%;
-  background-image: url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2014%2014%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cpath%20d%3D%22M12%2012L8%208%22%20stroke-linecap%3D%22square%22%20stroke-width%3D%222%22%20stroke%3D%22%23000000%22%2F%3E%20%3Ccircle%20cx%3D%225%22%20cy%3D%225%22%20fill%3D%22rgba(15%2C%20100%2C%20250%2C%20.15)%22%20r%3D%224%22%20stroke-width%3D%222%22%20stroke%3D%22%23000000%22%2F%3E%3C%2Fsvg%3E");
-  background-size: 20px;
-}
+You can set default rules for all included SVG
 
-body:before {
-  content: '';
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  width: 50vh;
-  height: 50vh;
-  background: url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2014%2014%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cpath%20d%3D%22M12%2012L8%208%22%20stroke-linecap%3D%22square%22%20stroke-width%3D%222%22%20stroke%3D%22%239E4200%22%2F%3E%20%3Ccircle%20cx%3D%225%22%20cy%3D%225%22%20fill%3D%22rgba(15%2C%20100%2C%20250%2C%20.15)%22%20r%3D%224%22%20stroke-width%3D%222%22%20stroke%3D%22%237D7779%22%2F%3E%3C%2Fsvg%3E") no-repeat;
-  margin-left: -25vh;
-  margin-top: -25vh;
-}
+####ei
+Type: `Boolean`, `Object` Default: `true` Example: `{ "dfaults": "[fill]: red" }` Required: `false`
 
-```
+You can set false to disable initializing Evil Icons. Or you can set different defaults only for Evil Icons.
 
-*example/index.html*
-
-```html
-<!doctype html>
-<html>
-  <head>
-    <title>postcss-svg test</title>
-    <link href="output.css" rel="stylesheet">
-  </head>
-  <body></body>
-</html>
-```
+####debug
+Type: `Boolean` Default: `false` Required: `false`
 
-### To run on your computer:
+You can set false to disable initializing Evil Icons. Or you can set different defaults only for Evil Icons.
 
-```bash
-npm install postcss-svg && cd $(npm root)/postcss-svg/ && npm install && node example/script.js
-```
+####silent
+Type: `Boolean` Default: `true` Required: `false`
+Do not throw errors
+
+##Colors API
+You can replace only **existing** values of `fill` and `stroke` attributes.
 
-## Roadmap
-- svgo support
-- gulp plugin
-- javascript color managment for SVG
+To replace colors you can use simple selectors.
+
+You can use several selectors for one SVG.
+
+In the bottom you can see this selectors in ascending order.
+
+For better understanding of selectors check [examples](http://pavliko.github.io/postcss-svg/#examples).
+
+###Selectors:
+
+####[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)
+
+##[Examples](http://pavliko.github.io/postcss-svg/#examples)
 
 ## Contributing
 Pull requests are welcome.
+To run development envirement
+
+```
+git clone [email protected]:Pavliko/postcss-svg.git
+cd postcss-svg
+npm install
+gulp watch
+```
+
+## [Changelog](CHANGELOG.md)
 
-## License
-MIT
+## [License](LCENSE)

dist/index.js

@@ -0,0 +1,55 @@
+(function() {
+  var SVGCache, _, postcss,
+    slice = [].slice;
+
+  postcss = require('postcss');
+
+  SVGCache = require('./lib/svg_cache');
+
+  _ = require('lodash');
+
+  module.exports = postcss.plugin("postcss-svg", function(options) {
+    var SVGRegExp, funcName, silent;
+    if (options == null) {
+      options = {};
+    }
+    funcName = options.func || 'svg';
+    SVGRegExp = new RegExp(funcName + "\\(\"([^\"]+)\"(,\\s*\"([^\"]+)\")?\\)");
+    silent = _.isBoolean(options.silent) ? options.silent : true;
+    if (options.debug) {
+      silent = false;
+    }
+    return function(style) {
+      SVGCache.init(options);
+      return style.eachDecl(/^background|^filter|^content|image$/, function(decl) {
+        var args, error, matches, name, params, replace, svg;
+        if (!decl.value) {
+          return;
+        }
+        if (matches = SVGRegExp.exec(decl.value.replace(/'/g, '"'))) {
+          replace = matches[0], args = 2 <= matches.length ? slice.call(matches, 1) : [];
+          name = args[0], params = 2 <= args.length ? slice.call(args, 1) : [];
+          if (options.debug) {
+            console.time("Render svg " + name);
+          }
+          try {
+            svg = SVGCache.get(name);
+          } catch (_error) {
+            error = _error;
+            if (!silent) {
+              throw decl.error(error);
+            }
+          }
+          if (!svg) {
+            return;
+          }
+          decl.value = decl.value.replace(replace, svg.dataUrl(params[1]));
+          if (options.debug) {
+            console.timeEnd("Render svg " + name);
+          }
+        }
+      });
+    };
+  });
+
+}).call(this);