browserify-css - npm Package Compare versions

Comparing version 0.4.2 to 0.5.0

css-transform.js

@@ -6,3 +6,2 @@ 'use strict';
 var _ = require('lodash');
-var _str = require('underscore.string');
 var fs = require('fs');
@@ -34,2 +33,8 @@ var path = require('path');
     }
+    var processRelativeUrl = function(relativeUrl) {
+        return relativeUrl;
+    };
+    if (_.isFunction(options.processRelativeUrl)) {
+        processRelativeUrl = options.processRelativeUrl;
+    }
 
@@ -59,3 +64,4 @@ var parseCSSFile = function(filename) {
 
-                    newUrl = path.relative(from, to);
+                    newUrl = processRelativeUrl(path.relative(from, to));
+
                     source = source.substr(0, urlRegEx.lastIndex - url.length - quoteLen - 1) + newUrl + source.substr(urlRegEx.lastIndex - quoteLen - 1);
@@ -99,3 +105,3 @@ }
 
-                url = _str.trim(url);
+                url = _.trim(url);
 
@@ -102,0 +108,0 @@ if (isExternalURL(url)) {

gulpfile.js

 'use strict';
 
+var _ = require('lodash');
 var gulp = require('gulp');
-var jshint = require('gulp-jshint');
+var requireDir = require('require-dir');
 
-var tasks = {
-    lintjs: function() {
-        var jshintConfig = require('./config/jshint');
-        return gulp.src([
-            '*.js',
-            '*.json',
-            'examples/**/*.js',
-            '!examples/**/bundle.js'
-        ])
-        .pipe(jshint(jshintConfig))
-        .pipe(jshint.reporter());
-    }
-};
+// Require all tasks in gulp/tasks, including subfolders
+var tasks = requireDir('./gulp/tasks', {recursive: true});
 
-gulp.task('lint:js', tasks.lintjs);
+_.each(tasks, function(task, relativePath) {
+    console.assert(_.isFunction(task), 'gulp/tasks/%s: module\'s export is not a function', relativePath);
+    task({
+        config: require('./gulp/config'),
+        errorHandler: require('./gulp/error-handler')
+    });
+});
 
-gulp.task('default', [
-    'lint:js'
-]);
+gulp.task('default', ['build']);

index.js

@@ -51,3 +51,3 @@ 'use strict';
 
-            cssTransform({ rootDir: options['rootDir'] }, filename, function(data) {
+            cssTransform(options, filename, function(data) {
                 var moduleBody = '';
@@ -54,0 +54,0 @@ var rootDir = path.resolve(process.cwd(), options.rootDir);

package.json

 {
   "name": "browserify-css",
-  "version": "0.4.2",
+  "version": "0.5.0",
   "description": "A Browserify transform for bundling, rebasing, inlining, and minifying CSS files",
@@ -33,3 +33,3 @@ "main": "./index.js",
     "css": "1.6.x",
-    "lodash": "2.4.x",
+    "lodash": "3.6.x",
     "through2": "0.6.x",
@@ -40,6 +40,14 @@ "underscore.string": "2.4.x"
     "browserify": "^8.1.3",
+    "del": "^1.1.1",
+    "exorcist": "^0.1.6",
+    "fs-extra": "^0.18.0",
     "gulp": "^3.8.11",
     "gulp-jshint": "^1.9.2",
+    "gulp-util": "^3.0.4",
     "jsdom": "^3.1.2",
-    "tap": "^0.7.1"
+    "require-dir": "^0.3.0",
+    "run-sequence": "^1.0.2",
+    "tap": "^0.7.1",
+    "vinyl-source-stream": "^1.1.0",
+    "yargs": "^3.7.0"
   },
@@ -46,0 +54,0 @@ "bugs": {

README.md

@@ -106,9 +106,2 @@ # browserify-css [![build status](https://travis-ci.org/cheton/browserify-css.svg?branch=master)](https://travis-ci.org/cheton/browserify-css) [![Coverage Status](https://coveralls.io/repos/cheton/browserify-css/badge.svg)](https://coveralls.io/r/cheton/browserify-css)
 
-### rootDir
-
-Type: `String`
-Default: `./`
-
-An absolute path to resolve relative paths against the project's base directory.
-
 ### minify
@@ -126,4 +119,53 @@
 
+### processRelativeUrl
+
+Type: `Function`
+
+The `processRelativeUrl` option accepts a function which takes one argument (the relative url) and returns the original `relativeUrl` string or the converted result. For example:
+```javascript
+var browserify = require('browserify');
+
+browserify(options)
+    .add('src/index.js')
+    .transform(require('browserify-css'), {
+        rootDir: '.',
+        processRelativeUrl: function(relativeUrl) {
+            return relativeUrl;
+        }
+    })
+    .bundle()
+```
+
+You can embed the image data directly into the CSS file with data URI, like so:
+```javascript
+var _ = require('lodash');
+var path = require('path');
+var browserify = require('browserify');
+
+browserify(options)
+    .add('src/index.js')
+    .transform(require('browserify-css'), {
+        rootDir: '.',
+        processRelativeUrl: function(relativeUrl) {
+            if (_.contains(['.jpg','.png','.gif'], path.extname(relativeUrl))) {
+                // Embed image data with data URI
+                var DataUri = require('datauri');
+                var dUri = new DataUri(relativeUrl);
+                return dUri.content;
+            }
+            return relativeUrl;
+        }
+    })
+    .bundle()
+```
+
+### rootDir
+
+Type: `String`
+Default: `./`
+
+An absolute path to resolve relative paths against the project's base directory.
+
 ## FAQ 
-### How do I include CSS files located inside the node_modules folder?
+### 1. How do I include CSS files located inside the node_modules folder?
 You can choose one of the following methods to include CSS files located inside the node_modules folder:
@@ -179,2 +221,91 @@
 
+### 2. How do I load font and image files from node_modules?
+
+Assume that you have the following directory structure:
+```
+package.json
+src/
+    index.js
+    index.css
+node_modules/
+    bootstrap/
+        dist/
+            css/
+                bootstrap.css
+dist/
+    vendor/
+        bootstrap/
+            dist/
+                css/
+                    bootstrap.css
+    bundle.js
+```
+
+The `index.css` uses `@import` to import external style sheets:
+```css
+@import url("../node_modules/bootstrap/dist/css/bootstrap.css");
+```
+
+The generated `bundle.js` file is placed in the `dist` directory. Suppose that the `dist` directory is your web root, you might want to copy external font and images files from `../node_modules/` to `dist/vendor/`.
+
+For example, the `@font-face` rules in `node_modules/bootstrap/dist/css/bootstrap.css`:
+```css
+@font-face {
+    font-family: 'Glyphicons Halflings';
+    src: url('../fonts/glyphicons-halflings-regular.eot');
+    src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
+         url('../fonts/glyphicons-halflings-regular.woff2') format('woff2'),
+         url('../fonts/glyphicons-halflings-regular.woff') format('woff'),
+         url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'),
+         url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
+}
+```
+
+The example below illustrates the use of the `processRelativeUrl` option:
+```javascript
+var gulp = require('gulp');
+var path = require('path');
+var browserify = require('browserify');
+var sourceStream = require('vinyl-source-stream');
+
+var bundleStream = browserify()
+    .add('src/index.js')
+    .transform(require('browserify-css'), {
+        rootDir: 'src',
+        processRelativeUrl: function(relativeUrl) {
+            var stripQueryStringAndHashFromPath = function(url) {
+                return url.split('?')[0].split('#')[0];
+            };
+            var rootDir = path.resolve(process.cwd(), 'src');
+            var relativePath = stripQueryStringAndHashFromPath(relativeUrl);
+            var queryStringAndHash = relativeUrl.substring(relativePath.length);
+
+            //
+            // Copying files from '../node_modules/bootstrap/' to 'dist/vendor/bootstrap/'
+            //
+            var prefix = '../node_modules/';
+            if (_.startsWith(relativePath, prefix)) {
+                var vendorUrl = 'vendor/' + relativePath.substring(prefix.length);
+                var source = path.join(rootDir, relativePath);
+                var target = path.join(rootDir, vendorUrl);
+
+                gutil.log('Copying file from ' + JSON.stringify(source) + ' to ' + JSON.stringify(target));
+                fse.copySync(source, target);
+
+                // Returns a new url with original query string and hash fragments
+                return vendorUrl + queryStringAndHash;
+            }
+
+            return relativeUrl;
+        }
+    })
+    .bundle();
+
+bundleStream
+    .pipe(sourceStream(bundleFile))
+    .pipe(gulp.dest(browserifyConfig.dest));
+
+```
+
+
 ## License
@@ -181,0 +312,0 @@

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

Native code

Supply chain risk

Contains native code (e.g., compiled binaries or shared libraries). Including native code can obscure malicious behavior.

Found 12 instances in 1 package

Filesystem access

Supply chain risk

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

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

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

Total package byte prevSize

2075344

increased by649.11%

Number of package files

67

increased by191.3%

Lines of code

19510

increased by138.3%

Number of lines in readme file

313

increased by71.98%

Worsened metrics

Dev dependency count

13

increased by160%

Number of low supply chain risk alerts

8

increased by33.33%

Number of medium supply chain risk alerts

12

increased byInfinity%

Dependency changes

• + Addedlodash@3.6.0(transitive)

• - Removedlodash@2.4.2(transitive)

• Updatedlodash@3.6.x