less-loader - npm Package Compare versions

Comparing version 2.2.3 to 3.0.0

CHANGELOG.md

 Changelog
 ---------
 
+### 3.0.0
+
+- **Breaking**: Remove node 0.10 and 0.12 support
+- **Breaking**: Remove official webpack 1 support. There are no breaking changes for webpack 1 with `3.0.0`, but future release won't be tested against webpack 1
+- **Breaking**: Remove synchronous compilation support [#152](https://github.com/webpack-contrib/less-loader/pull/152) [#84](https://github.com/webpack-contrib/less-loader/issues/84)
+- Reduce npm package size by using the [files](https://docs.npmjs.com/files/package.json#files) property in the `package.json`
+
+
 ### 2.2.3
@@ -19,2 +27,2 @@
 
-- Added option to specify LESS plugins [#40](https://github.com/webpack/less-loader/pull/40)
+- Added option to specify LESS plugins [#40](https://github.com/webpack/less-loader/pull/40)

package.json

 {
   "name": "less-loader",
-  "version": "2.2.3",
-  "author": "Tobias Koppers @sokra",
-  "description": "less loader module for webpack",
+  "version": "3.0.0",
+  "author": "Johannes Ewald @jhnns",
+  "description": "Less loader for webpack. Compiles Less to CSS.",
+  "main": "lib/loader.js",
   "scripts": {
-    "test": "node --no-deprecation node_modules/.bin/_mocha -R spec",
-    "test-source-map": "webpack --config test/sourceMap/webpack.config.js && open ./test/sourceMap/index.html"
+    "create-spec": "node test/tools/runCreateSpec.js",
+    "pretest": "npm run create-spec",
+    "test": "nyc --all mocha -R spec -t 10000",
+    "posttest": "npm run lint",
+    "travis:test": "npm test",
+    "appveyor:test": "npm test",
+    "lint": "eslint lib test"
   },
+  "engines": {
+    "node": ">=4.0.0"
+  },
+  "dependencies": {
+    "clone-deep": "^0.2.4",
+    "loader-utils": "^1.0.2"
+  },
   "peerDependencies": {
@@ -14,14 +27,17 @@ "less": "^2.3.1"
   "devDependencies": {
-    "css-loader": "^0.23.1",
-    "enhanced-require": "^0.5.0-beta6",
-    "extract-text-webpack-plugin": "^1.0.1",
+    "css-loader": "^0.26.2",
+    "eslint": "^3.17.1",
+    "eslint-config-peerigon": "^9.0.0",
+    "eslint-plugin-jsdoc": "^2.4.0",
+    "extract-text-webpack-plugin": "^2.1.0",
     "less": "^2.6.1",
-    "mocha": "^2.4.5",
+    "mocha": "^3.2.0",
+    "nyc": "^10.1.2",
     "raw-loader": "^0.5.1",
-    "should": "^8.3.0",
-    "webpack": "^1.12.14"
+    "should": "^11.2.0",
+    "webpack": "^2.2.1"
   },
   "repository": {
     "type": "git",
-    "url": "git://github.com/webpack/less-loader.git"
+    "url": "git://github.com/webpack-contrib/less-loader.git"
   },
@@ -34,5 +50,7 @@ "licenses": [
   ],
-  "dependencies": {
-    "loader-utils": "^0.2.5"
-  }
+  "files": [
+    "lib",
+    "README",
+    "LICENSE"
+  ]
 }

README.md

@@ -1,82 +0,116 @@
-# less loader for webpack
+[![npm][npm]][npm-url]
+[![node][node]][node-url]
+[![npm-stats][npm-stats]][npm-url]
+[![deps][deps]][deps-url]
+[![travis][travis]][travis-url]
+[![appveyor][appveyor]][appveyor-url]
+[![coverage][cover]][cover-url]
+[![chat][chat]][chat-url]
 
-## Installation
+<div align="center">
+  <img width="200" height="200"
+    src="https://cdn.worldvectorlogo.com/logos/less-63.svg">
+  <a href="https://github.com/webpack/webpack">
+    <img width="200" height="200"
+      src="https://webpack.js.org/assets/icon-square-big.svg">
+  </a>
+  <h1>less-loader</h1>
+  <p>Compiles Less to CSS.<br>Use the <a href="https://github.com/webpack-contrib/css-loader">css-loader</a> or the <a href="https://github.com/webpack-contrib/raw-loader">raw-loader</a> to turn it into a JS module and the <a href="https://github.com/webpack-contrib/extract-text-webpack-plugin">ExtractTextPlugin</a> to extract it into a separate file.<p>
+</div>
 
-`npm install less-loader --save-dev`
+<h2 align="center">Install</h2>
 
-## Usage
-
-[Documentation: Using loaders](http://webpack.github.io/docs/using-loaders.html)
-
-``` javascript
-var css = require("!raw!less!./file.less");
-// => returns compiled css code from file.less, resolves imports
-var css = require("!css!less!./file.less");
-// => returns compiled css code from file.less, resolves imports and url(...)s
+```bash
+npm install --save-dev less-loader less
 ```
 
-Use in tandem with the [`style-loader`](https://github.com/webpack/style-loader) to add the css rules to your document:
+The less-loader requires [less](https://github.com/less/less.js) as [`peerDependency`](https://docs.npmjs.com/files/package.json#peerdependencies). Thus you are able to control the versions accurately.
 
-``` javascript
-require("!style!css!less!./file.less");
-```
+<h2 align="center">Examples</h2>
 
-### webpack config
+Chain the less-loader with the [css-loader](https://github.com/webpack-contrib/css-loader) and the [style-loader](https://github.com/webpack-contrib/style-loader) to immediately apply all styles to the DOM.
 
-``` javascript
+```js
+// webpack.config.js
 module.exports = {
-  module: {
-    loaders: [
-      {
-        test: /\.less$/,
-        loader: "style!css!less"
-      }
-    ]
-  }
+    ...
+    module: {
+        rules: [{
+            test: /\.less$/,
+            use: [{
+                loader: "style-loader" // creates style nodes from JS strings
+            }, {
+                loader: "css-loader" // translates CSS into CommonJS
+            }, {
+                loader: "less-loader" // compiles Less to CSS
+            }]
+        }]
+    }
 };
 ```
 
-Then you only need to write: `require("./file.less")`
+You can pass any Less specific options to the less-loader via [loader options](https://webpack.js.org/configuration/module/#rule-options-rule-query). See the [Less documentation](http://lesscss.org/usage/#command-line-usage-options) for all available options in dash-case. Since we're passing these options to Less programmatically, you need to pass them in camelCase here:
 
-### LESS options
-
-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).
-
-``` javascript
+```js
+// webpack.config.js
 module.exports = {
-  module: {
-    loaders: [
-      {
-        test: /\.less$/,
-        loader: "style!css!less?strictMath&noIeCompat"
-      }
-    ]
-  }
+    ...
+    module: {
+        rules: [{
+            test: /\.less$/,
+            use: [{
+                loader: "style-loader"
+            }, {
+                loader: "css-loader"
+            }, {
+                loader: "less-loader", options: {
+                    strictMath: true,
+                    noIeCompat: true
+                }
+            }]
+        }]
+    }
 };
 ```
 
-See the [LESS documentation](http://lesscss.org/usage/#command-line-usage-options) for all available options. LESS translates dash-case to camelCase. Certain options which take values (e.g. `lessc --modify-var="a=b"`) are better handled with the [JSON loader syntax](http://webpack.github.io/docs/using-loaders.html#query-parameters) (`style!css!less?{"modifyVars":{"a":"b"}}`).  
+### In production
 
-### LESS plugins
+Usually, it's recommended to extract the style sheets into a dedicated file in production using the [ExtractTextPlugin](https://github.com/webpack-contrib/extract-text-webpack-plugin). This way your styles are not dependent on JavaScript:
 
-In order to use [plugins](http://lesscss.org/usage/#plugins), simply set
-the `lessLoader.lessPlugins`-option on your webpack options. You can also change the options' key with a query parameter: `"less?config=lessLoaderCustom"`.
+```js
+const ExtractTextPlugin = require("extract-text-webpack-plugin");
 
-``` javascript
-var LessPluginCleanCSS = require('less-plugin-clean-css');
+const extractLess = new ExtractTextPlugin({
+    filename: "[name].[contenthash].css",
+    disable: process.env.NODE_ENV === "development"
+});
 
 module.exports = {
-  ...
-  lessLoader: {
-    lessPlugins: [
-      new LessPluginCleanCSS({advanced: true})
+    ...
+    module: {
+        rules: [{
+            test: /\.less$/,
+            loader: extractLess.extract({
+                use: [{
+                    loader: "css-loader"
+                }, {
+                    loader: "less-loader"
+                }],
+                // use style-loader in development
+                fallback: "style-loader"
+            })
+        }]
+    },
+    plugins: [
+        extractLess
     ]
-  }
 };
 ```
 
-## Imports
+<h2 align="center">Usage</h2>
 
-webpack provides an [advanced mechanism to resolve files](http://webpack.github.io/docs/resolving.html). The less-loader stubs less' `fileLoader` and passes all queries to the webpack resolving engine. Thus you can import your less-modules from `node_modules`. Just prepend them with a `~` which tells webpack to look-up the [`modulesDirectories`](http://webpack.github.io/docs/configuration.html#resolve-modulesdirectories)
+### Imports
 
+webpack provides an [advanced mechanism to resolve files](https://webpack.js.org/configuration/resolve/). The less-loader applies a Less plugin that passes all queries to the webpack resolving engine. Thus you can import your less-modules from `node_modules`. Just prepend them with a `~` which tells webpack to look-up the [`modules`](https://webpack.js.org/configuration/resolve/#resolve-modules).
+
 ```css
@@ -88,38 +122,65 @@ @import "~bootstrap/less/bootstrap";
 
-## Source maps
+Also please note that for [CSS modules](https://github.com/css-modules/css-modules), relative file paths do not work as expected. Please see [this issue for the explanation](https://github.com/webpack-contrib/less-loader/issues/109#issuecomment-253797335).
 
-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).
+### Plugins
 
-Then your `webpack.config.js` should look like this:
+In order to use [plugins](http://lesscss.org/usage/#plugins), simply set the `lessPlugins` option like this:
 
-```javascript
-var ExtractTextPlugin = require('extract-text-webpack-plugin');
+```js
+// webpack.config.js
+const CleanCSSPlugin = require("less-plugin-clean-css");
 
 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')
-    ]
+                loader: "less-loader", options: {
+                    lessPlugins: [
+                        new CleanCSSPlugin({ advanced: true })
+                    ]
+                }
+            }]
+    ...
 };
 ```
 
-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.
+### Extracting style sheets
 
-## Contribution
+Bundling CSS with webpack has some nice advantages like referencing images and fonts with hashed urls or [hot module replacement](https://webpack.js.org/concepts/hot-module-replacement/) in development. In production, on the other hand, it's not a good idea to apply your style sheets depending on JS execution. Rendering may be delayed or even a [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content) might be visible. Thus it's often still better to have them as separate files in your final production build.
 
+There are two possibilities to extract a style sheet from the bundle:
+
+- [extract-loader](https://github.com/peerigon/extract-loader) (simpler, but specialized on the css-loader's output)
+- [extract-text-webpack-plugin](https://github.com/webpack-contrib/extract-text-webpack-plugin) (more complex, but works in all use-cases)
+
+### Source maps
+
+To enable CSS source maps, you'll need to pass the `sourceMap` option to the less-loader *and* the css-loader. Your `webpack.config.js` should look like this:
+
+```javascript
+module.exports = {
+    ...
+    devtool: "source-map", // any "source-map"-like devtool is possible
+    module: {
+        rules: [{
+            test: /\.less$/,
+            use: [{
+                loader: "style-loader"
+            }, {
+                loader: "css-loader", options: {
+                    sourceMap: true
+                }
+            }, {
+                loader: "less-loader", options: {
+                    sourceMap: true
+                }
+            }]
+        }]
+    }
+};
+```
+
+If you want to edit the original Less files inside Chrome, [there's a good blog post](https://medium.com/@toolmantim/getting-started-with-css-sourcemaps-and-in-browser-sass-editing-b4daab987fb0). The blog post is about Sass but it also works for Less.
+
+<h2 align="center">Contributing</h2>
+
 Don't hesitate to create a pull request. Every contribution is appreciated. In development you can start the tests by calling `npm test`.
@@ -129,6 +190,37 @@
 
-[![build status](https://travis-ci.org/webpack/less-loader.svg)](https://travis-ci.org/webpack/less-loader)
+<h2 align="center">Maintainer</h2>
 
-## License
+<table>
+  <tbody>
+    <tr>
+      <td align="center">
+        <img width="150 height="150" src="https://github.com/jhnns.png?s=150">
+        <br>
+        <a href="https://github.com/jhnns">Johannes Ewald</a>
+      </td>
+    <tr>
+  <tbody>
+</table>
 
-MIT (http://www.opensource.org/licenses/mit-license.php)
+
+[npm]: https://img.shields.io/npm/v/less-loader.svg
+[npm-stats]: https://img.shields.io/npm/dm/less-loader.svg
+[npm-url]: https://npmjs.com/package/less-loader
+
+[node]: https://img.shields.io/node/v/less-loader.svg
+[node-url]: https://nodejs.org
+
+[deps]: https://david-dm.org/webpack-contrib/less-loader.svg
+[deps-url]: https://david-dm.org/webpack-contrib/less-loader
+
+[travis]: http://img.shields.io/travis/webpack-contrib/less-loader.svg
+[travis-url]: https://travis-ci.org/webpack-contrib/less-loader
+
+[appveyor-url]: https://ci.appveyor.com/project/jhnns/less-loader/branch/master
+[appveyor]: https://ci.appveyor.com/api/projects/status/github/webpack-contrib/less-loader?svg=true
+
+[cover]: https://coveralls.io/repos/github/webpack-contrib/less-loader/badge.svg
+[cover-url]: https://coveralls.io/github/webpack-contrib/less-loader
+
+[chat]: https://badges.gitter.im/webpack-contrib/webpack.svg
+[chat-url]: https://gitter.im/webpack-contrib/webpack

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

Filesystem access

Supply chain risk

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

Found 1 instance in 1 package

Improved metrics

Number of lines in readme file

225

increased by69.17%

Number of low supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

16610

decreased by-85.1%

Dependency count

3

increased by50%

Dev dependency count

11

increased by37.5%

Number of package files

6

decreased by-84.62%

Lines of code

121

decreased by-20.92%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedclone-deep@^0.2.4

• + Addedbig.js@5.2.2(transitive)

• + Addedclone-deep@0.2.4(transitive)

• + Addedemojis-list@3.0.0(transitive)

• + Addedfor-in@0.1.81.0.2(transitive)

• + Addedfor-own@0.1.5(transitive)

• + Addedis-buffer@1.1.6(transitive)

• + Addedis-extendable@0.1.1(transitive)

• + Addedis-plain-object@2.0.4(transitive)

• + Addedisobject@3.0.1(transitive)

• + Addedjson5@1.0.2(transitive)

• + Addedkind-of@2.0.13.2.2(transitive)

• + Addedlazy-cache@0.2.71.0.4(transitive)

• + Addedloader-utils@1.4.2(transitive)

• + Addedmixin-object@2.0.1(transitive)

• + Addedshallow-clone@0.1.2(transitive)

• - Removedbig.js@3.2.0(transitive)

• - Removedemojis-list@2.1.0(transitive)

• - Removedjson5@0.5.1(transitive)

• - Removedloader-utils@0.2.17(transitive)

• - Removedobject-assign@4.1.1(transitive)

• Updatedloader-utils@^1.0.2