added color verbose output via ANSI color library - ansis

added the test case for styles imported from javascript

.codecov.yml

@@ -0,0 +1,11 @@
+coverage:
+  status:
+    project:
+      default:
+        target: 90%
+    patch:
+      default:
+        target: 90%
+
+ignore:
+  - test/.*

CHANGELOG.md

@@ -1,70 +1,76 @@
-## 0.7.2 (Dec 13, 2021) The last stable version
-- add new option `enable` to enable / disable the plugin, e.g. by development
-- add support of `RegExp` for option `extensions`
+## 0.7.3 (Jan 30, 2022) The last stable version
+- added color verbose output via ANSI color library - ansis
+- added the test case for styles imported from javascript 
+
+## 0.7.2 (Dec 13, 2021)
+- added new option `enable` to enable / disable the plugin, e.g. by development
+- added supports of `RegExp` for option `extensions`
 - remove deprecated option `silent`, use `verbose` to show process information (no braking change)
-- add GitHub workflow + codecov
-- color verbose output
+- added GitHub workflow + codecov
 - update packages
 - update readme
 
 ## 0.7.1 (Jan 14, 2021)
 ### Bugfixes
-- The issue infinite recursion by collect of resources from dependency modules by usage in react app some big components with many thousands dependencies.
+- fix the issue infinite recursion by collect of resources from dependency modules by usage in react app some big components with many thousands dependencies
 
 ## 0.7.0 (Dec 21, 2020)
 ### Breaking change
-- The `silent` option is deprecated and will be removed on Juni 30, 2021. Use option `verbose: true` to show in console each removed empty file. Defaults, `verbose: false`.
+- deprecate the `silent` option, it will be removed on Juni 30, 2021. Use option `verbose: true` to show in console each removed empty file. Defaults, `verbose: false`.
 
 ### Bugfixes
-- The issue `Maximum call stack size exceeded` was general fixed in all cases, for example, by usage the webpack setting `optimization.concatenateModules: true` and:
+- fix issue `Maximum call stack size exceeded` in all cases, for example, by usage the webpack setting `optimization.concatenateModules: true` and:
   - import react
   - import redux
   - webpack setting `externals.jquery: 'jQuery'` or other external libs
 - The issue if first in webpack entries are a styles and then a scripts.
 
 ## 0.6.4 (Dec 19, 2020)
-- Bugfix the error: `Maximum call stack size exceeded` with webpack setting `optimization.concatenateModules: true`and usage in script imports from `react` and `redux`. 
-- Add test case for single style without a scripts in webpack config.
-- Add silent mode in tests to suppress output log info in the console.
-- The option `ignore` can be the array of string or RegExp. Add default value of `ignore` as `['/node_modules/']` to ignore resources from `node_modules` path. 
-- Update npm packages.
+- fix the error: `Maximum call stack size exceeded` with webpack setting `optimization.concatenateModules: true`and usage in script imports from `react` and `redux`
+- added the test case for single style without a scripts in webpack config
+- added silent mode in tests to suppress output log info in the console
+- improve the option `ignore`:   
+  - it can be the array of string or RegExp
+  - added default value of `ignore` as `['/node_modules/']` to ignore resources from `node_modules` path
+- update npm packages.
 
 ## 0.6.3 (Oct 25, 2020)
-Fix BREAKING CHANGE in Webpack 5: No more changes should happen to `Compilation.assets`. Update code accord new API.
+- fix BREAKING CHANGE in Webpack 5: no more changes should happen to `Compilation.assets`
+- update code accord new API
 
 ## 0.6.2 (Oct 24, 2020)
 Update npm packages.
 
 ## 0.6.1 (Oct 20, 2020)
