style-loader - npm Package Compare versions

Comparing version 0.16.1 to 0.17.0

addStyles.js

@@ -55,3 +55,3 @@ /*
 
-	var styles = listToStyles(list);
+	var styles = listToStyles(list, options);
 	addStylesToDom(styles, options);
@@ -68,3 +68,3 @@
 		if(newList) {
-			var newStyles = listToStyles(newList);
+			var newStyles = listToStyles(newList, options);
 			addStylesToDom(newStyles, options);
@@ -105,3 +105,3 @@ }
 
-function listToStyles(list) {
+function listToStyles(list, options) {
 	var styles = [];
@@ -111,3 +111,3 @@ var newStyles = {};
 		var item = list[i];
-		var id = item[0];
+		var id = options.base ? item[0] + options.base : item[0];
 		var css = item[1];
@@ -181,4 +181,21 @@ var media = item[2];
 function addStyle(obj, options) {
-	var styleElement, update, remove;
+	var styleElement, update, remove, transformResult;
 
+	// If a transform function was defined, run it on the css
+	if (options.transform && obj.css) {
+	    transformResult = options.transform(obj.css);
+	    
+	    if (transformResult) {
+	    	// If transform returns a value, use that instead of the original css.
+	    	// This allows running runtime transformations on the css.
+	    	obj.css = transformResult;
+	    } else {
+	    	// If the transform function returns a falsy value, don't add this css. 
+	    	// This allows conditional loading of css
+	    	return function() {
+	    		// noop
+	    	};
+	    }
+	}
+
 	if (options.singleton) {
@@ -185,0 +202,0 @@ var styleIndex = singletonCounter++;

CHANGELOG.md

@@ -5,2 +5,13 @@ # Change Log
 
+<a name="0.17.0"></a>
+# [0.17.0](https://github.com/webpack/style-loader/compare/v0.16.1...v0.17.0) (2017-05-01)
+
+
+### Features
+
+* add option.base ([#164](https://github.com/webpack/style-loader/issues/164)) ([e4ac886](https://github.com/webpack/style-loader/commit/e4ac886))
+* add option.transform ([#146](https://github.com/webpack/style-loader/issues/146)) ([1c3943f](https://github.com/webpack/style-loader/commit/1c3943f))
+
+
+
 <a name="0.16.1"></a>
@@ -7,0 +18,0 @@ ## [0.16.1](https://github.com/webpack/style-loader/compare/v0.16.0...v0.16.1) (2017-03-28)

index.js

@@ -17,4 +17,9 @@ /*
 		"if(typeof content === 'string') content = [[module.id, content, '']];",
+		"// Prepare cssTransformation",
+		"var transform;",
+		query.transform ? "transform = require('" + path.resolve(query.transform) + "');" : "",
+		"var options = " + JSON.stringify(query),
+		"options.transform = transform",
 		"// add the styles to the DOM",
-		"var update = require(" + loaderUtils.stringifyRequest(this, "!" + path.join(__dirname, "addStyles.js")) + ")(content, " + JSON.stringify(query) + ");",
+		"var update = require(" + loaderUtils.stringifyRequest(this, "!" + path.join(__dirname, "addStyles.js")) + ")(content, options);",
 		"if(content.locals) module.exports = content.locals;",
@@ -21,0 +26,0 @@ "// Hot Module Replacement",

package.json

 {
   "name": "style-loader",
-  "version": "0.16.1",
+  "version": "0.17.0",
   "author": "Tobias Koppers @sokra",
@@ -23,2 +23,10 @@ "description": "style loader module for webpack",
   },
+  "files": [
+    "addStyles.js",
+    "addStyleUrl.js",
+    "fixUrls.js",
+    "index.js",
+    "url.js",
+    "useable.js"
+  ],
   "scripts": {
@@ -25,0 +33,0 @@ "release": "yarn run standard-version",

README.md

@@ -12,6 +12,5 @@ [![npm][npm]][npm-url]
   <h1>Style Loader</h1>
+  <p>Adds CSS to the DOM by injecting a `<style>` tag</p>
 </div>
 
-Adds CSS to the DOM by injecting a `<style>` tag
-
 <h2 align="center">Install</h2>
@@ -23,85 +22,76 @@
 
-<h2 align="center">Usage</h2>
+<h2 align="center"><a href="https://webpack.js.org/concepts/loaders">Usage</a></h2>
 
-[Documentation: Using loaders](http://webpack.github.io/docs/using-loaders.html)
+It's recommended to combine `style-loader` with the [`css-loader`](https://github.com/webpack/css-loader)
 
-### Simple API
-
-``` javascript
-require("style-loader!raw-loader!./file.css");
-// => add rules in file.css to document
+**component.js**
+```js
+import style from './file.css'
 ```
 
-It's recommended to combine it with the [`css-loader`](https://github.com/webpack/css-loader): `require("style-loader!css-loader!./file.css")`.
-
-It's also possible to add a URL instead of a CSS string:
-
-``` javascript
-require("style-loader/url!file-loader!./file.css");
-// => add a <link rel="stylesheet"> to file.css to document
+**webpack.config.js**
+```js
+{
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        use: [
+          { loader: "style-loader" },
+          { loader: "css-loader" }
+        ]
+      }
+    ]
+  }
+}
 ```
 
-### Local scope CSS
+#### `Locals (CSS Modules)`
 
-(experimental)
+When using [local scoped CSS](https://github.com/webpack/css-loader#css-scope) the module exports the generated identifiers (locals).
 
-When using [local scope CSS](https://github.com/webpack/css-loader#css-scope) the module exports the generated identifiers:
+**component.js**
+```js
+import style from './file.css'
 
-``` javascript
-var style = require("style-loader!css-loader!./file.css");
-style.placeholder1 === "z849f98ca812bc0d099a43e0f90184"
+style.className === "z849f98ca812"
 ```
 
-### Reference-counted API
+### `Url`
 
-``` javascript
-var style = require("style-loader/useable!css-loader!./file.css");
-style.use(); // = style.ref();
-style.unuse(); // = style.unref();
+It's also possible to add a URL `<link href="path/to/file.css" rel="stylesheet">` instead of a inlining the CSS `{String}` with `<style></style>` tag.
+
+```js
+import url from 'file.css'
 ```
 
-Styles are not added on `require`, but instead on call to `use`/`ref`. Styles are removed from page if `unuse`/`unref` is called exactly as often as `use`/`ref`.
-
-Note: Behavior is undefined when `unuse`/`unref` is called more often than `use`/`ref`. Don't do that.
-
-### Options
-
-#### `insertAt`
-
-By default, the style-loader appends `<style>` elements to the end of the style target, which is the `<head>` tag of the page unless specified by `insertInto`. This will cause CSS created by the loader to take priority over CSS already present in the target. To insert style elements at the beginning of the target, set this query parameter to 'top', e.g. `require('../style.css?insertAt=top')`.
-
-#### `insertInto`
-By default, the style-loader inserts the `<style>` elements into the `<head>` tag of the page. If you want the tags to be inserted somewhere else, e.g. into a [ShadowRoot](https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot), you can specify a CSS selector for that element here, e.g. `require('../style.css?insertInto=#host::shadow>#root')`.
-
-#### `singleton`
-
-If defined, the style-loader will re-use a single `<style>` element, instead of adding/removing individual elements for each required module. **Note:** this option is on by default in IE9, which has strict limitations on the number of style tags allowed on a page. You can enable or disable it with the singleton query parameter (`?singleton` or `?-singleton`).
-
-#### `convertToAbsoluteUrls`
-
-If convertToAbsoluteUrls and sourceMaps are both enabled, relative urls will be converted to absolute urls right before the css is injected into the page. This resolves [an issue](https://github.com/webpack/style-loader/pull/96) where relative resources fail to load when source maps are enabled.  You can enable it with the convertToAbsoluteUrls query parameter (`?convertToAbsoluteUrls`).
-
-#### `attrs`
-
-If defined, style-loader will attach given attributes with their values on `<style>` / `<link>` element.
-Usage:
-```javascript
-require('style-loader?{attrs:{id: "style-tag-id"}}!style.css');
-
-// will create style tag <style id="style-tag-id">
+**webpack.config.js**
+```js
+{
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        use: [
+          { loader: "style-loader/url" },
+          { loader: "file-loader" }
+        ]
+      }
+    ]
+  }
+}
 ```
-Usage in `url` mode:
-```javascript
-require('style-loader/url?{attrs:{prop: "value"}}!file-loader!style.css')
 
-// will create link tag <link rel="stylesheet" type="text/css" href="[path]/style.css" prop="value">
+```html
+<link rel="stylesheet" href="path/to/file.css">
 ```
 
-### Recommended configuration
+> :information_source: Source maps and assets referenced with `url`: when style loader is used with `{ options: { sourceMap: true } }` option, the CSS modules will be generated as `Blob`s, so relative paths don't work (they would be relative to `chrome:blob` or `chrome:devtools`). In order for assets to maintain correct paths setting `output.publicPath` property of webpack configuration must be set, so that absolute paths are generated. Alternatively you can enable the `convertToAbsoluteUrls` option mentioned above.
 
-By convention the reference-counted API should be bound to `.useable.css` and the simple API to `.css` (similar to other file types, i.e. `.useable.less` and `.less`).
+### `Useable`
 
-So the recommended configuration for webpack is:
+By convention the `Reference Counter API` should be bound to `.useable.css` and the `.css` should be loaded with basic `style-loader` usage.(similar to other file types, i.e. `.useable.less` and `.less`).
 
-``` javascript
+**webpack.config.js**
+```js
 {
@@ -131,8 +121,229 @@ module: {
 
-**Note** about source maps support and assets referenced with `url`: when style loader is used with ?sourceMap option, the CSS modules will be generated as `Blob`s, so relative paths don't work (they would be relative to `chrome:blob` or `chrome:devtools`). In order for assets to maintain correct paths setting `output.publicPath` property of webpack configuration must be set, so that absolute paths are generated. Alternatively you can enable the `convertToAbsoluteUrls` option mentioned above.
+#### `Reference Counter API`
 
-<h2 align="center">Contributing</h2>
+**component.js**
+```js
+import style from './file.css'
 
-Don't hesitate to create a pull request. Every contribution is appreciated. In development you can start the tests by calling `npm test`.
+style.use(); // = style.ref();
+style.unuse(); // = style.unref();
+```
 
+Styles are not added on `import/require()`, but instead on call to `use`/`ref`. Styles are removed from page if `unuse`/`unref` is called exactly as often as `use`/`ref`.
+
+:warning: Behavior is undefined when `unuse`/`unref` is called more often than `use`/`ref`. Don't do that.
+
+<h2 align="center">Options</h2>
+
+|Name|Type|Default|Description|
+|:--:|:--:|:-----:|:----------|
+|**`base`** |`{Number}`|`true`|Set module ID base (DLLPlugin)|
+|**`attrs`**|`{Object}`|`{}`|Add custom attrs to `<style></style>`|
+|**`transform`** |`{Function}`|`false`|Transform/Conditionally load CSS by passing a transform/condition function|
+|**`insertAt`**|`{String}`|`bottom`|Inserts `<style></style>` at the given position|
+|**`insertInto`**|`{String}`|`<head>`|Inserts `<style></style>` into the given position|
+|**`sourceMap`**|`{Boolean}`|`false`|Enable/Disable Sourcemaps|
+|**`convertToAbsoluteUrls`**|`{Boolean}`|`false`|Coverts relative URLs to absolute urls, when source maps are enabled|
+
+### `base`
+
+This setting is primarily used as a workaround for [css clashes](https://github.com/webpack-contrib/style-loader/issues/163) when using one or more [DllPlugin](https://robertknight.github.io/posts/webpack-dll-plugins/)'s.  `base` allows you to prevent either the *app*'s css (or *DllPlugin2*'s css) from overwriting *DllPlugin1*'s css by specifying a css module id base which is greater than the range used by *DllPlugin1* e.g.:
+
+**webpack.dll1.config.js**
+```js
+{
+  test: /\.css$/,
+  use: [
+    'style-loader',
+    'css-loader'
+  ]
+}
+```
+
+**webpack.dll2.config.js**
+```js
+{
+  test: /\.css$/,
+  use: [
+    { loader: 'style-loader', options: { base: 1000 } },
+    'css-loader'
+  ]
+}
+```
+
+**webpack.app.config.js**
+```
+{
+  test: /\.css$/,
+  use: [
+    { loader: 'style-loader', options: { base: 2000 } },
+    'css-loader'
+  ]
+}
+```
+
+### `attrs`
+
+If defined, style-loader will attach given attributes with their values on `<style>` / `<link>` element.
+
+**component.js**
+```js
+import style from './file.css'
+```
+
+**webpack.config.js**
+```js
+{
+  test: /\.css$/,
+  use: [
+    { loader: 'style-laoder', options: { attrs: { id: 'id' } } }
+    { loader: 'css-loader' }
+  ]
+}
+```
+
+```html
+<style id="id"></style>
+```
+
+#### `Url`
+
+**component.js**
+```js
+import link from './file.css'
+```
+
+**webpack.config.js**
+```js
+{
+  test: /\.css$/,
+  use: [
+    { loader: 'style-loader/url', options: { attrs: { id: 'id' } } }
+    { loader: 'file-loader' }
+  ]
+}
+```
+
+### `transform`
+
+A `transform` is a function that can modify the css just before it is loaded into the page by the style-loader.
+This function will be called on the css that is about to be loaded and the return value of the function will be loaded into the page instead of the original css.
+If the return value of the `transform` function is falsy, the css will not be loaded into the page at all.
+
+**webpack.config.js**
+```js
+{
+  loader: 'style-loader'
+  options: {
+    transform: 'path/to/transform.js'
+  }
+}
+```
+
+**transform.js**
+```js
+module.exports = function (css) {
+  // Here we can change the original css
+  const transformed = css.replace('.classNameA', '.classNameB')
+
+  return transformed
+}
+```
+
+#### `Conditional`
+
+**webpack.config.js**
+```js
+{
+  loader: 'style-loader'
+  options: {
+    transform: 'path/to/conditional.js'
+  }
+}
+```
+
+**conditional.js**
+```js
+module.exports = function (css) {
+  // If the condition is matched load [and transform] the CSS
+  if (css.includes('something I want to check')) {
+    return css;
+  }
+  // If a falsy value is returned, the CSS won't be loaded
+  return false
+}
+```
+
+### `insertAt`
+
+By default, the style-loader appends `<style>` elements to the end of the style target, which is the `<head>` tag of the page unless specified by `insertInto`. This will cause CSS created by the loader to take priority over CSS already present in the target. To insert style elements at the beginning of the target, set this query parameter to 'top', e.g
+
+**webpack.config.js**
+```js
+{
+  loader: 'style-loader'
+  options: {
+    insertAt: 'top'
+  }
+}
+```
+
+### `insertInto`
+By default, the style-loader inserts the `<style>` elements into the `<head>` tag of the page. If you want the tags to be inserted somewhere else, e.g. into a [ShadowRoot](https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot), you can specify a CSS selector for that element here, e.g
+
+**webpack.config.js**
+```js
+{
+  loader: 'style-loader'
+  options: {
+    insertAt: '#host::shadow>#root'
+  }
+}
+```
+
+### `singleton`
+
+If defined, the style-loader will reuse a single `<style>` element, instead of adding/removing individual elements for each required module.
+
+> ℹ️  This option is on by default in IE9, which has strict limitations on the number of style tags allowed on a page. You can enable or disable it with the singleton option.
+
+**webpack.config.js**
+```js
+{
+  loader: 'style-loader'
+  options: {
+    singleton: true
+  }
+}
+```
+
+### `sourceMap`
+
+Enable/Disable source map loading
+
+**webpack.config.js**
+```js
+{
+  loader: 'style-loader'
+  options: {
+    sourceMap: true
+  }
+}
+```
+
+### `convertToAbsoluteUrls`
+
+If convertToAbsoluteUrls and sourceMaps are both enabled, relative urls will be converted to absolute urls right before the css is injected into the page. This resolves [an issue](https://github.com/webpack/style-loader/pull/96) where relative resources fail to load when source maps are enabled. You can enable it with the convertToAbsoluteUrls option.
+
+**webpack.config.js**
+```js
+{
+  loader: 'style-loader'
+  options: {
+    sourceMap: true,
+    convertToAbsoluteUrls: true
+  }
+}
+```
+
 <h2 align="center">Maintainers</h2>
@@ -144,14 +355,53 @@
       <td align="center">
-        <img width="150 height="150"
-        src="https://avatars.githubusercontent.com/sokra?v=3">
-        <br />
-        <a href="https://github.com/">Tobias Koppers</a>
+        <a href="https://github.com/bebraw">
+          <img width="150" height="150" src="https://github.com/bebraw.png?v=3&s=150">
+          </br>
+          Juho Vepsäläinen
+        </a>
       </td>
       <td align="center">
-        <img width="150 height="150"
-        src="https://avatars.githubusercontent.com/SpaceK33z?v=3">
-        <br />
-        <a href="https://github.com/">Kees Kluskens</a>
+        <a href="https://github.com/d3viant0ne">
+          <img width="150" height="150" src="https://github.com/d3viant0ne.png?v=3&s=150">
+          </br>
+          Joshua Wiens
+        </a>
       </td>
+      <td align="center">
+        <a href="https://github.com/sapegin">
+          <img width="150" height="150" src="https://github.com/sapegin.png?v=3&s=150">
+          </br>
+          Artem Sapegin
+        </a>
+      </td>
+      <td align="center">
+        <a href="https://github.com/michael-ciniawsky">
+          <img width="150" height="150" src="https://github.com/michael-ciniawsky.png?v=3&s=150">
+          </br>
+          Michael Ciniawsky
+        </a>
+      </td>
+      <td align="center">
+        <a href="https://github.com/evilebottnawi">
+          <img width="150" height="150" src="https://github.com/evilebottnawi.png?v=3&s=150">
+          </br>
+          Alexander Krasnoyarov
+        </a>
+      </td>
+    </tr>
     <tr>
+      <td align="center">
+        <a href="https://github.com/sokra">
+          <img width="150" height="150" src="https://github.com/sokra.png?v=3&s=150">
+          </br>
+          Tobias Koppers
+        </a>
+      </td>
+      <td align="center">
+        <a href="https://github.com/SpaceK33z">
+          <img width="150" height="150" src="https://github.com/SpaceK33z.png?v=3&s=150">
+          </br>
+          Kees Kluskens
+        </a>
+      </td>
+    <tr>
   <tbody>
@@ -161,6 +411,2 @@ </table>
 
-<h2 align="center">LICENSE</h2>
-
-MIT
-
 [npm]: https://img.shields.io/npm/v/style-loader.svg
@@ -167,0 +413,0 @@ [npm-url]: https://npmjs.com/package/style-loader

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

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

418

increased by143.02%

Number of low supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

33173

decreased by-78.51%

Number of package files

10

decreased by-47.37%

Lines of code

488

decreased by-48.2%

No dependency changes