less-loader - npm Package Compare versions

Comparing version 2.0.0 to 2.1.0

index.js

@@ -11,6 +11,7 @@ "use strict";
 var loaderUtils = require("loader-utils");
+var path = require("path");
 
 var trailingSlash = /[\\\/]$/;
 
-module.exports = function(input) {
+module.exports = function(source) {
 	var loaderContext = this;
@@ -47,3 +48,12 @@ var query = loaderUtils.parseQuery(this.query);
 
-	less.render(input, config, function(e, result) {
+	// not using the `this.sourceMap` flag because css source maps are different
+	// @see https://github.com/webpack/css-loader/pull/40
+	if (query.sourceMap) {
+		config.sourceMap = {
+			outputSourceFiles: true
+		};
+	}
+
+	less.render(source, config, function(e, result) {
+		var parsedMap;
 		var cb = finalCb;
@@ -55,3 +65,14 @@ // Less is giving us double callbacks sometimes :(
 		if(e) return cb(formatLessRenderError(e));
-		cb(null, result.css);
+
+		if (result.map) {
+			parsedMap = JSON.parse(result.map);
+
+			parsedMap.sources = parsedMap.sources.map(function(file) {
+				return path.basename(file);
+			});
+
+			result.map = JSON.stringify(parsedMap);
+		}
+
+		cb(null, result.css, result.map);
 	});
@@ -137,11 +158,11 @@ };
 	//	{ type: 'Name',
-	//	  message: '.undefined-mixin is undefined',
-	//	  filename: '/path/to/style.less',
-	//	  index: 352,
-	//	  line: 31,
-	//	  callLine: NaN,
-	//	  callExtract: undefined,
-	//	  column: 6,
-	//	  extract:
-	//	   [ '    .my-style {',
+	//		message: '.undefined-mixin is undefined',
+	//		filename: '/path/to/style.less',
+	//		index: 352,
+	//		line: 31,
+	//		callLine: NaN,
+	//		callExtract: undefined,
+	//		column: 6,
+	//		extract:
+	//		 [ '    .my-style {',
 	//		 '      .undefined-mixin;',
@@ -148,0 +169,0 @@ //		 '      display: block;' ] }

package.json

 {
   "name": "less-loader",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "author": "Tobias Koppers @sokra",
   "description": "less loader module for webpack",
   "scripts": {
-    "test": "mocha -R spec"
+    "test": "mocha -R spec",
+    "test-source-map": "webpack --config test/sourceMap/webpack.config.js && open ./test/sourceMap/index.html"
   },
   "peerDependencies": {
-    "less": "^2.1.1"
+    "less": "^2.3.1"
   },
   "devDependencies": {
+    "css-loader": "^0.9.1",
     "enhanced-require": "^0.5.0-beta6",
-    "less": "^2.1.1",
+    "extract-text-webpack-plugin": "^0.3.8",
+    "less": "^2.3.1",
     "mocha": "^2.0.1",
@@ -16,0 +19,0 @@ "raw-loader": "^0.5.1",

README.md

@@ -28,3 +28,3 @@ # less loader for webpack
         test: /\.less$/,
-        loader: "style-loader!css-loader!less-loader"
+        loader: "style!css!less"
       }
@@ -38,11 +38,6 @@ ]
 
-### webpack config options
+### LESS options
 
-You can pass LESS specific configuration options through to the render function via loader
-parameters.
+You can pass any LESS specific configuration options through to the render function via [query parameters](http://webpack.github.io/docs/using-loaders.html#query-parameters).
 
-Acceptable config options that can be appended to the loader as parameters are:
-
-paths, optimization, filename, strictImports, syncImport, dumpLineNumbers, relativeUrls, rootpath, compress, cleancss, cleancssOptions, ieCompat, strictMath, strictUnits, urlArgs, sourceMap, sourceMapFilename, sourceMapURL, sourceMapBasepath, sourceMapRootpath, outputSourceFiles'
-
 ``` javascript
@@ -54,3 +49,3 @@ module.exports = {
         test: /\.less$/,
-        loader: "style-loader!css-loader!less-loader?strictMath&cleancss"
+        loader: "style!css!less?strictMath&noIeCompat"
       }
@@ -62,2 +57,3 @@ ]
 
+See the [LESS documentation](http://lesscss.org/usage/#command-line-usage-options) for all available options. LESS translates dash-case to camelCase.
 
@@ -84,2 +80,36 @@ ## Note on imports
 
+## Source maps
+
+Because of browser limitations, source maps are only available in conjunction with the [extract-text-webpack-plugin](https://github.com/webpack/extract-text-webpack-plugin). Use that plugin to extract the CSS code from the generated JS bundle into a separate file (which even improves the perceived performance because JS and CSS are loaded in parallel).
+
+Then your `webpack.config.js` should look like this:
+
+```javascript
+var ExtractTextPlugin = require('extract-text-webpack-plugin');
+
+module.exports = {
+    ...
+    // must be 'source-map' or 'inline-source-map'
+    devtool: 'source-map',
+    module: {
+        loaders: [
+            {
+                test: /\.less$/,
+                loader: ExtractTextPlugin.extract(
+                    // activate source maps via loader query
+                    'css?sourceMap!' +
+                    'less?sourceMap'
+                )
+            }
+        ]
+    },
+    plugins: [
+        // extract inline css into separate 'styles.css'
+        new ExtractTextPlugin('styles.css')
+    ]
+};
+```
+
+If you want to view the original LESS files inside Chrome and even edit it,  [there's a good blog post](https://medium.com/@toolmantim/getting-started-with-css-sourcemaps-and-in-browser-sass-editing-b4daab987fb0). Checkout [test/sourceMap](https://github.com/webpack/less-loader/tree/master/test) for a running example. Make sure to serve the content with an HTTP server.
+
 ## Contribution
@@ -86,0 +116,0 @@

stringify.loader.js

@@ -0,0 +0,0 @@ /*

New alerts

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

Fixed alerts

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

Improved metrics

Total package byte prevSize

87220

920.95%

Number of package files

26

333.33%

Lines of code

153

11.68%

Number of lines in readme file

121

32.97%

Worsened metrics

Dev dependency count

8

33.33%

No dependency changes