diff --git a/.editorconfig b/.editorconfig index 9f89f364..aa6d2b06 100644 --- a/.editorconfig +++ b/.editorconfig @@ -11,3 +11,6 @@ trim_trailing_whitespace = true [*.md] insert_final_newline = true trim_trailing_whitespace = false + +[test/cases/**] +insert_final_newline = false diff --git a/test/cases/es-module-concatenation/a.css b/test/cases/es-module-concatenation/a.css new file mode 100644 index 00000000..9cad053c --- /dev/null +++ b/test/cases/es-module-concatenation/a.css @@ -0,0 +1,3 @@ +.a { + background: red; +} diff --git a/test/cases/es-module-concatenation/b.css b/test/cases/es-module-concatenation/b.css new file mode 100644 index 00000000..295b4a8f --- /dev/null +++ b/test/cases/es-module-concatenation/b.css @@ -0,0 +1,3 @@ +.b { + background: green; +} diff --git a/test/cases/es-module-concatenation/c.css b/test/cases/es-module-concatenation/c.css new file mode 100644 index 00000000..cbdd76cc --- /dev/null +++ b/test/cases/es-module-concatenation/c.css @@ -0,0 +1,3 @@ +.c { + background: blue; +} diff --git a/test/cases/es-module-concatenation/expected/webpack-4/main.css b/test/cases/es-module-concatenation/expected/webpack-4/main.css new file mode 100644 index 00000000..a5728976 --- /dev/null +++ b/test/cases/es-module-concatenation/expected/webpack-4/main.css @@ -0,0 +1,12 @@ +.a { + background: red; +} + +.b { + background: green; +} + +.c { + background: blue; +} + diff --git a/test/cases/es-module-concatenation/expected/webpack-4/main.js b/test/cases/es-module-concatenation/expected/webpack-4/main.js new file mode 100644 index 00000000..001ba1de --- /dev/null +++ b/test/cases/es-module-concatenation/expected/webpack-4/main.js @@ -0,0 +1,111 @@ +/******/ (function(modules) { // webpackBootstrap +/******/ // The module cache +/******/ var installedModules = {}; +/******/ +/******/ // The require function +/******/ function __webpack_require__(moduleId) { +/******/ +/******/ // Check if module is in cache +/******/ if(installedModules[moduleId]) { +/******/ return installedModules[moduleId].exports; +/******/ } +/******/ // Create a new module (and put it into the cache) +/******/ var module = installedModules[moduleId] = { +/******/ i: moduleId, +/******/ l: false, +/******/ exports: {} +/******/ }; +/******/ +/******/ // Execute the module function +/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); +/******/ +/******/ // Flag the module as loaded +/******/ module.l = true; +/******/ +/******/ // Return the exports of the module +/******/ return module.exports; +/******/ } +/******/ +/******/ +/******/ // expose the modules object (__webpack_modules__) +/******/ __webpack_require__.m = modules; +/******/ +/******/ // expose the module cache +/******/ __webpack_require__.c = installedModules; +/******/ +/******/ // define getter function for harmony exports +/******/ __webpack_require__.d = function(exports, name, getter) { +/******/ if(!__webpack_require__.o(exports, name)) { +/******/ Object.defineProperty(exports, name, { enumerable: true, get: getter }); +/******/ } +/******/ }; +/******/ +/******/ // define __esModule on exports +/******/ __webpack_require__.r = function(exports) { +/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) { +/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' }); +/******/ } +/******/ Object.defineProperty(exports, '__esModule', { value: true }); +/******/ }; +/******/ +/******/ // create a fake namespace object +/******/ // mode & 1: value is a module id, require it +/******/ // mode & 2: merge all properties of value into the ns +/******/ // mode & 4: return value when already ns object +/******/ // mode & 8|1: behave like require +/******/ __webpack_require__.t = function(value, mode) { +/******/ if(mode & 1) value = __webpack_require__(value); +/******/ if(mode & 8) return value; +/******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value; +/******/ var ns = Object.create(null); +/******/ __webpack_require__.r(ns); +/******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value }); +/******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key)); +/******/ return ns; +/******/ }; +/******/ +/******/ // getDefaultExport function for compatibility with non-harmony modules +/******/ __webpack_require__.n = function(module) { +/******/ var getter = module && module.__esModule ? +/******/ function getDefault() { return module['default']; } : +/******/ function getModuleExports() { return module; }; +/******/ __webpack_require__.d(getter, 'a', getter); +/******/ return getter; +/******/ }; +/******/ +/******/ // Object.prototype.hasOwnProperty.call +/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; +/******/ +/******/ // __webpack_public_path__ +/******/ __webpack_require__.p = ""; +/******/ +/******/ +/******/ // Load entry module and return exports +/******/ return __webpack_require__(__webpack_require__.s = 0); +/******/ }) +/************************************************************************/ +/******/ ([ +/* 0 */ +/***/ (function(module, __webpack_exports__, __webpack_require__) { + +"use strict"; +// ESM COMPAT FLAG +__webpack_require__.r(__webpack_exports__); + +// CONCATENATED MODULE: ./a.css +// extracted by mini-css-extract-plugin + +// CONCATENATED MODULE: ./b.css +// extracted by mini-css-extract-plugin + +// CONCATENATED MODULE: ./c.css +// extracted by mini-css-extract-plugin + +// CONCATENATED MODULE: ./index.js + + + + + +/***/ }) +/******/ ]); \ No newline at end of file diff --git a/test/cases/es-module-concatenation/expected/webpack-5/main.css b/test/cases/es-module-concatenation/expected/webpack-5/main.css new file mode 100644 index 00000000..a5728976 --- /dev/null +++ b/test/cases/es-module-concatenation/expected/webpack-5/main.css @@ -0,0 +1,12 @@ +.a { + background: red; +} + +.b { + background: green; +} + +.c { + background: blue; +} + diff --git a/test/cases/es-module-concatenation/expected/webpack-5/main.js b/test/cases/es-module-concatenation/expected/webpack-5/main.js new file mode 100644 index 00000000..370eb6c2 --- /dev/null +++ b/test/cases/es-module-concatenation/expected/webpack-5/main.js @@ -0,0 +1,69 @@ +/******/ (() => { // webpackBootstrap +/******/ "use strict"; +/******/ var __webpack_modules__ = ([ +/* 0 */ +/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { + +// ESM COMPAT FLAG +__webpack_require__.r(__webpack_exports__); + +// CONCATENATED MODULE: ./a.css +// extracted by mini-css-extract-plugin + +// CONCATENATED MODULE: ./b.css +// extracted by mini-css-extract-plugin + +// CONCATENATED MODULE: ./c.css +// extracted by mini-css-extract-plugin + +// CONCATENATED MODULE: ./index.js + + + + + +/***/ }) +/******/ ]); +/************************************************************************/ +/******/ // The module cache +/******/ var __webpack_module_cache__ = {}; +/******/ +/******/ // The require function +/******/ function __webpack_require__(moduleId) { +/******/ // Check if module is in cache +/******/ if(__webpack_module_cache__[moduleId]) { +/******/ return __webpack_module_cache__[moduleId].exports; +/******/ } +/******/ // Create a new module (and put it into the cache) +/******/ var module = __webpack_module_cache__[moduleId] = { +/******/ // no module.id needed +/******/ // no module.loaded needed +/******/ exports: {} +/******/ }; +/******/ +/******/ // Execute the module function +/******/ __webpack_modules__[moduleId](module, module.exports, __webpack_require__); +/******/ +/******/ // Return the exports of the module +/******/ return module.exports; +/******/ } +/******/ +/************************************************************************/ +/******/ /* webpack/runtime/make namespace object */ +/******/ (() => { +/******/ // define __esModule on exports +/******/ __webpack_require__.r = (exports) => { +/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) { +/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' }); +/******/ } +/******/ Object.defineProperty(exports, '__esModule', { value: true }); +/******/ }; +/******/ })(); +/******/ +/************************************************************************/ +/******/ // startup +/******/ // Load entry module +/******/ __webpack_require__(0); +/******/ // This entry module used 'exports' so it can't be inlined +/******/ })() +; \ No newline at end of file diff --git a/test/cases/es-module-concatenation/index.js b/test/cases/es-module-concatenation/index.js new file mode 100644 index 00000000..134f6474 --- /dev/null +++ b/test/cases/es-module-concatenation/index.js @@ -0,0 +1,3 @@ +import './a.css'; +import './b.css'; +import './c.css'; diff --git a/test/cases/es-module-concatenation/webpack.config.js b/test/cases/es-module-concatenation/webpack.config.js new file mode 100644 index 00000000..88877333 --- /dev/null +++ b/test/cases/es-module-concatenation/webpack.config.js @@ -0,0 +1,29 @@ +import Self from '../../../src'; + +module.exports = { + entry: './index.js', + optimization: { + concatenateModules: true, + }, + module: { + rules: [ + { + test: /\.css$/, + use: [ + { + loader: Self.loader, + options: { + esModule: true, + }, + }, + 'css-loader', + ], + }, + ], + }, + plugins: [ + new Self({ + filename: '[name].css', + }), + ], +}; diff --git a/test/enforce-esm.test.js b/test/enforce-esm.test.js index 57795488..cc4afe51 100644 --- a/test/enforce-esm.test.js +++ b/test/enforce-esm.test.js @@ -1,5 +1,9 @@ +import webpack from 'webpack'; + import { getCompiler, source, compile } from './helpers'; +const isWebpack5 = webpack.version[0] === '5'; + it('should enforce esm for empty module with options.esModule', async (done) => { const compiler = getCompiler( './esm.js', @@ -11,6 +15,7 @@ it('should enforce esm for empty module with options.esModule', async (done) => ); const stats = await compile(compiler); expect(stats.hasErrors()).toBe(false); + expect(stats.compilation.modules.length).toBe(isWebpack5 ? 4 : 2); expect(source('./simple.css', stats)).toMatchInlineSnapshot(` "// extracted by mini-css-extract-plugin export {};" @@ -29,6 +34,7 @@ it('should keep empty module without options.esModule', async (done) => { ); const stats = await compile(compiler); expect(stats.hasErrors()).toBe(false); + expect(stats.compilation.modules.length).toBe(isWebpack5 ? 7 : 3); expect(source('./simple.css', stats)).toMatchInlineSnapshot( `"// extracted by mini-css-extract-plugin"` );