style-loader - npm Package Compare versions

Comparing version 1.2.1 to 1.3.0

CHANGELOG.md

@@ -5,2 +5,14 @@ # Changelog
 
+## [1.3.0](https://github.com/webpack-contrib/style-loader/compare/v1.2.1...v1.3.0) (2020-10-03)
+
+### Features
+
+* added `modules.namedExport` ([#485](https://github.com/webpack-contrib/style-loader/issues/485)) ([15889db](https://github.com/webpack-contrib/style-loader/commit/15889db9a2d5d51712fc12e03b12a60c22fc33f4))
+
+
+### Bug Fixes
+
+* check if `btoa` exists for old IE versions ([#479](https://github.com/webpack-contrib/style-loader/issues/479)) ([732ef8b](https://github.com/webpack-contrib/style-loader/commit/732ef8bcb60ae72c3a84d3fa639f1eae6f26bbdc))
+* esModule option issue ([#476](https://github.com/webpack-contrib/style-loader/issues/476)) ([c623f27](https://github.com/webpack-contrib/style-loader/commit/c623f2750b0358492c7bf2dde0326a1c71c46f4f))
+
 ### [1.2.1](https://github.com/webpack-contrib/style-loader/compare/v1.2.0...v1.2.1) (2020-04-28)
@@ -7,0 +19,0 @@

dist/index.js

@@ -32,3 +32,9 @@ "use strict";
   const esModule = typeof options.esModule !== 'undefined' ? options.esModule : false;
-  delete options.esModule;
+  const namedExport = esModule && options.modules && options.modules.namedExport;
+  const runtimeOptions = {
+    injectType: options.injectType,
+    attributes: options.attributes,
+    insert: options.insert,
+    base: options.base
+  };
 
@@ -61,3 +67,3 @@ switch (injectType) {
 
-var options = ${JSON.stringify(options)};
+var options = ${JSON.stringify(runtimeOptions)};
 
@@ -81,3 +87,3 @@ options.insert = ${insert};
     var isEqualLocals = ${_isEqualLocals.default.toString()};
-    var oldLocals = content.locals;
+    var oldLocals = ${namedExport ? 'locals' : 'content.locals'};
 
@@ -87,3 +93,3 @@ module.hot.accept(
       function () {
-        ${esModule ? `if (!isEqualLocals(oldLocals, content.locals)) {
+        ${esModule ? `if (!isEqualLocals(oldLocals, ${namedExport ? 'locals' : 'content.locals'}, ${namedExport})) {
                 module.hot.invalidate();
@@ -94,3 +100,3 @@
 
-              oldLocals = content.locals;
+              oldLocals = ${namedExport ? 'locals' : 'content.locals'};
 
@@ -125,3 +131,3 @@ if (update && refs > 0) {
         return `${esModule ? `import api from ${_loaderUtils.default.stringifyRequest(this, `!${_path.default.join(__dirname, 'runtime/injectStylesIntoStyleTag.js')}`)};
-            import content from ${_loaderUtils.default.stringifyRequest(this, `!!${request}`)};` : `var api = require(${_loaderUtils.default.stringifyRequest(this, `!${_path.default.join(__dirname, 'runtime/injectStylesIntoStyleTag.js')}`)});
+            import content${namedExport ? ', * as locals' : ''} from ${_loaderUtils.default.stringifyRequest(this, `!!${request}`)};` : `var api = require(${_loaderUtils.default.stringifyRequest(this, `!${_path.default.join(__dirname, 'runtime/injectStylesIntoStyleTag.js')}`)});
             var content = require(${_loaderUtils.default.stringifyRequest(this, `!!${request}`)});
@@ -137,3 +143,3 @@
 var update;
-var options = ${JSON.stringify(options)};
+var options = ${JSON.stringify(runtimeOptions)};
 
@@ -145,3 +151,3 @@ options.insert = ${insert};
 
-exported.locals = content.locals || {};
+${namedExport ? '' : 'exported.locals = content.locals || {};'}
 exported.use = function() {
@@ -163,3 +169,5 @@ if (!(refs++)) {
 
-${esModule ? 'export default' : 'module.exports ='} exported;`;
+${esModule ? `${namedExport ? `export * from ${_loaderUtils.default.stringifyRequest(this, `!!${request}`)};` : ''};
+       export default exported;` : 'module.exports = exported;'}
+`;
       }
@@ -176,3 +184,3 @@
     var isEqualLocals = ${_isEqualLocals.default.toString()};
-    var oldLocals = content.locals;
+    var oldLocals = ${namedExport ? 'locals' : 'content.locals'};
 
@@ -182,3 +190,3 @@ module.hot.accept(
       function () {
-        ${esModule ? `if (!isEqualLocals(oldLocals, content.locals)) {
+        ${esModule ? `if (!isEqualLocals(oldLocals, ${namedExport ? 'locals' : 'content.locals'}, ${namedExport})) {
                 module.hot.invalidate();
@@ -189,3 +197,3 @@
 
-              oldLocals = content.locals;
+              oldLocals = ${namedExport ? 'locals' : 'content.locals'};
 
@@ -218,3 +226,3 @@ update(content);` : `content = require(${_loaderUtils.default.stringifyRequest(this, `!!${request}`)});
         return `${esModule ? `import api from ${_loaderUtils.default.stringifyRequest(this, `!${_path.default.join(__dirname, 'runtime/injectStylesIntoStyleTag.js')}`)};
-            import content from ${_loaderUtils.default.stringifyRequest(this, `!!${request}`)};` : `var api = require(${_loaderUtils.default.stringifyRequest(this, `!${_path.default.join(__dirname, 'runtime/injectStylesIntoStyleTag.js')}`)});
+            import content${namedExport ? ', * as locals' : ''} from ${_loaderUtils.default.stringifyRequest(this, `!!${request}`)};` : `var api = require(${_loaderUtils.default.stringifyRequest(this, `!${_path.default.join(__dirname, 'runtime/injectStylesIntoStyleTag.js')}`)});
             var content = require(${_loaderUtils.default.stringifyRequest(this, `!!${request}`)});
@@ -228,3 +236,3 @@
 
-var options = ${JSON.stringify(options)};
+var options = ${JSON.stringify(runtimeOptions)};
 
@@ -238,3 +246,3 @@ options.insert = ${insert};
 
-${esModule ? 'export default' : 'module.exports ='} content.locals || {};`;
+${esModule ? namedExport ? `export * from ${_loaderUtils.default.stringifyRequest(this, `!!${request}`)};` : 'export default content.locals || {};' : 'module.exports = content.locals || {};'}`;
       }
@@ -241,0 +249,0 @@ }

dist/options.json

@@ -36,2 +36,12 @@ {
       "type": "boolean"
+    },
+    "modules": {
+      "type": "object",
+      "additionalProperties": false,
+      "properties": {
+        "namedExport": {
+          "description": "Enables/disables ES modules named export for locals (https://webpack.js.org/plugins/mini-css-extract-plugin/#namedexport).",
+          "type": "boolean"
+        }
+      }
     }
@@ -38,0 +48,0 @@ },

dist/runtime/injectStylesIntoStyleTag.js

@@ -176,3 +176,3 @@ "use strict";
 
-  if (sourceMap && btoa) {
+  if (sourceMap && typeof btoa !== 'undefined') {
     css += "\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap)))), " */");
@@ -179,0 +179,0 @@ } // For old IE

dist/runtime/isEqualLocals.js

 "use strict";
 
-function isEqualLocals(a, b) {
+function isEqualLocals(a, b, isNamedExport) {
   if (!a && b || a && !b) {
@@ -11,2 +11,7 @@ return false;
   for (p in a) {
+    if (isNamedExport && p === 'default') {
+      // eslint-disable-next-line no-continue
+      continue;
+    }
+
     if (a[p] !== b[p]) {
@@ -18,2 +23,7 @@ return false;
   for (p in b) {
+    if (isNamedExport && p === 'default') {
+      // eslint-disable-next-line no-continue
+      continue;
+    }
+
     if (!a[p]) {
@@ -20,0 +30,0 @@ return false;

package.json

 {
   "name": "style-loader",
-  "version": "1.2.1",
+  "version": "1.3.0",
   "description": "style loader module for webpack",
@@ -48,36 +48,36 @@ "license": "MIT",
     "loader-utils": "^2.0.0",
-    "schema-utils": "^2.6.6"
+    "schema-utils": "^2.7.0"
   },
   "devDependencies": {
-    "@babel/cli": "^7.8.4",
-    "@babel/core": "^7.9.0",
-    "@babel/preset-env": "^7.9.5",
-    "@commitlint/cli": "^8.3.5",
-    "@commitlint/config-conventional": "^8.3.4",
+    "@babel/cli": "^7.11.6",
+    "@babel/core": "^7.11.6",
+    "@babel/preset-env": "^7.11.5",
+    "@commitlint/cli": "^11.0.0",
+    "@commitlint/config-conventional": "^11.0.0",
     "@webpack-contrib/defaults": "^6.3.0",
     "@webpack-contrib/eslint-config-webpack": "^3.0.0",
-    "babel-jest": "^25.4.0",
+    "babel-jest": "^26.3.0",
     "cross-env": "^7.0.2",
-    "css-loader": "^3.5.3",
-    "del": "^5.1.0",
-    "del-cli": "^3.0.0",
-    "es-check": "^5.1.0",
-    "eslint": "^6.8.0",
-    "eslint-config-prettier": "^6.11.0",
-    "eslint-plugin-import": "^2.20.2",
-    "file-loader": "^6.0.0",
-    "husky": "^4.2.5",
-    "jest": "^25.4.0",
-    "jsdom": "^15.2.1",
-    "lint-staged": "^10.1.7",
-    "memfs": "^3.1.2",
+    "css-loader": "^4.3.0",
+    "del": "^6.0.0",
+    "del-cli": "^3.0.1",
+    "es-check": "^5.1.1",
+    "eslint": "^7.10.0",
+    "eslint-config-prettier": "^6.12.0",
+    "eslint-plugin-import": "^2.22.1",
+    "file-loader": "^6.1.0",
+    "husky": "^4.3.0",
+    "jest": "^26.4.2",
+    "jsdom": "^16.4.0",
+    "lint-staged": "^10.4.0",
+    "memfs": "^3.2.0",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.0.5",
-    "sass": "^1.26.5",
-    "sass-loader": "^8.0.2",
+    "prettier": "^2.1.2",
+    "sass": "^1.26.11",
+    "sass-loader": "^10.0.2",
     "semver": "^7.3.2",
-    "standard-version": "^7.1.0",
-    "webpack": "^4.43.0",
-    "webpack-cli": "^3.3.11",
-    "webpack-dev-server": "^3.10.3"
+    "standard-version": "^9.0.0",
+    "webpack": "^4.44.2",
+    "webpack-cli": "^3.3.12",
+    "webpack-dev-server": "^3.11.0"
   },
@@ -84,0 +84,0 @@ "keywords": [

README.md

@@ -64,9 +64,10 @@ <div align="center">
 
-|              Name               |         Type         |  Default   | Description                                              |
-| :-----------------------------: | :------------------: | :--------: | :------------------------------------------------------- |
-| [**`injectType`**](#injecttype) |      `{String}`      | `styleTag` | Allows to setup how styles will be injected into the DOM |
-| [**`attributes`**](#attributes) |      `{Object}`      |    `{}`    | Adds custom attributes to tag                            |
-|     [**`insert`**](#insert)     | `{String\|Function}` |   `head`   | Inserts tag at the given position into the DOM           |
-|       [**`base`**](#base)       |      `{Number}`      |   `true`   | Sets module ID base (DLLPlugin)                          |
-|   [**`esModule`**](#esmodule)   |     `{Boolean}`      |  `false`   | Use ES modules syntax                                    |
+|              Name               |         Type         |   Default   | Description                                              |
+| :-----------------------------: | :------------------: | :---------: | :------------------------------------------------------- |
+| [**`injectType`**](#injecttype) |      `{String}`      | `styleTag`  | Allows to setup how styles will be injected into the DOM |
+| [**`attributes`**](#attributes) |      `{Object}`      |    `{}`     | Adds custom attributes to tag                            |
+|     [**`insert`**](#insert)     | `{String\|Function}` |   `head`    | Inserts tag at the given position into the DOM           |
+|       [**`base`**](#base)       |      `{Number}`      |   `true`    | Sets module ID base (DLLPlugin)                          |
+|   [**`esModule`**](#esmodule)   |     `{Boolean}`      |   `false`   | Use ES modules syntax                                    |
+|    [**`modules`**](#modules)    |      `{Object}`      | `undefined` | Configuration CSS Modules                                |
 
@@ -574,3 +575,3 @@ ### `injectType`
         test: /\.css$/i,
-        loader: 'css-loader',
+        loader: 'style-loader',
         options: {
@@ -585,2 +586,77 @@ esModule: true,
 
+### `modules`
+
+Type: `Object`
+Default: `undefined`
+
+Configuration CSS Modules.
+
+#### `namedExport`
+
+Type: `Boolean`
+Default: `false`
+
+Enables/disables ES modules named export for locals.
+
+> ⚠ Names of locals are converted to `camelCase`.
+
+> ⚠ It is not allowed to use JavaScript reserved words in css class names.
+
+> ⚠ Options `esModule` and `modules.namedExport` in `css-loader` and `style-loader` should be enabled.
+
+**styles.css**
+
+```css
+.foo-baz {
+  color: red;
+}
+.bar {
+  color: blue;
+}
+```
+
+**index.js**
+
+```js
+import { fooBaz, bar } from './styles.css';
+
+console.log(fooBaz, bar);
+```
+
+You can enable a ES module named export using:
+
+**webpack.config.js**
+
+```js
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        use: [
+          {
+            loader: 'style-loader',
+            options: {
+              esModule: true,
+              modules: {
+                namedExport: true,
+              },
+            },
+          },
+          {
+            loader: 'css-loader',
+            options: {
+              esModule: true,
+              modules: {
+                namedExport: true,
+              },
+            },
+          },
+        ],
+      },
+    ],
+  },
+};
+```
+
 ## Examples
@@ -587,0 +663,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

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

56951

increased by6.55%

Lines of code

518

increased by5.28%

Number of lines in readme file

894

increased by9.29%

Dependency changes

• Updatedschema-utils@^2.7.0