stylus-loader - npm Package Compare versions

Comparing version 0.3.0 to 0.3.1

index.js

@@ -7,2 +7,5 @@ var loaderUtils = require('loader-utils');
 
+var CachedPathEvaluator = require('./lib/evaluator');
+var PathCache = require('./lib/pathcache');
+
 module.exports = function(source) {
@@ -14,4 +17,5 @@ var self = this;
   options.filename = options.filename || this.resourcePath;
+  options.Evaluator = CachedPathEvaluator;
 
-  var styl = stylus(source);
+  var styl = stylus(source, options);
   var paths = [path.dirname(options.filename)];
@@ -55,40 +59,16 @@
 
-  extractImports(source).concat(manualImports).map(function(dep) {
-    var filepath = null;
-    for (var i = 0; i < paths.length; i++) {
-      filepath = path.resolve(paths[i], dep);
-      if (!fs.existsSync(filepath)) {
-        filepath = path.resolve(paths[i], dep + '.styl');
-        if (fs.existsSync(filepath)) break;
-      } else {
-        break;
-      }
-    }
-    return fs.existsSync(filepath) ? filepath : null;
-  }).filter(function(dep) {
-    return !!dep;
-  }).forEach(function(dep) {
-    self.addDependency(dep);
-  });
+  var boundResolvers = PathCache.resolvers(options, this.resolve);
+  PathCache.createFromFile(boundResolvers, {}, options.filename)
+    .then(function(importPathCache) {
+      // CachedPathEvaluator will use this PathCache to find its dependencies.
+      options.cache = importPathCache;
+      importPathCache.allDeps().forEach(self.addDependency);
 
-  styl.use(nib());
-  styl.render(function(err, css) {
-    if (err) done(err);
-    else done(null, css);
-  });
+      styl.use(nib());
+      styl.render(function(err, css) {
+        if (err) done(err);
+        else done(null, css);
+      });
+    })
+    .catch(done);
 }
-
-// Not the best way but it works for now
-function extractImports(source) {
-  var imports = [];
-  var regex = /@import *[\'|\"]([^\'|\"]+)*/gi;
-  var matches = regex.exec(source);
-  if (matches) {
-    imports.push(matches[1]);
-    while (matches != null) {
-      matches = regex.exec(source);
-      if (matches) imports.push(matches[1]);
-    }
-  }
-  return imports || [];
-}

package.json

 {
   "name": "stylus-loader",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "Stylus loader for webpack",
@@ -19,5 +19,6 @@ "main": "index.js",
   "dependencies": {
+    "loader-utils": "~0.2.1",
+    "nib": "~1.0.2",
     "stylus": "~0.42.2",
-    "nib": "~1.0.2",
-    "loader-utils": "~0.2.1"
+    "when": "~3.2.x"
   },
@@ -24,0 +25,0 @@ "devDependencies": {

README.md

@@ -38,2 +38,16 @@ # stylus-loader
 
+`stylus-loader` can also take advantage of webpack's resolve options. With the default options it'll find files in `web_modules` as well as `node_modules`, make sure to prefix any lookup in node_modules with `~`. For example if you have a styles package lookup files in it like `@import '~styles/my-styles`. It can also find stylus files without having the extension specified in the `@import` and index files in folders if webpack is configured for stylus's file extension.
+
+```js
+module: {
+  resolve: {
+    extensions: ['', '.js', '.styl']
+  }
+}
+```
+
+will let you have an `index.styl` file in your styles package and `require('styles')` or `@import '~styles'` it. It also lets you load a stylus file from a package installed in node_modules or if you add a modulesDirectories, like `modulesDirectories: ['node_modules', 'web_modules', 'bower_components']` option you could load from a folder like bower_components. To load files from a relative path leave off the `~` and `@import 'relative-styles/my-styles';` it.
+
+Be careful though not to use the extensions configuration for two types of in one folder. If a folder has a `index.js` and a `index.styl` and you `@import './that-folder'`, it'll end up importing a javascript file into your stylus.
+
 ## Install
@@ -47,2 +61,3 @@
 ## Release History
+* 0.3.1 - Fix when dependency (@tkellen)
 * 0.3.0 - Define url resolver() when "resolve url" option is true (@mzgoddard).
@@ -49,0 +64,0 @@ * 0.2.0 - Now tracks dependencies for @import statements making cacheable work. Update stylus dep.

test/basic.test.js

@@ -37,2 +37,50 @@ var should = require("should");
 	});
+	it("with paths, find deps and load like normal stylus", function() {
+		var css = require(
+			"!raw-loader!../?paths=test/fixtures/paths!./fixtures/import-paths.styl"
+		);
+		(typeof css).should.be.eql("string");
+		css.should.match(/.other/);
+		css.should.match(/font-family/);
+	});
+	it("stylus can find modules in node_modules", function() {
+		var css = require("!raw-loader!../!./fixtures/import-fakenib.styl");
+		(typeof css).should.be.eql("string");
+		css.should.match(/.not-real-nib/);
+	});
+	it("resolve with webpack if stylus can't find it", function() {
+		var css = require("!raw-loader!../!./fixtures/import-webpack.styl");
+		(typeof css).should.be.eql("string");
+		css.should.match(/.other/);
+		css.should.match(/font-size/);
+	});
+	it("in a nested import load module from paths", function() {
+		var css = require(
+			"!raw-loader!../?paths=test/fixtures/paths!./fixtures/shallow-paths.styl"
+		);
+		(typeof css).should.be.eql("string");
+		css.should.match(/.other/);
+		css.should.match(/font-family/);
+	});
+	it("in a nested import load module from node_modules", function() {
+		var css = require("!raw-loader!../!./fixtures/shallow-fakenib.styl");
+		(typeof css).should.be.eql("string");
+		css.should.match(/.not-real-nib/);
+	});
+	it("in a nested import load module from webpack", function() {
+		var css = require("!raw-loader!../!./fixtures/shallow-webpack.styl");
+		(typeof css).should.be.eql("string");
+		css.should.match(/.other/);
+		css.should.match(/font-size/);
+	});
+	it("resolves css with webpack but does not import it", function() {
+		var css = require("!raw-loader!../!./fixtures/import-webpack-css.styl");
+		(typeof css).should.be.eql("string");
+		css.should.not.match(/\.imported-css/);
+	});
+	it("in a nested import resolve css with webpack but not import", function() {
+		var css = require("!raw-loader!../!./fixtures/import-webpack-css.styl");
+		(typeof css).should.be.eql("string");
+		css.should.not.match(/\.imported-css/);
+	});
 });

test/webpack.config.js

 // Just run "webpack-dev-server"
 module.exports = {
 	context: __dirname,
-	entry: "mocha-loader!./all.js"
+	entry: "mocha-loader!./all.js",
+	resolve: {
+		extensions: ["", ".js", ".css", ".styl"]
+	}
 };

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

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

23013

increased by200.9%

Number of package files

39

increased by116.67%

Lines of code

485

increased by294.31%

Number of lines in readme file

68

increased by28.3%

Worsened metrics

Dependency count

4

increased by33.33%

Number of low supply chain risk alerts

3

increased by200%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedwhen@~3.2.x

• + Addedwhen@3.2.3(transitive)