diff --git a/src/CssDependency.js b/src/CssDependency.js index 3e2ff817..d55fb3f9 100644 --- a/src/CssDependency.js +++ b/src/CssDependency.js @@ -1,6 +1,6 @@ import webpack from 'webpack'; -export default class CssDependency extends webpack.Dependency { +class CssDependency extends webpack.Dependency { constructor( { identifier, content, media, sourceMap }, context, @@ -19,4 +19,53 @@ export default class CssDependency extends webpack.Dependency { getResourceIdentifier() { return `css-module-${this.identifier}-${this.identifierIndex}`; } + + serialize(context) { + const { write } = context; + + write(this.identifier); + write(this.content); + write(this.media); + write(this.sourceMap); + write(this.context); + write(this.identifierIndex); + + super.serialize(context); + } + + deserialize(context) { + super.deserialize(context); + } } + +if (webpack.util && webpack.util.serialization) { + webpack.util.serialization.register( + CssDependency, + 'mini-css-extract-plugin/src/CssDependency', + null, + { + serialize(instance, context) { + instance.serialize(context); + }, + deserialize(context) { + const { read } = context; + const dep = new CssDependency( + { + identifier: read(), + content: read(), + media: read(), + sourceMap: read(), + }, + read(), + read() + ); + + dep.deserialize(context); + + return dep; + }, + } + ); +} + +export default CssDependency; diff --git a/src/CssModule.js b/src/CssModule.js index 50c53435..1025370d 100644 --- a/src/CssModule.js +++ b/src/CssModule.js @@ -2,16 +2,24 @@ import webpack from 'webpack'; import { MODULE_TYPE } from './utils'; -export default class CssModule extends webpack.Module { - constructor(dependency) { - super(MODULE_TYPE, dependency.context); +class CssModule extends webpack.Module { + constructor({ + context, + identifier, + identifierIndex, + content, + media, + sourceMap, + }) { + super(MODULE_TYPE, context); this.id = ''; - this._identifier = dependency.identifier; - this._identifierIndex = dependency.identifierIndex; - this.content = dependency.content; - this.media = dependency.media; - this.sourceMap = dependency.sourceMap; + this._context = context; + this._identifier = identifier; + this._identifierIndex = identifierIndex; + this.content = content; + this.media = media; + this.sourceMap = sourceMap; } // no source() so webpack doesn't do add stuff to the bundle @@ -55,6 +63,7 @@ export default class CssModule extends webpack.Module { build(options, compilation, resolver, fileSystem, callback) { this.buildInfo = {}; this.buildMeta = {}; + callback(); } @@ -65,4 +74,52 @@ export default class CssModule extends webpack.Module { hash.update(this.media || ''); hash.update(this.sourceMap ? JSON.stringify(this.sourceMap) : ''); } + + serialize(context) { + const { write } = context; + + write(this._context); + write(this._identifier); + write(this._identifierIndex); + write(this.content); + write(this.media); + write(this.sourceMap); + + super.serialize(context); + } + + deserialize(context) { + super.deserialize(context); + } } + +if (webpack.util && webpack.util.serialization) { + webpack.util.serialization.register( + CssModule, + 'mini-css-extract-plugin/src/CssModule', + null, + { + serialize(instance, context) { + instance.serialize(context); + }, + deserialize(context) { + const { read } = context; + + const dep = new CssModule({ + context: read(), + identifier: read(), + identifierIndex: read(), + content: read(), + media: read(), + sourceMap: read(), + }); + + dep.deserialize(context); + + return dep; + }, + } + ); +} + +export default CssModule; diff --git a/test/TestCache.test.js b/test/TestCache.test.js new file mode 100644 index 00000000..32d9785b --- /dev/null +++ b/test/TestCache.test.js @@ -0,0 +1,89 @@ +/** + * @jest-environment node + */ + +import path from 'path'; + +import webpack from 'webpack'; +import del from 'del'; + +const fileSystemCacheDirectory = path.resolve( + __dirname, + './outputs/cache/type-filesystem' +); + +del.sync(fileSystemCacheDirectory); + +describe('TestCache', () => { + it('should work', async () => { + if (webpack.version[0] !== '4') { + const casesDirectory = path.resolve(__dirname, 'cases'); + const directoryForCase = path.resolve(casesDirectory, 'simple'); + // eslint-disable-next-line import/no-dynamic-require, global-require + const webpackConfig = require(path.resolve( + directoryForCase, + 'webpack.config.js' + )); + + const compiler1 = webpack({ + ...webpackConfig, + mode: 'development', + context: directoryForCase, + cache: { + type: 'filesystem', + cacheDirectory: fileSystemCacheDirectory, + idleTimeout: 0, + idleTimeoutForInitialStore: 0, + }, + }); + + await new Promise((resolve, reject) => { + compiler1.run((error, stats) => { + if (error) { + reject(error); + + return; + } + + expect(stats.compilation.warnings).toHaveLength(0); + expect(stats.compilation.errors).toHaveLength(0); + + compiler1.close(() => { + resolve(); + }); + }); + }); + + const compiler2 = webpack({ + ...webpackConfig, + mode: 'development', + context: directoryForCase, + cache: { + type: 'filesystem', + cacheDirectory: fileSystemCacheDirectory, + idleTimeout: 0, + idleTimeoutForInitialStore: 0, + }, + }); + + await new Promise((resolve, reject) => { + compiler2.run((error, stats) => { + if (error) { + reject(error); + + return; + } + + expect(stats.compilation.warnings).toHaveLength(0); + expect(stats.compilation.errors).toHaveLength(0); + + compiler2.close(() => { + resolve(); + }); + }); + }); + } else { + expect(true).toBe(true); + } + }); +}); diff --git a/test/cases/cache/expected/main.css b/test/cases/cache/expected/main.css deleted file mode 100644 index cebc5c1c..00000000 --- a/test/cases/cache/expected/main.css +++ /dev/null @@ -1,4 +0,0 @@ -body { - background: red; -} - diff --git a/test/cases/cache/index.js b/test/cases/cache/index.js deleted file mode 100644 index aa3357bf..00000000 --- a/test/cases/cache/index.js +++ /dev/null @@ -1 +0,0 @@ -import './style.css'; diff --git a/test/cases/cache/style.css b/test/cases/cache/style.css deleted file mode 100644 index 67ce83e4..00000000 --- a/test/cases/cache/style.css +++ /dev/null @@ -1,3 +0,0 @@ -body { - background: red; -} diff --git a/test/cases/cache/webpack.config.js b/test/cases/cache/webpack.config.js deleted file mode 100644 index 7303146a..00000000 --- a/test/cases/cache/webpack.config.js +++ /dev/null @@ -1,33 +0,0 @@ -import path from 'path'; - -import del from 'del'; - -import Self from '../../../src'; - -const fileSystemCacheDirectory = path.resolve( - __dirname, - '../../outputs/cache/type-filesystem' -); - -del.sync(fileSystemCacheDirectory); - -module.exports = { - entry: './index.js', - cache: { - type: 'filesystem', - cacheDirectory: fileSystemCacheDirectory, - }, - module: { - rules: [ - { - test: /\.css$/, - use: [Self.loader, 'css-loader'], - }, - ], - }, - plugins: [ - new Self({ - filename: '[name].css', - }), - ], -};