-The fork of original `https://github.com/fqborges/webpack-fix-style-only-entries` (ver. 0.6.0) for support only Webpack 5 and above. 
+The fork of original [webpack-fix-style-only-entries](https://github.com/fqborges/webpack-fix-style-only-entries) (ver. 0.6.0) for support only Webpack 5 and above. 
 The Webpack 4 is no longer supported.
 
-The changes from original version 0.6.0: 
+### The changes from original version 0.6.0: 
 
-- Added the feature: considers the use hash after the  .js and .mjs extension in file format like `.js?[hash]` or `.mjs?[hash]`. 
-The idea and requirement belong to https://github.com/MatiasMorici from PR https://github.com/fqborges/webpack-fix-style-only-entries/pull/27/commits/57eeecbcb85926578770c3845465e4012b02a196
+- feature: considers the use hash after the  .js and .mjs extension in file format like `.js?[hash]` or `.mjs?[hash]`. 
+The idea and requirement belong to [MatiasMorici](https://github.com/MatiasMorici) from [PR](https://github.com/fqborges/webpack-fix-style-only-entries/pull/27/commits/57eeecbcb85926578770c3845465e4012b02a196) 
 - In Webpack 5 fixed deprecation messages:
     - DEP_WEBPACK_CHUNK_HAS_ENTRY_MODULE
     - DEP_WEBPACK_CHUNK_ENTRY_MODULE
     - DEP_WEBPACK_DEPRECATION_ARRAY_TO_SET
     - DEP_WEBPACK_MODULE_INDEX
 
-- Update all packages for Webpack 5.
-- Fix integration test script for using with Webpack 5.
-- Fix a BUG of `terser-webpack-plugin` (generate the futile file `vendor.js.LICENSE.txt`) in the production test `vendor+multi-js-entry-css-entry`.
-- Fix module structure in README.md.
+- update all packages for Webpack 5.
+- fix integration test script for using with Webpack 5.
+- fix a BUG of `terser-webpack-plugin` (generate the futile file `vendor.js.LICENSE.txt`) in the production test `vendor+multi-js-entry-css-entry`.
+- fix module structure in README.md.
 
 ## 0.6.0 (Oct 13, 2020)
 Being overly careful here, this version is not breaking for almost all the existing users. It could possibly break in some edge cases, since it changes how modules are collected (from global to one each compilation) or if you have a workaround for a working webpack multi configuration.
 - BREAKING (POSSIBLY): Use a dedicated cache for every compilation (Prevent arbitrary files deletion when using Webpack with multi configurations) (PR [#39](https://github.com/fqborges/webpack-fix-style-only-entries/pull/39))
 
 ## 0.5.2 (Oct 07, 2020)
- - Webpack 5 support using ModuleGraph API (PR [#38](https://github.com/fqborges/webpack-fix-style-only-entries/pull/38))
+ - supports Webpack 5 using ModuleGraph API (PR [#38](https://github.com/fqborges/webpack-fix-style-only-entries/pull/38))
  - npm audit fix: ([ea9dd7](https://github.com/fqborges/webpack-fix-style-only-entries/commit/ea9dd7bd7ade5b16623064a4850de39545e1e18e))
 
 ## 0.5.1 (Jun 13, 2020)
- - Fix Maximum call stack size exceeded (PR [#34](https://github.com/fqborges/webpack-fix-style-only-entries/pull/34))
- - Added CHANGELOG ([3e3767](https://github.com/fqborges/webpack-fix-style-only-entries/commit/3e3767d8998a53d807b5d5b10643d05b800aa79a))
+ - fix Maximum call stack size exceeded (PR [#34](https://github.com/fqborges/webpack-fix-style-only-entries/pull/34))
+ - added CHANGELOG ([3e3767](https://github.com/fqborges/webpack-fix-style-only-entries/commit/3e3767d8998a53d807b5d5b10643d05b800aa79a))
 
 ## 0.5.0 (May 18, 2020)
  - fix for [#23](https://github.com/fqborges/webpack-fix-style-only-entries/issues/23) ([37d350](https://github.com/fqborges/webpack-fix-style-only-entries/commit/37d350eec83f49c0b12729a93aa6cf2f96d92d0b))

README.md

@@ -1,4 +1,4 @@
-[![npm version](https://badgen.net/npm/v/webpack-remove-empty-scripts/0.7.2/)](https://www.npmjs.com/package/webpack-remove-empty-scripts/v/0.7.2)
+[![npm](https://img.shields.io/npm/v/webpack-remove-empty-scripts/latest?logo=npm&color=brightgreen "npm package")](https://www.npmjs.com/package/webpack-remove-empty-scripts/v/0.7.3)
 [![node](https://img.shields.io/node/v/webpack-remove-empty-scripts)](https://nodejs.org)
 [![node](https://img.shields.io/github/package-json/dependency-version/webdiscus/webpack-remove-empty-scripts/peer/webpack)](https://webpack.js.org/)
 [![codecov](https://codecov.io/gh/webdiscus/webpack-remove-empty-scripts/branch/master/graph/badge.svg)](https://codecov.io/gh/webdiscus/webpack-remove-empty-scripts)
@@ -44,7 +44,7 @@ You can find more info by the following issues:
 > Please test your project before using it in production.\
 > If you have a problem with the new version, please create a [new issue](https://github.com/webdiscus/webpack-remove-empty-scripts/issues). 
 
-> :warning: The last stable release is `0.7.2` in the branch [`stable`](https://github.com/webdiscus/webpack-remove-empty-scripts/tree/stable).
+> :warning: The last stable release is `0.7.3` in the branch [`stable`](https://github.com/webdiscus/webpack-remove-empty-scripts/tree/stable).
 
 ## Propose
 If you use the `mini-css-extract-plugin` only to extract `css` files from styles defined in webpack entry 
@@ -192,13 +192,15 @@ new RemoveEmptyScriptsPlugin({
 ## Also See
 
 - more examples of usages see in [test cases](https://github.com/webdiscus/webpack-remove-empty-scripts/tree/master/test/cases)
-- [`pug-plugin`][pug-plugin]
-- [`pug-loader`][pug-loader]
+- [ansis][ansis] - ANSI color styling of text in terminal
+- [pug-plugin][pug-plugin]
+- [pug-loader][pug-loader]
 
 ## License
 [ISC](https://github.com/webdiscus/webpack-remove-empty-scripts/blob/master/LICENSE)
 
 <!-- prettier-ignore-start -->
+[ansis]: https://github.com/webdiscus/ansis
 [pug-plugin]: https://github.com/webdiscus/pug-plugin
 [pug-loader]: https://github.com/webdiscus/pug-loader
 <!-- prettier-ignore-end -->

package.json

@@ -1,6 +1,6 @@
 {
   "name": "webpack-remove-empty-scripts",
-  "version": "0.7.2",
+  "version": "0.7.3",
   "description": "Webpack 5 plugin to remove empty scripts generated by usage only styles in webpack entry.",
   "keywords": [
     "webpack",
@@ -13,8 +13,8 @@
     "sass",
     "css",
     "js",
-    "mini-css-extract-plugin",
-    "webpack-fix-style-only-entries"
+    "entry",
+    "css-extract"
   ],
   "license": "ISC",
   "author": "webdiscus (https://github.com/webdiscus)",
@@ -63,20 +63,22 @@
   "peerDependencies": {
     "webpack": ">=5.32.0"
   },
-  "dependencies": {},
+  "dependencies": {
+    "ansis": "^1.3.4"
+  },
   "devDependencies": {
-    "@babel/core": "^7.16.0",
-    "@babel/preset-env": "^7.16.4",
-    "@types/jest": "^27.0.3",
+    "@babel/core": "^7.16.12",
+    "@babel/preset-env": "^7.16.11",
+    "@types/jest": "^27.4.0",
     "css-loader": "^6.5.1",
     "fs": "^0.0.1-security",
-    "html-loader": "^3.0.1",
-    "jest": "^27.4.4",
-    "mini-css-extract-plugin": "^2.4.5",
+    "html-loader": "^3.1.0",
+    "jest": "^27.4.7",
+    "mini-css-extract-plugin": "^2.5.3",
     "moment": "^2.29.1",
     "rimraf": "^3.0.2",
-    "terser-webpack-plugin": "^5.2.5",
-    "webpack": "^5.65.0",
+    "terser-webpack-plugin": "^5.3.0",
+    "webpack": "^5.67.0",
     "webpack-hot-middleware": "^2.25.1",
     "webpack-merge": "^5.8.0"
   }

src/index.js

@@ -3,7 +3,7 @@
  */
 
 const path = require('path');
-const colstr = require('./color-string');
+const ansis = require('ansis');
 
 const plugin = 'remove-empty-scripts';
 const defaultOptions = {
@@ -55,7 +55,7 @@ class WebpackRemoveEmptyScriptsPlugin {
         for (const module of chunkGraph.getChunkEntryModulesIterable(chunk)) {
           if (!compilation.modules.has(module)) {
             throw new Error(
-              `${plugin} checkConstraints: entry module in chunk but not in compilation ${chunk.debugId} ${module.debugId}`
+              `\n${ansis.black.bgRed(`[${plugin}]`)} entry module in chunk but not in compilation ${chunk.debugId} ${module.debugId}`
             );
           }
 
@@ -74,7 +74,7 @@ class WebpackRemoveEmptyScriptsPlugin {
           if (this.verbose) {
             const outputFile = path.join(outputPath, filename);
             console.log(
-              ` ${colstr.bgYellow(` ${plugin} `, colstr.colors.black)} remove ${colstr.cyan(outputFile)}`,
+              `${ansis.black.bgYellow(`[${plugin}]`)} remove ${ansis.cyan(outputFile)}`,
             );
           }
 

test/cases/css-entry-only/webpack.config.js

@@ -1,4 +1,4 @@
-const WebpackRemoveEmptyScripts = require('../../../src/index.js');
+const RemoveEmptyScriptsPlugin = require('../../../src/index.js');
 
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
@@ -16,7 +16,7 @@ module.exports = {
     ],
   },
   plugins: [
-    new WebpackRemoveEmptyScripts({
+    new RemoveEmptyScriptsPlugin({
       enabled: true,
       verbose: true,
     }),

test/cases/css-entry-with-ignored-hmr/webpack.config.js

@@ -1,4 +1,4 @@
-const WebpackRemoveEmptyScripts = require('../../../src/index.js');
+const RemoveEmptyScriptsPlugin = require('../../../src/index.js');
 
 const webpack = require('webpack');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
@@ -19,7 +19,7 @@ module.exports = {
     ],
   },
   plugins: [
-    new WebpackRemoveEmptyScripts({
+    new RemoveEmptyScriptsPlugin({
       ignore: [
         'webpack-hot-middleware',
       ]

test/cases/css-entry-with-query/webpack.config.js

@@ -1,4 +1,4 @@
-const WebpackRemoveEmptyScripts = require('../../../src/index.js');
+const RemoveEmptyScriptsPlugin = require('../../../src/index.js');
 
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
@@ -13,7 +13,7 @@ module.exports = {
     ],
   },
   plugins: [
-    new WebpackRemoveEmptyScripts(),
+    new RemoveEmptyScriptsPlugin(),
     new MiniCssExtractPlugin({
       filename: '[name].css',
     }),

test/cases/css-import/expected.json

@@ -0,0 +1,5 @@
+[
+  "main.css",
+  "main.js",
+  "style.css"
+]

test/cases/css-import/main.js

@@ -0,0 +1,2 @@
+import './vendor.css';
+console.log('main');

test/cases/css-import/style.css

@@ -0,0 +1,5 @@
+html,
+body {
+  width: 100%;
+  height: 100%;
+}

test/cases/css-import/vendor.css

@@ -0,0 +1,3 @@
+.vendor {
+  color: red;
+}

test/cases/css-import/webpack.config.js

@@ -0,0 +1,27 @@
+const RemoveEmptyScriptsPlugin = require('../../../src/index.js');
+
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+
+module.exports = {
+  entry: {
+    main: ['./style.css', './main.js' ],
+    style: ['./style.css'],
+  },
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        use: [MiniCssExtractPlugin.loader, 'css-loader'],
+      },
+    ],
+  },
+  plugins: [
+    new RemoveEmptyScriptsPlugin({
+      enabled: true,
+      verbose: true,
+    }),
+    new MiniCssExtractPlugin({
+      filename: '[name].css',
+    }),
+  ],
+};

test/cases/multi-configuration/webpack.config.js

@@ -1,4 +1,4 @@
-const WebpackRemoveEmptyScripts = require('../../../src/index.js');
+const RemoveEmptyScriptsPlugin = require('../../../src/index.js');
 
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
@@ -12,7 +12,7 @@ const baseConfig = {
     ],
   },
   plugins: [
-    new WebpackRemoveEmptyScripts(),
+    new RemoveEmptyScriptsPlugin(),
     new MiniCssExtractPlugin({
       filename: '[name].css',
     }),