postcss-base64 - npm Package Compare versions

Comparing version 0.2.1 to 0.3.0

index.js

@@ -1,29 +0,61 @@
-var postcss = require('postcss');
+var fs = require('fs'),
+    postcss = require('postcss'),
+    Promise = require('promise');
 
+function getUrl(value) {
+    var reg = /url\((\s*)(['"]?)(.+?)\2(\s*)\)/g,
+        match = reg.exec(value),
+        url = match[3];
+    return url;
+}
+
+function replaceFiles(string) {
+    file = getUrl(string);
+    ext = file.split('.')[1];
+
+    if(ext === 'svg') ext = ext + '+xml';
+
+    fileContents = fs.readFileSync(file);
+    output = 'data:image/' + ext + ';base64,' + fileContents.toString('base64');
+
+    return string.replace(file, output);
+}
+
+function replaceInline(string) {
+    output = new Buffer(string).toString('base64');
+    return output;
+}
+
 module.exports = postcss.plugin('postcss-base64', function (opts) {
     return function (css, result) {
-        opts = opts || {
-            debug: false,
-            pattern: /<svg.*<\/svg>/
-        };
+        opts = opts || {};
 
-        var output, search;
+        var exts,
+            ext,
+            search,
+            file,
+            fileContents,
+            output;
 
-        if(!opts.pattern) throw new Error('No search pattern given.');
+        if(opts.extensions) {
+            exts = '\\' + opts.extensions.join('|\\');
+            search = new RegExp('url\\(.*(' + exts + ').*\\)', 'i');
 
-        if(opts.pattern instanceof RegExp) {
-            search = opts.pattern;
-        } else {
-            throw new Error('Given search pattern is not a (valid) regular expression.');
+            css.replaceValues(search, function (string) {
+                return replaceFiles(string);
+            });
         }
 
-        css.replaceValues(search, function (string) {
-            output = 'data:image/svg+xml;base64,' + new Buffer(string).toString('base64');
-            if(opts.debug) {
-                console.info('In: ', string);
-                console.info('Out: ', output);
+        if(opts.pattern) {
+            if(!opts.pattern instanceof RegExp) {
+                throw new Error('Given search pattern is not a (valid) regular expression.');
             }
-            return output;
-        });
+
+            search = opts.pattern;
+
+            css.replaceValues(search, function (string) {
+                return replaceInline(string);
+            });
+        }
     };
 });

package.json

 {
   "name": "postcss-base64",
-  "version": "0.2.1",
-  "description": "Replace *inline* SVG images in url() statements with base64 encoded strings.",
+  "version": "0.3.0",
+  "description": "Replace values in url() statements with base64 encoded strings.",
   "author": "Jelmer de Maat",
   "keywords": [
     "base64",
+    "encode",
     "postcss-plugin",
-    "svg"
+    "postcss"
   ],
@@ -15,8 +16,10 @@ "scripts": {
   "dependencies": {
-    "postcss": "^5.0.11"
+    "fs": "0.0.2",
+    "postcss": "^5.0.12"
   },
   "repository": "[e-mail]:jelmerdemaat/postcss-base64.git",
   "devDependencies": {
-    "ava": "^0.4.2"
+    "ava": "^0.8.0",
+    "promise": "^7.0.4"
   }
 }

README.md

@@ -1,9 +0,31 @@
-postcss-base64, a [PostCSS](https://github.com/postcss/postcss/) plugin, replaces **inline** SVG images in url() statements with base64 encoded strings.
+postcss-base64, a [PostCSS](https://github.com/postcss/postcss/) plugin, replaces values inside `url()` functions with their base64 encoded strings.
 
 [GitHub](https://github.com/jelmerdemaat/postcss-base64) | [NPM](https://www.npmjs.com/package/postcss-base64) | [@jelmerdemaat](https://twitter.com/jelmerdemaat)
 
-*Early beta stage.*
+[![Build Status](https://travis-ci.org/jelmerdemaat/postcss-base64.svg?branch=master)](https://travis-ci.org/jelmerdemaat/postcss-base64)
+[![bitHound Code](https://www.bithound.io/github/jelmerdemaat/postcss-base64/badges/code.svg)](https://www.bithound.io/github/jelmerdemaat/postcss-base64)
+[![bitHound Dependencies](https://www.bithound.io/github/jelmerdemaat/postcss-base64/badges/dependencies.svg)](https://www.bithound.io/github/jelmerdemaat/postcss-base64/master/dependencies/npm)
 
-## Todo
-* Support file sources (in contrast to inline code)
-* Support other file types
+## Use
+
+Load this plugin as a PostCSS module and give _either or both_ of these options:
+
+| Option | Lol whut? |
+| ------ | --------- |
+| extensions | An array of extensions of files that have to be encoded, including the leading dot. Example: `['.svg']` |
+| pattern | A valid regex pattern to match against the string inside `url()` definitions to encode. Example: `/<svg.*<\/svg>/i` |
+
+Only strings inside `url(...)` functions are replaced.
+
+Partially replacing strings with the `pattern` option is possible.
+
+### NodeJS
+
+```js
+var opts = {
+    extensions: ['.png', '.svg'],
+    pattern: /<svg.*<\/svg>/i
+};
+
+output = postcss().use(base64(opts)).process(src).css;
+```

test/test.js

@@ -8,3 +8,3 @@ var fs = require('fs'),
 var opts = {
-    debug: true,
+    extensions: ['.png', '.svg'],
     pattern: /<svg.*<\/svg>/i
@@ -14,8 +14,9 @@ };
 var src = fs.readFileSync(path.join(__dirname, 'test.css')),
-    expected = fs.readFileSync(path.join(__dirname, 'expected.css')).toString(),
-    output = postcss().use(base64(opts)).process(src).css;
+    expectedFile = fs.readFileSync(path.join(__dirname, 'expected.css')).toString(),
+    output = postcss().use(base64(opts)).process(src).css,
+    outputFile = fs.writeFileSync('./output.css', output),
+    outputFileContents = fs.readFileSync(path.join(__dirname, 'output.css')).toString();
 
 test('Check output', t => {
-    t.is(expected, output, 'Expected code and output code are not the same.');
-    t.end();
+    t.is(expectedFile, outputFileContents, 'Expected code and output code are not the same.');
 });

No alert changes

Improved metrics

Total package byte prevSize

7266

increased by113.02%

Number of package files

11

increased by37.5%

Lines of code

96

increased by77.78%

Number of lines in readme file

32

increased by220%

Worsened metrics

Dependency count

2

increased by100%

Dev dependency count

2

increased by100%

Number of low supply chain risk alerts

3

increased by50%

Dependency changes

• + Addedfs@0.0.2

• + Addedfs@0.0.2(transitive)

• Updatedpostcss@^5.0.12