css-loader - npm Package Compare versions

Comparing version 5.2.4 to 5.2.5

dist/runtime/cssWithMappingToString.js

@@ -11,3 +11,3 @@ "use strict";
 
-function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+function _iterableToArrayLimit(arr, i) { var _i = arr && (typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]); if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
 
@@ -14,0 +14,0 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }

dist/utils.js

@@ -25,2 +25,3 @@ "use strict";
 exports.combineRequests = combineRequests;
+exports.camelCase = camelCase;
 exports.WEBPACK_IGNORE_COMMENT_REGEXP = void 0;
@@ -42,4 +43,2 @@
 
-var _camelcase = _interopRequireDefault(require("camelcase"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -57,2 +56,52 @@
 
+const preserveCamelCase = string => {
+  let result = string;
+  let isLastCharLower = false;
+  let isLastCharUpper = false;
+  let isLastLastCharUpper = false;
+
+  for (let i = 0; i < result.length; i++) {
+    const character = result[i];
+
+    if (isLastCharLower && /[\p{Lu}]/u.test(character)) {
+      result = `${result.slice(0, i)}-${result.slice(i)}`;
+      isLastCharLower = false;
+      isLastLastCharUpper = isLastCharUpper;
+      isLastCharUpper = true;
+      i += 1;
+    } else if (isLastCharUpper && isLastLastCharUpper && /[\p{Ll}]/u.test(character)) {
+      result = `${result.slice(0, i - 1)}-${result.slice(i - 1)}`;
+      isLastLastCharUpper = isLastCharUpper;
+      isLastCharUpper = false;
+      isLastCharLower = true;
+    } else {
+      isLastCharLower = character.toLowerCase() === character && character.toUpperCase() !== character;
+      isLastLastCharUpper = isLastCharUpper;
+      isLastCharUpper = character.toUpperCase() === character && character.toLowerCase() !== character;
+    }
+  }
+
+  return result;
+};
+
+function camelCase(input) {
+  let result = input.trim();
+
+  if (result.length === 0) {
+    return "";
+  }
+
+  if (result.length === 1) {
+    return result.toLowerCase();
+  }
+
+  const hasUpperCase = result !== result.toLowerCase();
+
+  if (hasUpperCase) {
+    result = preserveCamelCase(result);
+  }
+
+  return result.replace(/^[_.\- ]+/, "").toLowerCase().replace(/[_.\- ]+([\p{Alpha}\p{N}_]|$)/gu, (_, p1) => p1.toUpperCase()).replace(/\d+([\p{Alpha}\p{N}_]|$)/gu, m => m.toUpperCase());
+}
+
 function escape(string) {
@@ -265,3 +314,3 @@ let output = "";
 
-  return (0, _camelcase.default)(localName);
+  return camelCase(localName);
 }
@@ -639,3 +688,3 @@
     if (options.modules.namedExport) {
-      localsCode += `export const ${name} = ${JSON.stringify(value)};\n`;
+      localsCode += `export var ${name} = ${JSON.stringify(value)};\n`;
     } else {
@@ -658,3 +707,3 @@ if (localsCode) {
           addExportToLocalsCode(name, value);
-          const modifiedName = (0, _camelcase.default)(name);
+          const modifiedName = camelCase(name);
 
@@ -670,3 +719,3 @@ if (modifiedName !== name) {
         {
-          addExportToLocalsCode((0, _camelcase.default)(name), value);
+          addExportToLocalsCode(camelCase(name), value);
           break;
@@ -673,0 +722,0 @@ }

package.json

 {
   "name": "css-loader",
-  "version": "5.2.4",
+  "version": "5.2.5",
   "description": "css loader module for webpack",
@@ -26,3 +26,3 @@ "license": "MIT",
     "commitlint": "commitlint --from=master",
-    "security": "npm audit",
+    "security": "npm audit --production",
     "lint:prettier": "prettier --list-different .",
@@ -36,3 +36,3 @@ "lint:js": "eslint --cache .",
     "test": "npm run test:coverage",
-    "prepare": "npm run build",
+    "prepare": "husky install && npm run build",
     "release": "standard-version"
@@ -47,6 +47,5 @@ },
   "dependencies": {
-    "camelcase": "^6.2.0",
     "icss-utils": "^5.1.0",
     "loader-utils": "^2.0.0",
-    "postcss": "^8.2.10",
+    "postcss": "^8.2.15",
     "postcss-modules-extract-imports": "^3.0.0",
@@ -61,7 +60,7 @@ "postcss-modules-local-by-default": "^4.0.0",
   "devDependencies": {
-    "@babel/cli": "^7.13.14",
-    "@babel/core": "^7.13.15",
-    "@babel/preset-env": "^7.13.15",
-    "@commitlint/cli": "^12.1.1",
-    "@commitlint/config-conventional": "^12.1.1",
+    "@babel/cli": "^7.14.3",
+    "@babel/core": "^7.14.3",
+    "@babel/preset-env": "^7.14.2",
+    "@commitlint/cli": "^12.1.4",
+    "@commitlint/config-conventional": "^12.1.4",
     "@webpack-contrib/eslint-config-webpack": "^3.0.0",
@@ -73,26 +72,26 @@ "babel-jest": "^26.6.3",
     "es-check": "^5.2.3",
-    "eslint": "^7.24.0",
-    "eslint-config-prettier": "^8.2.0",
-    "eslint-plugin-import": "^2.22.1",
+    "eslint": "^7.26.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-import": "^2.23.2",
     "file-loader": "^6.2.0",
-    "husky": "^4.3.8",
+    "husky": "^6.0.0",
     "jest": "^26.6.3",
     "less": "^4.1.1",
     "less-loader": "^7.1.0",
-    "lint-staged": "^10.5.4",
+    "lint-staged": "^11.0.0",
     "memfs": "^3.2.2",
-    "mini-css-extract-plugin": "^1.4.1",
+    "mini-css-extract-plugin": "^1.6.0",
     "npm-run-all": "^4.1.5",
-    "postcss-loader": "^4.0.4",
+    "postcss-loader": "^4.3.0",
     "postcss-preset-env": "^6.7.0",
-    "prettier": "^2.1.2",
-    "sass": "^1.32.8",
-    "sass-loader": "^10.1.0",
-    "standard-version": "^9.2.0",
+    "prettier": "^2.3.0",
+    "sass": "^1.32.13",
+    "sass-loader": "^10.2.0",
+    "standard-version": "^9.3.0",
     "strip-ansi": "^6.0.0",
     "style-loader": "^2.0.0",
     "stylus": "^0.54.8",
-    "stylus-loader": "^4.3.0",
+    "stylus-loader": "^4.3.3",
     "url-loader": "^4.1.1",
-    "webpack": "^5.34.0"
+    "webpack": "^5.37.1"
   },
@@ -99,0 +98,0 @@ "keywords": [

README.md

@@ -128,4 +128,3 @@ <div align="center">
 
-Enables/Disables `url`/`image-set` functions handling.
-Control `url()` resolving. Absolute paths and root-relative URLs now resolving(Version [4.0.0](https://github.com/webpack-contrib/css-loader/blob/master/CHANGELOG.md#400-2020-07-25) and above).
+Enables/Disables handling the CSS functions `url` and `image-set`. If set to `false`, `css-loader` will not parse any paths specified in `url` or `image-set`. A function can also be passed to control this behavior dynamically based on the path to the asset. Starting with version [4.0.0](https://github.com/webpack-contrib/css-loader/blob/master/CHANGELOG.md#400-2020-07-25), absolute paths are parsed based on the server root.
 
@@ -1136,2 +1135,34 @@ Examples resolutions:
 
+### Recommend
+
+For `production` builds it's recommended to extract the CSS from your bundle being able to use parallel loading of CSS/JS resources later on.
+This can be achieved by using the [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin), because it creates separate css files.
+For `development` mode (including `webpack-dev-server`) you can use [style-loader](https://github.com/webpack-contrib/style-loader), because it injects CSS into the DOM using multiple <style></style> and works faster.
+
+> i Do not use together `style-loader` and `mini-css-extract-plugin`.
+
+**webpack.config.js**
+
+```js
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const devMode = process.env.NODE_ENV !== "production";
+
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.(sa|sc|c)ss$/,
+        use: [
+          devMode ? "style-loader" : MiniCssExtractPlugin.loader,
+          "css-loader",
+          "postcss-loader",
+          "sass-loader",
+        ],
+      },
+    ],
+  },
+  plugins: [].concat(devMode ? [] : [new MiniCssExtractPlugin()]),
+};
+```
+
 ### Disable url resolving using the `/* webpackIgnore: true */` comment
@@ -1241,10 +1272,2 @@
 
-### Extract
-
-For production builds it's recommended to extract the CSS from your bundle being able to use parallel loading of CSS/JS resources later on.
-
-- This can be achieved by using the [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin) to extract the CSS when running in production mode.
-
-- As an alternative, if seeking better development performance and css outputs that mimic production. [extract-css-chunks-webpack-plugin](https://github.com/faceyspacey/extract-css-chunks-webpack-plugin) offers a hot module reload friendly, extended version of mini-css-extract-plugin. HMR real CSS files in dev, works like mini-css in non-dev
-
 ### Pure CSS, CSS modules and PostCSS
@@ -1251,0 +1274,0 @@

No alert changes

Improved metrics

Dependency count

11

decreased by-8.33%

Lines of code

1707

increased by2.4%

Number of lines in readme file

1486

increased by1.57%

Published versions last months

1

increased byInfinity%

Worsened metrics

Total package byte prevSize

101869

decreased by-24.73%

Number of package files

16

decreased by-5.88%

Dependency changes

• - Removedcamelcase@^6.2.0

• - Removedcamelcase@6.3.0(transitive)

• Updatedpostcss@^8.2.15