{"_id":"extract-css-chunks-webpack-plugin","_rev":"130-55999601e0e2e169ba009d653b5925b2","name":"extract-css-chunks-webpack-plugin","description":"Extract CSS from chunks into stylesheets + HMR. Supports Webpack 4 + SSR","dist-tags":{"latest":"4.10.0","next":"4.0.0-beta.3","mit":"4.7.2-mit"},"versions":{"1.0.3":{"name":"extract-css-chunks-webpack-plugin","version":"1.0.3","author":{"name":"James Gillmore","email":"james@faceyspacey.com"},"description":"Extract CSS from chunks into stylesheets + HMR","engines":{"node":">=4.3.0 < 5.0.0 || >= 5.10"},"license":"MIT","scripts":{"test":"mocha","travis":"npm run cover -- --report lcovonly","cover":"istanbul cover _mocha","release":"standard-version","build:example":"(cd example && webpack)","commit":"git-cz","semantic-release":"semantic-release pre && npm publish && semantic-release post"},"peerDependencies":{"webpack":"^2.2.0"},"dependencies":{"ajv":"^4.11.2","async":"^2.1.2","loader-utils":"^1.0.2","webpack-sources":"^0.1.0"},"devDependencies":{"codecov.io":"^0.1.2","coveralls":"^2.11.2","css-loader":"^0.26.1","file-loader":"^0.9.0","istanbul":"^0.4.5","mocha":"^3.2.0","mocha-lcov-reporter":"1.2.0","raw-loader":"^0.5.1","should":"^11.1.2","standard-version":"^4.0.0","style-loader":"^0.13.0","webpack":"^2.2.0","commitizen":"^2.9.6","cz-conventional-changelog":"^2.0.0","semantic-release":"^6.3.2"},"homepage":"http://github.com/faceyspacey/extract-css-chunks-webpack-plugin","repository":{"type":"git","url":"git+ssh://git@github.com/faceyspacey/extract-css-chunks-webpack-plugin.git"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"gitHead":"5c8fc70fc348d5232eace5427785dfc98329f400","bugs":{"url":"https://github.com/faceyspacey/extract-css-chunks-webpack-plugin/issues"},"_id":"extract-css-chunks-webpack-plugin@1.0.3","_shasum":"5c0d234b68390b4ccb4209876396de483bf7898f","_from":".","_npmVersion":"4.1.2","_nodeVersion":"7.7.2","_npmUser":{"name":"faceyspacey","email":"james@faceyspacey.com"},"dist":{"shasum":"5c0d234b68390b4ccb4209876396de483bf7898f","tarball":"https://registry.npmjs.org/extract-css-chunks-webpack-plugin/-/extract-css-chunks-webpack-plugin-1.0.3.tgz","integrity":"sha512-aWKYbgFU9vHPV2iA+vbFwtvuPJQ4iIwjqOFmCWwcdfpzZGakT0CL2HZkAnKApUWCmepYYRuq6GoWX8atKuzDaA==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCEjKMElkuxrQ9C2T9PB9CKW59AHcFlMq8TMNeJtzZ/SAIhAPY4Kui0RnUGxIn7vpu0jL63HA0enfuQWt70fWfX3F/P"}]},"maintainers":[{"name":"faceyspacey","email":"james@faceyspacey.com"}],"_npmOperationalInternal":{"host":"packages-18-east.internal.npmjs.com","tmp":"tmp/extract-css-chunks-webpack-plugin-1.0.3.tgz_1493279743030_0.010658432263880968"},"directories":{}},"1.0.4":{"name":"extract-css-chunks-webpack-plugin","version":"1.0.4","author":{"name":"James Gillmore","email":"james@faceyspacey.com"},"description":"Extract CSS from chunks into stylesheets + HMR","engines":{"node":">=4.3.0 < 5.0.0 || >= 5.10"},"license":"MIT","scripts":{"test":"mocha","travis":"npm run cover -- --report lcovonly","cover":"istanbul cover _mocha","release":"standard-version","build:example":"(cd example && webpack)","commit":"git-cz","semantic-release":"semantic-release pre && npm publish && semantic-release post"},"peerDependencies":{"webpack":"^2.2.0"},"dependencies":{"ajv":"^4.11.2","async":"^2.1.2","loader-utils":"^1.0.2","webpack-sources":"^0.1.0"},"devDependencies":{"codecov.io":"^0.1.2","coveralls":"^2.11.2","css-loader":"^0.26.1","file-loader":"^0.9.0","istanbul":"^0.4.5","mocha":"^3.2.0","mocha-lcov-reporter":"1.2.0","raw-loader":"^0.5.1","should":"^11.1.2","standard-version":"^4.0.0","style-loader":"^0.13.0","webpack":"^2.2.0","commitizen":"^2.9.6","cz-conventional-changelog":"^2.0.0","semantic-release":"^6.3.2"},"homepage":"http://github.com/faceyspacey/extract-css-chunks-webpack-plugin","repository":{"type":"git","url":"git+ssh://git@github.com/faceyspacey/extract-css-chunks-webpack-plugin.git"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"gitHead":"5c8fc70fc348d5232eace5427785dfc98329f400","bugs":{"url":"https://github.com/faceyspacey/extract-css-chunks-webpack-plugin/issues"},"_id":"extract-css-chunks-webpack-plugin@1.0.4","_shasum":"4a223b2c397192294d861c5f9a23295ccd227ac6","_from":".","_npmVersion":"4.1.2","_nodeVersion":"7.7.2","_npmUser":{"name":"faceyspacey","email":"james@faceyspacey.com"},"dist":{"shasum":"4a223b2c397192294d861c5f9a23295ccd227ac6","tarball":"https://registry.npmjs.org/extract-css-chunks-webpack-plugin/-/extract-css-chunks-webpack-plugin-1.0.4.tgz","integrity":"sha512-t98vF8Uc3KE+WgfnT6O2G9MMZu8QEEGuwq6m3QCdk0lOF29fJUIWInRGiLr8gc7hK1DZAduUAp2/wXP1e54GIw==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCb5gi7TGLJK/jtpzw+TUQooyN2D/rT5PV0odriMacudAIgXEq3uJmCQK1Rwle7BJHM17wANF3O7PfUI+v+RpR4lpI="}]},"maintainers":[{"name":"faceyspacey","email":"james@faceyspacey.com"}],"_npmOperationalInternal":{"host":"packages-18-east.internal.npmjs.com","tmp":"tmp/extract-css-chunks-webpack-plugin-1.0.4.tgz_1493279801899_0.43147030123509467"},"directories":{}},"1.0.5":{"name":"extract-css-chunks-webpack-plugin","version":"1.0.5","author":{"name":"James Gillmore","email":"james@faceyspacey.com"},"description":"Extract CSS from chunks into stylesheets + HMR","engines":{"node":">=4.3.0 < 5.0.0 || >= 5.10"},"license":"MIT","scripts":{"test":"mocha","travis":"npm run cover -- --report lcovonly","cover":"istanbul cover _mocha","release":"standard-version","build:example":"(cd example && webpack)","commit":"git-cz","semantic-release":"semantic-release pre && npm publish && semantic-release post"},"peerDependencies":{"webpack":"^2.2.0"},"dependencies":{"ajv":"^4.11.2","async":"^2.1.2","loader-utils":"^1.0.2","webpack-sources":"^0.1.0"},"devDependencies":{"codecov.io":"^0.1.2","coveralls":"^2.11.2","css-loader":"^0.26.1","file-loader":"^0.9.0","istanbul":"^0.4.5","mocha":"^3.2.0","mocha-lcov-reporter":"1.2.0","raw-loader":"^0.5.1","should":"^11.1.2","standard-version":"^4.0.0","style-loader":"^0.13.0","webpack":"^2.2.0","commitizen":"^2.9.6","cz-conventional-changelog":"^2.0.0","semantic-release":"^6.3.2"},"homepage":"http://github.com/faceyspacey/extract-css-chunks-webpack-plugin","repository":{"type":"git","url":"git+https://github.com/faceyspacey/extract-css-chunks-webpack-plugin.git"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"gitHead":"349f21902bd07cb231cf53a02545443bf5b9eac1","bugs":{"url":"https://github.com/faceyspacey/extract-css-chunks-webpack-plugin/issues"},"_id":"extract-css-chunks-webpack-plugin@1.0.5","_shasum":"3c76aaafc04ef73041b73093aa76aa6d0f7be6c4","_from":".","_npmVersion":"4.1.2","_nodeVersion":"7.7.2","_npmUser":{"name":"faceyspacey","email":"james@faceyspacey.com"},"dist":{"shasum":"3c76aaafc04ef73041b73093aa76aa6d0f7be6c4","tarball":"https://registry.npmjs.org/extract-css-chunks-webpack-plugin/-/extract-css-chunks-webpack-plugin-1.0.5.tgz","integrity":"sha512-5mxsyqMJLcDP/XhJir5aAKWpEh6s8afXH3PqMHSibqMrfd6Y4wUZhs/5blfawnoGHnl1H6amq9kZv3fhtp/T4Q==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDnm2Ph+idQJsf1Id4lYwoq81VA2OEGG5KfW3/bBzjbgQIhALs8Lpbjrk/zd6buFlQ4bssoXgp1z7xBN7pRUf1XqcY2"}]},"maintainers":[{"name":"faceyspacey","email":"james@faceyspacey.com"}],"_npmOperationalInternal":{"host":"packages-12-west.internal.npmjs.com","tmp":"tmp/extract-css-chunks-webpack-plugin-1.0.5.tgz_1493281854686_0.2989450916647911"},"directories":{}},"1.0.6":{"name":"extract-css-chunks-webpack-plugin","version":"1.0.6","author":{"name":"James Gillmore","email":"james@faceyspacey.com"},"description":"Extract CSS from chunks into stylesheets + HMR","engines":{"node":">=4.3.0 < 5.0.0 || >= 5.10"},"license":"MIT","scripts":{"test":"mocha","travis":"npm run cover -- --report lcovonly","cover":"istanbul cover _mocha","release":"standard-version","build:example":"(cd example && webpack)","commit":"git-cz","semantic-release":"semantic-release pre && npm publish && semantic-release post"},"peerDependencies":{"webpack":"^2.2.0"},"dependencies":{"ajv":"^4.11.2","async":"^2.1.2","loader-utils":"^1.0.2","webpack-sources":"^0.1.0"},"devDependencies":{"codecov.io":"^0.1.2","coveralls":"^2.11.2","css-loader":"^0.26.1","file-loader":"^0.9.0","istanbul":"^0.4.5","mocha":"^3.2.0","mocha-lcov-reporter":"1.2.0","raw-loader":"^0.5.1","should":"^11.1.2","standard-version":"^4.0.0","style-loader":"^0.13.0","webpack":"^2.2.0","commitizen":"^2.9.6","cz-conventional-changelog":"^2.0.0","semantic-release":"^6.3.2"},"homepage":"http://github.com/faceyspacey/extract-css-chunks-webpack-plugin","repository":{"type":"git","url":"git+https://github.com/faceyspacey/extract-css-chunks-webpack-plugin.git"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"gitHead":"0cc70db0adf997f01ac603642ad502b347ace960","bugs":{"url":"https://github.com/faceyspacey/extract-css-chunks-webpack-plugin/issues"},"_id":"extract-css-chunks-webpack-plugin@1.0.6","_shasum":"1665d7a0313016d1e6b8bae33cad78927d056d6c","_from":".","_npmVersion":"4.2.0","_nodeVersion":"7.9.0","_npmUser":{"name":"faceyspacey","email":"james@faceyspacey.com"},"dist":{"shasum":"1665d7a0313016d1e6b8bae33cad78927d056d6c","tarball":"https://registry.npmjs.org/extract-css-chunks-webpack-plugin/-/extract-css-chunks-webpack-plugin-1.0.6.tgz","integrity":"sha512-bpYR4+veA2TGXabS9K6wk/fx9BwZl9CkYCxs4s1zfq2N4mfKonwctsdFp2ATqMRFyULopmpJ7cz/of2hGvo4Eg==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD3cc8mbQDKE5JskS71ZGuv5jjTVrnLCdN5VPozfVSC5gIhAL2PV/FKeIZ+uLm1iz7s04WLFXNodMBARImj+6qi09BG"}]},"maintainers":[{"name":"faceyspacey","email":"james@faceyspacey.com"}],"_npmOperationalInternal":{"host":"packages-12-west.internal.npmjs.com","tmp":"tmp/extract-css-chunks-webpack-plugin-1.0.6.tgz_1493282293770_0.17289981595240533"},"directories":{}},"1.0.7":{"name":"extract-css-chunks-webpack-plugin","version":"1.0.7","author":{"name":"James Gillmore","email":"james@faceyspacey.com"},"description":"Extract CSS from chunks into stylesheets + HMR","engines":{"node":">=4.3.0 < 5.0.0 || >= 5.10"},"license":"MIT","scripts":{"test":"mocha","travis":"npm run cover -- --report lcovonly","cover":"istanbul cover _mocha","release":"standard-version","build:example":"(cd example && webpack)","commit":"git-cz","semantic-release":"semantic-release pre && npm publish && semantic-release post"},"peerDependencies":{"webpack":"^2.2.0"},"dependencies":{"ajv":"^5.0.0","async":"^2.1.2","loader-utils":"^1.0.2","webpack-sources":"^0.2.3"},"devDependencies":{"codecov.io":"^0.1.2","coveralls":"^2.11.2","css-loader":"^0.28.0","file-loader":"^0.11.1","istanbul":"^0.4.5","mocha":"^3.2.0","mocha-lcov-reporter":"1.3.0","raw-loader":"^0.5.1","should":"^11.1.2","standard-version":"^4.0.0","commitizen":"^2.9.6","cz-conventional-changelog":"^2.0.0","semantic-release":"^6.3.2","style-loader":"^0.16.1","webpack":"^2.2.0"},"homepage":"http://github.com/faceyspacey/extract-css-chunks-webpack-plugin","repository":{"type":"git","url":"git+https://github.com/faceyspacey/extract-css-chunks-webpack-plugin.git"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"gitHead":"2cb97758bf9e3b1617fa83fae5d74099f3b5ac99","bugs":{"url":"https://github.com/faceyspacey/extract-css-chunks-webpack-plugin/issues"},"_id":"extract-css-chunks-webpack-plugin@1.0.7","_shasum":"f4a8deaa911bad0bc8c4a38db84ecb87e680b0c1","_from":".","_npmVersion":"4.2.0","_nodeVersion":"7.9.0","_npmUser":{"name":"faceyspacey","email":"james@faceyspacey.com"},"dist":{"shasum":"f4a8deaa911bad0bc8c4a38db84ecb87e680b0c1","tarball":"https://registry.npmjs.org/extract-css-chunks-webpack-plugin/-/extract-css-chunks-webpack-plugin-1.0.7.tgz","integrity":"sha512-3Pz4LpFxrEo15zcgxMeGgQhK49zs7f5BE4IwHuec1bQmjmmWOy5WqY+l1ITqEqk2m8y5mPT6e0tHXKF69a32yw==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC/zHAeFI/TZIpWn/ymjG7R+W9uKKUyAat8yxegJiorBgIhAKVES/YKjHoRXJ32KikEMv5GgnNi14wGm8Pp6rXKWFMI"}]},"maintainers":[{"name":"faceyspacey","email":"james@faceyspacey.com"}],"_npmOperationalInternal":{"host":"packages-12-west.internal.npmjs.com","tmp":"tmp/extract-css-chunks-webpack-plugin-1.0.7.tgz_1493291801113_0.4613533434458077"},"directories":{}},"1.0.8":{"name":"extract-css-chunks-webpack-plugin","version":"1.0.8","author":{"name":"James Gillmore","email":"james@faceyspacey.com"},"description":"Extract CSS from chunks into stylesheets + HMR","engines":{"node":">=4.3.0 < 5.0.0 || >= 5.10"},"license":"MIT","scripts":{"test":"mocha","travis":"npm run cover -- --report lcovonly","cover":"istanbul cover _mocha","release":"standard-version","build:example":"(cd example && webpack)","commit":"git-cz","semantic-release":"semantic-release pre && npm publish && semantic-release post"},"peerDependencies":{"webpack":"^2.2.0"},"dependencies":{"ajv":"^4.11.2","async":"^2.1.2","loader-utils":"^1.0.2","style-loader":"^0.16.1","webpack-sources":"^0.2.3"},"devDependencies":{"codecov.io":"^0.1.2","commitizen":"^2.9.6","coveralls":"^2.11.2","css-loader":"^0.28.0","cz-conventional-changelog":"^2.0.0","file-loader":"^0.11.1","istanbul":"^0.4.5","mocha":"^3.2.0","mocha-lcov-reporter":"1.3.0","raw-loader":"^0.5.1","semantic-release":"^6.3.2","should":"^11.1.2","standard-version":"^4.0.0","webpack":"^2.2.0"},"homepage":"http://github.com/faceyspacey/extract-css-chunks-webpack-plugin","repository":{"type":"git","url":"git+https://github.com/faceyspacey/extract-css-chunks-webpack-plugin.git"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"gitHead":"ab32e742813500d6a041cbe9a055899ac1a85d31","bugs":{"url":"https://github.com/faceyspacey/extract-css-chunks-webpack-plugin/issues"},"_id":"extract-css-chunks-webpack-plugin@1.0.8","_shasum":"7b4a11908c2d596485c38560aad181bcee563960","_from":".","_npmVersion":"4.2.0","_nodeVersion":"7.9.0","_npmUser":{"name":"faceyspacey","email":"james@faceyspacey.com"},"dist":{"shasum":"7b4a11908c2d596485c38560aad181bcee563960","tarball":"https://registry.npmjs.org/extract-css-chunks-webpack-plugin/-/extract-css-chunks-webpack-plugin-1.0.8.tgz","integrity":"sha512-qsY+jTeretzwhJkdJL6uQhI5FRTup2YMkBXZCbPDpt35vHNkG8+VOpExC5O+9Fp0xZ+L9z7FMtf1lrfXlK4hAw==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD1rVDoYdXcmO7bIQuaAevjPJTaWmPtrudjSPKjdKr8DAIhAOMlNKJGWaFeGbM33glhiIaesDJez96jLYJCQsxzNpSI"}]},"maintainers":[{"name":"faceyspacey","email":"james@faceyspacey.com"}],"_npmOperationalInternal":{"host":"packages-18-east.internal.npmjs.com","tmp":"tmp/extract-css-chunks-webpack-plugin-1.0.8.tgz_1493295544831_0.860546683659777"},"directories":{}},"1.0.9":{"name":"extract-css-chunks-webpack-plugin","version":"1.0.9","author":{"name":"James Gillmore","email":"james@faceyspacey.com"},"description":"Extract CSS from chunks into stylesheets + HMR","engines":{"node":">=4.3.0 < 5.0.0 || >= 5.10"},"license":"MIT","scripts":{"test":"mocha","travis":"npm run cover -- --report lcovonly","cover":"istanbul cover _mocha","release":"standard-version","build:example":"(cd example && webpack)","commit":"git-cz","semantic-release":"semantic-release pre && npm publish && semantic-release post"},"peerDependencies":{"webpack":"^2.2.0"},"dependencies":{"ajv":"^4.11.2","async":"^2.1.2","jsesc":"^2.5.1","loader-utils":"^1.0.2","style-loader":"^0.16.1","webpack-sources":"^0.2.3"},"devDependencies":{"codecov.io":"^0.1.2","commitizen":"^2.9.6","coveralls":"^2.11.2","css-loader":"^0.28.0","cz-conventional-changelog":"^2.0.0","file-loader":"^0.11.1","istanbul":"^0.4.5","mocha":"^3.2.0","mocha-lcov-reporter":"1.3.0","raw-loader":"^0.5.1","semantic-release":"^6.3.2","should":"^11.1.2","standard-version":"^4.0.0","webpack":"^2.2.0"},"homepage":"http://github.com/faceyspacey/extract-css-chunks-webpack-plugin","repository":{"type":"git","url":"git+https://github.com/faceyspacey/extract-css-chunks-webpack-plugin.git"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"gitHead":"11532b4aa845e36721e4d636a8979978f32bcdf7","bugs":{"url":"https://github.com/faceyspacey/extract-css-chunks-webpack-plugin/issues"},"_id":"extract-css-chunks-webpack-plugin@1.0.9","_shasum":"127c52a282c748ccccea55eb6a174e1a7eba6be4","_from":".","_npmVersion":"4.2.0","_nodeVersion":"7.10.0","_npmUser":{"name":"faceyspacey","email":"james@faceyspacey.com"},"dist":{"shasum":"127c52a282c748ccccea55eb6a174e1a7eba6be4","tarball":"https://registry.npmjs.org/extract-css-chunks-webpack-plugin/-/extract-css-chunks-webpack-plugin-1.0.9.tgz","integrity":"sha512-z9Z9XvgoR5IwT7PCKxHzV6UmGmtC53cm+S6q5EIEzOpRcZpc/ILjd56aPfP0DTauPS6fZCZ4ccq6e2Ic2KM27Q==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC/QE1E/tZsH5Ba0TvA6CSZv0TBXeR/gTWCaJeGIiGqhgIgXgOf+5SrZ1lVrsfiXM8jS6pEIqQ2OefKAuTXdKcPtJM="}]},"maintainers":[{"name":"faceyspacey","email":"james@faceyspacey.com"}],"_npmOperationalInternal":{"host":"packages-12-west.internal.npmjs.com","tmp":"tmp/extract-css-chunks-webpack-plugin-1.0.9.tgz_1494151784162_0.7002078366931528"},"directories":{}},"1.0.10":{"name":"extract-css-chunks-webpack-plugin","version":"1.0.10","author":{"name":"James Gillmore","email":"james@faceyspacey.com"},"description":"Extract CSS from chunks into stylesheets + HMR","engines":{"node":">=4.3.0 < 5.0.0 || >= 5.10"},"license":"MIT","scripts":{"test":"mocha","travis":"npm run cover -- --report lcovonly","cover":"istanbul cover _mocha","release":"standard-version","build:example":"(cd example && webpack)","commit":"git-cz","semantic-release":"semantic-release pre && npm publish && semantic-release post"},"peerDependencies":{"webpack":"^2.2.0"},"dependencies":{"ajv":"^4.11.2","async":"^2.1.2","jsesc":"^2.5.1","loader-utils":"^1.0.2","style-loader":"^0.16.1","webpack-sources":"^0.2.3"},"devDependencies":{"codecov.io":"^0.1.2","commitizen":"^2.9.6","coveralls":"^2.11.2","css-loader":"^0.28.0","cz-conventional-changelog":"^2.0.0","file-loader":"^0.11.1","istanbul":"^0.4.5","mocha":"^3.2.0","mocha-lcov-reporter":"1.3.0","raw-loader":"^0.5.1","semantic-release":"^6.3.2","should":"^11.1.2","standard-version":"^4.0.0","webpack":"^2.2.0"},"homepage":"http://github.com/faceyspacey/extract-css-chunks-webpack-plugin","repository":{"type":"git","url":"git+https://github.com/faceyspacey/extract-css-chunks-webpack-plugin.git"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"gitHead":"2f97426df98f19e0f2ac0a44bfd8e467c37d9fb1","bugs":{"url":"https://github.com/faceyspacey/extract-css-chunks-webpack-plugin/issues"},"_id":"extract-css-chunks-webpack-plugin@1.0.10","_shasum":"eab2864b387c2e824fbebde920fe2c3e7885cb65","_from":".","_npmVersion":"4.2.0","_nodeVersion":"7.10.0","_npmUser":{"name":"faceyspacey","email":"james@faceyspacey.com"},"dist":{"shasum":"eab2864b387c2e824fbebde920fe2c3e7885cb65","tarball":"https://registry.npmjs.org/extract-css-chunks-webpack-plugin/-/extract-css-chunks-webpack-plugin-1.0.10.tgz","integrity":"sha512-CxWuTHuSt3MhModxbxfCDTzv7nSjEqgBg5Wd3gUxT1xKVnV5xp7+gxNEzXB5/42HP1T5tbPmAd0fqYoIgKvOEg==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDCJjr+HSZ/HEs/V288IWuUNndchzs1UMAT81j9mEutawIgXyIb7V/9KDyzqZbk3TnYIOT4iBsemGfMCOIOWpi8h1k="}]},"maintainers":[{"name":"faceyspacey","email":"james@faceyspacey.com"}],"_npmOperationalInternal":{"host":"packages-18-east.internal.npmjs.com","tmp":"tmp/extract-css-chunks-webpack-plugin-1.0.10.tgz_1494153443512_0.3712096263188869"},"directories":{}},"1.0.11":{"name":"extract-css-chunks-webpack-plugin","version":"1.0.11","author":{"name":"James Gillmore","email":"james@faceyspacey.com"},"description":"Extract CSS from chunks into stylesheets + HMR","engines":{"node":">=4.3.0 < 5.0.0 || >= 5.10"},"license":"MIT","scripts":{"test":"mocha","travis":"npm run cover -- --report lcovonly","cover":"istanbul cover _mocha","release":"standard-version","build:example":"(cd example && webpack)","cm":"git-cz","semantic-release":"semantic-release pre && npm publish && semantic-release post"},"peerDependencies":{"webpack":"^2.2.0"},"dependencies":{"ajv":"^4.11.2","async":"^2.1.2","jsesc":"^2.5.1","loader-utils":"^1.0.2","schema-utils":"^0.3.0","style-loader":"^0.16.1","webpack-sources":"^0.2.3"},"devDependencies":{"codecov.io":"^0.1.2","commitizen":"^2.9.6","coveralls":"^2.11.2","css-loader":"^0.28.0","cz-conventional-changelog":"^2.0.0","file-loader":"^0.11.1","istanbul":"^0.4.5","mocha":"^3.2.0","mocha-lcov-reporter":"1.3.0","raw-loader":"^0.5.1","semantic-release":"^6.3.2","should":"^11.1.2","standard-version":"^4.0.0","webpack":"^2.2.0"},"homepage":"http://github.com/faceyspacey/extract-css-chunks-webpack-plugin","repository":{"type":"git","url":"git+https://github.com/faceyspacey/extract-css-chunks-webpack-plugin.git"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"gitHead":"17ea604815ff9d788aa15968065fc4887b58a56f","bugs":{"url":"https://github.com/faceyspacey/extract-css-chunks-webpack-plugin/issues"},"_id":"extract-css-chunks-webpack-plugin@1.0.11","_npmVersion":"5.0.0","_nodeVersion":"8.0.0","_npmUser":{"name":"faceyspacey","email":"james@faceyspacey.com"},"dist":{"integrity":"sha512-Z0rR2pMsOIhdmqcBRz9H9vVBQg6/ug+LWLcFNaqtEUh0sMYWSY1pQcWZ24B5A153i2ZGZOD0b8vn23i1NHjmTw==","shasum":"bfdcdc2401c79daa326f51f4679e21491afc4903","tarball":"https://registry.npmjs.org/extract-css-chunks-webpack-plugin/-/extract-css-chunks-webpack-plugin-1.0.11.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCRtKDMhTEBFlxgGRDRDn05mf7vBTPRExh0Au07cUTjsgIgTRfz0VuxmUHnzPsdSb+22NIu/V9Qq4QtVcCOGafHjMA="}]},"maintainers":[{"name":"faceyspacey","email":"james@faceyspacey.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/extract-css-chunks-webpack-plugin-1.0.11.tgz_1496875955861_0.022139660781249404"},"directories":{}},"1.0.12":{"name":"extract-css-chunks-webpack-plugin","version":"1.0.12","author":{"name":"James Gillmore","email":"james@faceyspacey.com"},"description":"Extract CSS from chunks into stylesheets + HMR","engines":{"node":">=4.3.0 < 5.0.0 || >= 5.10"},"main":"index.js","files":["schema","ExtractedModule.js","index.js","loader.js","OrderUndefinedError.js","hotModuleReplacement.js"],"license":"MIT","scripts":{"test":"mocha","travis":"npm run cover -- --report lcovonly","cover":"istanbul cover _mocha","release":"standard-version","build:example":"(cd example && webpack)","cm":"git-cz","semantic-release":"semantic-release pre && npm publish && semantic-release post"},"peerDependencies":{"webpack":"^2.2.0"},"dependencies":{"ajv":"^4.11.2","async":"^2.1.2","jsesc":"^2.5.1","loader-utils":"^1.0.2","schema-utils":"^0.3.0","style-loader":"^0.16.1","webpack-sources":"^1.0.1"},"devDependencies":{"codecov.io":"^0.1.2","commitizen":"^2.9.6","coveralls":"^2.11.2","css-loader":"^0.28.0","cz-conventional-changelog":"^2.0.0","file-loader":"^0.11.1","istanbul":"^0.4.5","mocha":"^3.2.0","mocha-lcov-reporter":"1.3.0","raw-loader":"^0.5.1","semantic-release":"^6.3.2","should":"^11.1.2","standard-version":"^4.0.0","webpack":"^2.2.0"},"homepage":"http://github.com/faceyspacey/extract-css-chunks-webpack-plugin","repository":{"type":"git","url":"git+https://github.com/faceyspacey/extract-css-chunks-webpack-plugin.git"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"gitHead":"22864e3004b4cdc3e042f83d71d2cf4545e030a6","bugs":{"url":"https://github.com/faceyspacey/extract-css-chunks-webpack-plugin/issues"},"_id":"extract-css-chunks-webpack-plugin@1.0.12","_npmVersion":"5.0.0","_nodeVersion":"8.0.0","_npmUser":{"name":"faceyspacey","email":"james@faceyspacey.com"},"dist":{"integrity":"sha512-9KGDPnqBKl+7WpaHp6rSgCDCKmx5LkuWf5So88n0523brSiRSEPQTzr3MBUZgjzTYDKhsaqodlMGn9UrQArNqg==","shasum":"25b2f27e6198a89923ab549f8592ec07733961d8","tarball":"https://registry.npmjs.org/extract-css-chunks-webpack-plugin/-/extract-css-chunks-webpack-plugin-1.0.12.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDgjxP/HUMqy9YalllD2lMnJbcQ+mNhcOy0WP9iQVskhwIhANrtFTXv+hjOyF7mJH2/zVncXmvlf5WCma6MvEvmUcw6"}]},"maintainers":[{"name":"faceyspacey","email":"james@faceyspacey.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/extract-css-chunks-webpack-plugin-1.0.12.tgz_1496876681408_0.3722962827887386"},"directories":{}},"1.0.13":{"name":"extract-css-chunks-webpack-plugin","version":"1.0.13","author":{"name":"James Gillmore","email":"james@faceyspacey.com"},"description":"Extract CSS from chunks into stylesheets + HMR","engines":{"node":">=4.3.0 < 5.0.0 || >= 5.10"},"main":"index.js","files":["schema","ExtractedModule.js","index.js","loader.js","OrderUndefinedError.js","hotModuleReplacement.js"],"license":"MIT","scripts":{"test":"mocha","travis":"npm run cover -- --report lcovonly","cover":"istanbul cover _mocha","release":"standard-version","build:example":"(cd example && webpack)","cm":"git-cz","semantic-release":"semantic-release pre && npm publish && semantic-release post"},"peerDependencies":{"webpack":"^2.2.0"},"dependencies":{"ajv":"^4.11.2","async":"^2.1.2","jsesc":"^2.5.1","loader-utils":"^1.0.2","schema-utils":"^0.3.0","style-loader":"^0.18.2","webpack-sources":"^1.0.1"},"devDependencies":{"codecov.io":"^0.1.2","commitizen":"^2.9.6","coveralls":"^2.11.2","css-loader":"^0.28.0","cz-conventional-changelog":"^2.0.0","file-loader":"^0.11.1","istanbul":"^0.4.5","mocha":"^3.2.0","mocha-lcov-reporter":"1.3.0","raw-loader":"^0.5.1","semantic-release":"^6.3.2","should":"^11.1.2","standard-version":"^4.0.0","webpack":"^2.2.0"},"homepage":"http://github.com/faceyspacey/extract-css-chunks-webpack-plugin","repository":{"type":"git","url":"git+https://github.com/faceyspacey/extract-css-chunks-webpack-plugin.git"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"gitHead":"a2ffa1363a075abfec8d92a4bf94c52cabcecd29","bugs":{"url":"https://github.com/faceyspacey/extract-css-chunks-webpack-plugin/issues"},"_id":"extract-css-chunks-webpack-plugin@1.0.13","_npmVersion":"5.0.0","_nodeVersion":"8.0.0","_npmUser":{"name":"faceyspacey","email":"james@faceyspacey.com"},"dist":{"integrity":"sha512-LD1lGJU36CIISUNKYLXOqu6o10k2p9UA6SLz/ag/966JKwVT6Oz0vC9auNL191nRWogHsnBpqtvKmJOZTd0eDg==","shasum":"9acd8c59d4e24799f9d9e012efc314432babe3fb","tarball":"https://registry.npmjs.org/extract-css-chunks-webpack-plugin/-/extract-css-chunks-webpack-plugin-1.0.13.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCN7fD6xlzvubBShoyyugnwjFMdNoIn110cRksUxD0qWgIgbYK4lLd6g5Zs1Md7JSJLwX1qc5Nlpvb2zwwpfwiSNiQ="}]},"maintainers":[{"name":"faceyspacey","email":"james@faceyspacey.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/extract-css-chunks-webpack-plugin-1.0.13.tgz_1496895753853_0.4215992554090917"},"directories":{}},"1.0.14":{"name":"extract-css-chunks-webpack-plugin","version":"1.0.14","author":{"name":"James Gillmore","email":"james@faceyspacey.com"},"description":"Extract CSS from chunks into stylesheets + HMR","engines":{"node":">=4.3.0 < 5.0.0 || >= 5.10"},"main":"index.js","files":["schema","ExtractedModule.js","index.js","loader.js","OrderUndefinedError.js","hotModuleReplacement.js"],"license":"MIT","scripts":{"test":"mocha","travis":"npm run cover -- --report lcovonly","cover":"istanbul cover _mocha","release":"standard-version","build:example":"(cd example && webpack)","cm":"git-cz","semantic-release":"semantic-release pre && npm publish && semantic-release post"},"peerDependencies":{"webpack":"^2.2.0"},"dependencies":{"ajv":"^4.11.2","async":"^2.1.2","jsesc":"^2.5.1","loader-utils":"^1.0.2","schema-utils":"^0.3.0","style-loader":"^0.18.2","webpack-sources":"^1.0.1"},"devDependencies":{"codecov.io":"^0.1.2","commitizen":"^2.9.6","coveralls":"^2.11.2","css-loader":"^0.28.0","cz-conventional-changelog":"^2.0.0","file-loader":"^0.11.1","istanbul":"^0.4.5","mocha":"^3.2.0","mocha-lcov-reporter":"1.3.0","raw-loader":"^0.5.1","semantic-release":"^6.3.2","should":"^11.1.2","standard-version":"^4.0.0","webpack":"^2.2.0"},"homepage":"http://github.com/faceyspacey/extract-css-chunks-webpack-plugin","repository":{"type":"git","url":"git+https://github.com/faceyspacey/extract-css-chunks-webpack-plugin.git"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"gitHead":"4d3816e45c93a2f441bccf732959a6759e5679d0","bugs":{"url":"https://github.com/faceyspacey/extract-css-chunks-webpack-plugin/issues"},"_id":"extract-css-chunks-webpack-plugin@1.0.14","_npmVersion":"5.0.3","_nodeVersion":"8.1.0","_npmUser":{"name":"faceyspacey","email":"james@faceyspacey.com"},"dist":{"integrity":"sha512-dD4p17L5IAx16oZUBNyaJWFEAJM4C9Cxv86JaLVL1WI5/ZMey8+5dxQI3SZm9cvrLP9/EUgOk7weUqrA3S5K3w==","shasum":"90e334097eec824c728cd8404b8a473bd061b75c","tarball":"https://registry.npmjs.org/extract-css-chunks-webpack-plugin/-/extract-css-chunks-webpack-plugin-1.0.14.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF7eNGibPCY82U+nMM1aPo8cT2WOSChG1Chy/hncDqUQAiBGtI4roWh5tmtx8MfVuYzwPM40PWQiY43rbqMugSlszw=="}]},"maintainers":[{"name":"faceyspacey","email":"james@faceyspacey.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/extract-css-chunks-webpack-plugin-1.0.14.tgz_1496936899072_0.6591919108759612"},"directories":{}},"1.0.15":{"name":"extract-css-chunks-webpack-plugin","version":"1.0.15","author":{"name":"James Gillmore","email":"james@faceyspacey.com"},"description":"Extract CSS from chunks into stylesheets + HMR","engines":{"node":">=4.3.0 < 5.0.0 || >= 5.10"},"main":"index.js","files":["schema","ExtractedModule.js","index.js","loader.js","OrderUndefinedError.js","hotModuleReplacement.js"],"license":"MIT","scripts":{"test":"mocha","travis":"npm run cover -- --report lcovonly","cover":"istanbul cover _mocha","release":"standard-version","build:example":"(cd example && webpack)","cm":"git-cz","semantic-release":"semantic-release pre && npm publish && semantic-release post"},"peerDependencies":{"webpack":"^2.2.0"},"dependencies":{"ajv":"^4.11.2","async":"^2.1.2","jsesc":"^2.5.1","loader-utils":"^1.0.2","schema-utils":"^0.3.0","style-loader":"^0.18.2","webpack-sources":"^1.0.1"},"devDependencies":{"codecov.io":"^0.1.2","commitizen":"^2.9.6","coveralls":"^2.11.2","css-loader":"^0.28.0","cz-conventional-changelog":"^2.0.0","file-loader":"^0.11.1","istanbul":"^0.4.5","mocha":"^3.2.0","mocha-lcov-reporter":"1.3.0","raw-loader":"^0.5.1","semantic-release":"^6.3.2","should":"^11.1.2","standard-version":"^4.0.0","webpack":"^2.2.0"},"homepage":"http://github.com/faceyspacey/extract-css-chunks-webpack-plugin","repository":{"type":"git","url":"git+https://github.com/faceyspacey/extract-css-chunks-webpack-plugin.git"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"gitHead":"f73b1487349a67c6abdf9c4a12e60406b60bb924","bugs":{"url":"https://github.com/faceyspacey/extract-css-chunks-webpack-plugin/issues"},"_id":"extract-css-chunks-webpack-plugin@1.0.15","_npmVersion":"5.0.3","_nodeVersion":"8.1.1","_npmUser":{"name":"faceyspacey","email":"james@faceyspacey.com"},"dist":{"integrity":"sha512-bqwzEkGoFxLJTNGCm0OTPW9YlR4SASC+INI3d2LNtyhVvm7JoFazop0V3i8zgerh5rgaoOeBgIafVWg8YRNoSw==","shasum":"5fd6a3c2f68b7be651e136e0959718eddb8f6dd2","tarball":"https://registry.npmjs.org/extract-css-chunks-webpack-plugin/-/extract-css-chunks-webpack-plugin-1.0.15.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCzXCuTsNaEO2vRuxgwlDUHwP+NwYPfk9iwf3duKoKB6AIhANrDGwj0LOWkntohL1yIkx23EwhE4Y1h83CebIzu/ifJ"}]},"maintainers":[{"name":"faceyspacey","email":"james@faceyspacey.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/extract-css-chunks-webpack-plugin-1.0.15.tgz_1497437414046_0.36445811740122736"},"directories":{}},"2.0.0":{"name":"extract-css-chunks-webpack-plugin","version":"2.0.0","author":{"name":"James Gillmore","email":"james@faceyspacey.com"},"description":"Extract CSS from chunks into stylesheets + HMR","engines":{"node":">=4.3.0 < 5.0.0 || >= 5.10"},"main":"index.js","files":["schema","ExtractedModule.js","index.js","loader.js","OrderUndefinedError.js","hotModuleReplacement.js"],"license":"MIT","scripts":{"test":"mocha","travis":"npm run cover -- --report lcovonly","cover":"istanbul cover _mocha","release":"standard-version","build:example":"(cd example && webpack)","cm":"git-cz","semantic-release":"semantic-release pre && npm publish && semantic-release post"},"peerDependencies":{"webpack":"^2.2.0"},"dependencies":{"async":"^2.1.2","loader-utils":"^1.0.2","schema-utils":"^0.3.0","style-loader":"^0.18.2","webpack-sources":"^1.0.1"},"devDependencies":{"codecov.io":"^0.1.2","commitizen":"^2.9.6","coveralls":"^2.11.2","css-loader":"^0.28.0","cz-conventional-changelog":"^2.0.0","file-loader":"^0.11.1","istanbul":"^0.4.5","mocha":"^3.2.0","mocha-lcov-reporter":"1.3.0","raw-loader":"^0.5.1","rimraf":"^2.6.1","semantic-release":"^6.3.2","should":"^11.1.2","standard-version":"^4.0.0","webpack":"~2.6.0"},"homepage":"http://github.com/faceyspacey/extract-css-chunks-webpack-plugin","repository":{"type":"git","url":"git+https://github.com/faceyspacey/extract-css-chunks-webpack-plugin.git"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"gitHead":"9b70a1dede1f2713fdf8934f511c1c6bcba5a789","bugs":{"url":"https://github.com/faceyspacey/extract-css-chunks-webpack-plugin/issues"},"_id":"extract-css-chunks-webpack-plugin@2.0.0","_npmVersion":"5.0.3","_nodeVersion":"8.1.3","_npmUser":{"name":"faceyspacey","email":"james@faceyspacey.com"},"dist":{"integrity":"sha512-3OgjIZ0libq7Zq1bS+ec2blosmoIAc9XxWyAQScAVBcNT6hQlnZUhfJpQ9995B6aHLJTQFw626ZNkpbbPRDIqg==","shasum":"53d09759e592fef455cb7bec1336f3479e0f9208","tarball":"https://registry.npmjs.org/extract-css-chunks-webpack-plugin/-/extract-css-chunks-webpack-plugin-2.0.0.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDr1U1J3ep2oD54YJuJBY0nmG4FMTxQhFt6OHuXod65iwIgY0cvw2SdgeuXjY+DaJxYkJZyKJjY2O4d85wHOSHUvtg="}]},"maintainers":[{"name":"faceyspacey","email":"james@faceyspacey.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/extract-css-chunks-webpack-plugin-2.0.0.tgz_1498823741864_0.5934850974008441"},"directories":{}},"2.0.1":{"name":"extract-css-chunks-webpack-plugin","version":"2.0.1","author":{"name":"James Gillmore","email":"james@faceyspacey.com"},"description":"Extract CSS from chunks into stylesheets + HMR","engines":{"node":">=4.3.0 < 5.0.0 || >= 5.10"},"main":"index.js","files":["schema","ExtractedModule.js","index.js","loader.js","OrderUndefinedError.js","hotModuleReplacement.js"],"license":"MIT","scripts":{"test":"mocha","travis":"npm run cover -- --report lcovonly","cover":"istanbul cover _mocha","release":"standard-version","build:example":"(cd example && webpack)","cm":"git-cz","semantic-release":"semantic-release pre && npm publish && semantic-release post"},"peerDependencies":{"webpack":"^2.2.0"},"dependencies":{"ajv":"^4.11.2","async":"^2.1.2","jsesc":"^2.5.1","loader-utils":"^1.0.2","schema-utils":"^0.3.0","style-loader":"^0.18.2","webpack-sources":"^1.0.1"},"devDependencies":{"codecov.io":"^0.1.2","commitizen":"^2.9.6","coveralls":"^2.11.2","css-loader":"^0.28.0","cz-conventional-changelog":"^2.0.0","file-loader":"^0.11.1","istanbul":"^0.4.5","mocha":"^3.2.0","mocha-lcov-reporter":"1.3.0","raw-loader":"^0.5.1","semantic-release":"^6.3.2","should":"^11.1.2","standard-version":"^4.0.0","webpack":"^2.2.0"},"homepage":"http://github.com/faceyspacey/extract-css-chunks-webpack-plugin","repository":{"type":"git","url":"git+https://github.com/faceyspacey/extract-css-chunks-webpack-plugin.git"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"gitHead":"b3a95128d2f8d039eac2c244717f9583bfbe16c1","bugs":{"url":"https://github.com/faceyspacey/extract-css-chunks-webpack-plugin/issues"},"_id":"extract-css-chunks-webpack-plugin@2.0.1","_npmVersion":"5.0.3","_nodeVersion":"8.1.3","_npmUser":{"name":"faceyspacey","email":"james@faceyspacey.com"},"dist":{"integrity":"sha512-e2xV+8aBZ+CuwzO9idG7p91L2xx+JFKE7MCnuCdxYypl/PhjQNY43HbL1FXfUJLmixTzdW5VHCksFkW5fxpXig==","shasum":"e5a0b62850b22d8839ec0bc9be8c7c262c41a80a","tarball":"https://registry.npmjs.org/extract-css-chunks-webpack-plugin/-/extract-css-chunks-webpack-plugin-2.0.1.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDa0+6oHdPjo4kNgEoGz17QkxBR6/aa2JNUJxjVnx3hHgIhAP5Z3yuUfabejcR68RA6YJunV0c38tex7aJCpSg+LsLR"}]},"maintainers":[{"name":"faceyspacey","email":"james@faceyspacey.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/extract-css-chunks-webpack-plugin-2.0.1.tgz_1499438677493_0.17745280475355685"},"directories":{}},"2.0.2":{"name":"extract-css-chunks-webpack-plugin","version":"2.0.2","author":{"name":"James Gillmore","email":"james@faceyspacey.com"},"description":"Extract CSS from chunks into stylesheets + HMR","engines":{"node":">=4.3.0 < 5.0.0 || >= 5.10"},"main":"index.js","files":["schema","ExtractedModule.js","index.js","loader.js","OrderUndefinedError.js","hotModuleReplacement.js"],"license":"MIT","scripts":{"test":"mocha","travis":"npm run cover -- --report lcovonly","cover":"istanbul cover _mocha","release":"standard-version","build:example":"(cd example && webpack)","cm":"git-cz","semantic-release":"semantic-release pre && npm publish && semantic-release post"},"peerDependencies":{"webpack":"^2.2.0"},"dependencies":{"ajv":"^4.11.2","async":"^2.1.2","jsesc":"^2.5.1","loader-utils":"^1.0.2","schema-utils":"^0.3.0","style-loader":"^0.18.2","webpack-sources":"^1.0.1"},"devDependencies":{"codecov.io":"^0.1.2","commitizen":"^2.9.6","coveralls":"^2.11.2","css-loader":"^0.28.0","cz-conventional-changelog":"^2.0.0","file-loader":"^0.11.1","istanbul":"^0.4.5","mocha":"^3.2.0","mocha-lcov-reporter":"1.3.0","raw-loader":"^0.5.1","semantic-release":"^6.3.2","should":"^11.1.2","standard-version":"^4.0.0","webpack":"^2.2.0"},"homepage":"http://github.com/faceyspacey/extract-css-chunks-webpack-plugin","repository":{"type":"git","url":"git+https://github.com/faceyspacey/extract-css-chunks-webpack-plugin.git"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"gitHead":"28291ac5674161c3ec26c5c394c3b5a069999cd9","bugs":{"url":"https://github.com/faceyspacey/extract-css-chunks-webpack-plugin/issues"},"_id":"extract-css-chunks-webpack-plugin@2.0.2","_npmVersion":"5.0.3","_nodeVersion":"8.1.3","_npmUser":{"name":"faceyspacey","email":"james@faceyspacey.com"},"dist":{"integrity":"sha512-0fMhQ20kOZ1T9xpbIIZtEmB0lFTFFt7SSt/yiapB0XGP1vnmdJair4gHBV0iplRagZ/cmIUQhA4kUSoD1/yNFQ==","shasum":"96b2154a626c41bf0a05607a6b22becbaf5c4359","tarball":"https://registry.npmjs.org/extract-css-chunks-webpack-plugin/-/extract-css-chunks-webpack-plugin-2.0.2.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC0mmWqn6FhptZ6udtirYOccgMH3VeJVuWY/6TpFkeLYgIhAJhfySgipVj801OGCvWAIgrni58Iblr9z2z46E5qWRYs"}]},"maintainers":[{"name":"faceyspacey","email":"james@faceyspacey.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/extract-css-chunks-webpack-plugin-2.0.2.tgz_1499449797881_0.4420483740977943"},"directories":{}},"2.0.3":{"name":"extract-css-chunks-webpack-plugin","version":"2.0.3","author":{"name":"James Gillmore","email":"james@faceyspacey.com"},"description":"Extract CSS from chunks into stylesheets + HMR","engines":{"node":">=4.3.0 < 5.0.0 || >= 5.10"},"main":"index.js","files":["schema","ExtractedModule.js","index.js","loader.js","OrderUndefinedError.js","hotModuleReplacement.js"],"license":"MIT","scripts":{"test":"mocha","travis":"npm run cover -- --report lcovonly","cover":"istanbul cover _mocha","release":"standard-version","build:example":"(cd example && webpack)","cm":"git-cz","semantic-release":"semantic-release pre && npm publish && semantic-release post"},"peerDependencies":{"webpack":"^2.2.0"},"dependencies":{"ajv":"^4.11.2","async":"^2.1.2","jsesc":"^2.5.1","loader-utils":"^1.0.2","schema-utils":"^0.3.0","style-loader":"^0.18.2","webpack-sources":"^1.0.1"},"devDependencies":{"codecov.io":"^0.1.2","commitizen":"^2.9.6","coveralls":"^2.11.2","css-loader":"^0.28.0","cz-conventional-changelog":"^2.0.0","file-loader":"^0.11.1","istanbul":"^0.4.5","mocha":"^3.2.0","mocha-lcov-reporter":"1.3.0","raw-loader":"^0.5.1","semantic-release":"^6.3.2","should":"^11.1.2","standard-version":"^4.0.0","webpack":"^2.2.0"},"homepage":"http://github.com/faceyspacey/extract-css-chunks-webpack-plugin","repository":{"type":"git","url":"git+https://github.com/faceyspacey/extract-css-chunks-webpack-plugin.git"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"gitHead":"51e6e7ec715fa2dce143917fc0a1c4103f5b87a7","bugs":{"url":"https://github.com/faceyspacey/extract-css-chunks-webpack-plugin/issues"},"_id":"extract-css-chunks-webpack-plugin@2.0.3","_npmVersion":"5.0.3","_nodeVersion":"8.1.3","_npmUser":{"name":"faceyspacey","email":"james@faceyspacey.com"},"dist":{"integrity":"sha512-U5bSjz+9THizdGxUn79wY4jALfxdRGYcmVP95JeIzjD3SRbJr2eUv1kXM1+2+c93JTtz6kJz+u9HsqgVGEbjzw==","shasum":"98d07b765166443a72467f3c837ad676ac29f8fa","tarball":"https://registry.npmjs.org/extract-css-chunks-webpack-plugin/-/extract-css-chunks-webpack-plugin-2.0.3.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCvGHNkHfWuB9aAI0dPPj+lw5m6PMOEMvjQnX9zKsx2UgIhAPL7IPghWqGCWRxSHZcPplKeQANqAlt8LaNGAnePMd2v"}]},"maintainers":[{"name":"faceyspacey","email":"james@faceyspacey.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/extract-css-chunks-webpack-plugin-2.0.3.tgz_1499449935753_0.7620941884815693"},"directories":{}},"2.0.4":{"name":"extract-css-chunks-webpack-plugin","version":"2.0.4","author":{"name":"James Gillmore","email":"james@faceyspacey.com"},"description":"Extract CSS from chunks into stylesheets + HMR","engines":{"node":">=4.3.0 < 5.0.0 || >= 5.10"},"main":"index.js","files":["schema","ExtractedModule.js","index.js","loader.js","OrderUndefinedError.js","hotModuleReplacement.js"],"license":"MIT","scripts":{"test":"mocha","travis":"npm run cover -- --report lcovonly","cover":"istanbul cover _mocha","release":"standard-version","build:example":"(cd example && webpack)","cm":"git-cz","semantic-release":"semantic-release pre && npm publish && semantic-release post"},"peerDependencies":{"webpack":"^2.2.0"},"dependencies":{"ajv":"^4.11.2","async":"^2.1.2","jsesc":"^2.5.1","loader-utils":"^1.0.2","schema-utils":"^0.3.0","style-loader":"^0.18.2","webpack-sources":"^1.0.1"},"devDependencies":{"codecov.io":"^0.1.2","commitizen":"^2.9.6","coveralls":"^2.11.2","css-loader":"^0.28.0","cz-conventional-changelog":"^2.0.0","file-loader":"^0.11.1","istanbul":"^0.4.5","mocha":"^3.2.0","mocha-lcov-reporter":"1.3.0","raw-loader":"^0.5.1","semantic-release":"^6.3.2","should":"^11.1.2","standard-version":"^4.0.0","webpack":"^2.2.0"},"homepage":"http://github.com/faceyspacey/extract-css-chunks-webpack-plugin","repository":{"type":"git","url":"git+https://github.com/faceyspacey/extract-css-chunks-webpack-plugin.git"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"gitHead":"9e8fd10da754fc65e498d3f302c10605d6811002","bugs":{"url":"https://github.com/faceyspacey/extract-css-chunks-webpack-plugin/issues"},"_id":"extract-css-chunks-webpack-plugin@2.0.4","_npmVersion":"5.0.3","_nodeVersion":"8.1.4","_npmUser":{"name":"faceyspacey","email":"james@faceyspacey.com"},"dist":{"integrity":"sha512-edeyWUtXmqrfcKckqdY29gj3XMp8nCtDaJAFjbwtsCrkB0Gh0bA7AOeyfD2PMeDeH6xx9lKcBgRJn5j3Atxslw==","shasum":"3822664763da18f485cb0643270a4f125aeee327","tarball":"https://registry.npmjs.org/extract-css-chunks-webpack-plugin/-/extract-css-chunks-webpack-plugin-2.0.4.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDy7quexYivwuweW/fGjv2b0wYbFYDQ3wtxaKLCD+miqAIhALTyDrDVBnNBu6sovdte+3b3STfMQO3f8rnOjXlsB2vX"}]},"maintainers":[{"name":"faceyspacey","email":"james@faceyspacey.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/extract-css-chunks-webpack-plugin-2.0.4.tgz_1499815502064_0.9789917315356433"},"directories":{}},"2.0.5":{"name":"extract-css-chunks-webpack-plugin","version":"2.0.5","author":{"name":"James Gillmore","email":"james@faceyspacey.com"},"description":"Extract CSS from chunks into stylesheets + HMR","engines":{"node":">=4.3.0 < 5.0.0 || >= 5.10"},"main":"index.js","files":["schema","ExtractedModule.js","index.js","loader.js","OrderUndefinedError.js","hotModuleReplacement.js"],"license":"MIT","scripts":{"test":"mocha","travis":"npm run cover -- --report lcovonly","cover":"istanbul cover _mocha","release":"standard-version","build:example":"(cd example && webpack)","cm":"git-cz","semantic-release":"semantic-release pre && npm publish && semantic-release post"},"peerDependencies":{"webpack":"^2.2.0"},"dependencies":{"ajv":"4.11.2","async":"^2.5.0","loader-utils":"^1.1.0","schema-utils":"^0.3.0","style-loader":"^0.18.2","webpack-sources":"^1.0.1"},"devDependencies":{"codecov.io":"^0.1.2","commitizen":"^2.9.6","coveralls":"^2.11.2","css-loader":"^0.28.0","cz-conventional-changelog":"^2.0.0","file-loader":"^0.11.1","istanbul":"^0.4.5","mocha":"^3.2.0","mocha-lcov-reporter":"1.3.0","raw-loader":"^0.5.1","semantic-release":"^6.3.2","should":"^11.1.2","standard-version":"^4.0.0","webpack":"^2.2.0"},"homepage":"http://github.com/faceyspacey/extract-css-chunks-webpack-plugin","repository":{"type":"git","url":"git+https://github.com/faceyspacey/extract-css-chunks-webpack-plugin.git"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"gitHead":"eb3b7cfcafee8584434180390e48b54da297fc8e","bugs":{"url":"https://github.com/faceyspacey/extract-css-chunks-webpack-plugin/issues"},"_id":"extract-css-chunks-webpack-plugin@2.0.5","_npmVersion":"5.0.3","_nodeVersion":"8.1.4","_npmUser":{"name":"faceyspacey","email":"james@faceyspacey.com"},"dist":{"integrity":"sha512-lt+d44gaE81RwUnZEtWtfwDNHJexrnGdKNlKx1pPx+zBb+OTliW9RCgUmtu7tMi5hntaeAcQy/QahBVAqsjPGg==","shasum":"79f0d79acefefccf42f771d38b33a5032534e3b1","tarball":"https://registry.npmjs.org/extract-css-chunks-webpack-plugin/-/extract-css-chunks-webpack-plugin-2.0.5.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBR0tzZynF+zUS13c9EFehfrVAbNUPaok3McfVeLs6H4AiEA255uxG0wGrx4qyjGUJUNPzTzTQZHR2xYEBbJjB/UZNw="}]},"maintainers":[{"name":"faceyspacey","email":"james@faceyspacey.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/extract-css-chunks-webpack-plugin-2.0.5.tgz_1500322132254_0.7083155917935073"},"directories":{}},"2.0.6":{"name":"extract-css-chunks-webpack-plugin","version":"2.0.6","author":{"name":"James Gillmore","email":"james@faceyspacey.com"},"description":"Extract CSS from chunks into stylesheets + HMR","engines":{"node":">=4.3.0 < 5.0.0 || >= 5.10"},"main":"index.js","files":["schema","ExtractedModule.js","index.js","loader.js","OrderUndefinedError.js","hotModuleReplacement.js"],"license":"MIT","scripts":{"test":"mocha","travis":"npm run cover -- --report lcovonly","cover":"istanbul cover _mocha","release":"standard-version","build:example":"(cd example && webpack)","cm":"git-cz","semantic-release":"semantic-release pre && npm publish && semantic-release post"},"peerDependencies":{"webpack":"^2.2.0"},"dependencies":{"ajv":"4.11.2","async":"^2.5.0","loader-utils":"^1.1.0","schema-utils":"^0.3.0","style-loader":"^0.18.2","webpack-sources":"^1.0.1"},"devDependencies":{"codecov.io":"^0.1.2","commitizen":"^2.9.6","coveralls":"^2.11.2","css-loader":"^0.28.0","cz-conventional-changelog":"^2.0.0","file-loader":"^0.11.1","istanbul":"^0.4.5","mocha":"^3.2.0","mocha-lcov-reporter":"1.3.0","raw-loader":"^0.5.1","semantic-release":"^6.3.2","should":"^11.1.2","standard-version":"^4.0.0","webpack":"^2.2.0"},"homepage":"http://github.com/faceyspacey/extract-css-chunks-webpack-plugin","repository":{"type":"git","url":"git+https://github.com/faceyspacey/extract-css-chunks-webpack-plugin.git"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"gitHead":"36d0462c37784e0ce5250928205a3bef58806834","bugs":{"url":"https://github.com/faceyspacey/extract-css-chunks-webpack-plugin/issues"},"_id":"extract-css-chunks-webpack-plugin@2.0.6","_npmVersion":"5.0.3","_nodeVersion":"8.1.4","_npmUser":{"name":"faceyspacey","email":"james@faceyspacey.com"},"dist":{"integrity":"sha512-qug1B92aTnpxeYBsCWu3s8129hLZ3i10ovFq7N4+9+rwfRcaj+SGADbM18yTZ+9wp88AP/3w5FEdYExI4IiENw==","shasum":"9c7b125183094034bcd6ae6f12175ef5cc0714bb","tarball":"https://registry.npmjs.org/extract-css-chunks-webpack-plugin/-/extract-css-chunks-webpack-plugin-2.0.6.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFRWIrZn93XB1+ZVe6wv7yNzuKDMwqKPx5k7/8dUPKqaAiBmoaXtoo0UfduhMsDJUuOl1Ujma8L2Yw9g6joXYLrCzg=="}]},"maintainers":[{"name":"faceyspacey","email":"james@faceyspacey.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/extract-css-chunks-webpack-plugin-2.0.6.tgz_1500322894661_0.6368524285499007"},"directories":{}},"2.0.7":{"name":"extract-css-chunks-webpack-plugin","version":"2.0.7","author":{"name":"James Gillmore","email":"james@faceyspacey.com"},"description":"Extract CSS from chunks into stylesheets + HMR","engines":{"node":">=4.3.0 < 5.0.0 || >= 5.10"},"main":"index.js","files":["schema","ExtractedModule.js","index.js","loader.js","OrderUndefinedError.js","hotModuleReplacement.js"],"license":"MIT","scripts":{"test":"mocha","travis":"npm run cover -- --report lcovonly","cover":"istanbul cover _mocha","release":"standard-version","build:example":"(cd example && webpack)","cm":"git-cz","semantic-release":"semantic-release pre && npm publish && semantic-release post"},"peerDependencies":{"webpack":"^2.2.0"},"dependencies":{"ajv":"4.11.2","async":"^2.5.0","loader-utils":"^1.1.0","schema-utils":"^0.3.0","style-loader":"^0.18.2","webpack-sources":"^1.0.1"},"devDependencies":{"codecov.io":"^0.1.2","commitizen":"^2.9.6","coveralls":"^2.11.2","css-loader":"^0.28.0","cz-conventional-changelog":"^2.0.0","file-loader":"^0.11.1","istanbul":"^0.4.5","mocha":"^3.2.0","mocha-lcov-reporter":"1.3.0","raw-loader":"^0.5.1","semantic-release":"^6.3.2","should":"^11.1.2","standard-version":"^4.0.0","webpack":"^2.2.0"},"homepage":"http://github.com/faceyspacey/extract-css-chunks-webpack-plugin","repository":{"type":"git","url":"git+https://github.com/faceyspacey/extract-css-chunks-webpack-plugin.git"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"gitHead":"e814d9d016e79d00e2f19d9092cd50c187e6a1b1","bugs":{"url":"https://github.com/faceyspacey/extract-css-chunks-webpack-plugin/issues"},"_id":"extract-css-chunks-webpack-plugin@2.0.7","_npmVersion":"5.3.0","_nodeVersion":"8.2.1","_npmUser":{"name":"faceyspacey","email":"james@faceyspacey.com"},"dist":{"integrity":"sha512-tJTuPP7D3oc+yHduNQ5QefjTqipcNh0X5Xmcjs2lGnZyL4BQ2wmkVHacggEkAE2U1nju4ULoDQIAIuCmhiu+4w==","shasum":"2258fd961561031c1b03dfe46702b3fdd8364da2","tarball":"https://registry.npmjs.org/extract-css-chunks-webpack-plugin/-/extract-css-chunks-webpack-plugin-2.0.7.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDAc6iSeww9Z412LfjR1epUviBoiK9c2hvYIFzM3z2T0AiBDRxSYNADqTmJMnW4fjrcwvOSnUVC9I+vvXDMtGV81xw=="}]},"maintainers":[{"name":"faceyspacey","email":"james@faceyspacey.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/extract-css-chunks-webpack-plugin-2.0.7.tgz_1500635432140_0.6800417355261743"},"directories":{}},"2.0.8":{"name":"extract-css-chunks-webpack-plugin","version":"2.0.8","author":{"name":"James Gillmore","email":"james@faceyspacey.com"},"description":"Extract CSS from chunks into stylesheets + HMR","engines":{"node":">=4.3.0 < 5.0.0 || >= 5.10"},"main":"index.js","files":["schema","ExtractedModule.js","index.js","loader.js","OrderUndefinedError.js","hotModuleReplacement.js"],"license":"MIT","scripts":{"test":"mocha","travis":"npm run cover -- --report lcovonly","cover":"istanbul cover _mocha","release":"standard-version","build:example":"(cd example && webpack)","cm":"git-cz","semantic-release":"semantic-release pre && npm publish && semantic-release post"},"peerDependencies":{"webpack":"*"},"dependencies":{"ajv":"4.11.2","async":"^2.5.0","loader-utils":"^1.1.0","schema-utils":"^0.3.0","style-loader":"^0.18.2","webpack-sources":"^1.0.1"},"devDependencies":{"codecov.io":"^0.1.2","commitizen":"^2.9.6","coveralls":"^2.11.2","css-loader":"^0.28.0","cz-conventional-changelog":"^2.0.0","file-loader":"^0.11.1","istanbul":"^0.4.5","mocha":"^3.2.0","mocha-lcov-reporter":"1.3.0","raw-loader":"^0.5.1","semantic-release":"^6.3.2","should":"^11.1.2","standard-version":"^4.0.0","webpack":"^2.2.0"},"homepage":"http://github.com/faceyspacey/extract-css-chunks-webpack-plugin","repository":{"type":"git","url":"git+https://github.com/faceyspacey/extract-css-chunks-webpack-plugin.git"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"gitHead":"3211f2d9f70251d0bcaa7f8cfe0c4db402384684","bugs":{"url":"https://github.com/faceyspacey/extract-css-chunks-webpack-plugin/issues"},"_id":"extract-css-chunks-webpack-plugin@2.0.8","_npmVersion":"5.3.0","_nodeVersion":"8.2.1","_npmUser":{"name":"faceyspacey","email":"james@faceyspacey.com"},"dist":{"integrity":"sha512-Es9PkTuW8upINlJgl2vouFEmg/i2nFksjKXWgH/j8TZ+xSGIVmPAYvUDK5VMEl7sk86RrmFWBLKD0OEiP0/23g==","shasum":"a1e1199943aa12694f4ac04b49aab23505b75413","tarball":"https://registry.npmjs.org/extract-css-chunks-webpack-plugin/-/extract-css-chunks-webpack-plugin-2.0.8.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHd2vOzmmJEYe3vM+mjtjCLQ5r53R89FjDIpeG0sl7z/AiEA4Nl4Pyxk13B/sA0ge/V29ak5Bwmf+PGoMPrgZM/ySm8="}]},"maintainers":[{"name":"faceyspacey","email":"james@faceyspacey.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/extract-css-chunks-webpack-plugin-2.0.8.tgz_1500795958137_0.5918631481472403"},"directories":{}},"2.0.9":{"name":"extract-css-chunks-webpack-plugin","version":"2.0.9","author":{"name":"James Gillmore","email":"james@faceyspacey.com"},"description":"Extract CSS from chunks into stylesheets + HMR","engines":{"node":">=4.3.0 < 5.0.0 || >= 5.10"},"main":"index.js","files":["schema","ExtractedModule.js","index.js","loader.js","OrderUndefinedError.js","hotModuleReplacement.js"],"license":"MIT","scripts":{"test":"mocha","travis":"npm run cover -- --report lcovonly","cover":"istanbul cover _mocha","release":"standard-version","build:example":"(cd example && webpack)","cm":"git-cz","semantic-release":"semantic-release pre && npm publish && semantic-release post"},"peerDependencies":{"webpack":"*"},"dependencies":{"ajv":"4.11.2","async":"^2.5.0","loader-utils":"^1.1.0","schema-utils":"^0.3.0","style-loader":"^0.18.2","webpack-sources":"^1.0.1"},"devDependencies":{"codecov.io":"^0.1.2","commitizen":"^2.9.6","coveralls":"^2.11.2","css-loader":"^0.28.0","cz-conventional-changelog":"^2.0.0","file-loader":"^0.11.1","istanbul":"^0.4.5","mocha":"^3.2.0","mocha-lcov-reporter":"1.3.0","raw-loader":"^0.5.1","semantic-release":"^6.3.2","should":"^11.1.2","standard-version":"^4.0.0","webpack":"^2.2.0"},"homepage":"http://github.com/faceyspacey/extract-css-chunks-webpack-plugin","repository":{"type":"git","url":"git+https://github.com/faceyspacey/extract-css-chunks-webpack-plugin.git"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"gitHead":"1d71e97ee3cbba49fedef1a08f4cc1e123e21787","bugs":{"url":"https://github.com/faceyspacey/extract-css-chunks-webpack-plugin/issues"},"_id":"extract-css-chunks-webpack-plugin@2.0.9","_npmVersion":"5.3.0","_nodeVersion":"8.2.1","_npmUser":{"name":"faceyspacey","email":"james@faceyspacey.com"},"dist":{"integrity":"sha512-UBRx/VVjNAtHcNK9zIedY25VbdFlNh4hcr7/d7MUBzBi89ZikT/kMh55DkYtKKKMmwJB+FmCD7M+UkQEPK1Q/A==","shasum":"e4eb0ed771f61933a2482dcbaed1bae8f22649f9","tarball":"https://registry.npmjs.org/extract-css-chunks-webpack-plugin/-/extract-css-chunks-webpack-plugin-2.0.9.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCID/s3JYxbxbIZaA7pxkfXp+KxqvDg7b/2qNtNWGaWbC5AiEAwpRrhfe+F7QFfbWXaXnRgB/3RK53M/KcvRnYy2C4WN4="}]},"maintainers":[{"name":"faceyspacey","email":"james@faceyspacey.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/extract-css-chunks-webpack-plugin-2.0.9.tgz_1501113802091_0.5414456743746996"},"directories":{}},"2.0.10":{"name":"extract-css-chunks-webpack-plugin","version":"2.0.10","author":{"name":"James Gillmore","email":"james@faceyspacey.com"},"description":"Extract CSS from chunks into stylesheets + HMR","engines":{"node":">=4.3.0 < 5.0.0 || >= 5.10"},"main":"index.js","files":["schema","ExtractedModule.js","index.js","loader.js","OrderUndefinedError.js","hotModuleReplacement.js"],"license":"MIT","scripts":{"test":"mocha","travis":"npm run cover -- --report lcovonly","cover":"istanbul cover _mocha","release":"standard-version","build:example":"(cd example && webpack)","cm":"git-cz","semantic-release":"semantic-release pre && npm publish && semantic-release post"},"peerDependencies":{"webpack":"*"},"dependencies":{"ajv":"4.11.2","async":"^2.5.0","loader-utils":"^1.1.0","schema-utils":"^0.3.0","style-loader":"^0.18.2","webpack-sources":"^1.0.1"},"devDependencies":{"codecov.io":"^0.1.2","commitizen":"^2.9.6","coveralls":"^2.11.2","css-loader":"^0.28.0","cz-conventional-changelog":"^2.0.0","file-loader":"^0.11.1","istanbul":"^0.4.5","mocha":"^3.2.0","mocha-lcov-reporter":"1.3.0","raw-loader":"^0.5.1","semantic-release":"^6.3.2","should":"^11.1.2","standard-version":"^4.0.0","webpack":"^2.2.0"},"homepage":"http://github.com/faceyspacey/extract-css-chunks-webpack-plugin","repository":{"type":"git","url":"git+https://github.com/faceyspacey/extract-css-chunks-webpack-plugin.git"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"gitHead":"75a49c1e3018a319f9c64aa25a82f5b2d22720f1","bugs":{"url":"https://github.com/faceyspacey/extract-css-chunks-webpack-plugin/issues"},"_id":"extract-css-chunks-webpack-plugin@2.0.10","_npmVersion":"5.3.0","_nodeVersion":"8.2.1","_npmUser":{"name":"faceyspacey","email":"james@faceyspacey.com"},"dist":{"integrity":"sha512-dR2v3IJRg+IJJOd62fnW+8j1q+xOkYK2XqTXhn0lIueWGBbMiNtQpSW3xCayUvF6xRjBUpBIiM2EJ8Zl5DoQ1w==","shasum":"eb6007ac5e1302484cca5385e52c1cc9963b2762","tarball":"https://registry.npmjs.org/extract-css-chunks-webpack-plugin/-/extract-css-chunks-webpack-plugin-2.0.10.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCmhGNcM7wDKkFXYO0ePuSST0Yzbjld1uBw5fI+0w2vjgIhANEx1QB7kqC5mDQv9TXPYzPZWiUsVMODqLa02rLxl2Hp"}]},"maintainers":[{"name":"faceyspacey","email":"james@faceyspacey.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/extract-css-chunks-webpack-plugin-2.0.10.tgz_1501169351288_0.48179187648929656"},"directories":{}},"2.0.11":{"name":"extract-css-chunks-webpack-plugin","version":"2.0.11","author":{"name":"James Gillmore","email":"james@faceyspacey.com"},"description":"Extract CSS from chunks into stylesheets + HMR","engines":{"node":">=4.3.0 < 5.0.0 || >= 5.10"},"main":"index.js","files":["schema","ExtractedModule.js","index.js","loader.js","OrderUndefinedError.js","hotModuleReplacement.js"],"license":"MIT","scripts":{"test":"mocha","travis":"npm run cover -- --report lcovonly","cover":"istanbul cover _mocha","release":"standard-version","build:example":"(cd example && webpack)","cm":"git-cz","semantic-release":"semantic-release pre && npm publish && semantic-release post"},"peerDependencies":{"webpack":"*"},"dependencies":{"ajv":"4.11.2","async":"^2.5.0","loader-utils":"^1.1.0","schema-utils":"^0.3.0","style-loader":"^0.18.2","webpack-sources":"^1.0.1"},"devDependencies":{"codecov.io":"^0.1.2","commitizen":"^2.9.6","coveralls":"^2.11.2","css-loader":"^0.28.0","cz-conventional-changelog":"^2.0.0","file-loader":"^0.11.1","istanbul":"^0.4.5","mocha":"^3.2.0","mocha-lcov-reporter":"1.3.0","raw-loader":"^0.5.1","semantic-release":"^6.3.2","should":"^11.1.2","standard-version":"^4.0.0","webpack":"^2.2.0"},"homepage":"http://github.com/faceyspacey/extract-css-chunks-webpack-plugin","repository":{"type":"git","url":"git+https://github.com/faceyspacey/extract-css-chunks-webpack-plugin.git"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"gitHead":"56d2c92eaaad45fd69d19c399b02c60b92dbb138","bugs":{"url":"https://github.com/faceyspacey/extract-css-chunks-webpack-plugin/issues"},"_id":"extract-css-chunks-webpack-plugin@2.0.11","_npmVersion":"5.3.0","_nodeVersion":"8.2.1","_npmUser":{"name":"faceyspacey","email":"james@faceyspacey.com"},"dist":{"integrity":"sha512-k66p+sdVEG5y6hffc6SUncKrnTM3wWCtvUAvJfX0LYNaMzJauf+V4jES/2i9azYlRlaoV9AY2XIPfQCZGM64Rg==","shasum":"27cafca08b0da97917c926edcc31af712308a00a","tarball":"https://registry.npmjs.org/extract-css-chunks-webpack-plugin/-/extract-css-chunks-webpack-plugin-2.0.11.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE6zVk8kNSgHz0GKZ2RGaHtRCx8pK50SLzV42sgFsKkpAiALNw3e8CtPTexY4UozSe/4rjRzFrPUJGYBbRaZCaeLHg=="}]},"maintainers":[{"name":"faceyspacey","email":"james@faceyspacey.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/extract-css-chunks-webpack-plugin-2.0.11.tgz_1501169806272_0.9939781180582941"},"directories":{}},"2.0.12":{"name":"extract-css-chunks-webpack-plugin","version":"2.0.12","author":{"name":"James Gillmore","email":"james@faceyspacey.com"},"description":"Extract CSS from chunks into stylesheets + HMR","engines":{"node":">=4.3.0 < 5.0.0 || >= 5.10"},"main":"index.js","files":["schema","ExtractedModule.js","index.js","loader.js","OrderUndefinedError.js","hotModuleReplacement.js"],"license":"MIT","scripts":{"test":"mocha","travis":"npm run cover -- --report lcovonly","cover":"istanbul cover _mocha","release":"standard-version","build:example":"(cd example && webpack)","cm":"git-cz","semantic-release":"semantic-release pre && npm publish && semantic-release post"},"peerDependencies":{"webpack":"*"},"dependencies":{"ajv":"4.11.2","async":"^2.5.0","loader-utils":"^1.1.0","schema-utils":"^0.3.0","style-loader":"^0.18.2","webpack-sources":"^1.0.1"},"devDependencies":{"codecov.io":"^0.1.2","commitizen":"^2.9.6","coveralls":"^2.11.2","css-loader":"^0.28.0","cz-conventional-changelog":"^2.0.0","file-loader":"^0.11.1","istanbul":"^0.4.5","mocha":"^3.2.0","mocha-lcov-reporter":"1.3.0","raw-loader":"^0.5.1","semantic-release":"^6.3.2","should":"^11.1.2","standard-version":"^4.0.0","webpack":"^2.2.0"},"homepage":"http://github.com/faceyspacey/extract-css-chunks-webpack-plugin","repository":{"type":"git","url":"git+https://github.com/faceyspacey/extract-css-chunks-webpack-plugin.git"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"gitHead":"d2d64ae81169761544a8870373970d5de6afe0ad","bugs":{"url":"https://github.com/faceyspacey/extract-css-chunks-webpack-plugin/issues"},"_id":"extract-css-chunks-webpack-plugin@2.0.12","_npmVersion":"5.3.0","_nodeVersion":"8.2.1","_npmUser":{"name":"faceyspacey","email":"james@faceyspacey.com"},"dist":{"integrity":"sha512-y+SbmXtjnq9fHyEcMlqEL7Ss3uK/yG8OK6AaJDc8BV2geCYLSPfErfkz29k8KYf3SEbt219+rtOxWwcnpYDwbA==","shasum":"3dc52c520b41cbc6d267ae8281f4b3477197aa7f","tarball":"https://registry.npmjs.org/extract-css-chunks-webpack-plugin/-/extract-css-chunks-webpack-plugin-2.0.12.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCQZL4G/sR5G8TM4tr+lJ56Ot7/Qj9t3KewGqD4uW3RBQIhANbls0JAB5+AF0hRfykZJPFck2LV/kakYNxVaGiQOvuT"}]},"maintainers":[{"name":"faceyspacey","email":"james@faceyspacey.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/extract-css-chunks-webpack-plugin-2.0.12.tgz_1501170305532_0.9147395652253181"},"directories":{}},"2.0.13":{"name":"extract-css-chunks-webpack-plugin","version":"2.0.13","author":{"name":"James Gillmore","email":"james@faceyspacey.com"},"description":"Extract CSS from chunks into stylesheets + HMR","engines":{"node":">=4.3.0 < 5.0.0 || >= 5.10"},"main":"index.js","files":["schema","ExtractedModule.js","index.js","loader.js","OrderUndefinedError.js","hotModuleReplacement.js"],"license":"MIT","scripts":{"test":"mocha","travis":"npm run cover -- --report lcovonly","cover":"istanbul cover _mocha","release":"standard-version","build:example":"(cd example && webpack)","cm":"git-cz","semantic-release":"semantic-release pre && npm publish && semantic-release post"},"peerDependencies":{"webpack":"*"},"dependencies":{"ajv":"4.11.2","async":"^2.5.0","loader-utils":"^1.1.0","schema-utils":"^0.3.0","style-loader":"^0.18.2","webpack-sources":"^1.0.1"},"devDependencies":{"codecov.io":"^0.1.2","commitizen":"^2.9.6","coveralls":"^2.11.2","css-loader":"^0.28.0","cz-conventional-changelog":"^2.0.0","file-loader":"^0.11.1","istanbul":"^0.4.5","mocha":"^3.2.0","mocha-lcov-reporter":"1.3.0","raw-loader":"^0.5.1","semantic-release":"^6.3.2","should":"^11.1.2","standard-version":"^4.0.0","webpack":"^2.2.0"},"homepage":"http://github.com/faceyspacey/extract-css-chunks-webpack-plugin","repository":{"type":"git","url":"git+https://github.com/faceyspacey/extract-css-chunks-webpack-plugin.git"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"gitHead":"a0fe7bd4ef468b0630570efd8c0329ec14d5f620","bugs":{"url":"https://github.com/faceyspacey/extract-css-chunks-webpack-plugin/issues"},"_id":"extract-css-chunks-webpack-plugin@2.0.13","_npmVersion":"5.3.0","_nodeVersion":"8.2.1","_npmUser":{"name":"faceyspacey","email":"james@faceyspacey.com"},"dist":{"integrity":"sha512-TBPyBSAdx0RdAPlq9YRXpHLls0oEyjBVuzi2NAkCrkGRsW/HLLerV8fHOtnS2SBQ+jlUmda+RgDUXVnd22KTcw==","shasum":"17f157b96fcc1d9d72c7901490004ad6067ca236","tarball":"https://registry.npmjs.org/extract-css-chunks-webpack-plugin/-/extract-css-chunks-webpack-plugin-2.0.13.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDLD8JXstuGr6EC29rP9ToDt2iR8+6J0/qFaqgNQSziYAiEAniWfAaqLX02P1nen4jlAtEYPDuDAwUpnIGs11szGrbI="}]},"maintainers":[{"name":"faceyspacey","email":"james@faceyspacey.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/extract-css-chunks-webpack-plugin-2.0.13.tgz_1501170410060_0.5362861284520477"},"directories":{}},"2.0.14":{"name":"extract-css-chunks-webpack-plugin","version":"2.0.14","author":{"name":"James Gillmore","email":"james@faceyspacey.com"},"description":"Extract CSS from chunks into stylesheets + HMR","engines":{"node":">=4.3.0 < 5.0.0 || >= 5.10"},"main":"index.js","files":["schema","ExtractedModule.js","index.js","loader.js","OrderUndefinedError.js","hotModuleReplacement.js"],"license":"MIT","scripts":{"test":"mocha","travis":"npm run cover -- --report lcovonly","cover":"istanbul cover _mocha","release":"standard-version","build:example":"(cd example && webpack)","cm":"git-cz","semantic-release":"semantic-release pre && npm publish && semantic-release post"},"peerDependencies":{"webpack":"*"},"dependencies":{"ajv":"4.11.2","async":"^2.5.0","loader-utils":"^1.1.0","schema-utils":"^0.3.0","style-loader":"^0.18.2","webpack-sources":"^1.0.1"},"devDependencies":{"codecov.io":"^0.1.2","commitizen":"^2.9.6","coveralls":"^2.11.2","css-loader":"^0.28.0","cz-conventional-changelog":"^2.0.0","file-loader":"^0.11.1","istanbul":"^0.4.5","mocha":"^3.2.0","mocha-lcov-reporter":"1.3.0","raw-loader":"^0.5.1","semantic-release":"^6.3.2","should":"^11.1.2","standard-version":"^4.0.0","webpack":"^2.2.0"},"homepage":"http://github.com/faceyspacey/extract-css-chunks-webpack-plugin","repository":{"type":"git","url":"git+https://github.com/faceyspacey/extract-css-chunks-webpack-plugin.git"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"gitHead":"17cb80ee67544c1b6a6288bc3533ee84b3a45176","bugs":{"url":"https://github.com/faceyspacey/extract-css-chunks-webpack-plugin/issues"},"_id":"extract-css-chunks-webpack-plugin@2.0.14","_npmVersion":"5.3.0","_nodeVersion":"8.2.1","_npmUser":{"name":"faceyspacey","email":"james@faceyspacey.com"},"dist":{"integrity":"sha512-GBLy4QFMCyMAfLBa2Is4e/Aibvp09p1mHG8iSniqycCmtLcnvxHxBmKtoE7fWFePkbyETT23CLTRAGbgAosaew==","shasum":"71ef4ba31cbaaa37322789976a56843af8de915f","tarball":"https://registry.npmjs.org/extract-css-chunks-webpack-plugin/-/extract-css-chunks-webpack-plugin-2.0.14.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGsSZZTb9GwVlMym4Bi41bu4Zk5GeekO7JKz67nnUW1DAiBetUtjU+ra4byR9q2pW+fNXokxl1+HDvk6pW69mZyecQ=="}]},"maintainers":[{"name":"faceyspacey","email":"james@faceyspacey.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/extract-css-chunks-webpack-plugin-2.0.14.tgz_1501171608897_0.8132831216789782"},"directories":{}},"2.0.15":{"name":"extract-css-chunks-webpack-plugin","version":"2.0.15","author":{"name":"James Gillmore","email":"james@faceyspacey.com"},"description":"Extract CSS from chunks into stylesheets + HMR","engines":{"node":">=4.3.0 < 5.0.0 || >= 5.10"},"main":"index.js","files":["schema","ExtractedModule.js","index.js","loader.js","OrderUndefinedError.js","hotModuleReplacement.js"],"license":"MIT","scripts":{"test":"mocha","travis":"npm run cover -- --report lcovonly","cover":"istanbul cover _mocha","release":"standard-version","build:example":"(cd example && webpack)","cm":"git-cz","semantic-release":"semantic-release pre && npm publish && semantic-release post"},"peerDependencies":{"webpack":"*"},"dependencies":{"ajv":"4.11.2","async":"^2.5.0","loader-utils":"^1.1.0","schema-utils":"^0.3.0","style-loader":"^0.18.2","webpack-sources":"^1.0.1"},"devDependencies":{"codecov.io":"^0.1.2","commitizen":"^2.9.6","coveralls":"^2.11.2","css-loader":"^0.28.0","cz-conventional-changelog":"^2.0.0","file-loader":"^0.11.1","istanbul":"^0.4.5","mocha":"^3.2.0","mocha-lcov-reporter":"1.3.0","raw-loader":"^0.5.1","semantic-release":"^6.3.2","should":"^11.1.2","standard-version":"^4.0.0","webpack":"^2.2.0"},"homepage":"http://github.com/faceyspacey/extract-css-chunks-webpack-plugin","repository":{"type":"git","url":"git+https://github.com/faceyspacey/extract-css-chunks-webpack-plugin.git"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"gitHead":"9be32e96c06a0929dedeace65b90330f232706d8","bugs":{"url":"https://github.com/faceyspacey/extract-css-chunks-webpack-plugin/issues"},"_id":"extract-css-chunks-webpack-plugin@2.0.15","_npmVersion":"5.3.0","_nodeVersion":"8.2.1","_npmUser":{"name":"faceyspacey","email":"james@faceyspacey.com"},"dist":{"integrity":"sha512-S7nz8n8Ub8MxgUnxReDaD1YhfS9o0KvXHD/C/zsgWm1IXvGVHzGJhs59oubH2p3TP56l+UtOppcWWM7c+vsD/A==","shasum":"7ba65b53a1c1fa4b2b562760ffe0c1356ac6fcdf","tarball":"https://registry.npmjs.org/extract-css-chunks-webpack-plugin/-/extract-css-chunks-webpack-plugin-2.0.15.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAEbgr9QB3XbndSALDOVNpYqjwh5LPcmkG1JlJYDxmOfAiEAmSiqWtiQG2UYuLFP8mPHO6GMQ7maAKsAh27qOKsojp4="}]},"maintainers":[{"name":"faceyspacey","email":"james@faceyspacey.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/extract-css-chunks-webpack-plugin-2.0.15.tgz_1501171680754_0.24208657979033887"},"directories":{}},"2.0.16":{"name":"extract-css-chunks-webpack-plugin","version":"2.0.16","author":{"name":"James Gillmore","email":"james@faceyspacey.com"},"description":"Extract CSS from chunks into stylesheets + HMR","engines":{"node":">=4.3.0 < 5.0.0 || >= 5.10"},"main":"index.js","files":["schema","ExtractedModule.js","index.js","loader.js","OrderUndefinedError.js","hotModuleReplacement.js"],"license":"MIT","scripts":{"test":"mocha","travis":"npm run cover -- --report lcovonly","cover":"istanbul cover _mocha","release":"standard-version","build:example":"(cd example && webpack)","cm":"git-cz","semantic-release":"semantic-release pre && npm publish && semantic-release post"},"peerDependencies":{"webpack":"*"},"dependencies":{"ajv":"4.11.2","async":"^2.5.0","loader-utils":"^1.1.0","schema-utils":"^0.3.0","style-loader":"^0.18.2","webpack-sources":"^1.0.1"},"devDependencies":{"codecov.io":"^0.1.2","commitizen":"^2.9.6","coveralls":"^2.11.2","css-loader":"^0.28.0","cz-conventional-changelog":"^2.0.0","file-loader":"^0.11.1","istanbul":"^0.4.5","mocha":"^3.2.0","mocha-lcov-reporter":"1.3.0","raw-loader":"^0.5.1","semantic-release":"^6.3.2","should":"^11.1.2","standard-version":"^4.0.0","webpack":"^2.2.0"},"homepage":"http://github.com/faceyspacey/extract-css-chunks-webpack-plugin","repository":{"type":"git","url":"git+https://github.com/faceyspacey/extract-css-chunks-webpack-plugin.git"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"gitHead":"c483e5ab7714d8c3abaeaedcf14fe59f3c8356a2","bugs":{"url":"https://github.com/faceyspacey/extract-css-chunks-webpack-plugin/issues"},"_id":"extract-css-chunks-webpack-plugin@2.0.16","_npmVersion":"5.3.0","_nodeVersion":"8.2.1","_npmUser":{"name":"faceyspacey","email":"james@faceyspacey.com"},"dist":{"integrity":"sha512-Nern5KvKhTJ7WUZJzaOsz21uYuUq7Osax7ZJtcssEc9B1f0jUE/3QP/z+QHHJOVqnMu9txvwqE9En0GGxrjFLw==","shasum":"63d3c62c97da6c22970170217791f03dd291ada3","tarball":"https://registry.npmjs.org/extract-css-chunks-webpack-plugin/-/extract-css-chunks-webpack-plugin-2.0.16.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDQmpNSdDLyvj6ZLiagkJA21huA7w8Gjr8Ke1RB1TvjzwIgQq2FOnYSFkt6sOKpQvK6b+70CClIpKQfZlAx87kFpFI="}]},"maintainers":[{"name":"faceyspacey","email":"james@faceyspacey.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/extract-css-chunks-webpack-plugin-2.0.16.tgz_1501497953303_0.10460926545783877"},"directories":{}},"2.0.17":{"name":"extract-css-chunks-webpack-plugin","version":"2.0.17","author":{"name":"James Gillmore","email":"james@faceyspacey.com"},"description":"Extract CSS from chunks into stylesheets + HMR","engines":{"node":">=4.3.0 < 5.0.0 || >= 5.10"},"main":"index.js","files":["schema","ExtractedModule.js","index.js","loader.js","OrderUndefinedError.js","hotModuleReplacement.js"],"license":"MIT","scripts":{"test":"mocha","travis":"npm run cover -- --report lcovonly","cover":"istanbul cover _mocha","release":"standard-version","build:example":"(cd example && webpack)","cm":"git-cz","semantic-release":"semantic-release pre && npm publish && semantic-release post"},"peerDependencies":{"webpack":"*"},"dependencies":{"ajv":"4.11.2","async":"^2.5.0","loader-utils":"^1.1.0","schema-utils":"^0.3.0","style-loader":"^0.18.2","webpack-sources":"^1.0.1"},"devDependencies":{"codecov.io":"^0.1.2","commitizen":"^2.9.6","coveralls":"^2.11.2","css-loader":"^0.28.0","cz-conventional-changelog":"^2.0.0","file-loader":"^0.11.1","istanbul":"^0.4.5","mocha":"^3.2.0","mocha-lcov-reporter":"1.3.0","raw-loader":"^0.5.1","semantic-release":"^6.3.2","should":"^11.1.2","standard-version":"^4.0.0","webpack":"^2.2.0"},"homepage":"http://github.com/faceyspacey/extract-css-chunks-webpack-plugin","repository":{"type":"git","url":"git+https://github.com/faceyspacey/extract-css-chunks-webpack-plugin.git"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"gitHead":"fdbe0e6c1740ce1fcce4e3666d16ab6f77979eca","bugs":{"url":"https://github.com/faceyspacey/extract-css-chunks-webpack-plugin/issues"},"_id":"extract-css-chunks-webpack-plugin@2.0.17","_npmVersion":"5.3.0","_nodeVersion":"8.4.0","_npmUser":{"name":"faceyspacey","email":"james@faceyspacey.com"},"dist":{"integrity":"sha512-+mqRD/JAxVmgeB3OfYr48IHrsx2/4/ELpOR6luH/KIxGikIwcSATAfzK3qtGDvi6zTkc5Mp9LkrqqOjXGa+DCA==","shasum":"2ded0d3ed1e507f1fe058b9242baec007b98f2e2","tarball":"https://registry.npmjs.org/extract-css-chunks-webpack-plugin/-/extract-css-chunks-webpack-plugin-2.0.17.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFm2ioflRTk2q9SbO2M7937S2dziPcGFpGgXEQqKYHulAiEAma3UcVh86qCdPzJpBP55AIABc1gCJh/v1m3T2VXogkg="}]},"maintainers":[{"name":"faceyspacey","email":"james@faceyspacey.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/extract-css-chunks-webpack-plugin-2.0.17.tgz_1503702992975_0.7177897491492331"},"directories":{}},"2.0.18":{"name":"extract-css-chunks-webpack-plugin","version":"2.0.18","author":{"name":"James Gillmore","email":"james@faceyspacey.com"},"description":"Extract CSS from chunks into stylesheets + HMR","engines":{"node":">=4.3.0 < 5.0.0 || >= 5.10"},"main":"index.js","files":["schema","ExtractedModule.js","index.js","loader.js","OrderUndefinedError.js","hotModuleReplacement.js"],"license":"MIT","scripts":{"test":"mocha","travis":"npm run cover -- --report lcovonly","cover":"istanbul cover _mocha","release":"standard-version","build:example":"(cd example && webpack)","cm":"git-cz","semantic-release":"semantic-release pre && npm publish && semantic-release post"},"peerDependencies":{"webpack":"*"},"dependencies":{"ajv":"4.11.2","async":"^2.5.0","loader-utils":"^1.1.0","schema-utils":"^0.3.0","style-loader":"^0.18.2","webpack-sources":"^1.0.1"},"devDependencies":{"codecov.io":"^0.1.2","commitizen":"^2.9.6","coveralls":"^2.11.2","css-loader":"^0.28.0","cz-conventional-changelog":"^2.0.0","file-loader":"^0.11.1","istanbul":"^0.4.5","mocha":"^3.2.0","mocha-lcov-reporter":"1.3.0","raw-loader":"^0.5.1","semantic-release":"^6.3.2","should":"^11.1.2","standard-version":"^4.0.0","webpack":"^2.2.0"},"homepage":"http://github.com/faceyspacey/extract-css-chunks-webpack-plugin","repository":{"type":"git","url":"git+https://github.com/faceyspacey/extract-css-chunks-webpack-plugin.git"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"gitHead":"6d68cef078bca4e6bbd56cf4dad89fcad45c6a0f","bugs":{"url":"https://github.com/faceyspacey/extract-css-chunks-webpack-plugin/issues"},"_id":"extract-css-chunks-webpack-plugin@2.0.18","_npmVersion":"5.5.1","_nodeVersion":"9.2.0","_npmUser":{"name":"faceyspacey","email":"james@faceyspacey.com"},"dist":{"integrity":"sha512-wqUcO5cSjc9BegjEc/6o6xx/b1go1fSMwAfsJiQyKrbeAcH7RFhSS7wvE/euYGuTbgYuRroGvFBgWJYrhnys5A==","shasum":"74951e5d7c3bb683914922f339b1851116356412","tarball":"https://registry.npmjs.org/extract-css-chunks-webpack-plugin/-/extract-css-chunks-webpack-plugin-2.0.18.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC9eARzkx/8j2EHhouE/28XanMi2fHwtRBoY3eMJtMgDAiEAiFn+qeWyBiZP0ZOvsBogPtdjmUvDrFwZoKtZIhoodJs="}]},"maintainers":[{"name":"faceyspacey","email":"james@faceyspacey.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/extract-css-chunks-webpack-plugin-2.0.18.tgz_1511200821442_0.8389013661071658"},"directories":{}},"2.0.19":{"name":"extract-css-chunks-webpack-plugin","version":"2.0.19","author":{"name":"James Gillmore","email":"james@faceyspacey.com"},"description":"Extract CSS from chunks into stylesheets + HMR","engines":{"node":">=4.3.0 < 5.0.0 || >= 5.10"},"main":"index.js","files":["schema","ExtractedModule.js","index.js","loader.js","OrderUndefinedError.js","hotModuleReplacement.js"],"license":"MIT","scripts":{"test":"mocha","travis":"npm run cover -- --report lcovonly","cover":"istanbul cover _mocha","release":"standard-version","build:example":"(cd example && webpack)","cm":"git-cz","semantic-release":"semantic-release pre && npm publish && semantic-release post"},"peerDependencies":{"webpack":"*"},"dependencies":{"ajv":"4.11.2","async":"^2.5.0","loader-utils":"^1.1.0","schema-utils":"^0.3.0","style-loader":"^0.18.2","webpack-sources":"^1.0.1"},"devDependencies":{"codecov.io":"^0.1.2","commitizen":"^2.9.6","coveralls":"^2.11.2","css-loader":"^0.28.0","cz-conventional-changelog":"^2.0.0","file-loader":"^0.11.1","istanbul":"^0.4.5","mocha":"^3.2.0","mocha-lcov-reporter":"1.3.0","raw-loader":"^0.5.1","semantic-release":"^6.3.2","should":"^11.1.2","standard-version":"^4.0.0","webpack":"^2.2.0"},"homepage":"http://github.com/faceyspacey/extract-css-chunks-webpack-plugin","repository":{"type":"git","url":"git+https://github.com/faceyspacey/extract-css-chunks-webpack-plugin.git"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"gitHead":"1035f57a30dc12a56d28d3a14e33a00b1779d920","bugs":{"url":"https://github.com/faceyspacey/extract-css-chunks-webpack-plugin/issues"},"_id":"extract-css-chunks-webpack-plugin@2.0.19","_npmVersion":"5.6.0","_nodeVersion":"9.11.1","_npmUser":{"name":"faceyspacey","email":"james@faceyspacey.com"},"dist":{"integrity":"sha512-zSQx/jVLgs4uWDfMirYA/Gr78GnvJfcmxo6FIx4YvgU+ihtxPVmtuxyyIBSBptgBJtXcDB7z96KCDEVUo8Ksng==","shasum":"a2babd7f51568165944f5ed4816bcd4bf84f5bbb","tarball":"https://registry.npmjs.org/extract-css-chunks-webpack-plugin/-/extract-css-chunks-webpack-plugin-2.0.19.tgz","fileCount":12,"unpackedSize":46975,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa3kuACRA9TVsSAnZWagAAWuQP/0Bx7cEZIYlUyMYY1esO\nzLgVzZGjPLDeph0vWkWSJDASQZgTj+w8NjydsA5BNHy0Tx1mBj+c7tm2WmGq\nIEhgVA3uXct/g6z0OTxLuIzTbCt/EjbRxeFf2s7VlaowmGZ1tYuz92MJwmVc\ngyEXTYkQOlp4GzMNLpPXJy0VlkoKrdkFMnCeYPWc3xT8ntsWgwiwjehyc+Fa\njOfSTk56H7f4sJlv/c9UztC6+BCv5IlToH1e8jMs5wKddCKvVFAaauYrM/o/\ny1NT0wMI/c5QN2qL9PNQsOq7lGua+jDexEgU7u/qv2nOK5il9ca57XMD/Cge\nYul01+HLdCxXHQnlnmPy4zmRer6ptBlRSv7SrgubsC1hl8GPh6dzB0jDZHIn\nQbTLa9n4FWMmCkiUQEzDbYFC2KiKUedhcS+AWO4bB8cSagCnxIFULY07KIBb\nBRTHI8I2oh/825dAqxgUhicO3spON83CptoGYN/NrQIQcxvfJgS2qnGzEqli\n/5HcdpPW/TZTrvScHxfj4wr0gXBlaf206aPLa3Mb2uSKYNHrB4rpTjn4fmiu\nDZxJbfF94cEmFvXYRKhVfWy5vKuqiZq7/f6CeSDNeUNl5YgMNyO13TgOBCkO\n5uEK2bwWJJMt8mp9KToaZL2bO+Xbudy1dwXXJB/GYu/LBJqJKqal48nUqMOU\nixiX\r\n=DpT8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCRJ5KgQ4gHR/5xeDEwUqyDGOyTFjpgUFLHvPfI7vZEXwIhAJEi67Hir1gFYvFAJAhBvWlUYNuTmNa74Qy4aRQY8yH+"}]},"maintainers":[{"name":"faceyspacey","email":"james@faceyspacey.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/extract-css-chunks-webpack-plugin_2.0.19_1524517758836_0.8880000650765152"},"_hasShrinkwrap":false},"3.0.0":{"name":"extract-css-chunks-webpack-plugin","version":"3.0.0","author":{"name":"James Gillmore","email":"james@faceyspacey.com"},"description":"Extract CSS from chunks into stylesheets + HMR","engines":{"node":">= 6.9.0 <7.0.0 || >= 8.9.0"},"main":"dist/cjs.js","files":["dist"],"license":"MIT","scripts":{"start":"npm run build -- -w","build":"cross-env NODE_ENV=production babel src -d dist --ignore 'src/**/*.test.js' --copy-files","clean":"del-cli dist","lint":"eslint --cache --fix src test","prebuild":"npm run clean","prepublish":"npm run build","security":"nsp check","test":"jest","test:watch":"jest --watch","test:coverage":"jest --collectCoverageFrom='src/**/*.js' --coverage","test:example":"npm run build && webpack-dev-server test/manual/src/index.js --config test/manual/webpack.config.js","ci:lint":"npm run lint && npm run security","ci:test":"npm run test -- --runInBand","ci:coverage":"npm run test:coverage -- --runInBand","build:example":"npm run build && webpack-dev-server test/manual/src/index.js --open --config test/manual/webpack.config.js","cm":"git-cz","semantic-release":"semantic-release pre && npm publish && semantic-release post","travis":"npm run cover -- --report lcovonly"},"peerDependencies":{"webpack":"^4.4.0"},"dependencies":{"loader-utils":"^1.1.0","lodash":"^4.17.5","normalize-url":"^1.9.1","webpack-sources":"^1.1.0"},"devDependencies":{"@webpack-contrib/eslint-config-webpack":"^2.0.4","babel-cli":"^6.26.0","babel-eslint":"^7.2.3","babel-jest":"^22.2.2","babel-loader":"^7.1.4","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-polyfill":"^6.26.0","babel-preset-env":"^1.6.1","commitizen":"^2.10.1","conventional-github-releaser":"^2.0.2","cross-env":"^5.1.3","css-loader":"^0.28.10","cz-conventional-changelog":"^2.1.0","del":"^3.0.0","del-cli":"^1.1.0","eslint":"^3.19.0","eslint-config-airbnb":"^15.0.1","eslint-plugin-flowtype":"^2.32.1","eslint-plugin-import":"^2.8.0","eslint-plugin-jsx-a11y":"^5.0.3","eslint-plugin-prettier":"^2.6.0","eslint-plugin-react":"^7.0.1","husky":"^0.14.3","jest":"^22.2.2","memory-fs":"^0.4.1","nsp":"^3.1.0","pre-commit":"^1.2.2","prettier":"^1.11.1","standard-version":"^4.3.0","webpack":"^4.4.0","webpack-cli":"^2.0.13","webpack-dev-server":"^3.1.1"},"homepage":"http://github.com/faceyspacey/extract-css-chunks-webpack-plugin","repository":{"type":"git","url":"git+https://github.com/faceyspacey/extract-css-chunks-webpack-plugin.git"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"readme":"<a href=\"https://gitter.im/Reactlandia/Lobby\" target=\"_blank\">\n  <img alt=\"Edit Redux-First Router Demo\" src=\"http://cdn.reactlandia.com/chat-badge-reactlandia.png\">\n</a>\n\n\n# extract-css-chunks-webpack-plugin\n\n<p align=\"center\">\n  <a href=\"https://www.npmjs.com/package/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://img.shields.io/npm/v/extract-css-chunks-webpack-plugin.svg\" alt=\"Version\" />\n  </a>\n\n  <a href=\"https://travis-ci.org/faceyspacey/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://travis-ci.org/faceyspacey/extract-css-chunks-webpack-plugin.svg?branch=master\" alt=\"Build Status\" />\n  </a>\n\n  <a href=\"https://www.npmjs.com/package/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://img.shields.io/npm/dt/extract-css-chunks-webpack-plugin.svg\" alt=\"Downloads\" />\n  </a>\n</p>\n\n\n> **HEADLINES (May 2018): Now Independently supports Webpack 4:** \nYep that's right. The universal family is now fully Webpack 4. Thank you to all our users for your loyalty and patience! If you love Universal, then you are gonna fall head over heels when we bring out the main course! \n\nSo... why did we rebuild `extract-css-chunks`? What does it offer? \n\nIts got all the goodness of `mini-css-extract-plugin` but with 2 gleaming, sought after benefits. \n\nCompared to the existing loaders, we are offering a single solution as opposed to needing to depend on multiple loaders to cater for different features:\n\n* Async loading\n* No duplicate compilation (performance)\n* Easier to use\n* Specific to CSS\n* True **Hot Module Reloading** - that means no `style-loader`\n* SSR Friendly development build, focused on frontend DX\n* Works seamlessly with the Universal family\n* Works fantastically as a standalone style loader (You can use it for any webpack project! with no extra dependencies!)\n\nAdditionally, if you are already a user of the universal family -- we will be waving goodbye to the mandatory ```window.__CSS_CHUNKS__```.\n\nThe functionality is still available to you via chunk flushing, and it can come in super handy when needing to easily resolve style assets as urls that might need to be passed to a third party.\n\n\n# BETA TESTING WEBPACK 4\n\nIf you want to test this alpha branch, which is currently not published to the NPM registry. \n\nAdd the following to your package.json file, then `npm i`\n\n    \"extract-css-chunks-webpack-plugin\": \"git+ssh://git@github.com/zackljackson/extract-css-chunks-webpack-plugin.git#webpack-4\",\n\n\n## Webpack 4 Standalone Installation:\n\nIf you are just looking for something that works like `mini-css-extract-plugin` but with HMR. Then look no further\n\nNOTE: We have aligned out loader implementation to be the same as `mini-css-extract-plugin` \n\n**If you already use `mini-css-extract-plugin`, then you can just change the `require` statement - its that easy**\n\n\n**DONT USE THIS INSTALL CMD IF YOU ARE BETA TESTING:**\n```\nyarn add --dev extract-css-chunks-webpack-plugin\n```\n\n*webpack.config.js:*\n```js\nconst ExtractCssChunks = require(\"extract-css-chunks-webpack-plugin\")\n\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [\n           ExtractCssChunks.loader,\n           \"css-loader\"\n         ]\n      }\n    ]\n  },\n  plugins: [\n    new ExtractCssChunks(\n        {\n          // Options similar to the same options in webpackOptions.output\n          // both options are optional\n          filename: \"[name].css\",\n          chunkFilename: \"[id].css\"\n        }\n    ),\n  ]\n}\n```\n\n\n\n### What about Webpack 3?\nThis is a breaking change. The entire loader has been fundamentally rewritten specifically for Webpack 4. Aiming to support our existing user base, allowing them to upgrade their infrastructure to support Webpack 4 based universally code-split server-side rendered react applications. \n\nThere have been some challenges along the way since the release of webpack 4. Ultimately the only remaining hurdle is code split, async style loading. \n\nIf you do need Webpack 3, make sure to stick with the latest `v2.x.x` release. `v3.x.x` is only intend for users with Webpack 4\n\n\n\n\n*Note: this is a companion package to:*\n- [webpack-flush-chunks](https://github.com/faceyspacey/webpack-flush-chunks) \n- [react-universal-component](https://github.com/faceyspacey/react-universal-component)\n- [babel-plugin-universal-import](https://github.com/faceyspacey/babel-plugin-universal-import) ***or*** [babel-plugin-dual-import](https://github.com/faceyspacey/babel-plugin-dual-import)\n\n<details><summary>See Old Docs</summary>\nLike `extract-text-webpack-plugin`, but creates multiple css files (one per chunk). Then, as part of server side rendering, you can deliver just the css chunks needed by the current request. The result is the most minimal CSS initially served compared to emerging \"render path\" solutions.\n\nFor a demo, `git clone`: [universal-demo](https://github.com/faceyspacey/universal-demo)\n\n## Recommended Installation\n```\nyarn add react-universal-component webpack-flush-chunks\nyarn add --dev extract-css-chunks-webpack-plugin babel-plugin-universal-import\n```\n\n*.babelrc:*\n```js\n{\n  \"plugins\": [\"universal-import\"]\n}\n```\n\n*webpack.config.js:*\n```js\nconst ExtractCssChunks = require(\"extract-css-chunks-webpack-plugin\")\n\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: ExtractCssChunks.extract({\n          use: {\n            loader: 'css-loader',\n            options: {\n              modules: true,\n              localIdentName: '[name]__[local]--[hash:base64:5]'\n            }\n          }\n        })\n      }\n    ]\n  },\n  plugins: [\n    new ExtractCssChunks,\n  ]\n}\n```\n\n## Desired Output\nHere's the sort of CSS you can expect to serve:\n\n```\n<head>\n\t<link rel='stylesheet' href='/static/main.css' />\n\t<link rel='stylesheet' href='/static/0.css' />\n\t<link rel='stylesheet' href='/static/7.css' />\n</head> \n\n<body>\n\t<div id=\"react-root\"></div>\n\t\n\t<script type='text/javascript' src='/static/vendor.js'></script>\n\t<script type='text/javascript' src='/static/0.js'></script>\n\t<script type='text/javascript' src='/static/7.js'></script>\n\t<script type='text/javascript' src='/static/main.js'></script>\n\n\t<!-- stylsheets that will be requested when import() on user navigation is called -->\n\t<script>\n\t\twindow.__CSS_CHUNKS__ = {\n\t\t\tFoo: '/static/Foo.css',\n\t\t\tBar: '/static/Bar.css'\n\t\t}\n\t</script>\n</body>\n```\n\n[webpack-flush-chunks](https://github.com/faceyspacey/webpack-flush-chunks) will scoop up the exact stylesheets to embed in your response. It essentially automates producing the above. \n\nHere's how you do it:\n\n*src/components/App.js:*\n```js\nconst UniversalComponent = universal(props => import(`./${props.page}`))\n\n<UniversalComponent page='Foo' />\n```\n\n*server/render.js:*\n```js\nimport { flushChunkNames } from 'react-universal-component/server'\nimport flushChunks from 'webpack-flush-chunks'\n\nconst app = ReactDOMServer.renderToString(<App />)\nconst { js, styles, cssHash } = flushChunks(webpackStats, {\n  chunkNames: flushChunkNames()\n})\n\nres.send(`\n  <!doctype html>\n  <html>\n    <head>\n      ${styles}\n    </head>\n    <body>\n      <div id=\"root\">${app}</div>\n      ${cssHash}\n      ${js}\n    </body>\n  </html>\n`)\n```\n\n***As for asynchronous calls to `import()` on user navigation,*** [babel-plugin-universal-import](https://github.com/faceyspacey/babel-plugin-universal-import) is required if you're using [react-universal-component](https://github.com/faceyspacey/react-universal-component). And if you aren't, you must use: [babel-plugin-dual-import](https://github.com/faceyspacey/babel-plugin-dual-import). \n\nThese babel plugins request both your js + your css. *Very Nice!* This is the new feature of the 2.0. Read *Sokra's* (author of webpack) article on how [on how this is the future of CSS for webpack](https://medium.com/webpack/the-new-css-workflow-step-1-79583bd107d7). Use this and be in the future today.\n\n## Perks\n- **HMR:** It also has first-class support for **Hot Module Replacement** across ALL those css files/chunks!!!\n- cacheable stylesheets \n- smallest total bytes sent compared to \"render-path\" css-in-js solutions that include your CSS definitions in JS\n- Faster than the V1!\n\n\n\n\n## API \nYou can pass the same options as `extract-text-webpack-plugin` to `new ExtractCssChunks`, such as:\n\n```javascript\nnew ExtractCssChunk({\n\tfilename: '[name].[contenthash].css'\n})\n```\n\nKeep in mind, by default `[name].css` is used when `process.env.NODE_ENV === 'development'` and `[name].[contenthash].css` during production, so you can likely forget about having to pass anything.\n\nThe 2 exceptions are: `allChunks` will no longer do anything, and `fallback` will no longer do anything when passed to to `extract`. Basically just worry about passing your `css-loader` string and `localIdentName` 🤓\n\n\n### HMR Pitfall\n\nThe most common workflow when working with webpack is to write a \"development\" / \"production\" value in to the\n'process.env.NODE_ENV' namespace, typically, using webpack's built-in \"DefinePlugin\" plugin. e.g:\n\n```javascript\nnew webpack.DefinePlugin( {\n     'process.env': {\n        NODE_ENV: `\"${config.devMode ? 'development' : 'production'}\"`,\n      },\n} )\n```\nThe value set by the aformentioned plugin will only be available in the runtime ( when webpack's javascript output is excuted ).\nIn order for this plugin to work with hot module reloading, The npm script / gulp task / grunt task etc, should be invoked with the same environment variable as shown above.\n\nFor example, when running the build using some form of npm script:\n\n```json\n{\n  \"scripts\": {\n    \"build\": \"cross-env NODE_ENV=development webpack --config build/webpack.config.js\"\n  }\n}\n```\n[cross-env](https://www.npmjs.com/package/cross-env) is optional but recommended. \n\n## What about Glamorous, Styled Components, Styled-Jsx, Aphrodite, etc?\n\nIf you effectively use code-splitting, **Exract Css Chunks** can be a far better option than using emerging solutions like *Glamorous*, *Styled Components*, and slightly older tools like *Aphrodite*, *Glamor*, etc. We aren't fans of either rounds of tools because of several issues, but particularly because they all have a runtime overhead. Every time your React component is rendered with those, CSS is generated and updated within the DOM. On the server, you're going to also see unnecessary cycles for flushing the CSS along the critical render path. *Next.js's* `styled-jsx`, by the way, doesn't even work on the server--*not so good when it comes to flash of unstyled content (FOUC).*\n\nThe reason *Extract CSS Chunk* can be a better option is because *we also generate multiple sets of CSS based on what is actually \"used\",* ***but without the runtime overhead***. The difference is our definition of \"used\" is modules determined *statically* (which may not in fact be rendered) vs. what is in the \"critical render path\" (as is the case with the other tools). \n\nSo yes, our CSS may be mildly larger and include unnecessary css, but our `no_css.js` bundles will be a lot smaller as they don't need to inject any styles. See, even though those solutions have the smallest possible CSS file size, their javascript bundles, *in order to continue to render your components styled properly on the client,* must contain the necessary CSS for all posibilities! Those solutions serve both your entire bundle's CSS (in your javascript) *and* the CSS flushed from the critical render path. \n\nOn top of that, those are extra packages all with a huge number of issues in their Github repos corresponding to various limitations in the CSS they generate--something that is prevented when your definition for \"CSS-in-JS\" is simply importing CSS files compiled as normal by powerful proven CSS-specific processors.\n\nLastly, those solutions don't provide cacheable stylesheets. They do a lot of work--but they will *continue* doing it for you when you could have been done in one go long ago. Cloudflare is free--serve them through their CDN and you're winning. I love true javascript in css--don't get me wrong--but first I'd have to see they generate cacheable stylesheets. In my opinion, for now, it's best for environments that natively support it such as React Native.\n\n#### Next:\n\nNow with that out of the way, for completeness let's compare what bytes of just the CSS are sent over the wire. The difference basically is minimal. Whereas solutions that flush from the critical render path will capture no more than the precise bits of CSS from the `if/else` branches followed, **Extract Css Chunks** is all about you effectively using code-splitting to insure, for example, you don't serve your Administration Panel's CSS in your public-facing site, etc. *In other words, it's all about avoiding serving large swaths of CSS from completely different sections of your app.* ***I.e. the biggest gains available to you.*** \n\nThis is where the real problem lies--where the real amount of unnecessary CSS comes from. If you effectively code-split your app, you may end up with 10 chunks. Now you can serve just the corresonding CSS for that chunk. If you try to go even farther and remove the css not used in the render path, you're likely acheiving somewhere between 1-20% of the gains you achieved by thorough code-splitting. In other words, code splitting fulfills the 80/20 rule and attains the simple sweetspot of 80% optimization you--*as a balanced, level-headed, non-neurotic and professional developer*--are looking to achieve.\n\n*In short, by putting code splitting in appropriate places you have a lot of control over the CSS files that are created and can send a sensible* ***minimal*** *amount of associated bytes over the wire for the first request, perhaps even the smallest amount of all options.* \n\nIt's our perspective that you have achieved 80-99% of the performance gains (i.e. the creation of small relevant css files) at this ***static stage***. Offloading this work to the runtime stage is ultimately nit-picking and results in diminishing returns. When you factor that your JS bundle has to contain that JS anyway, those solutions make less and less sense from the perspective of reducing bytes delivered in the initial request. \n\nThere may be other reasons to use those tools (e.g. you don't like setting up webpack configs, or somehow you're really fond of pre-creating many `<div />` elements with their styles), but we prefer a simple standards-based way (without HoCs or specialized style components) to import styles just as you would in React Native. However to give the other tools credit, many of them likely started out with a different problem motivating them: avoiding webpack configs so you can include packages and their contained CSS without client apps being required to setup something like CSS loaders in Webpack. Having your CSS completely contained in true JS has its use cases, but at the application level--especially when you're already using something like Webpack--we fail to see its benefits. About all they share is a solution to avoiding *flashes of unstyled content* (FOUC), except one can save you a lot more bytes in what you send over the wire and save you from a continual runtime overhead where it's not needed. ***Honorable Mention:*** *StyleTron's concept of \"atomic declaration-level deduplication\" where it will make a class out of, say, `color: blue` so you don't need to send redundant styles certainly is a novel innovation, but again if the code still exists in your JS and you're building an application using Webpack (instead of a package), what's the point. In fact, it just makes editing the stylesheets in your browser developer tools more complicated. One benefit of critical render path solutions is the browser can spend less time matching the smaller number of styles to new DOM nodes as they appear, but then again it also has to spend the time injecting and parsing the new styles constantly, which is likely costlier.*\n\nAs an aside, so many apps share code between web and React Native--so the answer to the styles problem must be one that is identical for both. From that perspective importing a styles object *still* makes a lot of sense. **You're not missing out on the fundamental aspect of CSS-in-JSS:** ***isolated component-level styles and the ability to import them just like any other javascript code.*** Put them in other files, and use tools like `extract-css-chunks-webpack-plugin` and your pre-processors of choice that innately get styles right for the browser. As long as you're using *CSS Modules*, you're still at the cutting edge of CSS-in-JSS. Let's just say the other tools took one wrong turn and took it too far, when we already were at our destination. \n\n\n\n**SUMMARY OF BENEFITS COMPARED TO \"CRITICAL-RENDER-PATH\" SOLUTIONS:** \n\n- no continual runtime overhead during `render` using HoCs that inject styles\n- smaller JS bundles without CSS injection\n- **You DO NOT need to clutter your component code with a specialized way of applying CSS (HoCs, styled elements)!** \n- The way you import module-based styles is exactly how you would import styles in React Native that exist in a separate file, which allows for extremely interchangeable code between React Native and regular React. Hurray! \n- pretty much already does everything covered by [@vjeux's 2014 css-in-js talk](https://speakerdeck.com/vjeux/react-css-in-js), besides dead code elimination. Dead code elimination is only solved for the other tools--as per the explanation above how the CSS is in the JS anyway--so much as Webpack and Uglify can remove **JS** that is not used. Either way, it's not a stretch to eventually add this feature to `extract-text-webpack-plugin` as well as this plugin. Hey, maybe it already has it??\n\n\n## Emotion!\n\n[Emotion](https://github.com/tkh44/emotion) is different. They allow for the extraction of static styles via their *extract mode*. We're very much looking forward to this being the perfect companion to the css chunks approach. \n\nCurrently however *extract mode* does not support IE11. So that means it's a no go, but we have hopes that in the future they'll solve that problem.\n\nThe reason Emotion doesn't work in IE11+ is because they currently try to preserve any dynamic aspects of your CSS-in-JS by converting it CSS vars, which isn't supported in IE11. That was a very smart approach, but unfortunately not good enough. \n\nThe vision we'd like to see for that package is where dynamic css stays inline, and where only static CSS is extracted into stylesheets, in which case CSS vars aren't needed. I've heard from them they have some \"hidden flags\" that allow for something close to this. When, and if, they take this feature all the way, look forward to us pushing it as our recommended approach. *Go Emotion!*\n\n## Linaria\n\nLinaria is another modern CSS-in-JSS library. It's focused around static styles, which may make it a perfect fit for usage with this plugin. Check it out:\n\nhttps://github.com/callstack/linaria\n\n## What if I don't use SSR and use html-webpack-plugin?\n\nFor that case you can use [css-chunks-html-webpack-plugin](https://github.com/mike1808/css-chunks-html-webpack-plugin) which will extract CSS chunks paths into your HTML file.\n\n\n## Conclusion:\n**We love CSS modules; no less, no more.**\n\n**Long live the dream of Code Splitting Everywhere!**\n\n\n## Contributing\nWe use [commitizen](https://github.com/commitizen/cz-cli), so run `npm run cm` to make commits. A command-line form will appear, requiring you answer a few questions to automatically produce a nicely formatted commit. Releases, semantic version numbers, tags and changelogs will automatically be generated based on these commits thanks to [semantic-release](https://github.com/semantic-release/semantic-release). Be good.\n\n## More from FaceySpacey in Reactlandia\n- [redux-first-router](https://github.com/faceyspacey/redux-first-router). It's made to work perfectly with *Universal*. Together they comprise our *\"frameworkless\"* Redux-based approach to what Next.js does (splitting, SSR, prefetching, and routing). *People are lovin it by the way* 😎\n\n</details>\n","readmeFilename":"README.md","gitHead":"42d5b0d8b3a97bb93476d79069441abdd18fa1bf","bugs":{"url":"https://github.com/faceyspacey/extract-css-chunks-webpack-plugin/issues"},"_id":"extract-css-chunks-webpack-plugin@3.0.0","_npmVersion":"5.8.0","_nodeVersion":"8.9.4","_npmUser":{"name":"zackljackson","email":"zackary.l.jackson@gmail.com"},"dist":{"integrity":"sha512-mp8TXXhuDSuuXszT5ijANGJTglj06Aycfjr8/l4R8RXvGEitzGH1aJA9IxpZwIb6lASx3fUmvR5E/Q5qnY83OQ==","shasum":"2f8fe52f20860fa33f57ab95794df00fee2eca6c","tarball":"https://registry.npmjs.org/extract-css-chunks-webpack-plugin/-/extract-css-chunks-webpack-plugin-3.0.0.tgz","fileCount":9,"unpackedSize":49523,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbEE91CRA9TVsSAnZWagAAb40P/AzEJJECWIoGKfcujpkM\nB5Tz0OyRURb3b4Km93xH/wqYDhWFHv+zWEkTMqyShcKJBhIRDn5dRNPxwMnP\nxja2gNZ3h/1R7ziILNaExlVUCt6Bmg6ObUOJoe4kVY45/UOokwV1CaeMwt7K\nYO2l6hXOCmljOBRy1feCKl9tl0XdDgLsMUJVEIruupdX9+w1Ns4nBCa5Tsn7\n9bdvsBW37p+QrtFI6j9DdyVFanHsmrSXyxwqeyipSmrkPJ+sH/cgfUMpHkwh\npDBvWJjfVdH86FCtHP2wXptV7MIvRwSX7uFkVQqpBSvJDw9nZ6nXE+UojGC8\nafnJ3VJGM76xIWQX+pGl5Rae9622zeGR43vgA7eclYC0VKDEnnqRkjBf88Rd\ndLUh2Fo3M/c0HF6Y9u4TEZiruqne39Gqrrr4hseYscdcDNkrceXyesHwFqkZ\n6ydiUfaW/lxhhapy/HVKMxa0iR26tXo65qu3FuNhSnwl52ufSwV+/JQuOKQL\nkH5MuWkFQO/Vi1oQnWCW9Km6hzI0dd/q1f3FwTUsA64oE8VrcAtZeYzHB0VN\nUqpviwHLbKTxMgZaLthilH1e1CFK9IDS8A+9o+uVbbdRa2rr7a1FLghwJmDc\nO49wTCtLHjqyWR4rHAqFaak3rNiwMPgA5EfjUXB+ruy31b4gbEmvLaBvUe6U\nRaYv\r\n=MPmQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAbtDOaDOMVM9UXfKs2f+NjC+3ThkA3cB9vNY2ffF86EAiEAs9PrU5OUZyO0/ByD331FHHEijzpvIhoOhTiN0DR6NyY="}]},"maintainers":[{"email":"james@faceyspacey.com","name":"faceyspacey"},{"email":"zackary.l.jackson@gmail.com","name":"zackljackson"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/extract-css-chunks-webpack-plugin_3.0.0_1527795572925_0.5356967859944755"},"_hasShrinkwrap":false},"3.0.0-beta.1":{"name":"extract-css-chunks-webpack-plugin","version":"3.0.0-beta.1","author":{"name":"James Gillmore","email":"james@faceyspacey.com"},"contributors":[{"name":"Zack Jackson","email":"zackary.l.jackson@gmail.com","url":"https://github.com/zackljackson"}],"description":"Extract CSS from chunks into stylesheets + HMR. Supports Webpack 4","engines":{"node":">= 6.9.0 <7.0.0 || >= 8.9.0"},"main":"dist/cjs.js","files":["dist"],"license":"MIT","scripts":{"start":"npm run build -- -w","build":"cross-env NODE_ENV=production babel src -d dist --ignore 'src/**/*.test.js' --copy-files","clean":"del-cli dist","lint":"eslint --cache --fix src test","prebuild":"npm run clean","prepublish":"npm run build","security":"nsp check","test":"jest","test:watch":"jest --watch","test:coverage":"jest --collectCoverageFrom='src/**/*.js' --coverage","test:example":"npm run build && webpack-dev-server test/manual/src/index.js --config test/manual/webpack.config.js","ci:lint":"npm run lint && npm run security","ci:test":"npm run test -- --runInBand","ci:coverage":"npm run test:coverage -- --runInBand","build:example":"npm run build && webpack-dev-server test/manual/src/index.js --open --config test/manual/webpack.config.js","cm":"git-cz","semantic-release":"semantic-release pre && npm publish && semantic-release post","travis":"npm run cover -- --report lcovonly"},"peerDependencies":{"webpack":"^4.4.0"},"dependencies":{"loader-utils":"^1.1.0","lodash":"^4.17.5","normalize-url":"^1.9.1","webpack-sources":"^1.1.0"},"devDependencies":{"@webpack-contrib/eslint-config-webpack":"^2.0.4","babel-cli":"^6.26.0","babel-eslint":"^7.2.3","babel-jest":"^22.2.2","babel-loader":"^7.1.4","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-polyfill":"^6.26.0","babel-preset-env":"^1.6.1","commitizen":"^2.10.1","conventional-github-releaser":"^2.0.2","cross-env":"^5.1.3","css-loader":"^0.28.10","cz-conventional-changelog":"^2.1.0","del":"^3.0.0","del-cli":"^1.1.0","eslint":"^3.19.0","eslint-config-airbnb":"^15.0.1","eslint-plugin-flowtype":"^2.32.1","eslint-plugin-import":"^2.8.0","eslint-plugin-jsx-a11y":"^5.0.3","eslint-plugin-prettier":"^2.6.0","eslint-plugin-react":"^7.0.1","husky":"^0.14.3","jest":"^22.2.2","memory-fs":"^0.4.1","nsp":"^3.1.0","pre-commit":"^1.2.2","prettier":"^1.11.1","standard-version":"^4.3.0","webpack":"^4.4.0","webpack-cli":"^2.0.13","webpack-dev-server":"^3.1.1"},"homepage":"http://github.com/faceyspacey/extract-css-chunks-webpack-plugin","repository":{"type":"git","url":"git+https://github.com/faceyspacey/extract-css-chunks-webpack-plugin.git"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"readme":"<a href=\"https://gitter.im/Reactlandia/Lobby\" target=\"_blank\">\n  <img alt=\"Edit Redux-First Router Demo\" src=\"http://cdn.reactlandia.com/chat-badge-reactlandia.png\">\n</a>\n\n\n# extract-css-chunks-webpack-plugin\n\n<p align=\"center\">\n  <a href=\"https://www.npmjs.com/package/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://img.shields.io/npm/v/extract-css-chunks-webpack-plugin.svg\" alt=\"Version\" />\n  </a>\n\n  <a href=\"https://travis-ci.org/faceyspacey/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://travis-ci.org/faceyspacey/extract-css-chunks-webpack-plugin.svg?branch=master\" alt=\"Build Status\" />\n  </a>\n\n  <a href=\"https://www.npmjs.com/package/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://img.shields.io/npm/dt/extract-css-chunks-webpack-plugin.svg\" alt=\"Downloads\" />\n  </a>\n</p>\n\n\n> **HEADLINES (May 2018): Now Independently supports Webpack 4:** \nYep that's right. The universal family is now fully Webpack 4. Thank you to all our users for your loyalty and patience! If you love Universal, then you are gonna fall head over heels when we bring out the main course! \n\nSo... why did we rebuild `extract-css-chunks`? What does it offer? \n\nIts got all the goodness of `mini-css-extract-plugin` but with 2 gleaming, sought after benefits. \n\nCompared to the existing loaders, we are offering a single solution as opposed to needing to depend on multiple loaders to cater for different features:\n\n* Async loading\n* No duplicate compilation (performance)\n* Easier to use\n* Specific to CSS\n* True **Hot Module Reloading** - that means no `style-loader`\n* SSR Friendly development build, focused on frontend DX\n* Works seamlessly with the Universal family\n* Works fantastically as a standalone style loader (You can use it for any webpack project! with no extra dependencies!)\n\nAdditionally, if you are already a user of the universal family -- we will be waving goodbye to the mandatory ```window.__CSS_CHUNKS__```.\n\nThe functionality is still available to you via chunk flushing, and it can come in super handy when needing to easily resolve style assets as urls that might need to be passed to a third party.\n\n\n# BETA TESTING WEBPACK 4\n\nIf you want to test this alpha branch, which is currently not published to the NPM registry. \n\nAdd the following to your package.json file, then\n\n    npm i extract-css-chunks-webpack-plugin@next\n\n\n## Webpack 4 Standalone Installation:\n\nIf you are just looking for something that works like `mini-css-extract-plugin` but with HMR. Then look no further\n\nNOTE: We have aligned out loader implementation to be the same as `mini-css-extract-plugin` \n\n**If you already use `mini-css-extract-plugin`, then you can just change the `require` statement - its that easy**\n\n\n**DONT USE THIS INSTALL CMD IF YOU ARE BETA TESTING:**\n```\nyarn add --dev extract-css-chunks-webpack-plugin\n```\n\n*webpack.config.js:*\n```js\nconst ExtractCssChunks = require(\"extract-css-chunks-webpack-plugin\")\n\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [\n           ExtractCssChunks.loader,\n           \"css-loader\"\n         ]\n      }\n    ]\n  },\n  plugins: [\n    new ExtractCssChunks(\n        {\n          // Options similar to the same options in webpackOptions.output\n          // both options are optional\n          filename: \"[name].css\",\n          chunkFilename: \"[id].css\"\n        }\n    ),\n  ]\n}\n```\n\n\n\n### What about Webpack 3?\nThis is a breaking change. The entire loader has been fundamentally rewritten specifically for Webpack 4. Aiming to support our existing user base, allowing them to upgrade their infrastructure to support Webpack 4 based universally code-split server-side rendered react applications. \n\nThere have been some challenges along the way since the release of webpack 4. Ultimately the only remaining hurdle is code split, async style loading. \n\nIf you do need Webpack 3, make sure to stick with the latest `v2.x.x` release. `v3.x.x` is only intend for users with Webpack 4\n\n\n\n\n*Note: this is a companion package to:*\n- [webpack-flush-chunks](https://github.com/faceyspacey/webpack-flush-chunks) \n- [react-universal-component](https://github.com/faceyspacey/react-universal-component)\n- [babel-plugin-universal-import](https://github.com/faceyspacey/babel-plugin-universal-import) ***or*** [babel-plugin-dual-import](https://github.com/faceyspacey/babel-plugin-dual-import)\n\n<details><summary>See Old Docs</summary>\nLike `extract-text-webpack-plugin`, but creates multiple css files (one per chunk). Then, as part of server side rendering, you can deliver just the css chunks needed by the current request. The result is the most minimal CSS initially served compared to emerging \"render path\" solutions.\n\nFor a demo, `git clone`: [universal-demo](https://github.com/faceyspacey/universal-demo)\n\n## Recommended Installation\n```\nyarn add react-universal-component webpack-flush-chunks\nyarn add --dev extract-css-chunks-webpack-plugin babel-plugin-universal-import\n```\n\n*.babelrc:*\n```js\n{\n  \"plugins\": [\"universal-import\"]\n}\n```\n\n*webpack.config.js:*\n```js\nconst ExtractCssChunks = require(\"extract-css-chunks-webpack-plugin\")\n\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: ExtractCssChunks.extract({\n          use: {\n            loader: 'css-loader',\n            options: {\n              modules: true,\n              localIdentName: '[name]__[local]--[hash:base64:5]'\n            }\n          }\n        })\n      }\n    ]\n  },\n  plugins: [\n    new ExtractCssChunks,\n  ]\n}\n```\n\n## Desired Output\nHere's the sort of CSS you can expect to serve:\n\n```\n<head>\n\t<link rel='stylesheet' href='/static/main.css' />\n\t<link rel='stylesheet' href='/static/0.css' />\n\t<link rel='stylesheet' href='/static/7.css' />\n</head> \n\n<body>\n\t<div id=\"react-root\"></div>\n\t\n\t<script type='text/javascript' src='/static/vendor.js'></script>\n\t<script type='text/javascript' src='/static/0.js'></script>\n\t<script type='text/javascript' src='/static/7.js'></script>\n\t<script type='text/javascript' src='/static/main.js'></script>\n\n\t<!-- stylsheets that will be requested when import() on user navigation is called -->\n\t<script>\n\t\twindow.__CSS_CHUNKS__ = {\n\t\t\tFoo: '/static/Foo.css',\n\t\t\tBar: '/static/Bar.css'\n\t\t}\n\t</script>\n</body>\n```\n\n[webpack-flush-chunks](https://github.com/faceyspacey/webpack-flush-chunks) will scoop up the exact stylesheets to embed in your response. It essentially automates producing the above. \n\nHere's how you do it:\n\n*src/components/App.js:*\n```js\nconst UniversalComponent = universal(props => import(`./${props.page}`))\n\n<UniversalComponent page='Foo' />\n```\n\n*server/render.js:*\n```js\nimport { flushChunkNames } from 'react-universal-component/server'\nimport flushChunks from 'webpack-flush-chunks'\n\nconst app = ReactDOMServer.renderToString(<App />)\nconst { js, styles, cssHash } = flushChunks(webpackStats, {\n  chunkNames: flushChunkNames()\n})\n\nres.send(`\n  <!doctype html>\n  <html>\n    <head>\n      ${styles}\n    </head>\n    <body>\n      <div id=\"root\">${app}</div>\n      ${cssHash}\n      ${js}\n    </body>\n  </html>\n`)\n```\n\n***As for asynchronous calls to `import()` on user navigation,*** [babel-plugin-universal-import](https://github.com/faceyspacey/babel-plugin-universal-import) is required if you're using [react-universal-component](https://github.com/faceyspacey/react-universal-component). And if you aren't, you must use: [babel-plugin-dual-import](https://github.com/faceyspacey/babel-plugin-dual-import). \n\nThese babel plugins request both your js + your css. *Very Nice!* This is the new feature of the 2.0. Read *Sokra's* (author of webpack) article on how [on how this is the future of CSS for webpack](https://medium.com/webpack/the-new-css-workflow-step-1-79583bd107d7). Use this and be in the future today.\n\n## Perks\n- **HMR:** It also has first-class support for **Hot Module Replacement** across ALL those css files/chunks!!!\n- cacheable stylesheets \n- smallest total bytes sent compared to \"render-path\" css-in-js solutions that include your CSS definitions in JS\n- Faster than the V1!\n\n\n\n\n## API \nYou can pass the same options as `extract-text-webpack-plugin` to `new ExtractCssChunks`, such as:\n\n```javascript\nnew ExtractCssChunk({\n\tfilename: '[name].[contenthash].css'\n})\n```\n\nKeep in mind, by default `[name].css` is used when `process.env.NODE_ENV === 'development'` and `[name].[contenthash].css` during production, so you can likely forget about having to pass anything.\n\nThe 2 exceptions are: `allChunks` will no longer do anything, and `fallback` will no longer do anything when passed to to `extract`. Basically just worry about passing your `css-loader` string and `localIdentName` 🤓\n\n\n### HMR Pitfall\n\nThe most common workflow when working with webpack is to write a \"development\" / \"production\" value in to the\n'process.env.NODE_ENV' namespace, typically, using webpack's built-in \"DefinePlugin\" plugin. e.g:\n\n```javascript\nnew webpack.DefinePlugin( {\n     'process.env': {\n        NODE_ENV: `\"${config.devMode ? 'development' : 'production'}\"`,\n      },\n} )\n```\nThe value set by the aformentioned plugin will only be available in the runtime ( when webpack's javascript output is excuted ).\nIn order for this plugin to work with hot module reloading, The npm script / gulp task / grunt task etc, should be invoked with the same environment variable as shown above.\n\nFor example, when running the build using some form of npm script:\n\n```json\n{\n  \"scripts\": {\n    \"build\": \"cross-env NODE_ENV=development webpack --config build/webpack.config.js\"\n  }\n}\n```\n[cross-env](https://www.npmjs.com/package/cross-env) is optional but recommended. \n\n## What about Glamorous, Styled Components, Styled-Jsx, Aphrodite, etc?\n\nIf you effectively use code-splitting, **Exract Css Chunks** can be a far better option than using emerging solutions like *Glamorous*, *Styled Components*, and slightly older tools like *Aphrodite*, *Glamor*, etc. We aren't fans of either rounds of tools because of several issues, but particularly because they all have a runtime overhead. Every time your React component is rendered with those, CSS is generated and updated within the DOM. On the server, you're going to also see unnecessary cycles for flushing the CSS along the critical render path. *Next.js's* `styled-jsx`, by the way, doesn't even work on the server--*not so good when it comes to flash of unstyled content (FOUC).*\n\nThe reason *Extract CSS Chunk* can be a better option is because *we also generate multiple sets of CSS based on what is actually \"used\",* ***but without the runtime overhead***. The difference is our definition of \"used\" is modules determined *statically* (which may not in fact be rendered) vs. what is in the \"critical render path\" (as is the case with the other tools). \n\nSo yes, our CSS may be mildly larger and include unnecessary css, but our `no_css.js` bundles will be a lot smaller as they don't need to inject any styles. See, even though those solutions have the smallest possible CSS file size, their javascript bundles, *in order to continue to render your components styled properly on the client,* must contain the necessary CSS for all posibilities! Those solutions serve both your entire bundle's CSS (in your javascript) *and* the CSS flushed from the critical render path. \n\nOn top of that, those are extra packages all with a huge number of issues in their Github repos corresponding to various limitations in the CSS they generate--something that is prevented when your definition for \"CSS-in-JS\" is simply importing CSS files compiled as normal by powerful proven CSS-specific processors.\n\nLastly, those solutions don't provide cacheable stylesheets. They do a lot of work--but they will *continue* doing it for you when you could have been done in one go long ago. Cloudflare is free--serve them through their CDN and you're winning. I love true javascript in css--don't get me wrong--but first I'd have to see they generate cacheable stylesheets. In my opinion, for now, it's best for environments that natively support it such as React Native.\n\n#### Next:\n\nNow with that out of the way, for completeness let's compare what bytes of just the CSS are sent over the wire. The difference basically is minimal. Whereas solutions that flush from the critical render path will capture no more than the precise bits of CSS from the `if/else` branches followed, **Extract Css Chunks** is all about you effectively using code-splitting to insure, for example, you don't serve your Administration Panel's CSS in your public-facing site, etc. *In other words, it's all about avoiding serving large swaths of CSS from completely different sections of your app.* ***I.e. the biggest gains available to you.*** \n\nThis is where the real problem lies--where the real amount of unnecessary CSS comes from. If you effectively code-split your app, you may end up with 10 chunks. Now you can serve just the corresonding CSS for that chunk. If you try to go even farther and remove the css not used in the render path, you're likely acheiving somewhere between 1-20% of the gains you achieved by thorough code-splitting. In other words, code splitting fulfills the 80/20 rule and attains the simple sweetspot of 80% optimization you--*as a balanced, level-headed, non-neurotic and professional developer*--are looking to achieve.\n\n*In short, by putting code splitting in appropriate places you have a lot of control over the CSS files that are created and can send a sensible* ***minimal*** *amount of associated bytes over the wire for the first request, perhaps even the smallest amount of all options.* \n\nIt's our perspective that you have achieved 80-99% of the performance gains (i.e. the creation of small relevant css files) at this ***static stage***. Offloading this work to the runtime stage is ultimately nit-picking and results in diminishing returns. When you factor that your JS bundle has to contain that JS anyway, those solutions make less and less sense from the perspective of reducing bytes delivered in the initial request. \n\nThere may be other reasons to use those tools (e.g. you don't like setting up webpack configs, or somehow you're really fond of pre-creating many `<div />` elements with their styles), but we prefer a simple standards-based way (without HoCs or specialized style components) to import styles just as you would in React Native. However to give the other tools credit, many of them likely started out with a different problem motivating them: avoiding webpack configs so you can include packages and their contained CSS without client apps being required to setup something like CSS loaders in Webpack. Having your CSS completely contained in true JS has its use cases, but at the application level--especially when you're already using something like Webpack--we fail to see its benefits. About all they share is a solution to avoiding *flashes of unstyled content* (FOUC), except one can save you a lot more bytes in what you send over the wire and save you from a continual runtime overhead where it's not needed. ***Honorable Mention:*** *StyleTron's concept of \"atomic declaration-level deduplication\" where it will make a class out of, say, `color: blue` so you don't need to send redundant styles certainly is a novel innovation, but again if the code still exists in your JS and you're building an application using Webpack (instead of a package), what's the point. In fact, it just makes editing the stylesheets in your browser developer tools more complicated. One benefit of critical render path solutions is the browser can spend less time matching the smaller number of styles to new DOM nodes as they appear, but then again it also has to spend the time injecting and parsing the new styles constantly, which is likely costlier.*\n\nAs an aside, so many apps share code between web and React Native--so the answer to the styles problem must be one that is identical for both. From that perspective importing a styles object *still* makes a lot of sense. **You're not missing out on the fundamental aspect of CSS-in-JSS:** ***isolated component-level styles and the ability to import them just like any other javascript code.*** Put them in other files, and use tools like `extract-css-chunks-webpack-plugin` and your pre-processors of choice that innately get styles right for the browser. As long as you're using *CSS Modules*, you're still at the cutting edge of CSS-in-JSS. Let's just say the other tools took one wrong turn and took it too far, when we already were at our destination. \n\n\n\n**SUMMARY OF BENEFITS COMPARED TO \"CRITICAL-RENDER-PATH\" SOLUTIONS:** \n\n- no continual runtime overhead during `render` using HoCs that inject styles\n- smaller JS bundles without CSS injection\n- **You DO NOT need to clutter your component code with a specialized way of applying CSS (HoCs, styled elements)!** \n- The way you import module-based styles is exactly how you would import styles in React Native that exist in a separate file, which allows for extremely interchangeable code between React Native and regular React. Hurray! \n- pretty much already does everything covered by [@vjeux's 2014 css-in-js talk](https://speakerdeck.com/vjeux/react-css-in-js), besides dead code elimination. Dead code elimination is only solved for the other tools--as per the explanation above how the CSS is in the JS anyway--so much as Webpack and Uglify can remove **JS** that is not used. Either way, it's not a stretch to eventually add this feature to `extract-text-webpack-plugin` as well as this plugin. Hey, maybe it already has it??\n\n\n## Emotion!\n\n[Emotion](https://github.com/tkh44/emotion) is different. They allow for the extraction of static styles via their *extract mode*. We're very much looking forward to this being the perfect companion to the css chunks approach. \n\nCurrently however *extract mode* does not support IE11. So that means it's a no go, but we have hopes that in the future they'll solve that problem.\n\nThe reason Emotion doesn't work in IE11+ is because they currently try to preserve any dynamic aspects of your CSS-in-JS by converting it CSS vars, which isn't supported in IE11. That was a very smart approach, but unfortunately not good enough. \n\nThe vision we'd like to see for that package is where dynamic css stays inline, and where only static CSS is extracted into stylesheets, in which case CSS vars aren't needed. I've heard from them they have some \"hidden flags\" that allow for something close to this. When, and if, they take this feature all the way, look forward to us pushing it as our recommended approach. *Go Emotion!*\n\n## Linaria\n\nLinaria is another modern CSS-in-JSS library. It's focused around static styles, which may make it a perfect fit for usage with this plugin. Check it out:\n\nhttps://github.com/callstack/linaria\n\n## What if I don't use SSR and use html-webpack-plugin?\n\nFor that case you can use [css-chunks-html-webpack-plugin](https://github.com/mike1808/css-chunks-html-webpack-plugin) which will extract CSS chunks paths into your HTML file.\n\n\n## Conclusion:\n**We love CSS modules; no less, no more.**\n\n**Long live the dream of Code Splitting Everywhere!**\n\n\n## Contributing\nWe use [commitizen](https://github.com/commitizen/cz-cli), so run `npm run cm` to make commits. A command-line form will appear, requiring you answer a few questions to automatically produce a nicely formatted commit. Releases, semantic version numbers, tags and changelogs will automatically be generated based on these commits thanks to [semantic-release](https://github.com/semantic-release/semantic-release). Be good.\n\n## More from FaceySpacey in Reactlandia\n- [redux-first-router](https://github.com/faceyspacey/redux-first-router). It's made to work perfectly with *Universal*. Together they comprise our *\"frameworkless\"* Redux-based approach to what Next.js does (splitting, SSR, prefetching, and routing). *People are lovin it by the way* 😎\n\n</details>\n","readmeFilename":"README.md","gitHead":"50cd8a7cfa32f45f1125ed0d8d1a8e81ab41b089","bugs":{"url":"https://github.com/faceyspacey/extract-css-chunks-webpack-plugin/issues"},"_id":"extract-css-chunks-webpack-plugin@3.0.0-beta.1","_npmVersion":"5.8.0","_nodeVersion":"8.9.4","_npmUser":{"name":"zackljackson","email":"zackary.l.jackson@gmail.com"},"dist":{"integrity":"sha512-S99R9MWX5+mKYRAD/XbjtbaWzFzc043SKdzau51vxoQuLq+zQS85QBSFlm42JqBg7IZ5MSFBNddju425dnbXow==","shasum":"5ffc71f40bacff23f495cbccc5519691f2451ebf","tarball":"https://registry.npmjs.org/extract-css-chunks-webpack-plugin/-/extract-css-chunks-webpack-plugin-3.0.0-beta.1.tgz","fileCount":9,"unpackedSize":50124,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbEMBNCRA9TVsSAnZWagAACUoP/18GLYyJowza97exZcl3\nD+C2XNutYHCBV6z/ojAUrVg/RmfXFGgsEdiRsUFWsaKhWHG+edKalLvudAJj\n5AkCeKylc7ZBcr1x6ptJx+VO6+gqjiC0hodP12SAE3apvaqZeH5HJIetRbLD\nCTVs9BwqUmnYMtggqxek3hQcFgFuoLlkkcw/3bR2RALM2DwAdQ0IkKVWbZtr\nYAkSyUuKgRsNHQa2vNyfj7qzD4SLs3HTsWlAAUPPHfimNBliPrag4sNCHY5N\nNWiE5zGDUx9wzrUV3M5FIxINGwJxTHfWTCIovKsIb0gYghbk5fpEM1Nxeea6\n0g7I7gFeaD1pSWpFyZMPPVIee3R5d8g6sOw9LY49KCm3aPRwKFPMGKdxguAk\niuiDsrsfBQUv/BimdhSDgrq28bg3Z3xPRkXwe4yv0j0Rs9QsZKoMR8N7gEGD\nDRR/M917UPqsFYbMx63hEn838Tlu7PtoRl508K2cZDlGKBrBQ9qLpdQdKbQu\n//oAL1b3zXbEjAO9w41PJnJ1nAbXy9HGDUlwivRqn5FPZmZLcClCxJoI79ht\n6qUZpkp5aRB/6Isq2KIhH0gy7mcXekqIUzmBc22fqaiO+6Qm0L2HGx//ehR6\nRElEr9y08l8NeUavyHCshc7YMBGwbrrg06BdIz5ZmqK8SONzJpgCzsV9oLWM\n617X\r\n=3kPm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDPUtwwO7YV9xCYCnF1LxB8RnvejFSQhV2VlE9mR9vvlAIhAPzERGbcm7t7Ch0wdNtVx9Tn0/zG6oMKQcYtptVyBEjv"}]},"maintainers":[{"email":"james@faceyspacey.com","name":"faceyspacey"},{"email":"zackary.l.jackson@gmail.com","name":"zackljackson"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/extract-css-chunks-webpack-plugin_3.0.0-beta.1_1527824461042_0.8876646236474977"},"_hasShrinkwrap":false},"3.0.1":{"name":"extract-css-chunks-webpack-plugin","version":"3.0.1","author":{"name":"James Gillmore","email":"james@faceyspacey.com"},"contributors":[{"name":"Zack Jackson","email":"zackary.l.jackson@gmail.com","url":"https://github.com/zackljackson"}],"description":"Extract CSS from chunks into stylesheets + HMR. Supports Webpack 4","engines":{"node":">= 6.9.0 <7.0.0 || >= 8.9.0"},"main":"dist/cjs.js","files":["dist"],"license":"MIT","scripts":{"start":"npm run build -- -w","build":"cross-env NODE_ENV=production babel src -d dist --ignore 'src/**/*.test.js' --copy-files","clean":"del-cli dist","lint":"eslint --cache --fix src test","prebuild":"npm run clean","prepublish":"npm run build","security":"nsp check","test":"jest","test:watch":"jest --watch","test:coverage":"jest --collectCoverageFrom='src/**/*.js' --coverage","test:example":"npm run build && webpack-dev-server test/manual/src/index.js --config test/manual/webpack.config.js","ci:lint":"npm run lint && npm run security","ci:test":"npm run test -- --runInBand","ci:coverage":"npm run test:coverage -- --runInBand","build:example":"npm run build && webpack-dev-server test/manual/src/index.js --open --config test/manual/webpack.config.js","cm":"git-cz","semantic-release":"semantic-release pre && npm publish && semantic-release post","travis":"npm run cover -- --report lcovonly"},"peerDependencies":{"webpack":"^4.4.0"},"dependencies":{"loader-utils":"^1.1.0","lodash":"^4.17.5","normalize-url":"^1.9.1","webpack-sources":"^1.1.0"},"devDependencies":{"@webpack-contrib/eslint-config-webpack":"^2.0.4","babel-cli":"^6.26.0","babel-eslint":"^7.2.3","babel-jest":"^22.2.2","babel-loader":"^7.1.4","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-polyfill":"^6.26.0","babel-preset-env":"^1.6.1","commitizen":"^2.10.1","conventional-github-releaser":"^2.0.2","cross-env":"^5.1.3","css-loader":"^0.28.10","cz-conventional-changelog":"^2.1.0","del":"^3.0.0","del-cli":"^1.1.0","eslint":"^3.19.0","eslint-config-airbnb":"^15.0.1","eslint-plugin-flowtype":"^2.32.1","eslint-plugin-import":"^2.8.0","eslint-plugin-jsx-a11y":"^5.0.3","eslint-plugin-prettier":"^2.6.0","eslint-plugin-react":"^7.0.1","husky":"^0.14.3","jest":"^22.2.2","memory-fs":"^0.4.1","nsp":"^3.1.0","pre-commit":"^1.2.2","prettier":"^1.11.1","standard-version":"^4.3.0","webpack":"^4.4.0","webpack-cli":"^2.0.13","webpack-dev-server":"^3.1.1"},"homepage":"http://github.com/faceyspacey/extract-css-chunks-webpack-plugin","repository":{"type":"git","url":"git+https://github.com/faceyspacey/extract-css-chunks-webpack-plugin.git"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"gitHead":"50cd8a7cfa32f45f1125ed0d8d1a8e81ab41b089","bugs":{"url":"https://github.com/faceyspacey/extract-css-chunks-webpack-plugin/issues"},"_id":"extract-css-chunks-webpack-plugin@3.0.1","_npmVersion":"5.8.0","_nodeVersion":"8.9.4","_npmUser":{"name":"zackljackson","email":"zackary.l.jackson@gmail.com"},"dist":{"integrity":"sha512-CjrF7cZfHDjAW9TA5xHyn1zEdoDqkR6TPubvv5RZWqV9T2nhCSweNk5UHvQzj/RPmSVp5YDn274y8XPSeGdCww==","shasum":"7fff3f4948c5690c061a1dc6913a7b498f7cd9a9","tarball":"https://registry.npmjs.org/extract-css-chunks-webpack-plugin/-/extract-css-chunks-webpack-plugin-3.0.1.tgz","fileCount":9,"unpackedSize":49832,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbEOBBCRA9TVsSAnZWagAAY0wP/1FbQPmnBZJB93iFzmsg\nuW9gYb2AFPKlo0X1gbVSNSXM0AHktHS/Lyx2XFVjjkLxVaw35ByOMpKjRQ9C\nX2Fxv/mbST7ipv9DmJo9eVyQjwNwrI3e3qOp3wF6TeEXS+sb9JIVbgOuxEZT\ncD3HUZsqqxrpjhhcyMdXV3LPfYB5kIHvQZ4gFR2Z78uFGh/KBDfkBcaRuW+j\nCkHiFVjPWo6OcfmhxUzESWKiOmT8CLG7CqpmAjm0WqhRZnNh/gALDNbrQeCR\nC9CnEyjTJZU2+NaX0XiG7MKL0YnyA0Jrk73RnYBSnRZJs08CmHC5zcU4oJ8G\nSarY3hlNhtjty7VH724/FFciEw9U7WGdmXEW8cczl5qG63WNUX/BkUPB4/el\nuTxrTrsdYIszNu449Xl5x80+9R1uIVg4yOR4b8Yw76HIuWgWAZRAi89aAIQm\nQlnveNk22kXDEG7TkvJH+D5mESSIQ9D5AZgoizDXiNKa6iXh+BNM3iOGFZjn\n6k1QXpW3dt0jZb+YP2YmpPjNMSr53KI5xuOe1BfEjnLpUnNH675MGByPctpC\noQxUy2Z2cMluiynmtaqgPtaSLXiD1TqJYimxfRy9LisFGTh3QBPBKqqN14ZW\nvpeEfEVKvGkzBKNF60BmTUYVg3ne3RihFqpAiG4dsulFsdkZt6qMOo/k9CKo\ny8eg\r\n=yIK2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDD8p7DngK+Baar29LIID246bb6GWdTQL8iTRgRNg/15AiEA1wGI1xfPTjUdow4qrAx8Drhxv1GLZRINJu7OHyQ4mN8="}]},"maintainers":[{"email":"james@faceyspacey.com","name":"faceyspacey"},{"email":"zackary.l.jackson@gmail.com","name":"zackljackson"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/extract-css-chunks-webpack-plugin_3.0.1_1527832640994_0.14037794480970733"},"_hasShrinkwrap":false},"3.0.1-beta.2":{"name":"extract-css-chunks-webpack-plugin","version":"3.0.1-beta.2","author":{"name":"James Gillmore","email":"james@faceyspacey.com"},"contributors":[{"name":"Zack Jackson","email":"zackary.l.jackson@gmail.com","url":"https://github.com/zackljackson"}],"description":"Extract CSS from chunks into stylesheets + HMR. Supports Webpack 4","engines":{"node":">= 6.9.0 <7.0.0 || >= 8.9.0"},"main":"dist/cjs.js","files":["dist"],"license":"MIT","scripts":{"start":"npm run build -- -w","build":"cross-env NODE_ENV=production babel src -d dist --ignore 'src/**/*.test.js' --copy-files","clean":"del-cli dist","lint":"eslint --cache --fix src test","prebuild":"npm run clean","prepublish":"npm run build","security":"nsp check","test":"jest","test:watch":"jest --watch","test:coverage":"jest --collectCoverageFrom='src/**/*.js' --coverage","test:example":"npm run build && webpack-dev-server test/manual/src/index.js --config test/manual/webpack.config.js","ci:lint":"npm run lint && npm run security","ci:test":"npm run test -- --runInBand","ci:coverage":"npm run test:coverage -- --runInBand","build:example":"npm run build && webpack-dev-server test/manual/src/index.js --open --config test/manual/webpack.config.js","cm":"git-cz","semantic-release":"semantic-release pre && npm publish && semantic-release post","travis":"npm run cover -- --report lcovonly"},"peerDependencies":{"webpack":"^4.4.0"},"dependencies":{"loader-utils":"^1.1.0","lodash":"^4.17.5","normalize-url":"^1.9.1","webpack-sources":"^1.1.0"},"devDependencies":{"@webpack-contrib/eslint-config-webpack":"^2.0.4","babel-cli":"^6.26.0","babel-eslint":"^7.2.3","babel-jest":"^22.2.2","babel-loader":"^7.1.4","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-polyfill":"^6.26.0","babel-preset-env":"^1.6.1","commitizen":"^2.10.1","conventional-github-releaser":"^2.0.2","cross-env":"^5.1.3","css-loader":"^0.28.10","cz-conventional-changelog":"^2.1.0","del":"^3.0.0","del-cli":"^1.1.0","eslint":"^3.19.0","eslint-config-airbnb":"^15.0.1","eslint-plugin-flowtype":"^2.32.1","eslint-plugin-import":"^2.8.0","eslint-plugin-jsx-a11y":"^5.0.3","eslint-plugin-prettier":"^2.6.0","eslint-plugin-react":"^7.0.1","husky":"^0.14.3","jest":"^22.2.2","memory-fs":"^0.4.1","nsp":"^3.1.0","pre-commit":"^1.2.2","prettier":"^1.11.1","standard-version":"^4.3.0","webpack":"^4.4.0","webpack-cli":"^2.0.13","webpack-dev-server":"^3.1.1"},"homepage":"http://github.com/faceyspacey/extract-css-chunks-webpack-plugin","repository":{"type":"git","url":"git+https://github.com/faceyspacey/extract-css-chunks-webpack-plugin.git"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"readme":"<a href=\"https://gitter.im/Reactlandia/Lobby\" target=\"_blank\">\n  <img alt=\"Edit Redux-First Router Demo\" src=\"http://cdn.reactlandia.com/chat-badge-reactlandia.png\">\n</a>\n\n\n# extract-css-chunks-webpack-plugin\n\n<p align=\"center\">\n  <a href=\"https://www.npmjs.com/package/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://img.shields.io/npm/v/extract-css-chunks-webpack-plugin.svg\" alt=\"Version\" />\n  </a>\n\n  <a href=\"https://travis-ci.org/faceyspacey/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://travis-ci.org/faceyspacey/extract-css-chunks-webpack-plugin.svg?branch=master\" alt=\"Build Status\" />\n  </a>\n\n  <a href=\"https://www.npmjs.com/package/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://img.shields.io/npm/dt/extract-css-chunks-webpack-plugin.svg\" alt=\"Downloads\" />\n  </a>\n\n  <a href=\"https://www.npmjs.com/package/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://img.shields.io/npm/dw/extract-css-chunks-webpack-plugin.svg\" alt=\"License\" />\n  </a>\n  \n  <a href=\"https://www.npmjs.com/package/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://img.shields.io/npm/l/extract-css-chunks-webpack-plugin.svg\" alt=\"License\" />\n  </a>\n</p>\n\n\n> **HEADLINES (May 2018): Now Independently supports Webpack 4:** \nYep that's right. The universal family is now fully Webpack 4. Thank you to all our users for your loyalty and patience! If you love Universal, then you are gonna fall head over heels when we bring out the main course! \n\nSo... why did we rebuild `extract-css-chunks`? What does it offer? \n\nIts got all the goodness of `mini-css-extract-plugin` but with 2 gleaming, sought after benefits. \n\nCompared to the existing loaders, we are offering a single solution as opposed to needing to depend on multiple loaders to cater for different features:\n\n## Perks\n* **HMR:** It also has first-class support for **Hot Module Replacement** across ALL those css files/chunks!!!\n* cacheable stylesheets \n* smallest total bytes sent compared to \"render-path\" css-in-js solutions that include your CSS definitions in JS\n* Faster than the V2!\n* Async loading\n* No duplicate compilation (performance)\n* Easier to use\n* Specific to CSS\n* SSR Friendly development build, focused on frontend DX\n* Works seamlessly with the Universal family\n* Works fantastically as a standalone style loader (You can use it for any webpack project! with no extra dependencies!)\n\nAdditionally, if you are already a user of the universal family -- we will be waving goodbye to the mandatory ```window.__CSS_CHUNKS__```.\n\nThe functionality is still available to you via chunk flushing, and it can come in super handy when needing to easily resolve style assets as urls that might need to be passed to a third party.\n\n\n# BETA TESTING WEBPACK 4\n\nIf you want to test this alpha branch, which is currently not published to the NPM registry. \n\nAdd the following to your package.json file, then\n\n    yarn add extract-css-chunks-webpack-plugin@next\n\n\n## Webpack 4 Standalone Installation:\n\nIf you are just looking for something that works like `mini-css-extract-plugin` but with HMR. Then look no further\n\nNOTE: We have aligned out loader implementation to be the same as `mini-css-extract-plugin` \n\n**If you already use `mini-css-extract-plugin`, then you can just change the `require` statement - its that easy**\n\n\n**DONT USE THIS INSTALL CMD IF YOU ARE BETA TESTING:**\n```\nyarn add --dev extract-css-chunks-webpack-plugin\n```\n\n*webpack.config.js:*\n```js\nconst ExtractCssChunks = require(\"extract-css-chunks-webpack-plugin\")\n\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [\n           ExtractCssChunks.loader,\n           \"css-loader\"\n         ]\n      }\n    ]\n  },\n  plugins: [\n    new ExtractCssChunks(\n        {\n          // Options similar to the same options in webpackOptions.output\n          // both options are optional\n          filename: \"[name].css\",\n          chunkFilename: \"[id].css\"\n        }\n    ),\n  ]\n}\n```\n\n\n\n### What about Webpack 3?\nThis is a breaking change. The entire loader has been fundamentally rewritten specifically for Webpack 4. Aiming to support our existing user base, allowing them to upgrade their infrastructure to support Webpack 4 based universally code-split server-side rendered react applications. \n\nThere have been some challenges along the way since the release of webpack 4. Ultimately the only remaining hurdle is code split, async style loading. \n\nIf you do need Webpack 3, make sure to stick with the latest `v2.x.x` release. `v3.x.x` is only intend for users with Webpack 4\n\n\n\n\n*Note: this is a companion package to:*\n- [webpack-flush-chunks](https://github.com/faceyspacey/webpack-flush-chunks) \n- [react-universal-component](https://github.com/faceyspacey/react-universal-component)\n- [babel-plugin-universal-import](https://github.com/faceyspacey/babel-plugin-universal-import) ***or*** [babel-plugin-dual-import](https://github.com/faceyspacey/babel-plugin-dual-import)\n\n\n## Recommended Installation\n```\nyarn add react-universal-component webpack-flush-chunks\nyarn add --dev extract-css-chunks-webpack-plugin babel-plugin-universal-import\n```\n\n*.babelrc:*\n```js\n{\n  \"plugins\": [\"universal-import\"]\n}\n```\n\n*webpack.config.js:*\n```js\nconst ExtractCssChunks = require(\"extract-css-chunks-webpack-plugin\")\n\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [\n          ExtractCssChunks.loader,\n          {\n            loader: 'css-loader',\n            options: {\n              modules: true,\n              localIdentName: '[name]__[local]--[hash:base64:5]',\n            },\n          },\n        ],\n      },\n    ],\n  },\n  plugins: [\n    new ExtractCssChunks(),\n  ]\n};\n```\n\n## Desired Output\nHere's the sort of CSS you can expect to serve:\n\n```\n<head>\n\t<link rel='stylesheet' href='/static/main.css' />\n\t<link rel='stylesheet' href='/static/0.css' />\n\t<link rel='stylesheet' href='/static/7.css' />\n</head> \n\n<body>\n\t<div id=\"react-root\"></div>\n\t\n\t<script type='text/javascript' src='/static/vendor.js'></script>\n\t<script type='text/javascript' src='/static/0.js'></script>\n\t<script type='text/javascript' src='/static/7.js'></script>\n\t<script type='text/javascript' src='/static/main.js'></script>\n</body>\n```\n\nIf you need to resolve your stylesheets on the client side, for whatever reason. \n\n[webpack-flush-chunks](https://github.com/faceyspacey/webpack-flush-chunks) will scoop up the exact stylesheets to embed in your response. It will give you an object which can be embedded on page\n\nHere's how you do it:\n\n\n*src/components/App.js:*\n```js\nconst UniversalComponent = universal(props => import(`./${props.page}`))\n\n<UniversalComponent page='Foo' />\n```\n\n*server/render.js:*\n```js\nimport { flushChunkNames } from 'react-universal-component/server'\nimport flushChunks from 'webpack-flush-chunks'\n\nconst app = ReactDOMServer.renderToString(<App />)\nconst { js, styles, cssHash } = flushChunks(webpackStats, {\n  chunkNames: flushChunkNames()\n})\n\nres.send(`\n  <!doctype html>\n  <html>\n    <head>\n      ${styles}\n    </head>\n    <body>\n      <div id=\"root\">${app}</div>\n      <!-- not needed unless you want to access css chunks urls manually  -->\n      ${cssHash}\n      <!-- extract-css-chunks takes care of loading the css assets automatically -->\n      ${js}\n    </body>\n  </html>\n`)\n```\n\n***As for asynchronous calls to `import()` on user navigation,*** [babel-plugin-universal-import](https://github.com/faceyspacey/babel-plugin-universal-import) is required if you're using [react-universal-component](https://github.com/faceyspacey/react-universal-component). And if you aren't, you must use: [babel-plugin-dual-import](https://github.com/faceyspacey/babel-plugin-dual-import). \n\n\nThese babel plugins request both your js + your css. *Very Nice!* This is the new feature of the 2.0. Read *Sokra's* (author of webpack) article on how [on how this is the future of CSS for webpack](https://medium.com/webpack/the-new-css-workflow-step-1-79583bd107d7). Use this and be in the future today.\n\n\n## API \nYou can pass the same options as `mini-css-extract` to `new ExtractCssChunks`, such as:\n\n```javascript\nnew ExtractCssChunk({\n      filename: devMode ? '[name].css' : '[name].[hash].css',\n      chunkFilename: devMode ? '[id].css' : '[id].[hash].css',\n})\n```\n\n>Keep in mind, by default `[name].css` is used when `process.env.NODE_ENV === 'development'` and `[name].[contenthash].css` during production, so you can likely forget about having to pass anything.\n\n### HMR Pitfall\n\nThe most common workflow when working with webpack is to write a \"development\" / \"production\" value in to the\n'process.env.NODE_ENV' namespace, typically, using webpack's built-in \"DefinePlugin\" plugin. e.g:\n\n```javascript\nnew webpack.DefinePlugin( {\n     'process.env': {\n        NODE_ENV: `\"${config.devMode ? 'development' : 'production'}\"`,\n      },\n} )\n```\nThe value set by the aforementioned plugin will only be available in the runtime ( when webpack's javascript output is executed ).\nIn order for this plugin to work with hot module reloading, The npm script / gulp task / grunt task etc, should be invoked with the same environment variable as shown above.\n\nFor example, when running the build using some form of npm script:\n\n```json\n{\n  \"scripts\": {\n    \"build\": \"cross-env NODE_ENV=development webpack --config build/webpack.config.js\"\n  }\n}\n```\n[cross-env](https://www.npmjs.com/package/cross-env) is optional but recommended. \n\n\n### What about Glamorous, Styled Components, Styled-Jsx, Aphrodite, etc?\n\nIf you effectively use code-splitting, **Extract Css Chunks** can be a far better option than using emerging solutions like *Glamorous*, *Styled Components*, and slightly older tools like *Aphrodite*, *Glamor*, etc. We aren't fans of either rounds of tools because of several issues, but particularly because they all have a runtime overhead. Every time your React component is rendered with those, CSS is generated and updated within the DOM. On the server, you're going to also see unnecessary cycles for flushing the CSS along the critical render path. *Next.js's* `styled-jsx`, by the way, doesn't even work on the server--*not so good when it comes to flash of unstyled content (FOUC).*\n\nThe reason **Extract CSS Chunk** can be a better option is because **we also generate multiple sets of CSS based on what is actually \"used\",** ***but without the runtime overhead***. The difference is our definition of \"used\" is modules determined *statically* (which may not in fact be rendered) vs. what is in the \"critical render path\" (as is the case with the other tools). \n\nSo yes, our CSS may be mildly larger and include unnecessary css, but our `no_css.js` bundles will be a lot smaller as they don't need to inject any styles. See, even though those solutions have the smallest possible CSS file size, their javascript bundles, **in order to continue to render your components styled properly on the client,** must contain the necessary CSS for all possibilities! Those solutions serve both your entire bundle's CSS (in your javascript) **and** the CSS flushed from the critical render path. \n\nOn top of that, those are extra packages all with a huge number of issues in their Github repos corresponding to various limitations in the CSS they generate--something that is prevented when your definition for \"CSS-in-JS\" is simply importing CSS files compiled as normal by powerful proven CSS-specific processors.\n\nLastly, those solutions don't provide cacheable stylesheets. They do a lot of work--but they will **continue** doing it for you when you could have been done in one go long ago. Cloudflare is free--serve them through their CDN and you're winning. I love true javascript in css--don't get me wrong--but first I'd have to see they generate cacheable stylesheets. In my opinion, for now, it's best for environments that natively support it such as React Native.\n\n\n### Next:\n\nNow with that out of the way, for completeness let's compare what bytes of just the CSS are sent over the wire. The difference basically is minimal. Whereas solutions that flush from the critical render path will capture no more than the precise bits of CSS from the `if/else` branches followed, **Extract Css Chunks** is all about you effectively using code-splitting to insure, for example, you don't serve your Administration Panel's CSS in your public-facing site, etc. *In other words, it's all about avoiding serving large swaths of CSS from completely different sections of your app.* ***I.e. the biggest gains available to you.*** \n\n<details>\n<summary>\n    Read more on the topic ^^\n</summary>\n\nThis is where the real problem lies--where the real amount of unnecessary CSS comes from. If you effectively code-split your app, you may end up with 10 chunks. Now you can serve just the corresponding CSS for that chunk. If you try to go even farther and remove the css not used in the render path, you're likely achieving somewhere between 1-20% of the gains you achieved by thorough code-splitting. In other words, code splitting fulfills the 80/20 rule and attains the simple sweetspot of 80% optimization you--*as a balanced, level-headed, non-neurotic and professional developer*--are looking to achieve.\n\n*In short, by putting code splitting in appropriate places you have a lot of control over the CSS files that are created and can send a sensible* ***minimal*** *amount of associated bytes over the wire for the first request, perhaps even the smallest amount of all options.* \n\nIt's our perspective that you have achieved 80-99% of the performance gains (i.e. the creation of small relevant css files) at this ***static stage***. Offloading this work to the runtime stage is ultimately nit-picking and results in diminishing returns. When you factor that your JS bundle has to contain that JS anyway, those solutions make less and less sense from the perspective of reducing bytes delivered in the initial request. \n\nThere may be other reasons to use those tools (e.g. you don't like setting up webpack configs, or somehow you're really fond of pre-creating many `<div />` elements with their styles), but we prefer a simple standards-based way (without HoCs or specialized style components) to import styles just as you would in React Native. However to give the other tools credit, many of them likely started out with a different problem motivating them: avoiding webpack configs so you can include packages and their contained CSS without client apps being required to setup something like CSS loaders in Webpack. Having your CSS completely contained in true JS has its use cases, but at the application level--especially when you're already using something like Webpack--we fail to see its benefits. About all they share is a solution to avoiding **flashes of unstyled content** (FOUC), except one can save you a lot more bytes in what you send over the wire and save you from a continual runtime overhead where it's not needed. ***Honorable Mention:*** *StyleTron's concept of \"atomic declaration-level deduplication\" where it will make a class out of, say, `color: blue` so you don't need to send redundant styles certainly is a novel innovation, but again if the code still exists in your JS and you're building an application using Webpack (instead of a package), what's the point. In fact, it just makes editing the stylesheets in your browser developer tools more complicated. One benefit of critical render path solutions is the browser can spend less time matching the smaller number of styles to new DOM nodes as they appear, but then again it also has to spend the time injecting and parsing the new styles constantly, which is likely costlier.*\n\nAs an aside, so many apps share code between web and React Native--so the answer to the styles problem must be one that is identical for both. From that perspective importing a styles object **still** makes a lot of sense. **You're not missing out on the fundamental aspect of CSS-in-JSS:** ***isolated component-level styles and the ability to import them just like any other javascript code.*** Put them in other files, and use tools like `extract-css-chunks-webpack-plugin` and your pre-processors of choice that innately get styles right for the browser. As long as you're using **CSS Modules**, you're still at the cutting edge of CSS-in-JSS. Let's just say the other tools took one wrong turn and took it too far, when we already were at our destination. \n</details>\n\n\n####SUMMARY OF BENEFITS COMPARED TO \"CRITICAL-RENDER-PATH\" SOLUTIONS:\n\n- no continual runtime overhead during `render` using HoCs that inject styles\n- smaller JS bundles without CSS injection\n- **You DO NOT need to clutter your component code with a specialized way of applying CSS (HoCs, styled elements)!** \n- The way you import module-based styles is exactly how you would import styles in React Native that exist in a separate file, which allows for extremely interchangeable code between React Native and regular React. Hurray! \n- pretty much already does everything covered by [@vjeux's 2014 css-in-js talk](https://speakerdeck.com/vjeux/react-css-in-js), besides dead code elimination. Dead code elimination is only solved for the other tools--as per the explanation above how the CSS is in the JS anyway--so much as Webpack and Uglify can remove **JS** that is not used. Either way, it's not a stretch to eventually add this feature to `extract-text-webpack-plugin` as well as this plugin. Hey, maybe it already has it??\n\n## Emotion!\n\n[Emotion](https://github.com/tkh44/emotion) is different. They allow for the extraction of static styles via their *extract mode*. We're very much looking forward to this being the perfect companion to the css chunks approach. \n<details>\n<summary>\n    Read more on the topic ^^\n</summary>\n\nCurrently however *extract mode* does not support IE11. So that means it's a no go, but we have hopes that in the future they'll solve that problem.\n\nThe reason Emotion doesn't work in IE11+ is because they currently try to preserve any dynamic aspects of your CSS-in-JS by converting it CSS vars, which isn't supported in IE11. That was a very smart approach, but unfortunately not good enough. \n\nThe vision we'd like to see for that package is where dynamic css stays inline, and where only static CSS is extracted into stylesheets, in which case CSS vars aren't needed. I've heard from them they have some \"hidden flags\" that allow for something close to this. When, and if, they take this feature all the way, look forward to us pushing it as our recommended approach. *Go Emotion!*\n</details>\n\n## Linaria\n\nLinaria is another modern CSS-in-JSS library. It's focused around static styles, which may make it a perfect fit for usage with this plugin. Check it out:\n\nhttps://github.com/callstack/linaria\n\n## What if I don't use SSR and use html-webpack-plugin?\n\nFor that case you can use [css-chunks-html-webpack-plugin](https://github.com/teamable-software/css-chunks-html-webpack-plugin) which will extract CSS chunks paths into your HTML file.\n\n## Conclusion:\n**We love CSS modules; no less, no more.**\n\n**Long live the dream of Code Splitting Everywhere!**\n\n\n## Contributing\nWe use [commitizen](https://github.com/commitizen/cz-cli), so run `npm run cm` to make commits. A command-line form will appear, requiring you answer a few questions to automatically produce a nicely formatted commit. Releases, semantic version numbers, tags and changelogs will automatically be generated based on these commits thanks to [semantic-release](https://github.com/semantic-release/semantic-release). Be good.\n\n## More from FaceySpacey in Reactlandia\n- [redux-first-router](https://github.com/faceyspacey/redux-first-router). It's made to work perfectly with *Universal*. Together they comprise our *\"frameworkless\"* Redux-based approach to what Next.js does (splitting, SSR, prefetching, and routing). *People are lovin it by the way* 😎\n\n\n<details><summary>See Old Docs</summary>\n\nFor a demo, `git clone`: [universal-demo](https://github.com/faceyspacey/universal-demo)\n\n</details>\n","readmeFilename":"README.md","gitHead":"d274442a965fc54ec4f949698cec000f650645f1","bugs":{"url":"https://github.com/faceyspacey/extract-css-chunks-webpack-plugin/issues"},"_id":"extract-css-chunks-webpack-plugin@3.0.1-beta.2","_npmVersion":"5.8.0","_nodeVersion":"8.9.4","_npmUser":{"name":"zackljackson","email":"zackary.l.jackson@gmail.com"},"dist":{"integrity":"sha512-m9NdWSPV3QjL1BWIY5StY7HbEP6xlSfSNyrE7ToV+lE86qmlS1m9GeflxyEpUzvPgvm8FUyQdtnoCZtZV9+9Gw==","shasum":"b0479cba4f67c9a89ecfb859a6cf53bb022862ea","tarball":"https://registry.npmjs.org/extract-css-chunks-webpack-plugin/-/extract-css-chunks-webpack-plugin-3.0.1-beta.2.tgz","fileCount":9,"unpackedSize":50349,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbEdn/CRA9TVsSAnZWagAAYNgP/ip0eUrXbqYsqyg/jY9Z\n3a+DT7hDir3ooQtt5Xd6s2WGa0vfcfp3GR3xBXiF4pLONbF16/DaisNg3e5J\nshxWtDnAlMnrMSTaJxkw7Nc7oplUqhhMh4D+PraeCyUVC01p84YTXctC+50b\nr48An8iyFJAhZNq8drAQOa624DXdPm+ifGpEevMUAd3hjsGG6y5UrnMz4N91\nOaPlHjx+k9vZycuRu3oX/GWt77RRhTMhIU0AEE+VgK4VWXTqZSHBlCEGFeSc\nQGW0RFth9ulrp7ZP6Yh2GDVWhfJdL0ZsGIP6dy42+ba5ulPNSVPuikg8cT5R\nFeJ2Fjnd5NGl/7ntxkqag2hUfNH5cRIspUZ3LUfdpgVLw95vyEpHN19kYKEG\na7SA738nUFdeZ9MHQYnGuB2J4tu8dC8dpaqze2Fjdr+ESbN+2uEGTgG8HZAW\nYDmW2XuiMAX05R1yWEX6HpvKIHnYIRWl/LB3ymkBs4blHUOAaFheFSEXZd0r\n/EPRhPPZgJnOvMCod/Ta90MAD91pS78YNcLMKfIFL2THB1ycSAsrkrWxARWD\nMQoLg44oKkbcFTQgp4B/GorSQ3g1Xl4bMjgr2dxT0DUsv2dsavMlqNUcyRqR\nFHtOzMVU3LzbA5rTBdfIp+MbQH42vYOeUtz+cZmNcr27e1HcF23dZi9yRBSV\nDH6c\r\n=UvMy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHWn/gZkND2O8Bct9bkFqSVFsyvaV6j+UFZ4tdZtC08VAiANBUsG4Gnoand61WEW0EGpO10KRFRshwvj6ZopTNNfyQ=="}]},"maintainers":[{"email":"james@faceyspacey.com","name":"faceyspacey"},{"email":"zackary.l.jackson@gmail.com","name":"zackljackson"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/extract-css-chunks-webpack-plugin_3.0.1-beta.2_1527896575337_0.10248586872486842"},"_hasShrinkwrap":false},"3.0.1-beta.3":{"name":"extract-css-chunks-webpack-plugin","version":"3.0.1-beta.3","author":{"name":"James Gillmore","email":"james@faceyspacey.com"},"contributors":[{"name":"Zack Jackson","email":"zackary.l.jackson@gmail.com","url":"https://github.com/zackljackson"}],"description":"Extract CSS from chunks into stylesheets + HMR. Supports Webpack 4","engines":{"node":">= 6.9.0 <7.0.0 || >= 8.9.0"},"main":"dist/cjs.js","files":["dist"],"license":"MIT","scripts":{"start":"npm run build -- -w","build":"cross-env NODE_ENV=production babel src -d dist --ignore 'src/**/*.test.js' --copy-files","clean":"del-cli dist","lint":"eslint --cache --fix src test","prebuild":"npm run clean","prepublish":"npm run build","security":"nsp check","test":"jest","test:watch":"jest --watch","test:coverage":"jest --collectCoverageFrom='src/**/*.js' --coverage","test:example":"npm run build && webpack-dev-server test/manual/src/index.js --config test/manual/webpack.config.js","ci:lint":"npm run lint && npm run security","ci:test":"npm run test -- --runInBand","ci:coverage":"npm run test:coverage -- --runInBand","build:example":"npm run build && webpack-dev-server test/manual/src/index.js --open --config test/manual/webpack.config.js","cm":"git-cz","release":"standard-version","semantic-release":"semantic-release pre && npm publish && semantic-release post","travis":"npm run ci:coverage"},"peerDependencies":{"webpack":"^4.4.0"},"dependencies":{"loader-utils":"^1.1.0","lodash":"^4.17.5","normalize-url":"^1.9.1","webpack-sources":"^1.1.0"},"devDependencies":{"@webpack-contrib/eslint-config-webpack":"^2.0.4","babel-cli":"^6.26.0","babel-eslint":"^7.2.3","babel-jest":"^22.2.2","babel-loader":"^7.1.4","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-polyfill":"^6.26.0","babel-preset-env":"^1.6.1","commitizen":"^2.10.1","conventional-github-releaser":"^2.0.2","cross-env":"^5.1.3","css-loader":"^0.28.10","cz-conventional-changelog":"^2.1.0","del":"^3.0.0","del-cli":"^1.1.0","eslint":"^3.19.0","eslint-config-airbnb":"^15.0.1","eslint-plugin-flowtype":"^2.32.1","eslint-plugin-import":"^2.8.0","eslint-plugin-jsx-a11y":"^5.0.3","eslint-plugin-prettier":"^2.6.0","eslint-plugin-react":"^7.0.1","husky":"^0.14.3","jest":"^22.2.2","memory-fs":"^0.4.1","nsp":"^3.1.0","pre-commit":"^1.2.2","prettier":"^1.11.1","standard-version":"^4.3.0","webpack":"^4.4.0","webpack-cli":"^2.0.13","webpack-dev-server":"^3.1.1"},"homepage":"http://github.com/faceyspacey/extract-css-chunks-webpack-plugin","repository":{"type":"git","url":"git+https://github.com/faceyspacey/extract-css-chunks-webpack-plugin.git"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"readme":"<a href=\"https://gitter.im/Reactlandia/Lobby\" target=\"_blank\">\n  <img alt=\"Edit Redux-First Router Demo\" src=\"http://cdn.reactlandia.com/chat-badge-reactlandia.png\">\n</a>\n\n\n# extract-css-chunks-webpack-plugin\n\n<p align=\"center\">\n  <a href=\"https://www.npmjs.com/package/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://img.shields.io/npm/v/extract-css-chunks-webpack-plugin.svg\" alt=\"Version\" />\n  </a>\n\n  <a href=\"https://travis-ci.org/faceyspacey/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://travis-ci.org/faceyspacey/extract-css-chunks-webpack-plugin.svg?branch=master\" alt=\"Build Status\" />\n  </a>\n\n  <a href=\"https://www.npmjs.com/package/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://img.shields.io/npm/dt/extract-css-chunks-webpack-plugin.svg\" alt=\"Downloads\" />\n  </a>\n\n  <a href=\"https://www.npmjs.com/package/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://img.shields.io/npm/dw/extract-css-chunks-webpack-plugin.svg\" alt=\"License\" />\n  </a>\n  \n  <a href=\"https://www.npmjs.com/package/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://img.shields.io/npm/l/extract-css-chunks-webpack-plugin.svg\" alt=\"License\" />\n  </a>\n</p>\n\n\n> **HEADLINES (May 2018): Now Independently supports Webpack 4:** \nYep that's right. The universal family is now fully Webpack 4. Thank you to all our users for your loyalty and patience! If you love Universal, then you are gonna fall head over heels when we bring out the main course! \n\nSo... why did we rebuild `extract-css-chunks`? What does it offer? \n\nIts got all the goodness of `mini-css-extract-plugin` but with 2 gleaming, sought after benefits. \n\nCompared to the existing loaders, we are offering a single solution as opposed to needing to depend on multiple loaders to cater for different features:\n\n## Perks\n* **HMR:** It also has first-class support for **Hot Module Replacement** across ALL those css files/chunks!!!\n* cacheable stylesheets \n* smallest total bytes sent compared to \"render-path\" css-in-js solutions that include your CSS definitions in JS\n* Faster than the V2!\n* Async loading\n* No duplicate compilation (performance)\n* Easier to use\n* Specific to CSS\n* SSR Friendly development build, focused on frontend DX\n* Works seamlessly with the Universal family\n* Works fantastically as a standalone style loader (You can use it for any webpack project! with no extra dependencies!)\n\nAdditionally, if you are already a user of the universal family -- we will be waving goodbye to the mandatory ```window.__CSS_CHUNKS__```.\n\nThe functionality is still available to you via chunk flushing, and it can come in super handy when needing to easily resolve style assets as urls that might need to be passed to a third party.\n\n## Webpack 4 Standalone Installation:\n\nIf you are just looking for something that works like `mini-css-extract-plugin` but with HMR. Then look no further\n\nNOTE: We have aligned out loader implementation to be the same as `mini-css-extract-plugin` \n\n**If you already use `mini-css-extract-plugin`, then you can just change the `require` statement - its that easy**\n\n\n**DONT USE THIS INSTALL CMD IF YOU ARE BETA TESTING:**\n```\nyarn add --dev extract-css-chunks-webpack-plugin\n```\n\n*webpack.config.js:*\n```js\nconst ExtractCssChunks = require(\"extract-css-chunks-webpack-plugin\")\n\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [\n           ExtractCssChunks.loader,\n           \"css-loader\"\n         ]\n      }\n    ]\n  },\n  plugins: [\n    new ExtractCssChunks(\n        {\n          // Options similar to the same options in webpackOptions.output\n          // both options are optional\n          filename: \"[name].css\",\n          chunkFilename: \"[id].css\"\n        }\n    ),\n  ]\n}\n```\n\n\n\n### What about Webpack 3?\nThis is a breaking change. The entire loader has been fundamentally rewritten specifically for Webpack 4. Aiming to support our existing user base, allowing them to upgrade their infrastructure to support Webpack 4 based universally code-split server-side rendered react applications. \n\nThere have been some challenges along the way since the release of webpack 4. Ultimately the only remaining hurdle is code split, async style loading. \n\nIf you do need Webpack 3, make sure to stick with the latest `v2.x.x` release. `v3.x.x` is only intend for users with Webpack 4\n\n\n\n\n*Note: this is a companion package to:*\n- [webpack-flush-chunks](https://github.com/faceyspacey/webpack-flush-chunks) \n- [react-universal-component](https://github.com/faceyspacey/react-universal-component)\n- [babel-plugin-universal-import](https://github.com/faceyspacey/babel-plugin-universal-import) ***or*** [babel-plugin-dual-import](https://github.com/faceyspacey/babel-plugin-dual-import)\n\n\n## Recommended Installation\n```\nyarn add react-universal-component webpack-flush-chunks\nyarn add --dev extract-css-chunks-webpack-plugin babel-plugin-universal-import\n```\n\n*.babelrc:*\n```js\n{\n  \"plugins\": [\"universal-import\"]\n}\n```\n\n*webpack.config.js:*\n```js\nconst ExtractCssChunks = require(\"extract-css-chunks-webpack-plugin\")\n\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [\n          ExtractCssChunks.loader,\n          {\n            loader: 'css-loader',\n            options: {\n              modules: true,\n              localIdentName: '[name]__[local]--[hash:base64:5]',\n            },\n          },\n        ],\n      },\n    ],\n  },\n  plugins: [\n    new ExtractCssChunks(),\n  ]\n};\n```\n\n## Desired Output\nHere's the sort of CSS you can expect to serve:\n\n```\n<head>\n\t<link rel='stylesheet' href='/static/main.css' />\n\t<link rel='stylesheet' href='/static/0.css' />\n\t<link rel='stylesheet' href='/static/7.css' />\n</head> \n\n<body>\n\t<div id=\"react-root\"></div>\n\t\n\t<script type='text/javascript' src='/static/vendor.js'></script>\n\t<script type='text/javascript' src='/static/0.js'></script>\n\t<script type='text/javascript' src='/static/7.js'></script>\n\t<script type='text/javascript' src='/static/main.js'></script>\n</body>\n```\n\nIf you need to resolve your stylesheets on the client side, for whatever reason. \n\n[webpack-flush-chunks](https://github.com/faceyspacey/webpack-flush-chunks) will scoop up the exact stylesheets to embed in your response. It will give you an object which can be embedded on page\n\nHere's how you do it:\n\n\n*src/components/App.js:*\n```js\nconst UniversalComponent = universal(props => import(`./${props.page}`))\n\n<UniversalComponent page='Foo' />\n```\n\n*server/render.js:*\n```js\nimport { flushChunkNames } from 'react-universal-component/server'\nimport flushChunks from 'webpack-flush-chunks'\n\nconst app = ReactDOMServer.renderToString(<App />)\nconst { js, styles, cssHash } = flushChunks(webpackStats, {\n  chunkNames: flushChunkNames()\n})\n\nres.send(`\n  <!doctype html>\n  <html>\n    <head>\n      ${styles}\n    </head>\n    <body>\n      <div id=\"root\">${app}</div>\n      <!-- not needed unless you want to access css chunks urls manually  -->\n      ${cssHash}\n      <!-- extract-css-chunks takes care of loading the css assets automatically -->\n      ${js}\n    </body>\n  </html>\n`)\n```\n\n***As for asynchronous calls to `import()` on user navigation,*** [babel-plugin-universal-import](https://github.com/faceyspacey/babel-plugin-universal-import) is required if you're using [react-universal-component](https://github.com/faceyspacey/react-universal-component). And if you aren't, you must use: [babel-plugin-dual-import](https://github.com/faceyspacey/babel-plugin-dual-import). \n\n\nThese babel plugins request both your js + your css. *Very Nice!* This is the new feature of the 2.0. Read *Sokra's* (author of webpack) article on how [on how this is the future of CSS for webpack](https://medium.com/webpack/the-new-css-workflow-step-1-79583bd107d7). Use this and be in the future today.\n\n\n## API \nYou can pass the same options as `mini-css-extract` to `new ExtractCssChunks`, such as:\n\n```javascript\nnew ExtractCssChunk({\n      filename: devMode ? '[name].css' : '[name].[hash].css',\n      chunkFilename: devMode ? '[id].css' : '[id].[hash].css',\n})\n```\n\n>Keep in mind, by default `[name].css` is used when `process.env.NODE_ENV === 'development'` and `[name].[contenthash].css` during production, so you can likely forget about having to pass anything.\n\n### HMR Pitfall\n\nThe most common workflow when working with webpack is to write a \"development\" / \"production\" value in to the\n'process.env.NODE_ENV' namespace, typically, using webpack's built-in \"DefinePlugin\" plugin. e.g:\n\n```javascript\nnew webpack.DefinePlugin( {\n     'process.env': {\n        NODE_ENV: `\"${config.devMode ? 'development' : 'production'}\"`,\n      },\n} )\n```\nThe value set by the aforementioned plugin will only be available in the runtime ( when webpack's javascript output is executed ).\nIn order for this plugin to work with hot module reloading, The npm script / gulp task / grunt task etc, should be invoked with the same environment variable as shown above.\n\nFor example, when running the build using some form of npm script:\n\n```json\n{\n  \"scripts\": {\n    \"build\": \"cross-env NODE_ENV=development webpack --config build/webpack.config.js\"\n  }\n}\n```\n[cross-env](https://www.npmjs.com/package/cross-env) is optional but recommended. \n\n### What about Glamorous, Styled Components, Styled-Jsx, Aphrodite, etc?\n\nIf you effectively use code-splitting, **Extract Css Chunks** can be a far better option than using emerging solutions like *Glamorous*, *Styled Components*, and slightly older tools like *Aphrodite*, *Glamor*, etc. We aren't fans of either rounds of tools because of several issues, but particularly because they all have a runtime overhead. Every time your React component is rendered with those, CSS is generated and updated within the DOM. On the server, you're going to also see unnecessary cycles for flushing the CSS along the critical render path. *Next.js's* `styled-jsx`, by the way, doesn't even work on the server--*not so good when it comes to flash of unstyled content (FOUC).*\n\nThe reason **Extract CSS Chunk** can be a better option is because **we also generate multiple sets of CSS based on what is actually \"used\",** ***but without the runtime overhead***. The difference is our definition of \"used\" is modules determined *statically* (which may not in fact be rendered) vs. what is in the \"critical render path\" (as is the case with the other tools). \n\nSo yes, our CSS may be mildly larger and include unnecessary css, but our `no_css.js` bundles will be a lot smaller as they don't need to inject any styles. See, even though those solutions have the smallest possible CSS file size, their javascript bundles, **in order to continue to render your components styled properly on the client,** must contain the necessary CSS for all possibilities! Those solutions serve both your entire bundle's CSS (in your javascript) **and** the CSS flushed from the critical render path. \n\nOn top of that, those are extra packages all with a huge number of issues in their Github repos corresponding to various limitations in the CSS they generate--something that is prevented when your definition for \"CSS-in-JS\" is simply importing CSS files compiled as normal by powerful proven CSS-specific processors.\n\nLastly, those solutions don't provide cacheable stylesheets. They do a lot of work--but they will **continue** doing it for you when you could have been done in one go long ago. Cloudflare is free--serve them through their CDN and you're winning. I love true javascript in css--don't get me wrong--but first I'd have to see they generate cacheable stylesheets. In my opinion, for now, it's best for environments that natively support it such as React Native.\n\n\n### Next:\n\nNow with that out of the way, for completeness let's compare what bytes of just the CSS are sent over the wire. The difference basically is minimal. Whereas solutions that flush from the critical render path will capture no more than the precise bits of CSS from the `if/else` branches followed, **Extract Css Chunks** is all about you effectively using code-splitting to insure, for example, you don't serve your Administration Panel's CSS in your public-facing site, etc. *In other words, it's all about avoiding serving large swaths of CSS from completely different sections of your app.* ***I.e. the biggest gains available to you.*** \n\n<details>\n<summary>\n    Read more on the topic ^^\n</summary>\n\nThis is where the real problem lies--where the real amount of unnecessary CSS comes from. If you effectively code-split your app, you may end up with 10 chunks. Now you can serve just the corresponding CSS for that chunk. If you try to go even farther and remove the css not used in the render path, you're likely achieving somewhere between 1-20% of the gains you achieved by thorough code-splitting. In other words, code splitting fulfills the 80/20 rule and attains the simple sweetspot of 80% optimization you--*as a balanced, level-headed, non-neurotic and professional developer*--are looking to achieve.\n\n*In short, by putting code splitting in appropriate places you have a lot of control over the CSS files that are created and can send a sensible* ***minimal*** *amount of associated bytes over the wire for the first request, perhaps even the smallest amount of all options.* \n\nIt's our perspective that you have achieved 80-99% of the performance gains (i.e. the creation of small relevant css files) at this ***static stage***. Offloading this work to the runtime stage is ultimately nit-picking and results in diminishing returns. When you factor that your JS bundle has to contain that JS anyway, those solutions make less and less sense from the perspective of reducing bytes delivered in the initial request. \n\nThere may be other reasons to use those tools (e.g. you don't like setting up webpack configs, or somehow you're really fond of pre-creating many `<div />` elements with their styles), but we prefer a simple standards-based way (without HoCs or specialized style components) to import styles just as you would in React Native. However to give the other tools credit, many of them likely started out with a different problem motivating them: avoiding webpack configs so you can include packages and their contained CSS without client apps being required to setup something like CSS loaders in Webpack. Having your CSS completely contained in true JS has its use cases, but at the application level--especially when you're already using something like Webpack--we fail to see its benefits. About all they share is a solution to avoiding **flashes of unstyled content** (FOUC), except one can save you a lot more bytes in what you send over the wire and save you from a continual runtime overhead where it's not needed. ***Honorable Mention:*** *StyleTron's concept of \"atomic declaration-level deduplication\" where it will make a class out of, say, `color: blue` so you don't need to send redundant styles certainly is a novel innovation, but again if the code still exists in your JS and you're building an application using Webpack (instead of a package), what's the point. In fact, it just makes editing the stylesheets in your browser developer tools more complicated. One benefit of critical render path solutions is the browser can spend less time matching the smaller number of styles to new DOM nodes as they appear, but then again it also has to spend the time injecting and parsing the new styles constantly, which is likely costlier.*\n\nAs an aside, so many apps share code between web and React Native--so the answer to the styles problem must be one that is identical for both. From that perspective importing a styles object **still** makes a lot of sense. **You're not missing out on the fundamental aspect of CSS-in-JSS:** ***isolated component-level styles and the ability to import them just like any other javascript code.*** Put them in other files, and use tools like `extract-css-chunks-webpack-plugin` and your pre-processors of choice that innately get styles right for the browser. As long as you're using **CSS Modules**, you're still at the cutting edge of CSS-in-JSS. Let's just say the other tools took one wrong turn and took it too far, when we already were at our destination. \n</details>\n\n\n####SUMMARY OF BENEFITS COMPARED TO \"CRITICAL-RENDER-PATH\" SOLUTIONS:\n\n- no continual runtime overhead during `render` using HoCs that inject styles\n- smaller JS bundles without CSS injection\n- **You DO NOT need to clutter your component code with a specialized way of applying CSS (HoCs, styled elements)!** \n- The way you import module-based styles is exactly how you would import styles in React Native that exist in a separate file, which allows for extremely interchangeable code between React Native and regular React. Hurray! \n- pretty much already does everything covered by [@vjeux's 2014 css-in-js talk](https://speakerdeck.com/vjeux/react-css-in-js), besides dead code elimination. Dead code elimination is only solved for the other tools--as per the explanation above how the CSS is in the JS anyway--so much as Webpack and Uglify can remove **JS** that is not used. Either way, it's not a stretch to eventually add this feature to `extract-text-webpack-plugin` as well as this plugin. Hey, maybe it already has it??\n\n## Emotion!\n\n[Emotion](https://github.com/tkh44/emotion) is different. They allow for the extraction of static styles via their *extract mode*. We're very much looking forward to this being the perfect companion to the css chunks approach. \n<details>\n<summary>\n    Read more on the topic ^^\n</summary>\n\nCurrently however *extract mode* does not support IE11. So that means it's a no go, but we have hopes that in the future they'll solve that problem.\n\nThe reason Emotion doesn't work in IE11+ is because they currently try to preserve any dynamic aspects of your CSS-in-JS by converting it CSS vars, which isn't supported in IE11. That was a very smart approach, but unfortunately not good enough. \n\nThe vision we'd like to see for that package is where dynamic css stays inline, and where only static CSS is extracted into stylesheets, in which case CSS vars aren't needed. I've heard from them they have some \"hidden flags\" that allow for something close to this. When, and if, they take this feature all the way, look forward to us pushing it as our recommended approach. *Go Emotion!*\n</details>\n\n## Linaria\n\nLinaria is another modern CSS-in-JSS library. It's focused around static styles, which may make it a perfect fit for usage with this plugin. Check it out:\n\nhttps://github.com/callstack/linaria\n\n## What if I don't use SSR and use html-webpack-plugin?\n\nFor that case you can use [css-chunks-html-webpack-plugin](https://github.com/teamable-software/css-chunks-html-webpack-plugin) which will extract CSS chunks paths into your HTML file.\n\n## Conclusion:\n**We love CSS modules; no less, no more.**\n\n**Long live the dream of Code Splitting Everywhere!**\n\n\n## Contributing\nWe use [commitizen](https://github.com/commitizen/cz-cli), so run `npm run cm` to make commits. A command-line form will appear, requiring you answer a few questions to automatically produce a nicely formatted commit. Releases, semantic version numbers, tags and changelogs will automatically be generated based on these commits thanks to [semantic-release](https://github.com/semantic-release/semantic-release). Be good.\n\n## More from FaceySpacey in Reactlandia\n- [redux-first-router](https://github.com/faceyspacey/redux-first-router). It's made to work perfectly with *Universal*. Together they comprise our *\"frameworkless\"* Redux-based approach to what Next.js does (splitting, SSR, prefetching, and routing). *People are lovin it by the way* 😎\n\n\n<details><summary>See Old Docs</summary>\n\nFor a demo, `git clone`: [universal-demo](https://github.com/faceyspacey/universal-demo)\n\n</details>\n","readmeFilename":"README.md","gitHead":"2e648527b23a292accc5d58c97a05afc745b44e4","bugs":{"url":"https://github.com/faceyspacey/extract-css-chunks-webpack-plugin/issues"},"_id":"extract-css-chunks-webpack-plugin@3.0.1-beta.3","_npmVersion":"5.8.0","_nodeVersion":"8.9.4","_npmUser":{"name":"zackljackson","email":"zackary.l.jackson@gmail.com"},"dist":{"integrity":"sha512-dMvJcnjqh5+gvIyhKDLAYu5kTzJ3eOazGMVoVW5dEyCqJcAEQgZBgnr61rZHHNF+VGUcJkhKYoJKTb3zM1EWeg==","shasum":"93fea8827c290a7b1ec0ba5089f22bd647c3b913","tarball":"https://registry.npmjs.org/extract-css-chunks-webpack-plugin/-/extract-css-chunks-webpack-plugin-3.0.1-beta.3.tgz","fileCount":9,"unpackedSize":50191,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbFcl7CRA9TVsSAnZWagAAlowP/3avaKMf3pfloCv17jMi\nvSu8lZxzQK+zHr6dHtlbZaD2zh2pNaQVldFGlp3+jtoDEpSJwfj+mhbIBaxM\nsdXpzgJoPcHsfktGCOyjcjS/3Ju5oJIonoPHsd5Pb+MTq2EchxAa5AC2Bup0\nUdAFCxByjPLS1Gd7d2fMF3QT24XK6NUtVOowIPWGqfQgCHHZwxWEVCe9Etu8\n5NVWcP8v47quq7Kfhej0p1UiHgJRDCDzn8wb0hgNCjjXGbvKGr6DGJDr4TcO\njgYWjO9D3Kofgx7RZa2rO8ChZshve+31IWiddH/iZ6CTV4hwe7DrZ7gBX9oW\ntDBXWsOFoT0L6paeiVP4boB/1D2Dc7vE/GKP4Pd4wuulLV50X1lziafGXLvI\noWq9PKm+iA9IpuqqKgkaUV6EKV6X2kEY8M8htmfsQVGD+wOKs3+0b/o1Rr1R\nkJNt5TiL5Ymdj+0c7BX2Rjr0deAbagpLy9DcCKapO+G7/quzbgm26nl8kdwJ\nO2o+Ey5QBhrEOK/Q3GyzECrhG65zUeMwS8C3aor8U2i4L/Eh3dhjuNacRVxb\nW+YKMH9xltt04UWbCQYPOOeqta/ExpeHcPA8woLYn5xqgw9rrCBvBNbmzdCk\nNgUCHZviU49gDQHyMBexv8q1gdvn58ARPhdt7YNaQv9JYf1teE0RNkA8oSGw\ncKUr\r\n=3mic\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDkA6tEld37me//oP1Cu7IZPb23mpFgEd1aVsTVhaEslwIhAJm6e0mEh9DxhHEm4vUSGgDJOtUXqxe+nHyx5KRRL3xV"}]},"maintainers":[{"email":"james@faceyspacey.com","name":"faceyspacey"},{"email":"zackary.l.jackson@gmail.com","name":"zackljackson"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/extract-css-chunks-webpack-plugin_3.0.1-beta.3_1528154490042_0.9144177443373107"},"_hasShrinkwrap":false},"3.0.3":{"name":"extract-css-chunks-webpack-plugin","version":"3.0.3","author":{"name":"James Gillmore","email":"james@faceyspacey.com"},"contributors":[{"name":"Zack Jackson","email":"zackary.l.jackson@gmail.com","url":"https://github.com/zackljackson"}],"description":"Extract CSS from chunks into stylesheets + HMR. Supports Webpack 4","engines":{"node":">= 6.9.0 <7.0.0 || >= 8.9.0"},"main":"dist/cjs.js","files":["dist"],"license":"MIT","scripts":{"start":"npm run build -- -w","build":"cross-env NODE_ENV=production babel src -d dist --ignore 'src/**/*.test.js' --copy-files","clean":"del-cli dist","lint":"eslint --cache --fix src test","prebuild":"npm run clean","prepublish":"npm run build","security":"nsp check","test":"jest","test:watch":"jest --watch","test:coverage":"jest --collectCoverageFrom='src/**/*.js' --coverage","test:example":"npm run build && webpack-dev-server test/manual/src/index.js --config test/manual/webpack.config.js","ci:lint":"npm run lint && npm run security","ci:test":"npm run test -- --runInBand","ci:coverage":"npm run test:coverage -- --runInBand","build:example":"npm run build && webpack-dev-server test/manual/src/index.js --open --config test/manual/webpack.config.js","cm":"git-cz","release":"standard-version","semantic-release":"semantic-release pre && npm publish && semantic-release post","travis":"npm run ci:coverage"},"peerDependencies":{"webpack":"^4.4.0"},"dependencies":{"loader-utils":"^1.1.0","lodash":"^4.17.5","normalize-url":"^1.9.1","webpack-sources":"^1.1.0"},"devDependencies":{"@webpack-contrib/eslint-config-webpack":"^2.0.4","babel-cli":"^6.26.0","babel-eslint":"^7.2.3","babel-jest":"^22.2.2","babel-loader":"^7.1.4","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-polyfill":"^6.26.0","babel-preset-env":"^1.6.1","commitizen":"^2.10.1","conventional-github-releaser":"^2.0.2","cross-env":"^5.1.3","css-loader":"^0.28.10","cz-conventional-changelog":"^2.1.0","del":"^3.0.0","del-cli":"^1.1.0","eslint":"^3.19.0","eslint-config-airbnb":"^15.0.1","eslint-plugin-flowtype":"^2.32.1","eslint-plugin-import":"^2.8.0","eslint-plugin-jsx-a11y":"^5.0.3","eslint-plugin-prettier":"^2.6.0","eslint-plugin-react":"^7.0.1","husky":"^0.14.3","jest":"^22.2.2","memory-fs":"^0.4.1","nsp":"^3.1.0","pre-commit":"^1.2.2","prettier":"^1.11.1","standard-version":"^4.3.0","webpack":"^4.4.0","webpack-cli":"^2.0.13","webpack-dev-server":"^3.1.1"},"homepage":"http://github.com/faceyspacey/extract-css-chunks-webpack-plugin","repository":{"type":"git","url":"git+https://github.com/faceyspacey/extract-css-chunks-webpack-plugin.git"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"gitHead":"c542197a6c7464a15eea05a3ef4946321cfcd366","bugs":{"url":"https://github.com/faceyspacey/extract-css-chunks-webpack-plugin/issues"},"_id":"extract-css-chunks-webpack-plugin@3.0.3","_npmVersion":"5.8.0","_nodeVersion":"8.9.4","_npmUser":{"name":"zackljackson","email":"zackary.l.jackson@gmail.com"},"dist":{"integrity":"sha512-vlGDIBaRR3gYpymPXNJreNy+jKItdsUhq4BcmntQjHQs+8QBZj6XtFB1WNu4AAQEZ8N1JO+O8T4CjlLryo2khQ==","shasum":"d0fb0c172fd0803aba857d3a59a8d1220660ed06","tarball":"https://registry.npmjs.org/extract-css-chunks-webpack-plugin/-/extract-css-chunks-webpack-plugin-3.0.3.tgz","fileCount":9,"unpackedSize":50146,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbFdG+CRA9TVsSAnZWagAA5HgP/0g3meirnYvNICzhZR99\ntK485uwnzoaych77KDxuBI5SumDtZu+bfn83FrhKH6j9oolvch+F4mBYJN8n\nYEnSsAUIhMpHqkR0SAV+lZSsm83vguoNPtHj2jJG3kK7moF8XgTZuXuQ6moH\nzE3sroDeWiOKXr2G6lc2ROuNQbKsi6ihOc9KjwIR1l7uEVm+RWeTRmqlKMhF\nkQ1dMVLdCr3w3FZLg+MDVoh9dRdglmuxOu2c87ngGWsly1CSG80ytJdtZS5v\nd+asUcgxtqb3vIFVaL2cjbRub7smrd9KMbfmhyux1EuYV6pV2ehsUQrHhDL2\nCozdbYpxa/7CDM8WChuICFDAXUhnahfZfZM9Fcf7JAh5b5MBmk94v9Bh22IM\n9SY7Ab4XZ0SEDRn6FRyB/uTXp75+ocYBVhoCWSqtfXl/654Dx+PHHgKu+zjp\n6jTKDelf+/h/EOzdsbCU2KRwCkaGdRRHtud5EYe/esNEz+SY30yOpdXhU0rP\nqJ3/++e2bRkoDhbXR0j1W/sxzdzJ0UMEL84AcBoBE9FHeLkOXzvJqYKEKm0b\nA335/Cz+NG6v8uamX5QGyGRMbBGGkbedN8aK4JrIYrVYJ8T/wgIQg8/EMyKh\nnvBRSsBhk1Kr7C7uWeRu6pCdbPf4cunsjxlSsQVaZDbgWfTWUHS7y2XIowFy\nD6WK\r\n=k8in\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCoxhQj/+LSXPSzfR+1SPa9H5XKD1tsfCmqGQ7uD85T2QIhALaZhd0iI5fbIjFhn9fBs4JZACTlvu9sm9yVGH810xVb"}]},"maintainers":[{"email":"james@faceyspacey.com","name":"faceyspacey"},{"email":"zackary.l.jackson@gmail.com","name":"zackljackson"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/extract-css-chunks-webpack-plugin_3.0.3_1528156605078_0.03616897649472395"},"_hasShrinkwrap":false},"3.0.4-beta.1":{"name":"extract-css-chunks-webpack-plugin","version":"3.0.4-beta.1","author":{"name":"James Gillmore","email":"james@faceyspacey.com"},"contributors":[{"name":"Zack Jackson","email":"zackary.l.jackson@gmail.com","url":"https://github.com/zackljackson"}],"description":"Extract CSS from chunks into stylesheets + HMR. Supports Webpack 4","engines":{"node":">= 6.9.0 <7.0.0 || >= 8.9.0"},"main":"dist/cjs.js","files":["dist"],"license":"MIT","scripts":{"start":"npm run build -- -w","build":"cross-env NODE_ENV=production babel src -d dist --ignore 'src/**/*.test.js' --copy-files","clean":"del-cli dist","lint":"eslint --cache --fix src","prebuild":"npm run clean","prepublish":"npm run build","security":"nsp check","test":"jest","test:watch":"jest --watch","test:coverage":"jest --collectCoverageFrom='src/**/*.js' --coverage","test:example":"npm run build && webpack-dev-server test/manual/src/index.js --config test/manual/webpack.config.js","ci:lint":"npm run lint && npm run security","ci:test":"npm run test -- --runInBand","ci:coverage":"npm run test:coverage -- --runInBand","build:example":"npm run build && webpack-dev-server test/manual/src/index.js --open --config test/manual/webpack.config.js","cm":"git-cz","release":"standard-version","semantic-release":"semantic-release pre && npm publish && semantic-release post","travis":"npm run ci:coverage"},"peerDependencies":{"webpack":"^4.4.0"},"dependencies":{"loader-utils":"^1.1.0","lodash":"^4.17.5","normalize-url":"^1.9.1","webpack-sources":"^1.1.0"},"devDependencies":{"@webpack-contrib/eslint-config-webpack":"^2.0.4","babel-cli":"^6.26.0","babel-eslint":"^7.2.3","babel-jest":"^22.2.2","babel-loader":"^7.1.4","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-polyfill":"^6.26.0","babel-preset-env":"^1.6.1","commitizen":"^2.10.1","conventional-github-releaser":"^2.0.2","cross-env":"^5.1.3","css-loader":"^0.28.10","cz-conventional-changelog":"^2.1.0","del":"^3.0.0","del-cli":"^1.1.0","eslint":"^3.19.0","eslint-config-airbnb":"^15.0.1","eslint-plugin-flowtype":"^2.32.1","eslint-plugin-import":"^2.8.0","eslint-plugin-jsx-a11y":"^5.0.3","eslint-plugin-prettier":"^2.6.0","eslint-plugin-react":"^7.0.1","husky":"^0.14.3","jest":"^22.2.2","memory-fs":"^0.4.1","nsp":"^3.1.0","pre-commit":"^1.2.2","prettier":"^1.11.1","standard-version":"^4.3.0","webpack":"^4.4.0","webpack-cli":"^2.0.13","webpack-dev-server":"^3.1.1"},"homepage":"http://github.com/faceyspacey/extract-css-chunks-webpack-plugin","repository":{"type":"git","url":"git+https://github.com/faceyspacey/extract-css-chunks-webpack-plugin.git"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"readme":"<a href=\"https://gitter.im/Reactlandia/Lobby\" target=\"_blank\">\n  <img alt=\"Edit Redux-First Router Demo\" src=\"http://cdn.reactlandia.com/chat-badge-reactlandia.png\">\n</a>\n\n\n# extract-css-chunks-webpack-plugin\n\n<p align=\"center\">\n  <a href=\"https://www.npmjs.com/package/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://img.shields.io/npm/v/extract-css-chunks-webpack-plugin.svg\" alt=\"Version\" />\n  </a>\n\n  <a href=\"https://travis-ci.org/faceyspacey/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://travis-ci.org/faceyspacey/extract-css-chunks-webpack-plugin.svg?branch=master\" alt=\"Build Status\" />\n  </a>\n\n  <a href=\"https://www.npmjs.com/package/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://img.shields.io/npm/dt/extract-css-chunks-webpack-plugin.svg\" alt=\"Downloads\" />\n  </a>\n\n  <a href=\"https://www.npmjs.com/package/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://img.shields.io/npm/dw/extract-css-chunks-webpack-plugin.svg\" alt=\"License\" />\n  </a>\n  \n  <a href=\"https://www.npmjs.com/package/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://img.shields.io/npm/l/extract-css-chunks-webpack-plugin.svg\" alt=\"License\" />\n  </a>\n</p>\n\n<h2 align=\"center\">🍾🍾🍾It's our absolute pleasure to announce Webpack 4 Support 🚀🚀🚀</h2>\n\n> **HEADLINES (May 2018): Now Independently supports Webpack 4:** \nYep that's right. The universal family is now fully Webpack 4. Thank you to all our users for your loyalty and patience! If you love Universal, then you are gonna fall head over heels when we bring out the main course! \n\nSo... why did we rebuild `extract-css-chunks`? What does it offer? \n\nIts got all the goodness of `mini-css-extract-plugin` but with 2 gleaming, sought after benefits. \n\nCompared to the existing loaders, we are offering a single solution as opposed to needing to depend on multiple loaders to cater for different features:\n\n## Perks\n* **HMR:** It also has first-class support for **Hot Module Replacement** across ALL those css files/chunks!!!\n* cacheable stylesheets \n* smallest total bytes sent compared to \"render-path\" css-in-js solutions that include your CSS definitions in JS\n* Faster than the V2!\n* Async loading\n* No duplicate compilation (performance)\n* Easier to use\n* Specific to CSS\n* SSR Friendly development build, focused on frontend DX\n* Works seamlessly with the Universal family\n* Works fantastically as a standalone style loader (You can use it for any webpack project! with no extra dependencies!)\n\nAdditionally, if you are already a user of the universal family -- we will be waving goodbye to the mandatory ```window.__CSS_CHUNKS__```.\n\nThe functionality is still available to you via chunk flushing, and it can come in super handy when needing to easily resolve style assets as urls that might need to be passed to a third party.\n\n## Webpack 4 Standalone Installation:\n\nIf you are just looking for something that works like `mini-css-extract-plugin` but with HMR. Then look no further\n\nNOTE: We have aligned out loader implementation to be the same as `mini-css-extract-plugin` \n\n**If you already use `mini-css-extract-plugin`, then you can just change the `require` statement - its that easy**\n\n\n**DONT USE THIS INSTALL CMD IF YOU ARE BETA TESTING:**\n```\nyarn add --dev extract-css-chunks-webpack-plugin\n```\n\n*webpack.config.js:*\n```js\nconst ExtractCssChunks = require(\"extract-css-chunks-webpack-plugin\")\n\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [\n           ExtractCssChunks.loader,\n           \"css-loader\"\n         ]\n      }\n    ]\n  },\n  plugins: [\n    new ExtractCssChunks(\n        {\n          // Options similar to the same options in webpackOptions.output\n          // both options are optional\n          filename: \"[name].css\",\n          chunkFilename: \"[id].css\",\n          hot: true // optional is the plguin cannot automatically detect if you are using HOT, not for production use\n        }\n    ),\n  ]\n}\n```\n\n\n\n### What about Webpack 3?\nThis is a breaking change. The entire loader has been fundamentally rewritten specifically for Webpack 4. Aiming to support our existing user base, allowing them to upgrade their infrastructure to support Webpack 4 based universally code-split server-side rendered react applications. \n\nThere have been some challenges along the way since the release of webpack 4. Ultimately the only remaining hurdle is code split, async style loading. \n\nIf you do need Webpack 3, make sure to stick with the latest `v2.x.x` release. `v3.x.x` is only intend for users with Webpack 4\n\n\n\n\n*Note: this is a companion package to:*\n- [webpack-flush-chunks](https://github.com/faceyspacey/webpack-flush-chunks) \n- [react-universal-component](https://github.com/faceyspacey/react-universal-component)\n- [babel-plugin-universal-import](https://github.com/faceyspacey/babel-plugin-universal-import) ***or*** [babel-plugin-dual-import](https://github.com/faceyspacey/babel-plugin-dual-import)\n\n\n## Recommended Installation\n```\nyarn add react-universal-component webpack-flush-chunks\nyarn add --dev extract-css-chunks-webpack-plugin babel-plugin-universal-import\n```\n\n*.babelrc:*\n```js\n{\n  \"plugins\": [\"universal-import\"]\n}\n```\n\n*webpack.config.js:*\n```js\nconst ExtractCssChunks = require(\"extract-css-chunks-webpack-plugin\")\n\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [\n          ExtractCssChunks.loader,\n          {\n            loader: 'css-loader',\n            options: {\n              modules: true,\n              localIdentName: '[name]__[local]--[hash:base64:5]',\n            },\n          },\n        ],\n      },\n    ],\n  },\n  plugins: [\n    new ExtractCssChunks(),\n  ]\n};\n```\n\n## Desired Output\nHere's the sort of CSS you can expect to serve:\n\n```\n<head>\n\t<link rel='stylesheet' href='/static/main.css' />\n\t<link rel='stylesheet' href='/static/0.css' />\n\t<link rel='stylesheet' href='/static/7.css' />\n</head> \n\n<body>\n\t<div id=\"react-root\"></div>\n\t\n\t<script type='text/javascript' src='/static/vendor.js'></script>\n\t<script type='text/javascript' src='/static/0.js'></script>\n\t<script type='text/javascript' src='/static/7.js'></script>\n\t<script type='text/javascript' src='/static/main.js'></script>\n</body>\n```\n\nIf you need to resolve your stylesheets on the client side, for whatever reason. \n\n[webpack-flush-chunks](https://github.com/faceyspacey/webpack-flush-chunks) will scoop up the exact stylesheets to embed in your response. It will give you an object which can be embedded on page\n\nHere's how you do it:\n\n\n*src/components/App.js:*\n```js\nconst UniversalComponent = universal(props => import(`./${props.page}`))\n\n<UniversalComponent page='Foo' />\n```\n\n*server/render.js:*\n```js\nimport { flushChunkNames } from 'react-universal-component/server'\nimport flushChunks from 'webpack-flush-chunks'\n\nconst app = ReactDOMServer.renderToString(<App />)\nconst { js, styles, cssHash } = flushChunks(webpackStats, {\n  chunkNames: flushChunkNames()\n})\n\nres.send(`\n  <!doctype html>\n  <html>\n    <head>\n      ${styles}\n    </head>\n    <body>\n      <div id=\"root\">${app}</div>\n      <!-- not needed unless you want to access css chunks urls manually  -->\n      ${cssHash}\n      <!-- extract-css-chunks takes care of loading the css assets automatically -->\n      ${js}\n    </body>\n  </html>\n`)\n```\n\n***As for asynchronous calls to `import()` on user navigation,*** [babel-plugin-universal-import](https://github.com/faceyspacey/babel-plugin-universal-import) is required if you're using [react-universal-component](https://github.com/faceyspacey/react-universal-component). And if you aren't, you must use: [babel-plugin-dual-import](https://github.com/faceyspacey/babel-plugin-dual-import). \n\n\nThese babel plugins request both your js + your css. *Very Nice!* This is the new feature of the 2.0. Read *Sokra's* (author of webpack) article on how [on how this is the future of CSS for webpack](https://medium.com/webpack/the-new-css-workflow-step-1-79583bd107d7). Use this and be in the future today.\n\n\n## API \nYou can pass the same options as `mini-css-extract` to `new ExtractCssChunks`, such as:\n\n```javascript\nnew ExtractCssChunk({\n      filename: devMode ? '[name].css' : '[name].[hash].css',\n      chunkFilename: devMode ? '[id].css' : '[id].[hash].css',\n})\n```\n\n>Keep in mind, by default `[name].css` is used when `process.env.NODE_ENV === 'development'` and `[name].[contenthash].css` during production, so you can likely forget about having to pass anything.\n\n### HMR Pitfall\n\nThe most common workflow when working with webpack is to write a \"development\" / \"production\" value in to the\n'process.env.NODE_ENV' namespace, typically, using webpack's built-in \"DefinePlugin\" plugin. e.g:\n\n```javascript\nnew webpack.DefinePlugin( {\n     'process.env': {\n        NODE_ENV: `\"${config.devMode ? 'development' : 'production'}\"`,\n      },\n} )\n```\nThe value set by the aforementioned plugin will only be available in the runtime ( when webpack's javascript output is executed ).\nIn order for this plugin to work with hot module reloading, The npm script / gulp task / grunt task etc, should be invoked with the same environment variable as shown above.\n\nFor example, when running the build using some form of npm script:\n\n```json\n{\n  \"scripts\": {\n    \"build\": \"cross-env NODE_ENV=development webpack --config build/webpack.config.js\"\n  }\n}\n```\n[cross-env](https://www.npmjs.com/package/cross-env) is optional but recommended. \n\n### What about Glamorous, Styled Components, Styled-Jsx, Aphrodite, etc?\n\nIf you effectively use code-splitting, **Extract Css Chunks** can be a far better option than using emerging solutions like *Glamorous*, *Styled Components*, and slightly older tools like *Aphrodite*, *Glamor*, etc. We aren't fans of either rounds of tools because of several issues, but particularly because they all have a runtime overhead. Every time your React component is rendered with those, CSS is generated and updated within the DOM. On the server, you're going to also see unnecessary cycles for flushing the CSS along the critical render path. *Next.js's* `styled-jsx`, by the way, doesn't even work on the server--*not so good when it comes to flash of unstyled content (FOUC).*\n\nThe reason **Extract CSS Chunk** can be a better option is because **we also generate multiple sets of CSS based on what is actually \"used\",** ***but without the runtime overhead***. The difference is our definition of \"used\" is modules determined *statically* (which may not in fact be rendered) vs. what is in the \"critical render path\" (as is the case with the other tools). \n\nSo yes, our CSS may be mildly larger and include unnecessary css, but our `no_css.js` bundles will be a lot smaller as they don't need to inject any styles. See, even though those solutions have the smallest possible CSS file size, their javascript bundles, **in order to continue to render your components styled properly on the client,** must contain the necessary CSS for all possibilities! Those solutions serve both your entire bundle's CSS (in your javascript) **and** the CSS flushed from the critical render path. \n\nOn top of that, those are extra packages all with a huge number of issues in their Github repos corresponding to various limitations in the CSS they generate--something that is prevented when your definition for \"CSS-in-JS\" is simply importing CSS files compiled as normal by powerful proven CSS-specific processors.\n\nLastly, those solutions don't provide cacheable stylesheets. They do a lot of work--but they will **continue** doing it for you when you could have been done in one go long ago. Cloudflare is free--serve them through their CDN and you're winning. I love true javascript in css--don't get me wrong--but first I'd have to see they generate cacheable stylesheets. In my opinion, for now, it's best for environments that natively support it such as React Native.\n\n\n### Next:\n\nNow with that out of the way, for completeness let's compare what bytes of just the CSS are sent over the wire. The difference basically is minimal. Whereas solutions that flush from the critical render path will capture no more than the precise bits of CSS from the `if/else` branches followed, **Extract Css Chunks** is all about you effectively using code-splitting to insure, for example, you don't serve your Administration Panel's CSS in your public-facing site, etc. *In other words, it's all about avoiding serving large swaths of CSS from completely different sections of your app.* ***I.e. the biggest gains available to you.*** \n\n<details>\n<summary>\n    Read more on the topic ^^\n</summary>\n\nThis is where the real problem lies--where the real amount of unnecessary CSS comes from. If you effectively code-split your app, you may end up with 10 chunks. Now you can serve just the corresponding CSS for that chunk. If you try to go even farther and remove the css not used in the render path, you're likely achieving somewhere between 1-20% of the gains you achieved by thorough code-splitting. In other words, code splitting fulfills the 80/20 rule and attains the simple sweetspot of 80% optimization you--*as a balanced, level-headed, non-neurotic and professional developer*--are looking to achieve.\n\n*In short, by putting code splitting in appropriate places you have a lot of control over the CSS files that are created and can send a sensible* ***minimal*** *amount of associated bytes over the wire for the first request, perhaps even the smallest amount of all options.* \n\nIt's our perspective that you have achieved 80-99% of the performance gains (i.e. the creation of small relevant css files) at this ***static stage***. Offloading this work to the runtime stage is ultimately nit-picking and results in diminishing returns. When you factor that your JS bundle has to contain that JS anyway, those solutions make less and less sense from the perspective of reducing bytes delivered in the initial request. \n\nThere may be other reasons to use those tools (e.g. you don't like setting up webpack configs, or somehow you're really fond of pre-creating many `<div />` elements with their styles), but we prefer a simple standards-based way (without HoCs or specialized style components) to import styles just as you would in React Native. However to give the other tools credit, many of them likely started out with a different problem motivating them: avoiding webpack configs so you can include packages and their contained CSS without client apps being required to setup something like CSS loaders in Webpack. Having your CSS completely contained in true JS has its use cases, but at the application level--especially when you're already using something like Webpack--we fail to see its benefits. About all they share is a solution to avoiding **flashes of unstyled content** (FOUC), except one can save you a lot more bytes in what you send over the wire and save you from a continual runtime overhead where it's not needed. ***Honorable Mention:*** *StyleTron's concept of \"atomic declaration-level deduplication\" where it will make a class out of, say, `color: blue` so you don't need to send redundant styles certainly is a novel innovation, but again if the code still exists in your JS and you're building an application using Webpack (instead of a package), what's the point. In fact, it just makes editing the stylesheets in your browser developer tools more complicated. One benefit of critical render path solutions is the browser can spend less time matching the smaller number of styles to new DOM nodes as they appear, but then again it also has to spend the time injecting and parsing the new styles constantly, which is likely costlier.*\n\nAs an aside, so many apps share code between web and React Native--so the answer to the styles problem must be one that is identical for both. From that perspective importing a styles object **still** makes a lot of sense. **You're not missing out on the fundamental aspect of CSS-in-JSS:** ***isolated component-level styles and the ability to import them just like any other javascript code.*** Put them in other files, and use tools like `extract-css-chunks-webpack-plugin` and your pre-processors of choice that innately get styles right for the browser. As long as you're using **CSS Modules**, you're still at the cutting edge of CSS-in-JSS. Let's just say the other tools took one wrong turn and took it too far, when we already were at our destination. \n</details>\n\n\n#### SUMMARY OF BENEFITS COMPARED TO \"CRITICAL-RENDER-PATH\" SOLUTIONS:\n\n- no continual runtime overhead during `render` using HoCs that inject styles\n- smaller JS bundles without CSS injection\n- **You DO NOT need to clutter your component code with a specialized way of applying CSS (HoCs, styled elements)!** \n- The way you import module-based styles is exactly how you would import styles in React Native that exist in a separate file, which allows for extremely interchangeable code between React Native and regular React. Hurray! \n- pretty much already does everything covered by [@vjeux's 2014 css-in-js talk](https://speakerdeck.com/vjeux/react-css-in-js), besides dead code elimination. Dead code elimination is only solved for the other tools--as per the explanation above how the CSS is in the JS anyway--so much as Webpack and Uglify can remove **JS** that is not used. Either way, it's not a stretch to eventually add this feature to `extract-text-webpack-plugin` as well as this plugin. Hey, maybe it already has it??\n\n## Emotion!\n\n[Emotion](https://github.com/tkh44/emotion) is different. They allow for the extraction of static styles via their *extract mode*. We're very much looking forward to this being the perfect companion to the css chunks approach. \n<details>\n<summary>\n    Read more on the topic ^^\n</summary>\n\nCurrently however *extract mode* does not support IE11. So that means it's a no go, but we have hopes that in the future they'll solve that problem.\n\nThe reason Emotion doesn't work in IE11+ is because they currently try to preserve any dynamic aspects of your CSS-in-JS by converting it CSS vars, which isn't supported in IE11. That was a very smart approach, but unfortunately not good enough. \n\nThe vision we'd like to see for that package is where dynamic css stays inline, and where only static CSS is extracted into stylesheets, in which case CSS vars aren't needed. I've heard from them they have some \"hidden flags\" that allow for something close to this. When, and if, they take this feature all the way, look forward to us pushing it as our recommended approach. *Go Emotion!*\n</details>\n\n## Linaria\n\nLinaria is another modern CSS-in-JSS library. It's focused around static styles, which may make it a perfect fit for usage with this plugin. Check it out:\n\nhttps://github.com/callstack/linaria\n\n## What if I don't use SSR and use html-webpack-plugin?\n\nFor that case you can use [css-chunks-html-webpack-plugin](https://github.com/teamable-software/css-chunks-html-webpack-plugin) which will extract CSS chunks paths into your HTML file.\n\n## Conclusion:\n**We love CSS modules; no less, no more.**\n\n**Long live the dream of Code Splitting Everywhere!**\n\n\n## Contributing\nWe use [commitizen](https://github.com/commitizen/cz-cli), so run `npm run cm` to make commits. A command-line form will appear, requiring you answer a few questions to automatically produce a nicely formatted commit. Releases, semantic version numbers, tags and changelogs will automatically be generated based on these commits thanks to [semantic-release](https://github.com/semantic-release/semantic-release). Be good.\n\n## More from FaceySpacey in Reactlandia\n- [redux-first-router](https://github.com/faceyspacey/redux-first-router). It's made to work perfectly with *Universal*. Together they comprise our *\"frameworkless\"* Redux-based approach to what Next.js does (splitting, SSR, prefetching, and routing). *People are lovin it by the way* 😎\n","readmeFilename":"README.md","gitHead":"b241a50d3ed997c45af70dbf0199fc7175aea065","bugs":{"url":"https://github.com/faceyspacey/extract-css-chunks-webpack-plugin/issues"},"_id":"extract-css-chunks-webpack-plugin@3.0.4-beta.1","_npmVersion":"5.8.0","_nodeVersion":"8.9.4","_npmUser":{"name":"zackljackson","email":"zackary.l.jackson@gmail.com"},"dist":{"integrity":"sha512-uCW4iwsuXNq15KgdltHO9JO+UHS1uNOTYhDyalfeFWmkPE9soQkbXRHDEN9PFKWXoewdI9ir2Mc2Bxa43sdsrw==","shasum":"1a0bf377e20f6b0b30845d2147630a715ca0d99f","tarball":"https://registry.npmjs.org/extract-css-chunks-webpack-plugin/-/extract-css-chunks-webpack-plugin-3.0.4-beta.1.tgz","fileCount":9,"unpackedSize":50196,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbFqzACRA9TVsSAnZWagAAQOUP/3uQTFR8Y74nXnGetQOK\nYtfVwSiYbCVhO6hwjN7cG3xpUHFQgXp0ZIbCZXLWHRRduzLPo9fMertOpcTc\nZMRX/lA/g8c/coS+OMYmaRKrYZsPhPb3qyO03EFWHQYpRGwJxMZbmjOHfhFL\n7GdTOk52eF7W9T47vcmyItBZHvCbSotWKbcnZrX2eEq845MSC1IBmR+rsPHx\nV16qYYsLmvGXKKVx5JOo4uOdFNqHKIIsMYUJ/0VdJVpPyPz8xKOL8imw6aCL\nLRLuRCDSrA9U+cj93yS0NPEQD1mEkUraiYsoE+ZiX3GMJpzwZ/AqBRgmOTwx\n+pjR3VyQ1M/CZqfD51ZZDC+NfbpeLQXDLIswYoZbc9Mg5x8Rfd+LpMFRZFZS\n4bv7jJKEBnI8DPbeLrr9bYZjBvJ2LoO9PWIfmoQrt7hSonLjvpKzrDcEYsDm\nRIfyV1KRnXoolu+7Q9eFrEtutI5x74IXiPOtiQZ3ze1MD9ATI0BkYDRMyUMT\na3omgGkNo0Dy1+LTDqpQ9eGHJRDvno1ROIkIdKHxhIlJNhbcYlAjljGdI9Hj\nQ7u4G5mGjx3OLowrTAuKmZfCU3hFicrfXl1+NrYoQnbrbaemjZVnaeX7abC/\ngVyY2q2pBjzyecPrpY11GkDpaE7Rv1aCBo5BVHSUdC6To/QHQikibjyJZpbr\nckR+\r\n=vsbS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAUr8XJTq36c71rBSTJy1JtfqxBYlinXQRLF0tsThKD1AiBxAao9ZpTVtp2kgvcqqhf2QYl90jb0i/bHpdQSvezokQ=="}]},"maintainers":[{"email":"james@faceyspacey.com","name":"faceyspacey"},{"email":"zackary.l.jackson@gmail.com","name":"zackljackson"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/extract-css-chunks-webpack-plugin_3.0.4-beta.1_1528212671883_0.49659451923311737"},"_hasShrinkwrap":false},"3.0.5":{"name":"extract-css-chunks-webpack-plugin","version":"3.0.5","author":{"name":"James Gillmore","email":"james@faceyspacey.com"},"contributors":[{"name":"Zack Jackson","email":"zackary.l.jackson@gmail.com","url":"https://github.com/zackljackson"}],"description":"Extract CSS from chunks into stylesheets + HMR. Supports Webpack 4","engines":{"node":">= 6.9.0 <7.0.0 || >= 8.9.0"},"main":"dist/cjs.js","files":["dist"],"keywords":["css","chunks","code splitting","mini-css","hot","hmr","universal","webpack","webpack 4"],"license":"MIT","scripts":{"start":"npm run build -- -w","build":"cross-env NODE_ENV=production babel src -d dist --ignore 'src/**/*.test.js' --copy-files","clean":"del-cli dist","lint":"eslint --cache --fix src","prebuild":"npm run clean","prepublish":"npm run build","security":"nsp check","test":"jest","test:watch":"jest --watch","test:coverage":"jest --collectCoverageFrom='src/**/*.js' --coverage","test:example":"npm run build && webpack-dev-server test/manual/src/index.js --config test/manual/webpack.config.js","ci:lint":"npm run lint && npm run security","ci:test":"npm run test -- --runInBand","ci:coverage":"npm run test:coverage -- --runInBand","build:example":"npm run build && webpack-dev-server test/manual/src/index.js --open --config test/manual/webpack.config.js","cm":"git-cz","release":"standard-version","semantic-release":"semantic-release pre && npm publish && semantic-release post","travis":"npm run ci:coverage"},"peerDependencies":{"webpack":"^4.4.0"},"dependencies":{"loader-utils":"^1.1.0","lodash":"^4.17.5","normalize-url":"^1.9.1","webpack-sources":"^1.1.0"},"devDependencies":{"@webpack-contrib/eslint-config-webpack":"^2.0.4","babel-cli":"^6.26.0","babel-eslint":"^7.2.3","babel-jest":"^22.2.2","babel-loader":"^7.1.4","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-polyfill":"^6.26.0","babel-preset-env":"^1.6.1","commitizen":"^2.10.1","conventional-github-releaser":"^2.0.2","cross-env":"^5.1.3","css-loader":"^0.28.10","cz-conventional-changelog":"^2.1.0","del":"^3.0.0","del-cli":"^1.1.0","eslint":"^3.19.0","eslint-config-airbnb":"^15.0.1","eslint-plugin-flowtype":"^2.32.1","eslint-plugin-import":"^2.8.0","eslint-plugin-jsx-a11y":"^5.0.3","eslint-plugin-prettier":"^2.6.0","eslint-plugin-react":"^7.0.1","husky":"^0.14.3","jest":"^22.2.2","memory-fs":"^0.4.1","nsp":"^3.1.0","pre-commit":"^1.2.2","prettier":"^1.11.1","standard-version":"^4.3.0","webpack":"^4.4.0","webpack-cli":"^2.0.13","webpack-dev-server":"^3.1.1"},"homepage":"http://github.com/faceyspacey/extract-css-chunks-webpack-plugin","repository":{"type":"git","url":"git+https://github.com/faceyspacey/extract-css-chunks-webpack-plugin.git"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"gitHead":"1e56ccf3b01e8251466f263db4f38299e497b6c4","bugs":{"url":"https://github.com/faceyspacey/extract-css-chunks-webpack-plugin/issues"},"_id":"extract-css-chunks-webpack-plugin@3.0.5","_npmVersion":"5.8.0","_nodeVersion":"8.9.4","_npmUser":{"name":"zackljackson","email":"zackary.l.jackson@gmail.com"},"dist":{"integrity":"sha512-Emu0JKCGHISuqnXDrYP5bVOpDGe6eAGjDjeNQ822HVmLEgRJf5HHGj3vAzn2zYe2SU6OmnFMIspVzbPmwP3AMQ==","shasum":"e0713511a603058e50d24b4a3610646044a4bee2","tarball":"https://registry.npmjs.org/extract-css-chunks-webpack-plugin/-/extract-css-chunks-webpack-plugin-3.0.5.tgz","fileCount":9,"unpackedSize":51734,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbF1aeCRA9TVsSAnZWagAAdQYP/25QlVbwejSlQFWTjah6\nS7epY1lebm/bDaZH3vDYuOny9TRNp10NFADbByEHM73prZ6ago/oN2Mftnkt\n2sfSMe8x66FztiqwsvgfbqWTZ6D5JfuPjUwqCtLJ7DUxR/5OQG93I1ktFPYJ\nnNqMQdJdUVjSXZEDAU+DrBMyiDm4hB579xoCGcX1iq8Y/sSkaOPao7vU9iBl\nP71WQr4/6nQKHCDSg2j+2+nAC0k0bhAzNm/Sxg286ytMhjSJqHp/ScH44Ult\nxu4Eg366kz0XJx+9l2LLSpQ+UKy4YYo3mf3MZbI8RE+dDsWlTWwo/JlInqTS\nVAcX7JbNIkBT5BpHXD9UUKGTFViMu56wYwbXkDTm0xlkx5z0IBkEporwiM6W\nmQvBgak9JCNhELFR/q2MFtIxXB4pRrnk1e7VylT+kTOoSDviHdzIHOoQHW47\nDUuYFM06HMM5qdFvcwD19TMlTYblIunAiZex+iVTT9HW4w3zPD/9dHf/5Bfm\nbcDNsxmUJy8/ZYfhdmfw7MXjMtQ/W1rfNxaYW3KLAkXm/yNPAswQHqRg1NlW\nyxrekZptwn07oF5ykEnmSfFkq6g4ZqI9/7YYqX0RYAtJGIGm8oDXD41IKwWn\njcCV5sBunf7CEfvn799B3nlB7FBmP7EHPQY572xj8++ZL1pNZLVFJ1v3v1/K\nHZKg\r\n=3Jjz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGhOPYFmeGnYj2xEqzpzmrmTKdr2RiLo+mTLb5Nx+IAJAiEAwCB6f5nxWRY6PDhQTDISoCwFCOrnfuQiqzcVAzGof+4="}]},"maintainers":[{"email":"james@faceyspacey.com","name":"faceyspacey"},{"email":"zackary.l.jackson@gmail.com","name":"zackljackson"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/extract-css-chunks-webpack-plugin_3.0.5_1528256157139_0.5256674195614843"},"_hasShrinkwrap":false},"3.0.6-beta.1":{"name":"extract-css-chunks-webpack-plugin","version":"3.0.6-beta.1","author":{"name":"James Gillmore","email":"james@faceyspacey.com"},"contributors":[{"name":"Zack Jackson","email":"zackary.l.jackson@gmail.com","url":"https://github.com/ScriptedAlchemy"}],"description":"Extract CSS from chunks into stylesheets + HMR. Supports Webpack 4","engines":{"node":">= 6.9.0 <7.0.0 || >= 8.9.0"},"main":"dist/cjs.js","files":["dist"],"keywords":["css","chunks","code splitting","mini-css","hot","hmr","universal","webpack","webpack 4"],"license":"MIT","scripts":{"start":"npm run build -- -w","build":"cross-env NODE_ENV=production babel src -d dist --ignore 'src/**/*.test.js' --copy-files","clean":"del-cli dist","lint":"eslint --cache --fix src","prebuild":"npm run clean","prepublish":"npm run build","security":"nsp check","test":"jest","test:watch":"jest --watch","test:coverage":"jest --collectCoverageFrom='src/**/*.js' --coverage","test:example":"npm run build && webpack-dev-server test/manual/src/index.js --config test/manual/webpack.config.js","ci:lint":"npm run lint && npm run security","ci:test":"npm run test -- --runInBand","ci:coverage":"npm run test:coverage -- --runInBand","build:example":"npm run build && webpack-dev-server test/manual/src/index.js --open --config test/manual/webpack.config.js","cm":"git-cz","release":"standard-version","semantic-release":"semantic-release pre && npm publish && semantic-release post","travis":"npm run ci:coverage"},"peerDependencies":{"webpack":"^4.8.3"},"dependencies":{"loader-utils":"^1.1.0","lodash":"^4.17.5","normalize-url":"^1.9.1","webpack-sources":"^1.1.0"},"devDependencies":{"@webpack-contrib/eslint-config-webpack":"^2.0.4","babel-cli":"^6.26.0","babel-eslint":"^7.2.3","babel-jest":"^22.2.2","babel-loader":"^7.1.4","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-polyfill":"^6.26.0","babel-preset-env":"^1.6.1","commitizen":"^2.10.1","conventional-github-releaser":"^2.0.2","cross-env":"^5.1.3","css-loader":"^0.28.10","cz-conventional-changelog":"^2.1.0","del":"^3.0.0","del-cli":"^1.1.0","eslint":"^3.19.0","eslint-config-airbnb":"^15.0.1","eslint-plugin-flowtype":"^2.32.1","eslint-plugin-import":"^2.8.0","eslint-plugin-jsx-a11y":"^5.0.3","eslint-plugin-prettier":"^2.6.0","eslint-plugin-react":"^7.0.1","husky":"^0.14.3","jest":"^22.2.2","memory-fs":"^0.4.1","nsp":"^3.1.0","pre-commit":"^1.2.2","prettier":"^1.11.1","standard-version":"^4.3.0","webpack":"4.8.3","webpack-cli":"^2.0.13","webpack-dev-server":"^3.1.1"},"homepage":"http://github.com/faceyspacey/extract-css-chunks-webpack-plugin","repository":{"type":"git","url":"git+https://github.com/faceyspacey/extract-css-chunks-webpack-plugin.git"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"readme":"<a href=\"https://gitter.im/Reactlandia/Lobby\" target=\"_blank\">\n  <img alt=\"Edit Redux-First Router Demo\" src=\"http://cdn.reactlandia.com/chat-badge-reactlandia.png\">\n</a>\n\n\n# extract-css-chunks-webpack-plugin\n\n<p align=\"center\">\n  <a href=\"https://www.npmjs.com/package/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://img.shields.io/npm/v/extract-css-chunks-webpack-plugin.svg\" alt=\"Version\" />\n  </a>\n\n  <a href=\"https://travis-ci.org/faceyspacey/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://travis-ci.org/faceyspacey/extract-css-chunks-webpack-plugin.svg?branch=master\" alt=\"Build Status\" />\n  </a>\n\n  <a href=\"https://www.npmjs.com/package/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://img.shields.io/npm/dt/extract-css-chunks-webpack-plugin.svg\" alt=\"Downloads\" />\n  </a>\n\n  <a href=\"https://www.npmjs.com/package/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://img.shields.io/npm/dm/extract-css-chunks-webpack-plugin.svg\" alt=\"License\" />\n  </a>\n  \n  <a href=\"https://www.npmjs.com/package/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://img.shields.io/npm/l/extract-css-chunks-webpack-plugin.svg\" alt=\"License\" />\n  </a>\n</p>\n\n<h2 align=\"center\">🍾🍾🍾It's our absolute pleasure to announce Webpack 4 Support 🚀🚀🚀</h2>\n\n> **HEADLINES (May 2018): Now Independently supports Webpack 4:** \nYep that's right. The universal family is now fully Webpack 4. Thank you to all our users for your loyalty and patience! If you love Universal, then you are gonna fall head over heels when we bring out the main course! \n\nSo... why did we rebuild `extract-css-chunks`? What does it offer? \n\nIts got all the goodness of `mini-css-extract-plugin` but with 2 gleaming, sought after benefits. \n\nCompared to the existing loaders, we are offering a single solution as opposed to needing to depend on multiple loaders to cater for different features:\n\n## Perks\n* **HMR:** It also has first-class support for **Hot Module Replacement** across ALL those css files/chunks!!!\n* cacheable stylesheets \n* smallest total bytes sent compared to \"render-path\" css-in-js solutions that include your CSS definitions in JS\n* Faster than the V2!\n* Async loading\n* No duplicate compilation (performance)\n* Easier to use\n* Specific to CSS\n* SSR Friendly development build, focused on frontend DX\n* Works seamlessly with the Universal family\n* Works fantastically as a standalone style loader (You can use it for any webpack project! with no extra dependencies!)\n\nAdditionally, if you are already a user of the universal family -- we will be waving goodbye to the mandatory ```window.__CSS_CHUNKS__```.\n\nThe functionality is still available to you via chunk flushing, and it can come in super handy when needing to easily resolve style assets as urls that might need to be passed to a third party.\n\n## Webpack 4 Standalone Installation:\n\nIf you are just looking for something that works like `mini-css-extract-plugin` but with HMR. Then look no further\n\nNOTE: We have aligned out loader implementation to be the same as `mini-css-extract-plugin` \n\n**If you already use `mini-css-extract-plugin`, then you can just change the `require` statement - its that easy**\n\n\n**DONT USE THIS INSTALL CMD IF YOU ARE BETA TESTING:**\n```\nyarn add --dev extract-css-chunks-webpack-plugin\n```\n\n*webpack.config.js:*\n```js\nconst ExtractCssChunks = require(\"extract-css-chunks-webpack-plugin\")\n\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [\n           ExtractCssChunks.loader,\n           \"css-loader\"\n         ]\n      }\n    ]\n  },\n  plugins: [\n    new ExtractCssChunks(\n        {\n          // Options similar to the same options in webpackOptions.output\n          // both options are optional\n          filename: \"[name].css\",\n          chunkFilename: \"[id].css\",\n          hot: true // optional is the plguin cannot automatically detect if you are using HOT, not for production use\n        }\n    ),\n  ]\n}\n```\n\n*webpack.server.config.js*\n\nThe server needs to be handeled differently, we still want one chunks. Luckily webpack 4 supports **LimitChunkCountPlugin**\n\n```js\nnew webpack.optimize.LimitChunkCountPlugin({\n    maxChunks: 1\n})\n```\n\n\n### What about Webpack 3?\nThis is a breaking change. The entire loader has been fundamentally rewritten specifically for Webpack 4. Aiming to support our existing user base, allowing them to upgrade their infrastructure to support Webpack 4 based universally code-split server-side rendered react applications. \n\nThere have been some challenges along the way since the release of webpack 4. Ultimately the only remaining hurdle is code split, async style loading. \n\nIf you do need Webpack 3, make sure to stick with the latest `v2.x.x` release. `v3.x.x` is only intend for users with Webpack 4\n\n\n\n\n*Note: this is a companion package to:*\n- [webpack-flush-chunks](https://github.com/faceyspacey/webpack-flush-chunks) \n- [react-universal-component](https://github.com/faceyspacey/react-universal-component)\n- [babel-plugin-universal-import](https://github.com/faceyspacey/babel-plugin-universal-import) ***or*** [babel-plugin-dual-import](https://github.com/faceyspacey/babel-plugin-dual-import)\n\n\n## Recommended Installation For Universal\n```\nyarn add react-universal-component webpack-flush-chunks\nyarn add --dev extract-css-chunks-webpack-plugin babel-plugin-universal-import\n```\n\n*.babelrc:*\n```js\n{\n  \"plugins\": [\"universal-import\"]\n}\n```\nThe main thing is you need to cater for the new chunking system of webpack!\nWith **webpack.optimize.CommonsChunkPlugin** plugin no longer part of Webpack 4, we need another way to define the code-splitting. Luckily we have `optimization` configs built into webpack now\n\n*webpack.config.js:*\n```js\nconst ExtractCssChunks = require(\"extract-css-chunks-webpack-plugin\")\n\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [\n          ExtractCssChunks.loader,\n          {\n            loader: 'css-loader',\n            options: {\n              modules: true,\n              localIdentName: '[name]__[local]--[hash:base64:5]',\n            },\n          },\n        ],\n      },\n    ],\n  },\n  optimization: {\n      // FOR PRODUCTION\n      minimizer: [\n          new UglifyJSPlugin({\n              uglifyOptions: {\n                  output: {\n                      comments: false,\n                      ascii_only: true\n                  },\n                  compress: {\n                      comparisons: false\n                  }\n              }\n          })\n      ],\n      // END\n      // NEEDED BOTH IN PROD AND DEV BUILDS\n      runtimeChunk: {\n          name: 'bootstrap'\n      },\n      splitChunks: {\n          chunks: 'initial', // <-- The key to this\n          cacheGroups: {\n              vendors: {\n                  test: /[\\\\/]node_modules[\\\\/]/,\n                  name: 'vendor'\n              }\n          }\n      }\n  },\n  plugins: [\n    new ExtractCssChunks({hot:true}), //if you want HMR - we try to automatically inject hot reloading but if its not working, add it to the config\n  ]\n};\n```\n\n## Desired Output\nHere's the sort of CSS you can expect to serve:\n\n```\n<head>\n\t<link rel='stylesheet' href='/static/main.css' />\n\t<link rel='stylesheet' href='/static/0.css' />\n\t<link rel='stylesheet' href='/static/7.css' />\n</head> \n\n<body>\n\t<div id=\"react-root\"></div>\n\t\n\t<script type='text/javascript' src='/static/vendor.js'></script>\n\t<script type='text/javascript' src='/static/0.js'></script>\n\t<script type='text/javascript' src='/static/7.js'></script>\n\t<script type='text/javascript' src='/static/main.js'></script>\n</body>\n```\n\nIf you need to resolve your stylesheets on the client side, for whatever reason. \n\n[webpack-flush-chunks](https://github.com/faceyspacey/webpack-flush-chunks) will scoop up the exact stylesheets to embed in your response. It will give you an object which can be embedded on page\n\nHere's how you do it:\n\n\n*src/components/App.js:*\n```js\nconst UniversalComponent = universal(props => import(`./${props.page}`))\n\n<UniversalComponent page='Foo' />\n```\n\n*server/render.js:*\n```js\nimport { flushChunkNames } from 'react-universal-component/server'\nimport flushChunks from 'webpack-flush-chunks'\n\nconst app = ReactDOMServer.renderToString(<App />)\nconst { js, styles, cssHash } = flushChunks(webpackStats, {\n  chunkNames: flushChunkNames()\n})\n\nres.send(`\n  <!doctype html>\n  <html>\n    <head>\n      ${styles}\n    </head>\n    <body>\n      <div id=\"root\">${app}</div>\n      <!-- not needed unless you want to access css chunks urls manually  -->\n      ${cssHash}\n      <!-- extract-css-chunks takes care of loading the css assets automatically -->\n      ${js}\n    </body>\n  </html>\n`)\n```\n\n***As for asynchronous calls to `import()` on user navigation,*** [babel-plugin-universal-import](https://github.com/faceyspacey/babel-plugin-universal-import) is required if you're using [react-universal-component](https://github.com/faceyspacey/react-universal-component). And if you aren't, you must use: [babel-plugin-dual-import](https://github.com/faceyspacey/babel-plugin-dual-import). \n\n\nThese babel plugins request both your js + your css. *Very Nice!* This is the new feature of the 2.0. Read *Sokra's* (author of webpack) article on how [on how this is the future of CSS for webpack](https://medium.com/webpack/the-new-css-workflow-step-1-79583bd107d7). Use this and be in the future today.\n\n\n## API \nYou can pass the same options as `mini-css-extract` to `new ExtractCssChunks`, such as:\n\n```javascript\nnew ExtractCssChunk({\n      filename: devMode ? '[name].css' : '[name].[hash].css',\n      chunkFilename: devMode ? '[id].css' : '[id].[hash].css',\n})\n```\n\n>Keep in mind, by default `[name].css` is used when `process.env.NODE_ENV === 'development'` and `[name].[contenthash].css` during production, so you can likely forget about having to pass anything.\n\n### HMR Pitfall\n\nThe most common workflow when working with webpack is to write a \"development\" / \"production\" value in to the\n'process.env.NODE_ENV' namespace, typically, using webpack's built-in \"DefinePlugin\" plugin. e.g:\n\n```javascript\nnew webpack.DefinePlugin( {\n     'process.env': {\n        NODE_ENV: `\"${config.devMode ? 'development' : 'production'}\"`,\n      },\n} )\n```\nThe value set by the aforementioned plugin will only be available in the runtime ( when webpack's javascript output is executed ).\nIn order for this plugin to work with hot module reloading, The npm script / gulp task / grunt task etc, should be invoked with the same environment variable as shown above.\n\nFor example, when running the build using some form of npm script:\n\n```json\n{\n  \"scripts\": {\n     \"build\": \"cross-env NODE_ENV=production babel src -d dist --ignore 'src/**/*.test.js' --copy-files\"\n  }\n}\n```\n[cross-env](https://www.npmjs.com/package/cross-env) is optional but recommended. \n\n### What about Glamorous, Styled Components, Styled-Jsx, Aphrodite, etc?\n\nIf you effectively use code-splitting, **Extract Css Chunks** can be a far better option than using emerging solutions like *Glamorous*, *Styled Components*, and slightly older tools like *Aphrodite*, *Glamor*, etc. We aren't fans of either rounds of tools because of several issues, but particularly because they all have a runtime overhead. Every time your React component is rendered with those, CSS is generated and updated within the DOM. On the server, you're going to also see unnecessary cycles for flushing the CSS along the critical render path. *Next.js's* `styled-jsx`, by the way, doesn't even work on the server--*not so good when it comes to flash of unstyled content (FOUC).*\n\nThe reason **Extract CSS Chunk** can be a better option is because **we also generate multiple sets of CSS based on what is actually \"used\",** ***but without the runtime overhead***. The difference is our definition of \"used\" is modules determined *statically* (which may not in fact be rendered) vs. what is in the \"critical render path\" (as is the case with the other tools). \n\nSo yes, our CSS may be mildly larger and include unnecessary css, but our `no_css.js` bundles will be a lot smaller as they don't need to inject any styles. See, even though those solutions have the smallest possible CSS file size, their javascript bundles, **in order to continue to render your components styled properly on the client,** must contain the necessary CSS for all possibilities! Those solutions serve both your entire bundle's CSS (in your javascript) **and** the CSS flushed from the critical render path. \n\nOn top of that, those are extra packages all with a huge number of issues in their Github repos corresponding to various limitations in the CSS they generate--something that is prevented when your definition for \"CSS-in-JS\" is simply importing CSS files compiled as normal by powerful proven CSS-specific processors.\n\nLastly, those solutions don't provide cacheable stylesheets. They do a lot of work--but they will **continue** doing it for you when you could have been done in one go long ago. Cloudflare is free--serve them through their CDN and you're winning. I love true javascript in css--don't get me wrong--but first I'd have to see they generate cacheable stylesheets. In my opinion, for now, it's best for environments that natively support it such as React Native.\n\n\n### Next:\n\nNow with that out of the way, for completeness let's compare what bytes of just the CSS are sent over the wire. The difference basically is minimal. Whereas solutions that flush from the critical render path will capture no more than the precise bits of CSS from the `if/else` branches followed, **Extract Css Chunks** is all about you effectively using code-splitting to insure, for example, you don't serve your Administration Panel's CSS in your public-facing site, etc. *In other words, it's all about avoiding serving large swaths of CSS from completely different sections of your app.* ***I.e. the biggest gains available to you.*** \n\n<details>\n<summary>\n    Read more on the topic ^^\n</summary>\n\nThis is where the real problem lies--where the real amount of unnecessary CSS comes from. If you effectively code-split your app, you may end up with 10 chunks. Now you can serve just the corresponding CSS for that chunk. If you try to go even farther and remove the css not used in the render path, you're likely achieving somewhere between 1-20% of the gains you achieved by thorough code-splitting. In other words, code splitting fulfills the 80/20 rule and attains the simple sweetspot of 80% optimization you--*as a balanced, level-headed, non-neurotic and professional developer*--are looking to achieve.\n\n*In short, by putting code splitting in appropriate places you have a lot of control over the CSS files that are created and can send a sensible* ***minimal*** *amount of associated bytes over the wire for the first request, perhaps even the smallest amount of all options.* \n\nIt's our perspective that you have achieved 80-99% of the performance gains (i.e. the creation of small relevant css files) at this ***static stage***. Offloading this work to the runtime stage is ultimately nit-picking and results in diminishing returns. When you factor that your JS bundle has to contain that JS anyway, those solutions make less and less sense from the perspective of reducing bytes delivered in the initial request. \n\nThere may be other reasons to use those tools (e.g. you don't like setting up webpack configs, or somehow you're really fond of pre-creating many `<div />` elements with their styles), but we prefer a simple standards-based way (without HoCs or specialized style components) to import styles just as you would in React Native. However to give the other tools credit, many of them likely started out with a different problem motivating them: avoiding webpack configs so you can include packages and their contained CSS without client apps being required to setup something like CSS loaders in Webpack. Having your CSS completely contained in true JS has its use cases, but at the application level--especially when you're already using something like Webpack--we fail to see its benefits. About all they share is a solution to avoiding **flashes of unstyled content** (FOUC), except one can save you a lot more bytes in what you send over the wire and save you from a continual runtime overhead where it's not needed. ***Honorable Mention:*** *StyleTron's concept of \"atomic declaration-level deduplication\" where it will make a class out of, say, `color: blue` so you don't need to send redundant styles certainly is a novel innovation, but again if the code still exists in your JS and you're building an application using Webpack (instead of a package), what's the point. In fact, it just makes editing the stylesheets in your browser developer tools more complicated. One benefit of critical render path solutions is the browser can spend less time matching the smaller number of styles to new DOM nodes as they appear, but then again it also has to spend the time injecting and parsing the new styles constantly, which is likely costlier.*\n\nAs an aside, so many apps share code between web and React Native--so the answer to the styles problem must be one that is identical for both. From that perspective importing a styles object **still** makes a lot of sense. **You're not missing out on the fundamental aspect of CSS-in-JSS:** ***isolated component-level styles and the ability to import them just like any other javascript code.*** Put them in other files, and use tools like `extract-css-chunks-webpack-plugin` and your pre-processors of choice that innately get styles right for the browser. As long as you're using **CSS Modules**, you're still at the cutting edge of CSS-in-JSS. Let's just say the other tools took one wrong turn and took it too far, when we already were at our destination. \n</details>\n\n\n#### SUMMARY OF BENEFITS COMPARED TO \"CRITICAL-RENDER-PATH\" SOLUTIONS:\n\n- no continual runtime overhead during `render` using HoCs that inject styles\n- smaller JS bundles without CSS injection\n- **You DO NOT need to clutter your component code with a specialized way of applying CSS (HoCs, styled elements)!** \n- The way you import module-based styles is exactly how you would import styles in React Native that exist in a separate file, which allows for extremely interchangeable code between React Native and regular React. Hurray! \n- pretty much already does everything covered by [@vjeux's 2014 css-in-js talk](https://speakerdeck.com/vjeux/react-css-in-js), besides dead code elimination. Dead code elimination is only solved for the other tools--as per the explanation above how the CSS is in the JS anyway--so much as Webpack and Uglify can remove **JS** that is not used. Either way, it's not a stretch to eventually add this feature to `extract-text-webpack-plugin` as well as this plugin. Hey, maybe it already has it??\n\n## Emotion!\n\n[Emotion](https://github.com/tkh44/emotion) is different. They allow for the extraction of static styles via their *extract mode*. We're very much looking forward to this being the perfect companion to the css chunks approach. \n<details>\n<summary>\n    Read more on the topic ^^\n</summary>\n\nCurrently however *extract mode* does not support IE11. So that means it's a no go, but we have hopes that in the future they'll solve that problem.\n\nThe reason Emotion doesn't work in IE11+ is because they currently try to preserve any dynamic aspects of your CSS-in-JS by converting it CSS vars, which isn't supported in IE11. That was a very smart approach, but unfortunately not good enough. \n\nThe vision we'd like to see for that package is where dynamic css stays inline, and where only static CSS is extracted into stylesheets, in which case CSS vars aren't needed. I've heard from them they have some \"hidden flags\" that allow for something close to this. When, and if, they take this feature all the way, look forward to us pushing it as our recommended approach. *Go Emotion!*\n</details>\n\n## Linaria\n\nLinaria is another modern CSS-in-JSS library. It's focused around static styles, which may make it a perfect fit for usage with this plugin. Check it out:\n\nhttps://github.com/callstack/linaria\n\n## What if I don't use SSR and use html-webpack-plugin?\n\nFor that case you can use [css-chunks-html-webpack-plugin](https://github.com/teamable-software/css-chunks-html-webpack-plugin) which will extract CSS chunks paths into your HTML file.\n\n## Conclusion:\n**We love CSS modules; no less, no more.**\n\n**Long live the dream of Code Splitting Everywhere!**\n\n\n## Contributing\nWe use [commitizen](https://github.com/commitizen/cz-cli), so run `npm run cm` to make commits. A command-line form will appear, requiring you answer a few questions to automatically produce a nicely formatted commit. Releases, semantic version numbers, tags and changelogs will automatically be generated based on these commits thanks to [semantic-release](https://github.com/semantic-release/semantic-release). Be good.\n\n## More from FaceySpacey in Reactlandia\n- [redux-first-router](https://github.com/faceyspacey/redux-first-router). It's made to work perfectly with *Universal*. Together they comprise our *\"frameworkless\"* Redux-based approach to what Next.js does (splitting, SSR, prefetching, and routing). *People are lovin it by the way* 😎\n","readmeFilename":"README.md","gitHead":"1e56ccf3b01e8251466f263db4f38299e497b6c4","bugs":{"url":"https://github.com/faceyspacey/extract-css-chunks-webpack-plugin/issues"},"_id":"extract-css-chunks-webpack-plugin@3.0.6-beta.1","_npmVersion":"6.1.0","_nodeVersion":"8.9.4","_npmUser":{"name":"zackljackson","email":"zackary.l.jackson@gmail.com"},"dist":{"integrity":"sha512-UHNQiBpsOvlQE/72cMlFLdAFGEXqy6WEtyVC3nLkVM7sLxyi10jaX57D0Z/WbvX0vrGy/WZin8NbkXIztIVrqg==","shasum":"2e797f3dba295f3ead76db711c2cbd7d213fccd5","tarball":"https://registry.npmjs.org/extract-css-chunks-webpack-plugin/-/extract-css-chunks-webpack-plugin-3.0.6-beta.1.tgz","fileCount":9,"unpackedSize":51844,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbMBL/CRA9TVsSAnZWagAAK18P/js/VgBwfBopc0brRISr\n8jffJpm7fLtUxFz9ktqnfA0Ivmw8jnrRjibP4G2QrSqSjBHHjQzTXnpmFeca\nNsUMOQlaswS6LYlKavjRCoEeyoGVkc2z2BmU5F4Up4I7oUWOTNNzgjlO2MwL\n8id+2NKCTvom7chrLd3zVFBxDqE415H/fAUHsy6QyXq9q0hlytHyZxg7w20B\nza/PafD049DwT6XBtNRfLXJSw7N22nvmuCNl2sawwExe0TOEJiot6+wX5D1/\ncfCIETP1jlVT3ikjBAzwyiW8/AMcne7EuTLhvc+K+S2qffbVYJeDcLI/r2XT\n9i1uUYaFpuSHCTI4mt2bEit8fkWCwbc9g9HJlKQifPcznu758amhxSVfvc19\nYIGp16gc3uxoSczgsmj0jxRgmgQljnZHzx255o2ALPzpaEXGGKMwcdED+uZU\n9GI37sZOA+n7QPupvBdCGACO68RFsfRGMHKRrMCX+ISw3whGbEEab0cUWcIB\no+lLn63sAcQxDKK4s4GHCFWbf1hYu287M+GATCdGEFLYCW2qhg3ZQIdkc7aK\nyBfE9gWXT6CFuMY2MCsDZJig1d9OpAa0A40W6Huk/pd3XyYvuXwEfq/EfnMV\njn/acvkZW5RnNcDLNL7s2HigiaKWypPmG41SB+MXVumLbNkys87YYQM/LDVj\nZnyb\r\n=y9cM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCNM+r5I3llcqgl+qc5+7zWhRGmYrz1asXZpTJC77DMzAIhAPK4z1o1bed+DbLjTGisdMzuIP1CNFBJQ1eVB8fwE25e"}]},"maintainers":[{"email":"james@faceyspacey.com","name":"faceyspacey"},{"email":"zackary.l.jackson@gmail.com","name":"zackljackson"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/extract-css-chunks-webpack-plugin_3.0.6-beta.1_1529877247692_0.010277281176966468"},"_hasShrinkwrap":false},"3.0.6-beta.2":{"name":"extract-css-chunks-webpack-plugin","version":"3.0.6-beta.2","author":{"name":"James Gillmore","email":"james@faceyspacey.com"},"contributors":[{"name":"Zack Jackson","email":"zackary.l.jackson@gmail.com","url":"https://github.com/ScriptedAlchemy"}],"description":"Extract CSS from chunks into stylesheets + HMR. Supports Webpack 4","engines":{"node":">= 6.9.0 <7.0.0 || >= 8.9.0"},"main":"dist/cjs.js","files":["dist"],"keywords":["css","chunks","code splitting","mini-css","hot","hmr","universal","webpack","webpack 4"],"license":"MIT","scripts":{"start":"npm run build -- -w","build":"cross-env NODE_ENV=production babel src -d dist --ignore 'src/**/*.test.js' --copy-files","clean":"del-cli dist","lint":"eslint --cache --fix src","prebuild":"npm run clean","prepublish":"npm run build","security":"nsp check","test":"jest","test:watch":"jest --watch","test:coverage":"jest --collectCoverageFrom='src/**/*.js' --coverage","test:example":"npm run build && webpack-dev-server test/manual/src/index.js --config test/manual/webpack.config.js","ci:lint":"npm run lint && npm run security","ci:test":"npm run test -- --runInBand","ci:coverage":"npm run test:coverage -- --runInBand","build:example":"npm run build && webpack-dev-server test/manual/src/index.js --open --config test/manual/webpack.config.js","cm":"git-cz","release":"standard-version","semantic-release":"semantic-release pre && npm publish && semantic-release post","travis":"npm run ci:coverage"},"peerDependencies":{"webpack":"^4.8.3"},"dependencies":{"loader-utils":"^1.1.0","lodash":"^4.17.5","normalize-url":"^1.9.1","webpack-sources":"^1.1.0"},"devDependencies":{"@webpack-contrib/eslint-config-webpack":"^2.0.4","babel-cli":"^6.26.0","babel-eslint":"^7.2.3","babel-jest":"^22.2.2","babel-loader":"^7.1.4","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-polyfill":"^6.26.0","babel-preset-env":"^1.6.1","commitizen":"^2.10.1","conventional-github-releaser":"^2.0.2","cross-env":"^5.1.3","css-loader":"^0.28.10","cz-conventional-changelog":"^2.1.0","del":"^3.0.0","del-cli":"^1.1.0","eslint":"^3.19.0","eslint-config-airbnb":"^15.0.1","eslint-plugin-flowtype":"^2.32.1","eslint-plugin-import":"^2.8.0","eslint-plugin-jsx-a11y":"^5.0.3","eslint-plugin-prettier":"^2.6.0","eslint-plugin-react":"^7.0.1","husky":"^0.14.3","jest":"^22.2.2","memory-fs":"^0.4.1","nsp":"^3.1.0","pre-commit":"^1.2.2","prettier":"^1.11.1","standard-version":"^4.3.0","webpack":"4.8.3","webpack-cli":"^2.0.13","webpack-dev-server":"^3.1.1"},"homepage":"http://github.com/faceyspacey/extract-css-chunks-webpack-plugin","repository":{"type":"git","url":"git+https://github.com/faceyspacey/extract-css-chunks-webpack-plugin.git"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"readme":"<a href=\"https://gitter.im/Reactlandia/Lobby\" target=\"_blank\">\n  <img alt=\"Edit Redux-First Router Demo\" src=\"http://cdn.reactlandia.com/chat-badge-reactlandia.png\">\n</a>\n\n\n# extract-css-chunks-webpack-plugin\n\n<p align=\"center\">\n  <a href=\"https://www.npmjs.com/package/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://img.shields.io/npm/v/extract-css-chunks-webpack-plugin.svg\" alt=\"Version\" />\n  </a>\n\n  <a href=\"https://travis-ci.org/faceyspacey/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://travis-ci.org/faceyspacey/extract-css-chunks-webpack-plugin.svg?branch=master\" alt=\"Build Status\" />\n  </a>\n\n  <a href=\"https://www.npmjs.com/package/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://img.shields.io/npm/dt/extract-css-chunks-webpack-plugin.svg\" alt=\"Downloads\" />\n  </a>\n\n  <a href=\"https://www.npmjs.com/package/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://img.shields.io/npm/dm/extract-css-chunks-webpack-plugin.svg\" alt=\"License\" />\n  </a>\n  \n  <a href=\"https://www.npmjs.com/package/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://img.shields.io/npm/l/extract-css-chunks-webpack-plugin.svg\" alt=\"License\" />\n  </a>\n</p>\n\n<h2 align=\"center\">🍾🍾🍾It's our absolute pleasure to announce Webpack 4 Support 🚀🚀🚀</h2>\n\n> **HEADLINES (May 2018): Now Independently supports Webpack 4:** \nYep that's right. The universal family is now fully Webpack 4. Thank you to all our users for your loyalty and patience! If you love Universal, then you are gonna fall head over heels when we bring out the main course! \n\nSo... why did we rebuild `extract-css-chunks`? What does it offer? \n\nIts got all the goodness of `mini-css-extract-plugin` but with 2 gleaming, sought after benefits. \n\nCompared to the existing loaders, we are offering a single solution as opposed to needing to depend on multiple loaders to cater for different features:\n\n## Perks\n* **HMR:** It also has first-class support for **Hot Module Replacement** across ALL those css files/chunks!!!\n* cacheable stylesheets \n* smallest total bytes sent compared to \"render-path\" css-in-js solutions that include your CSS definitions in JS\n* Faster than the V2!\n* Async loading\n* No duplicate compilation (performance)\n* Easier to use\n* Specific to CSS\n* SSR Friendly development build, focused on frontend DX\n* Works seamlessly with the Universal family\n* Works fantastically as a standalone style loader (You can use it for any webpack project! with no extra dependencies!)\n\nAdditionally, if you are already a user of the universal family -- we will be waving goodbye to the mandatory ```window.__CSS_CHUNKS__```.\n\nThe functionality is still available to you via chunk flushing, and it can come in super handy when needing to easily resolve style assets as urls that might need to be passed to a third party.\n\n## Webpack 4 Standalone Installation:\n\nIf you are just looking for something that works like `mini-css-extract-plugin` but with HMR. Then look no further\n\nNOTE: We have aligned out loader implementation to be the same as `mini-css-extract-plugin` \n\n**If you already use `mini-css-extract-plugin`, then you can just change the `require` statement - its that easy**\n\n\n**DONT USE THIS INSTALL CMD IF YOU ARE BETA TESTING:**\n```\nyarn add --dev extract-css-chunks-webpack-plugin\n```\n\n*webpack.config.js:*\n```js\nconst ExtractCssChunks = require(\"extract-css-chunks-webpack-plugin\")\n\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [\n           ExtractCssChunks.loader,\n           \"css-loader\"\n         ]\n      }\n    ]\n  },\n  plugins: [\n    new ExtractCssChunks(\n        {\n          // Options similar to the same options in webpackOptions.output\n          // both options are optional\n          filename: \"[name].css\",\n          chunkFilename: \"[id].css\",\n          hot: true // optional is the plguin cannot automatically detect if you are using HOT, not for production use\n        }\n    ),\n  ]\n}\n```\n\n*webpack.server.config.js*\n\nThe server needs to be handeled differently, we still want one chunks. Luckily webpack 4 supports **LimitChunkCountPlugin**\n\n```js\nnew webpack.optimize.LimitChunkCountPlugin({\n    maxChunks: 1\n})\n```\n\n\n### What about Webpack 3?\nThis is a breaking change. The entire loader has been fundamentally rewritten specifically for Webpack 4. Aiming to support our existing user base, allowing them to upgrade their infrastructure to support Webpack 4 based universally code-split server-side rendered react applications. \n\nThere have been some challenges along the way since the release of webpack 4. Ultimately the only remaining hurdle is code split, async style loading. \n\nIf you do need Webpack 3, make sure to stick with the latest `v2.x.x` release. `v3.x.x` is only intend for users with Webpack 4\n\n\n\n\n*Note: this is a companion package to:*\n- [webpack-flush-chunks](https://github.com/faceyspacey/webpack-flush-chunks) \n- [react-universal-component](https://github.com/faceyspacey/react-universal-component)\n- [babel-plugin-universal-import](https://github.com/faceyspacey/babel-plugin-universal-import) ***or*** [babel-plugin-dual-import](https://github.com/faceyspacey/babel-plugin-dual-import)\n\n\n## Recommended Installation For Universal\n```\nyarn add react-universal-component webpack-flush-chunks\nyarn add --dev extract-css-chunks-webpack-plugin babel-plugin-universal-import\n```\n\n*.babelrc:*\n```js\n{\n  \"plugins\": [\"universal-import\"]\n}\n```\nThe main thing is you need to cater for the new chunking system of webpack!\nWith **webpack.optimize.CommonsChunkPlugin** plugin no longer part of Webpack 4, we need another way to define the code-splitting. Luckily we have `optimization` configs built into webpack now\n\n*webpack.config.js:*\n```js\nconst ExtractCssChunks = require(\"extract-css-chunks-webpack-plugin\")\n\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [\n          ExtractCssChunks.loader,\n          {\n            loader: 'css-loader',\n            options: {\n              modules: true,\n              localIdentName: '[name]__[local]--[hash:base64:5]',\n            },\n          },\n        ],\n      },\n    ],\n  },\n  optimization: {\n      // FOR PRODUCTION\n      minimizer: [\n          new UglifyJSPlugin({\n              uglifyOptions: {\n                  output: {\n                      comments: false,\n                      ascii_only: true\n                  },\n                  compress: {\n                      comparisons: false\n                  }\n              }\n          })\n      ],\n      // END\n      // NEEDED BOTH IN PROD AND DEV BUILDS\n      runtimeChunk: {\n          name: 'bootstrap'\n      },\n      splitChunks: {\n          chunks: 'initial', // <-- The key to this\n          cacheGroups: {\n              vendors: {\n                  test: /[\\\\/]node_modules[\\\\/]/,\n                  name: 'vendor'\n              }\n          }\n      }\n  },\n  plugins: [\n    new ExtractCssChunks({hot:true}), //if you want HMR - we try to automatically inject hot reloading but if its not working, add it to the config\n  ]\n};\n```\n\n## Desired Output\nHere's the sort of CSS you can expect to serve:\n\n```\n<head>\n\t<link rel='stylesheet' href='/static/main.css' />\n\t<link rel='stylesheet' href='/static/0.css' />\n\t<link rel='stylesheet' href='/static/7.css' />\n</head> \n\n<body>\n\t<div id=\"react-root\"></div>\n\t\n\t<script type='text/javascript' src='/static/vendor.js'></script>\n\t<script type='text/javascript' src='/static/0.js'></script>\n\t<script type='text/javascript' src='/static/7.js'></script>\n\t<script type='text/javascript' src='/static/main.js'></script>\n</body>\n```\n\nIf you need to resolve your stylesheets on the client side, for whatever reason. \n\n[webpack-flush-chunks](https://github.com/faceyspacey/webpack-flush-chunks) will scoop up the exact stylesheets to embed in your response. It will give you an object which can be embedded on page\n\nHere's how you do it:\n\n\n*src/components/App.js:*\n```js\nconst UniversalComponent = universal(props => import(`./${props.page}`))\n\n<UniversalComponent page='Foo' />\n```\n\n*server/render.js:*\n```js\nimport { flushChunkNames } from 'react-universal-component/server'\nimport flushChunks from 'webpack-flush-chunks'\n\nconst app = ReactDOMServer.renderToString(<App />)\nconst { js, styles, cssHash } = flushChunks(webpackStats, {\n  chunkNames: flushChunkNames()\n})\n\nres.send(`\n  <!doctype html>\n  <html>\n    <head>\n      ${styles}\n    </head>\n    <body>\n      <div id=\"root\">${app}</div>\n      <!-- not needed unless you want to access css chunks urls manually  -->\n      ${cssHash}\n      <!-- extract-css-chunks takes care of loading the css assets automatically -->\n      ${js}\n    </body>\n  </html>\n`)\n```\n\n***As for asynchronous calls to `import()` on user navigation,*** [babel-plugin-universal-import](https://github.com/faceyspacey/babel-plugin-universal-import) is required if you're using [react-universal-component](https://github.com/faceyspacey/react-universal-component). And if you aren't, you must use: [babel-plugin-dual-import](https://github.com/faceyspacey/babel-plugin-dual-import). \n\n\nThese babel plugins request both your js + your css. *Very Nice!* This is the new feature of the 2.0. Read *Sokra's* (author of webpack) article on how [on how this is the future of CSS for webpack](https://medium.com/webpack/the-new-css-workflow-step-1-79583bd107d7). Use this and be in the future today.\n\n\n## API \nYou can pass the same options as `mini-css-extract` to `new ExtractCssChunks`, such as:\n\n```javascript\nnew ExtractCssChunk({\n      filename: devMode ? '[name].css' : '[name].[hash].css',\n      chunkFilename: devMode ? '[id].css' : '[id].[hash].css',\n})\n```\n\n>Keep in mind, by default `[name].css` is used when `process.env.NODE_ENV === 'development'` and `[name].[contenthash].css` during production, so you can likely forget about having to pass anything.\n\n### HMR Pitfall\n\nThe most common workflow when working with webpack is to write a \"development\" / \"production\" value in to the\n'process.env.NODE_ENV' namespace, typically, using webpack's built-in \"DefinePlugin\" plugin. e.g:\n\n```javascript\nnew webpack.DefinePlugin( {\n     'process.env': {\n        NODE_ENV: `\"${config.devMode ? 'development' : 'production'}\"`,\n      },\n} )\n```\nThe value set by the aforementioned plugin will only be available in the runtime ( when webpack's javascript output is executed ).\nIn order for this plugin to work with hot module reloading, The npm script / gulp task / grunt task etc, should be invoked with the same environment variable as shown above.\n\nFor example, when running the build using some form of npm script:\n\n```json\n{\n  \"scripts\": {\n     \"build\": \"cross-env NODE_ENV=production babel src -d dist --ignore 'src/**/*.test.js' --copy-files\"\n  }\n}\n```\n[cross-env](https://www.npmjs.com/package/cross-env) is optional but recommended. \n\n### What about Glamorous, Styled Components, Styled-Jsx, Aphrodite, etc?\n\nIf you effectively use code-splitting, **Extract Css Chunks** can be a far better option than using emerging solutions like *Glamorous*, *Styled Components*, and slightly older tools like *Aphrodite*, *Glamor*, etc. We aren't fans of either rounds of tools because of several issues, but particularly because they all have a runtime overhead. Every time your React component is rendered with those, CSS is generated and updated within the DOM. On the server, you're going to also see unnecessary cycles for flushing the CSS along the critical render path. *Next.js's* `styled-jsx`, by the way, doesn't even work on the server--*not so good when it comes to flash of unstyled content (FOUC).*\n\nThe reason **Extract CSS Chunk** can be a better option is because **we also generate multiple sets of CSS based on what is actually \"used\",** ***but without the runtime overhead***. The difference is our definition of \"used\" is modules determined *statically* (which may not in fact be rendered) vs. what is in the \"critical render path\" (as is the case with the other tools). \n\nSo yes, our CSS may be mildly larger and include unnecessary css, but our `no_css.js` bundles will be a lot smaller as they don't need to inject any styles. See, even though those solutions have the smallest possible CSS file size, their javascript bundles, **in order to continue to render your components styled properly on the client,** must contain the necessary CSS for all possibilities! Those solutions serve both your entire bundle's CSS (in your javascript) **and** the CSS flushed from the critical render path. \n\nOn top of that, those are extra packages all with a huge number of issues in their Github repos corresponding to various limitations in the CSS they generate--something that is prevented when your definition for \"CSS-in-JS\" is simply importing CSS files compiled as normal by powerful proven CSS-specific processors.\n\nLastly, those solutions don't provide cacheable stylesheets. They do a lot of work--but they will **continue** doing it for you when you could have been done in one go long ago. Cloudflare is free--serve them through their CDN and you're winning. I love true javascript in css--don't get me wrong--but first I'd have to see they generate cacheable stylesheets. In my opinion, for now, it's best for environments that natively support it such as React Native.\n\n\n### Next:\n\nNow with that out of the way, for completeness let's compare what bytes of just the CSS are sent over the wire. The difference basically is minimal. Whereas solutions that flush from the critical render path will capture no more than the precise bits of CSS from the `if/else` branches followed, **Extract Css Chunks** is all about you effectively using code-splitting to insure, for example, you don't serve your Administration Panel's CSS in your public-facing site, etc. *In other words, it's all about avoiding serving large swaths of CSS from completely different sections of your app.* ***I.e. the biggest gains available to you.*** \n\n<details>\n<summary>\n    Read more on the topic ^^\n</summary>\n\nThis is where the real problem lies--where the real amount of unnecessary CSS comes from. If you effectively code-split your app, you may end up with 10 chunks. Now you can serve just the corresponding CSS for that chunk. If you try to go even farther and remove the css not used in the render path, you're likely achieving somewhere between 1-20% of the gains you achieved by thorough code-splitting. In other words, code splitting fulfills the 80/20 rule and attains the simple sweetspot of 80% optimization you--*as a balanced, level-headed, non-neurotic and professional developer*--are looking to achieve.\n\n*In short, by putting code splitting in appropriate places you have a lot of control over the CSS files that are created and can send a sensible* ***minimal*** *amount of associated bytes over the wire for the first request, perhaps even the smallest amount of all options.* \n\nIt's our perspective that you have achieved 80-99% of the performance gains (i.e. the creation of small relevant css files) at this ***static stage***. Offloading this work to the runtime stage is ultimately nit-picking and results in diminishing returns. When you factor that your JS bundle has to contain that JS anyway, those solutions make less and less sense from the perspective of reducing bytes delivered in the initial request. \n\nThere may be other reasons to use those tools (e.g. you don't like setting up webpack configs, or somehow you're really fond of pre-creating many `<div />` elements with their styles), but we prefer a simple standards-based way (without HoCs or specialized style components) to import styles just as you would in React Native. However to give the other tools credit, many of them likely started out with a different problem motivating them: avoiding webpack configs so you can include packages and their contained CSS without client apps being required to setup something like CSS loaders in Webpack. Having your CSS completely contained in true JS has its use cases, but at the application level--especially when you're already using something like Webpack--we fail to see its benefits. About all they share is a solution to avoiding **flashes of unstyled content** (FOUC), except one can save you a lot more bytes in what you send over the wire and save you from a continual runtime overhead where it's not needed. ***Honorable Mention:*** *StyleTron's concept of \"atomic declaration-level deduplication\" where it will make a class out of, say, `color: blue` so you don't need to send redundant styles certainly is a novel innovation, but again if the code still exists in your JS and you're building an application using Webpack (instead of a package), what's the point. In fact, it just makes editing the stylesheets in your browser developer tools more complicated. One benefit of critical render path solutions is the browser can spend less time matching the smaller number of styles to new DOM nodes as they appear, but then again it also has to spend the time injecting and parsing the new styles constantly, which is likely costlier.*\n\nAs an aside, so many apps share code between web and React Native--so the answer to the styles problem must be one that is identical for both. From that perspective importing a styles object **still** makes a lot of sense. **You're not missing out on the fundamental aspect of CSS-in-JSS:** ***isolated component-level styles and the ability to import them just like any other javascript code.*** Put them in other files, and use tools like `extract-css-chunks-webpack-plugin` and your pre-processors of choice that innately get styles right for the browser. As long as you're using **CSS Modules**, you're still at the cutting edge of CSS-in-JSS. Let's just say the other tools took one wrong turn and took it too far, when we already were at our destination. \n</details>\n\n\n#### SUMMARY OF BENEFITS COMPARED TO \"CRITICAL-RENDER-PATH\" SOLUTIONS:\n\n- no continual runtime overhead during `render` using HoCs that inject styles\n- smaller JS bundles without CSS injection\n- **You DO NOT need to clutter your component code with a specialized way of applying CSS (HoCs, styled elements)!** \n- The way you import module-based styles is exactly how you would import styles in React Native that exist in a separate file, which allows for extremely interchangeable code between React Native and regular React. Hurray! \n- pretty much already does everything covered by [@vjeux's 2014 css-in-js talk](https://speakerdeck.com/vjeux/react-css-in-js), besides dead code elimination. Dead code elimination is only solved for the other tools--as per the explanation above how the CSS is in the JS anyway--so much as Webpack and Uglify can remove **JS** that is not used. Either way, it's not a stretch to eventually add this feature to `extract-text-webpack-plugin` as well as this plugin. Hey, maybe it already has it??\n\n## Emotion!\n\n[Emotion](https://github.com/tkh44/emotion) is different. They allow for the extraction of static styles via their *extract mode*. We're very much looking forward to this being the perfect companion to the css chunks approach. \n<details>\n<summary>\n    Read more on the topic ^^\n</summary>\n\nCurrently however *extract mode* does not support IE11. So that means it's a no go, but we have hopes that in the future they'll solve that problem.\n\nThe reason Emotion doesn't work in IE11+ is because they currently try to preserve any dynamic aspects of your CSS-in-JS by converting it CSS vars, which isn't supported in IE11. That was a very smart approach, but unfortunately not good enough. \n\nThe vision we'd like to see for that package is where dynamic css stays inline, and where only static CSS is extracted into stylesheets, in which case CSS vars aren't needed. I've heard from them they have some \"hidden flags\" that allow for something close to this. When, and if, they take this feature all the way, look forward to us pushing it as our recommended approach. *Go Emotion!*\n</details>\n\n## Linaria\n\nLinaria is another modern CSS-in-JSS library. It's focused around static styles, which may make it a perfect fit for usage with this plugin. Check it out:\n\nhttps://github.com/callstack/linaria\n\n## What if I don't use SSR and use html-webpack-plugin?\n\nFor that case you can use [css-chunks-html-webpack-plugin](https://github.com/teamable-software/css-chunks-html-webpack-plugin) which will extract CSS chunks paths into your HTML file.\n\n## Conclusion:\n**We love CSS modules; no less, no more.**\n\n**Long live the dream of Code Splitting Everywhere!**\n\n\n## Contributing\nWe use [commitizen](https://github.com/commitizen/cz-cli), so run `npm run cm` to make commits. A command-line form will appear, requiring you answer a few questions to automatically produce a nicely formatted commit. Releases, semantic version numbers, tags and changelogs will automatically be generated based on these commits thanks to [semantic-release](https://github.com/semantic-release/semantic-release). Be good.\n\n## More from FaceySpacey in Reactlandia\n- [redux-first-router](https://github.com/faceyspacey/redux-first-router). It's made to work perfectly with *Universal*. Together they comprise our *\"frameworkless\"* Redux-based approach to what Next.js does (splitting, SSR, prefetching, and routing). *People are lovin it by the way* 😎\n","readmeFilename":"README.md","gitHead":"aa6638246c770fd20bae709f51800d6429ed0342","bugs":{"url":"https://github.com/faceyspacey/extract-css-chunks-webpack-plugin/issues"},"_id":"extract-css-chunks-webpack-plugin@3.0.6-beta.2","_npmVersion":"6.1.0","_nodeVersion":"8.9.4","_npmUser":{"name":"zackljackson","email":"zackary.l.jackson@gmail.com"},"dist":{"integrity":"sha512-GrMXowjenyUfHOK5uENasq7HdSYsAARsVYXdvWOh0nvdqDku/cBk8hrUYtCuxt+NciM/yPwVFbvYMsyqGKypHg==","shasum":"46813793f686a956de7dcc35b04aea6e027a3606","tarball":"https://registry.npmjs.org/extract-css-chunks-webpack-plugin/-/extract-css-chunks-webpack-plugin-3.0.6-beta.2.tgz","fileCount":9,"unpackedSize":51844,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbMBZjCRA9TVsSAnZWagAAD9cP/jW0lGweVkqkbnhZeFEt\nVgvTujxKxaEFlHA4d8QNAFh0Za5Tf6fDfll0SWcfBPftehNx25cxsVDyiYcU\nubRnOSwe+PK2w4GKjFG1yB9wssWDsiPgsqiTTNVwgygYD/UlOJTVVVVvNOMA\nJr008DkwkHeKrqJBXgcX9j2dxaE9Wc14MHbzrPdpF0KmzHA30er4xjv8UkFA\nfJqOvnyrEXcooqs+H/3Ivh9ejLBYhi8Ag8TcmVJrDp+zz43bXJr92WW01s2G\nQj7mGelM8DCWem/VsXv/j124aJ5junKTdtwhjswdAy/oEY25X5MeMf//qBNw\nWfzfa0FURaFCK8oDZASNE+CXjTDhEyxGA4Nz4oJ77EacuOwAlYEh26yepGtm\nSUifPaqnCaTMIWImlb/dYId8gN5g9tga39PqLwkx8OQOkkknCATVBRh6CPE7\nxvwqkJ5yNpSrzacHrHUMmEJUaB+loxmeI0iDE1adSY5EneaXNDW4pT+walkl\nG5ROkncjHWpBaCBsxdhkYJ5QXk6a1j1leYFL5VRArw86sn171mtvuU1dO+vj\n6ZFGSwP8DOVH4RdIeZQRGvdNFGtrJJbWXQ9OI4AwZ4WK7TNrxYscsev8w0eZ\nyoI4REVKrf98vpOIpuX4v0mP8cs2qYemFyBs4WnL9VAud4CwdvUy2UBDQUYe\nu1sL\r\n=7SCi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD18C43g7PDItWA/PaSWaZXagWiNQH54WxbkbNE8EgUlQIgbV0TrkuoihmKbIAP20vk63Dtgg1has9JXZZc1jgV62M="}]},"maintainers":[{"email":"james@faceyspacey.com","name":"faceyspacey"},{"email":"zackary.l.jackson@gmail.com","name":"zackljackson"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/extract-css-chunks-webpack-plugin_3.0.6-beta.2_1529878115473_0.7215766129091385"},"_hasShrinkwrap":false},"3.0.6":{"name":"extract-css-chunks-webpack-plugin","version":"3.0.6","author":{"name":"James Gillmore","email":"james@faceyspacey.com"},"contributors":[{"name":"Zack Jackson","email":"zackary.l.jackson@gmail.com","url":"https://github.com/ScriptedAlchemy"}],"description":"Extract CSS from chunks into stylesheets + HMR. Supports Webpack 4","engines":{"node":">= 6.9.0 <7.0.0 || >= 8.9.0"},"main":"dist/cjs.js","files":["dist"],"keywords":["css","chunks","code splitting","mini-css","hot","hmr","universal","webpack","webpack 4"],"license":"MIT","scripts":{"start":"npm run build -- -w","build":"cross-env NODE_ENV=production babel src -d dist --ignore 'src/**/*.test.js' --copy-files","clean":"del-cli dist","lint":"eslint --cache --fix src","prebuild":"npm run clean","prepublish":"npm run build","security":"nsp check","test":"jest","test:watch":"jest --watch","test:coverage":"jest --collectCoverageFrom='src/**/*.js' --coverage","test:example":"npm run build && webpack-dev-server test/manual/src/index.js --config test/manual/webpack.config.js","ci:lint":"npm run lint && npm run security","ci:test":"npm run test -- --runInBand","ci:coverage":"npm run test:coverage -- --runInBand","build:example":"npm run build && webpack-dev-server test/manual/src/index.js --open --config test/manual/webpack.config.js","cm":"git-cz","release":"standard-version","semantic-release":"semantic-release pre && npm publish && semantic-release post","travis":"npm run ci:coverage"},"peerDependencies":{"webpack":"^4.8.3"},"dependencies":{"loader-utils":"^1.1.0","lodash":"^4.17.5","normalize-url":"^1.9.1","webpack-sources":"^1.1.0"},"devDependencies":{"@webpack-contrib/eslint-config-webpack":"^2.0.4","babel-cli":"^6.26.0","babel-eslint":"^7.2.3","babel-jest":"^22.2.2","babel-loader":"^7.1.4","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-polyfill":"^6.26.0","babel-preset-env":"^1.6.1","commitizen":"^2.10.1","conventional-github-releaser":"^2.0.2","cross-env":"^5.1.3","css-loader":"^0.28.10","cz-conventional-changelog":"^2.1.0","del":"^3.0.0","del-cli":"^1.1.0","eslint":"^3.19.0","eslint-config-airbnb":"^15.0.1","eslint-plugin-flowtype":"^2.32.1","eslint-plugin-import":"^2.8.0","eslint-plugin-jsx-a11y":"^5.0.3","eslint-plugin-prettier":"^2.6.0","eslint-plugin-react":"^7.0.1","husky":"^0.14.3","jest":"^22.2.2","memory-fs":"^0.4.1","nsp":"^3.1.0","pre-commit":"^1.2.2","prettier":"^1.11.1","standard-version":"^4.3.0","webpack":"4.8.3","webpack-cli":"^2.0.13","webpack-dev-server":"^3.1.1"},"homepage":"http://github.com/faceyspacey/extract-css-chunks-webpack-plugin","repository":{"type":"git","url":"git+https://github.com/faceyspacey/extract-css-chunks-webpack-plugin.git"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"gitHead":"aa6638246c770fd20bae709f51800d6429ed0342","bugs":{"url":"https://github.com/faceyspacey/extract-css-chunks-webpack-plugin/issues"},"_id":"extract-css-chunks-webpack-plugin@3.0.6","_npmVersion":"6.1.0","_nodeVersion":"8.9.4","_npmUser":{"name":"zackljackson","email":"zackary.l.jackson@gmail.com"},"dist":{"integrity":"sha512-7GHKMAt0Mgk3pweg3iQy2LOOg7uL2F1asEmpBobw6VzEAFilCTwNjJBlEISezgdWML8eXjqztYpQ+g+85hbpbw==","shasum":"a3c92d2676e4ad5b5e65aec9cadcf92e9baa23be","tarball":"https://registry.npmjs.org/extract-css-chunks-webpack-plugin/-/extract-css-chunks-webpack-plugin-3.0.6.tgz","fileCount":9,"unpackedSize":51837,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbMRYTCRA9TVsSAnZWagAAo/wQAI+/3pEZfmNRN3YehNt2\n+Oed+nzPRy8oJL0/lIZaY6B4/s8LIo/sePzSZgm7uWISYu7dcqYHEF2/mqCL\ny666KnS36ZlO1aWhPF/8V6SiQlfS+cXr7D5j6f+KnUStQjSHKwcsaLMKgtov\nxIEcNacSJK4egsjs0b4aEiiIFu2dcCUYM6S5HiYcGY7Q+TK5T2mmPNkzdnsG\nZGIMtDBwDN0iqfrbqFCOpItRvrgZzckERUOvU/OHp9Ye5/vG1oqwsObqNHgJ\n1YBJNMHafiYljv6eHiMA1uVu19BbFGlv4AOhw+PU4JutpyhloUIvwPX7gYkM\nqrRtfiYTx56/t4+LtkQXjb0BKGNM7pvuDeeAME+Y6CcMX69x4wZH7ElW77pU\n8lolpiy1OeHJZIrK2XFmQx652QfDlwDx6WsYtQr0YAy+ZP7fhm7PdJFTaElO\nnVrpXFug5gCiYFVaNdfRWNknBUg54E2u6IPehQgUlPNrO3LDLVnd9pZbOJfu\nIpxWxlgdrCiLgnf6bX/UoLWBJtllaSvkV9TTNWKTyB3ioCHyMR4QydtClr6w\nVt2og1rsiZ3fyHej5kFi97kVwTmW3zQSC3a6507mSJBIjR//X2moyRV6cpuv\nMWuVXZEoBBhKSogVIMtbkJDJM8MOoWIKKWAw/iKNOiG8Qhc2iyq93zmk191r\nQ18a\r\n=ZqqV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCSOv2+itv1PYiumYlW8LgV+jJ/x3HTErvzFfX2YlYIwAIgEORt4r9LeI2iJ1QQjifJNNBNYIMtiwht3A/MVWTUArA="}]},"maintainers":[{"email":"james@faceyspacey.com","name":"faceyspacey"},{"email":"zackary.l.jackson@gmail.com","name":"zackljackson"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/extract-css-chunks-webpack-plugin_3.0.6_1529943571694_0.38814271608747775"},"_hasShrinkwrap":false},"3.0.7-beta.1":{"name":"extract-css-chunks-webpack-plugin","version":"3.0.7-beta.1","author":{"name":"James Gillmore","email":"james@faceyspacey.com"},"contributors":[{"name":"Zack Jackson","email":"zackary.l.jackson@gmail.com","url":"https://github.com/ScriptedAlchemy"}],"description":"Extract CSS from chunks into stylesheets + HMR. Supports Webpack 4","engines":{"node":">= 6.9.0 <7.0.0 || >= 8.9.0"},"main":"dist/cjs.js","files":["dist"],"keywords":["css","chunks","code splitting","mini-css","hot","hmr","universal","webpack","webpack 4"],"license":"MIT","scripts":{"start":"npm run build -- -w","build":"cross-env NODE_ENV=production babel src -d dist --ignore 'src/**/*.test.js' --copy-files","clean":"del-cli dist","lint":"eslint --cache --fix src","prebuild":"npm run clean","prepublish":"npm run build","security":"nsp check","test":"jest","test:watch":"jest --watch","test:coverage":"jest --collectCoverageFrom='src/**/*.js' --coverage","test:example":"npm run build && webpack-dev-server test/manual/src/index.js --config test/manual/webpack.config.js","ci:lint":"npm run lint && npm run security","ci:test":"npm run test -- --runInBand","ci:coverage":"npm run test:coverage -- --runInBand","build:example":"npm run build && webpack-dev-server test/manual/src/index.js --open --config test/manual/webpack.config.js","cm":"git-cz","release":"standard-version","semantic-release":"semantic-release pre && npm publish && semantic-release post","travis":"npm run ci:coverage"},"peerDependencies":{"webpack":"^4.8.3"},"dependencies":{"loader-utils":"^1.1.0","lodash":"^4.17.5","normalize-url":"^1.9.1","webpack-sources":"^1.1.0"},"devDependencies":{"@webpack-contrib/eslint-config-webpack":"^2.0.4","babel-cli":"^6.26.0","babel-eslint":"^7.2.3","babel-jest":"^22.2.2","babel-loader":"^7.1.4","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-polyfill":"^6.26.0","babel-preset-env":"^1.6.1","commitizen":"^2.10.1","conventional-github-releaser":"^2.0.2","cross-env":"^5.1.3","css-loader":"^0.28.10","cz-conventional-changelog":"^2.1.0","del":"^3.0.0","del-cli":"^1.1.0","eslint":"^3.19.0","eslint-config-airbnb":"^15.0.1","eslint-plugin-flowtype":"^2.32.1","eslint-plugin-import":"^2.8.0","eslint-plugin-jsx-a11y":"^5.0.3","eslint-plugin-prettier":"^2.6.0","eslint-plugin-react":"^7.0.1","husky":"^0.14.3","jest":"^22.2.2","memory-fs":"^0.4.1","nsp":"^3.1.0","pre-commit":"^1.2.2","prettier":"^1.11.1","standard-version":"^4.3.0","webpack":"4.8.3","webpack-cli":"^2.0.13","webpack-dev-server":"^3.1.1"},"homepage":"http://github.com/faceyspacey/extract-css-chunks-webpack-plugin","repository":{"type":"git","url":"git+https://github.com/faceyspacey/extract-css-chunks-webpack-plugin.git"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"readme":"<a href=\"https://gitter.im/Reactlandia/Lobby\" target=\"_blank\">\n  <img alt=\"Edit Redux-First Router Demo\" src=\"http://cdn.reactlandia.com/chat-badge-reactlandia.png\">\n</a>\n\n\n# extract-css-chunks-webpack-plugin\n\n<p align=\"center\">\n  <a href=\"https://www.npmjs.com/package/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://img.shields.io/npm/v/extract-css-chunks-webpack-plugin.svg\" alt=\"Version\" />\n  </a>\n\n  <a href=\"https://travis-ci.org/faceyspacey/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://travis-ci.org/faceyspacey/extract-css-chunks-webpack-plugin.svg?branch=master\" alt=\"Build Status\" />\n  </a>\n\n  <a href=\"https://www.npmjs.com/package/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://img.shields.io/npm/dt/extract-css-chunks-webpack-plugin.svg\" alt=\"Downloads\" />\n  </a>\n\n  <a href=\"https://www.npmjs.com/package/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://img.shields.io/npm/dm/extract-css-chunks-webpack-plugin.svg\" alt=\"License\" />\n  </a>\n  \n  <a href=\"https://www.npmjs.com/package/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://img.shields.io/npm/l/extract-css-chunks-webpack-plugin.svg\" alt=\"License\" />\n  </a>\n</p>\n\n<h2 align=\"center\">🍾🍾🍾It's our absolute pleasure to announce Webpack 4 Support 🚀🚀🚀</h2>\n\n> **HEADLINES (May 2018): Now Independently supports Webpack 4:** \nYep that's right. The universal family is now fully Webpack 4. Thank you to all our users for your loyalty and patience! If you love Universal, then you are gonna fall head over heels when we bring out the main course! \n\nSo... why did we rebuild `extract-css-chunks`? What does it offer? \n\nIt's got all the goodness of `mini-css-extract-plugin` but with 2 gleaming, sought after benefits. \n\nCompared to the existing loaders, we are offering a single solution as opposed to needing to depend on multiple loaders to cater for different features:\n\n## Perks\n* **HMR:** It also has first-class support for **Hot Module Replacement** across ALL those css files/chunks!!!\n* cacheable stylesheets \n* smallest total bytes sent compared to \"render-path\" css-in-js solutions that include your CSS definitions in JS\n* Faster than the V2!\n* Async loading\n* No duplicate compilation (performance)\n* Easier to use\n* Specific to CSS\n* SSR Friendly development build, focused on frontend DX\n* Works seamlessly with the Universal family\n* Works fantastically as a standalone style loader (You can use it for any webpack project! with no extra dependencies!)\n\nAdditionally, if you are already a user of the universal family -- we will be waving goodbye to the mandatory ```window.__CSS_CHUNKS__```.\n\nThe functionality is still available to you via chunk flushing, and it can come in super handy when needing to easily resolve style assets as urls that might need to be passed to a third party.\n\n## Webpack 4 Standalone Installation:\n\nIf you are just looking for something that works like `mini-css-extract-plugin` but with HMR, then look no further.\n\nNOTE: We have aligned out loader implementation to be the same as `mini-css-extract-plugin` \n\n**If you already use `mini-css-extract-plugin`, then you can just change the `require` statement - it's that easy**\n\n\n**DONT USE THIS INSTALL CMD IF YOU ARE BETA TESTING:**\n```\nyarn add --dev extract-css-chunks-webpack-plugin\n```\n\n*webpack.config.js:*\n```js\nconst ExtractCssChunks = require(\"extract-css-chunks-webpack-plugin\")\n\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [\n           ExtractCssChunks.loader,\n           \"css-loader\"\n         ]\n      }\n    ]\n  },\n  plugins: [\n    new ExtractCssChunks(\n        {\n          // Options similar to the same options in webpackOptions.output\n          // both options are optional\n          filename: \"[name].css\",\n          chunkFilename: \"[id].css\",\n          hot: true // optional as the plugin cannot automatically detect if you are using HOT, not for production use\n        }\n    ),\n  ]\n}\n```\n\n*webpack.server.config.js*\n\nThe server needs to be handled differently, we still want one chunk. Luckily webpack 4 supports **LimitChunkCountPlugin**\n\n```js\nnew webpack.optimize.LimitChunkCountPlugin({\n    maxChunks: 1\n})\n```\n\n\n### What about Webpack 3?\nThis is a breaking change. The entire loader has been fundamentally rewritten specifically for Webpack 4. Aiming to support our existing user base, allowing them to upgrade their infrastructure to support Webpack 4 based universally code-split server-side rendered react applications. \n\nThere have been some challenges along the way since the release of webpack 4. Ultimately the only remaining hurdle is code split, async style loading. \n\nIf you do need Webpack 3, make sure to stick with the latest `v2.x.x` release. `v3.x.x` is only intended for users with Webpack 4\n\n\n\n\n*Note: this is a companion package to:*\n- [webpack-flush-chunks](https://github.com/faceyspacey/webpack-flush-chunks) \n- [react-universal-component](https://github.com/faceyspacey/react-universal-component)\n- [babel-plugin-universal-import](https://github.com/faceyspacey/babel-plugin-universal-import) ***or*** [babel-plugin-dual-import](https://github.com/faceyspacey/babel-plugin-dual-import)\n\n\n## Recommended Installation For Universal\n```\nyarn add react-universal-component webpack-flush-chunks\nyarn add --dev extract-css-chunks-webpack-plugin babel-plugin-universal-import\n```\n\n*.babelrc:*\n```js\n{\n  \"plugins\": [\"universal-import\"]\n}\n```\nThe main thing is you need to cater to the new chunking system of webpack!\nWith **webpack.optimize.CommonsChunkPlugin** plugin no longer part of Webpack 4, we need another way to define the code-splitting. Luckily we have `optimization` configs built into webpack now\n\n*webpack.config.js:*\n```js\nconst ExtractCssChunks = require(\"extract-css-chunks-webpack-plugin\")\n\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [\n          ExtractCssChunks.loader,\n          {\n            loader: 'css-loader',\n            options: {\n              modules: true,\n              localIdentName: '[name]__[local]--[hash:base64:5]',\n            },\n          },\n        ],\n      },\n    ],\n  },\n  optimization: {\n      // FOR PRODUCTION\n      minimizer: [\n          new UglifyJSPlugin({\n              uglifyOptions: {\n                  output: {\n                      comments: false,\n                      ascii_only: true\n                  },\n                  compress: {\n                      comparisons: false\n                  }\n              }\n          })\n      ],\n      // END\n      // NEEDED BOTH IN PROD AND DEV BUILDS\n      runtimeChunk: {\n          name: 'bootstrap'\n      },\n      splitChunks: {\n          chunks: 'initial', // <-- The key to this\n          cacheGroups: {\n              vendors: {\n                  test: /[\\\\/]node_modules[\\\\/]/,\n                  name: 'vendor'\n              }\n          }\n      }\n  },\n  plugins: [\n    new ExtractCssChunks({hot:true}), //if you want HMR - we try to automatically inject hot reloading but if it's not working, add it to the config\n  ]\n};\n```\n\n## Desired Output\nHere's the sort of CSS you can expect to serve:\n\n```\n<head>\n\t<link rel='stylesheet' href='/static/main.css' />\n\t<link rel='stylesheet' href='/static/0.css' />\n\t<link rel='stylesheet' href='/static/7.css' />\n</head> \n\n<body>\n\t<div id=\"react-root\"></div>\n\t\n\t<script type='text/javascript' src='/static/vendor.js'></script>\n\t<script type='text/javascript' src='/static/0.js'></script>\n\t<script type='text/javascript' src='/static/7.js'></script>\n\t<script type='text/javascript' src='/static/main.js'></script>\n</body>\n```\n\nIf you need to resolve your stylesheets on the client side, for whatever reason. \n\n[webpack-flush-chunks](https://github.com/faceyspacey/webpack-flush-chunks) will scoop up the exact stylesheets to embed in your response. It will give you an object which can be embedded on page\n\nHere's how you do it:\n\n\n*src/components/App.js:*\n```js\nconst UniversalComponent = universal(props => import(`./${props.page}`))\n\n<UniversalComponent page='Foo' />\n```\n\n*server/render.js:*\n```js\nimport { flushChunkNames } from 'react-universal-component/server'\nimport flushChunks from 'webpack-flush-chunks'\n\nconst app = ReactDOMServer.renderToString(<App />)\nconst { js, styles, cssHash } = flushChunks(webpackStats, {\n  chunkNames: flushChunkNames()\n})\n\nres.send(`\n  <!doctype html>\n  <html>\n    <head>\n      ${styles}\n    </head>\n    <body>\n      <div id=\"root\">${app}</div>\n      <!-- not needed unless you want to access css chunks urls manually  -->\n      ${cssHash}\n      <!-- extract-css-chunks takes care of loading the css assets automatically -->\n      ${js}\n    </body>\n  </html>\n`)\n```\n\n***As for asynchronous calls to `import()` on user navigation,*** [babel-plugin-universal-import](https://github.com/faceyspacey/babel-plugin-universal-import) is required if you're using [react-universal-component](https://github.com/faceyspacey/react-universal-component). And if you aren't, you must use: [babel-plugin-dual-import](https://github.com/faceyspacey/babel-plugin-dual-import). \n\n\nThese babel plugins request both your js + your css. *Very Nice!* This is the new feature of the 2.0. Read *Sokra's* (author of webpack) article on how [on how this is the future of CSS for webpack](https://medium.com/webpack/the-new-css-workflow-step-1-79583bd107d7). Use this and be in the future today.\n\n\n## API \nYou can pass the same options as `mini-css-extract` to `new ExtractCssChunks`, such as:\n\n```javascript\nnew ExtractCssChunk({\n      filename: devMode ? '[name].css' : '[name].[hash].css',\n      chunkFilename: devMode ? '[id].css' : '[id].[hash].css',\n})\n```\n\n>Keep in mind, by default `[name].css` is used when `process.env.NODE_ENV === 'development'` and `[name].[contenthash].css` during production, so you can likely forget about having to pass anything.\n\n### HMR Pitfall\n\nThe most common workflow when working with webpack is to write a \"development\" / \"production\" value in to the\n'process.env.NODE_ENV' namespace, typically, using webpack's built-in \"DefinePlugin\" plugin. e.g:\n\n```javascript\nnew webpack.DefinePlugin( {\n     'process.env': {\n        NODE_ENV: `\"${config.devMode ? 'development' : 'production'}\"`,\n      },\n} )\n```\nThe value set by the aforementioned plugin will only be available in the runtime ( when webpack's javascript output is executed ).\nIn order for this plugin to work with hot module reloading, The npm script / gulp task / grunt task etc, should be invoked with the same environment variable as shown above.\n\nFor example, when running the build using some form of npm script:\n\n```json\n{\n  \"scripts\": {\n     \"build\": \"cross-env NODE_ENV=production babel src -d dist --ignore 'src/**/*.test.js' --copy-files\"\n  }\n}\n```\n[cross-env](https://www.npmjs.com/package/cross-env) is optional but recommended. \n\n### What about Glamorous, Styled Components, Styled-Jsx, Aphrodite, etc?\n\nIf you effectively use code-splitting, **Extract Css Chunks** can be a far better option than using emerging solutions like *Glamorous*, *Styled Components*, and slightly older tools like *Aphrodite*, *Glamor*, etc. We aren't fans of either rounds of tools because of several issues, but particularly because they all have a runtime overhead. Every time your React component is rendered with those, CSS is generated and updated within the DOM. On the server, you're going to also see unnecessary cycles for flushing the CSS along the critical render path. *Next.js's* `styled-jsx`, by the way, doesn't even work on the server--*not so good when it comes to flash of unstyled content (FOUC).*\n\nThe reason **Extract CSS Chunk** can be a better option is because **we also generate multiple sets of CSS based on what is actually \"used\",** ***but without the runtime overhead***. The difference is our definition of \"used\" is modules determined *statically* (which may not in fact be rendered) vs. what is in the \"critical render path\" (as is the case with the other tools). \n\nSo yes, our CSS may be mildly larger and include unnecessary css, but our `no_css.js` bundles will be a lot smaller as they don't need to inject any styles. See, even though those solutions have the smallest possible CSS file size, their javascript bundles, **in order to continue to render your components styled properly on the client,** must contain the necessary CSS for all possibilities! Those solutions serve both your entire bundle's CSS (in your javascript) **and** the CSS flushed from the critical render path. \n\nOn top of that, those are extra packages all with a huge number of issues in their Github repos corresponding to various limitations in the CSS they generate--something that is prevented when your definition for \"CSS-in-JS\" is simply importing CSS files compiled as normal by powerful proven CSS-specific processors.\n\nLastly, those solutions don't provide cacheable stylesheets. They do a lot of work--but they will **continue** doing it for you when you could have been done in one go long ago. Cloudflare is free--serve them through their CDN and you're winning. I love true javascript in css--don't get me wrong--but first I'd have to see they generate cacheable stylesheets. In my opinion, for now, it's best for environments that natively support it such as React Native.\n\n\n### Next:\n\nNow with that out of the way, for completeness let's compare what bytes of just the CSS are sent over the wire. The difference basically is minimal. Whereas solutions that flush from the critical render path will capture no more than the precise bits of CSS from the `if/else` branches followed, **Extract Css Chunks** is all about you effectively using code-splitting to insure, for example, you don't serve your Administration Panel's CSS in your public-facing site, etc. *In other words, it's all about avoiding serving large swaths of CSS from completely different sections of your app.* ***I.e. the biggest gains available to you.*** \n\n<details>\n<summary>\n    Read more on the topic ^^\n</summary>\n\nThis is where the real problem lies--where the real amount of unnecessary CSS comes from. If you effectively code-split your app, you may end up with 10 chunks. Now you can serve just the corresponding CSS for that chunk. If you try to go even farther and remove the css not used in the render path, you're likely achieving somewhere between 1-20% of the gains you achieved by thorough code-splitting. In other words, code splitting fulfills the 80/20 rule and attains the simple sweetspot of 80% optimization you--*as a balanced, level-headed, non-neurotic and professional developer*--are looking to achieve.\n\n*In short, by putting code splitting in appropriate places you have a lot of control over the CSS files that are created and can send a sensible* ***minimal*** *amount of associated bytes over the wire for the first request, perhaps even the smallest amount of all options.* \n\nIt's our perspective that you have achieved 80-99% of the performance gains (i.e. the creation of small relevant css files) at this ***static stage***. Offloading this work to the runtime stage is ultimately nit-picking and results in diminishing returns. When you factor that your JS bundle has to contain that JS anyway, those solutions make less and less sense from the perspective of reducing bytes delivered in the initial request. \n\nThere may be other reasons to use those tools (e.g. you don't like setting up webpack configs, or somehow you're really fond of pre-creating many `<div />` elements with their styles), but we prefer a simple standards-based way (without HoCs or specialized style components) to import styles just as you would in React Native. However to give the other tools credit, many of them likely started out with a different problem motivating them: avoiding webpack configs so you can include packages and their contained CSS without client apps being required to setup something like CSS loaders in Webpack. Having your CSS completely contained in true JS has its use cases, but at the application level--especially when you're already using something like Webpack--we fail to see its benefits. About all they share is a solution to avoiding **flashes of unstyled content** (FOUC), except one can save you a lot more bytes in what you send over the wire and save you from a continual runtime overhead where it's not needed. ***Honorable Mention:*** *StyleTron's concept of \"atomic declaration-level deduplication\" where it will make a class out of, say, `color: blue` so you don't need to send redundant styles certainly is a novel innovation, but again if the code still exists in your JS and you're building an application using Webpack (instead of a package), what's the point. In fact, it just makes editing the stylesheets in your browser developer tools more complicated. One benefit of critical render path solutions is the browser can spend less time matching the smaller number of styles to new DOM nodes as they appear, but then again it also has to spend the time injecting and parsing the new styles constantly, which is likely costlier.*\n\nAs an aside, so many apps share code between web and React Native--so the answer to the styles problem must be one that is identical for both. From that perspective importing a styles object **still** makes a lot of sense. **You're not missing out on the fundamental aspect of CSS-in-JSS:** ***isolated component-level styles and the ability to import them just like any other javascript code.*** Put them in other files, and use tools like `extract-css-chunks-webpack-plugin` and your pre-processors of choice that innately get styles right for the browser. As long as you're using **CSS Modules**, you're still at the cutting edge of CSS-in-JSS. Let's just say the other tools took one wrong turn and took it too far, when we already were at our destination. \n</details>\n\n\n#### SUMMARY OF BENEFITS COMPARED TO \"CRITICAL-RENDER-PATH\" SOLUTIONS:\n\n- no continual runtime overhead during `render` using HoCs that inject styles\n- smaller JS bundles without CSS injection\n- **You DO NOT need to clutter your component code with a specialized way of applying CSS (HoCs, styled elements)!** \n- The way you import module-based styles is exactly how you would import styles in React Native that exist in a separate file, which allows for extremely interchangeable code between React Native and regular React. Hurray! \n- pretty much already does everything covered by [@vjeux's 2014 css-in-js talk](https://speakerdeck.com/vjeux/react-css-in-js), besides dead code elimination. Dead code elimination is only solved for the other tools--as per the explanation above how the CSS is in the JS anyway--so much as Webpack and Uglify can remove **JS** that is not used. Either way, it's not a stretch to eventually add this feature to `extract-text-webpack-plugin` as well as this plugin. Hey, maybe it already has it??\n\n## Emotion!\n\n[Emotion](https://github.com/tkh44/emotion) is different. They allow for the extraction of static styles via their *extract mode*. We're very much looking forward to this being the perfect companion to the css chunks approach. \n<details>\n<summary>\n    Read more on the topic ^^\n</summary>\n\nCurrently however *extract mode* does not support IE11. So that means it's a no go, but we have hopes that in the future they'll solve that problem.\n\nThe reason Emotion doesn't work in IE11+ is because they currently try to preserve any dynamic aspects of your CSS-in-JS by converting it CSS vars, which isn't supported in IE11. That was a very smart approach, but unfortunately not good enough. \n\nThe vision we'd like to see for that package is where dynamic css stays inline, and where only static CSS is extracted into stylesheets, in which case CSS vars aren't needed. I've heard from them they have some \"hidden flags\" that allow for something close to this. When, and if, they take this feature all the way, look forward to us pushing it as our recommended approach. *Go Emotion!*\n</details>\n\n## Linaria\n\nLinaria is another modern CSS-in-JSS library. It's focused around static styles, which may make it a perfect fit for usage with this plugin. Check it out:\n\nhttps://github.com/callstack/linaria\n\n## What if I don't use SSR and use html-webpack-plugin?\n\nFor that case you can use [css-chunks-html-webpack-plugin](https://github.com/teamable-software/css-chunks-html-webpack-plugin) which will extract CSS chunks paths into your HTML file.\n\n## Conclusion:\n**We love CSS modules; no less, no more.**\n\n**Long live the dream of Code Splitting Everywhere!**\n\n\n## Contributing\nWe use [commitizen](https://github.com/commitizen/cz-cli), so run `npm run cm` to make commits. A command-line form will appear, requiring you answer a few questions to automatically produce a nicely formatted commit. Releases, semantic version numbers, tags and changelogs will automatically be generated based on these commits thanks to [semantic-release](https://github.com/semantic-release/semantic-release). Be good.\n\n## More from FaceySpacey in Reactlandia\n- [redux-first-router](https://github.com/faceyspacey/redux-first-router). It's made to work perfectly with *Universal*. Together they comprise our *\"frameworkless\"* Redux-based approach to what Next.js does (splitting, SSR, prefetching, and routing). *People are lovin it by the way* 😎\n","readmeFilename":"README.md","gitHead":"345509e39f887bf3cca5b205ea95a1e23fae7c9b","bugs":{"url":"https://github.com/faceyspacey/extract-css-chunks-webpack-plugin/issues"},"_id":"extract-css-chunks-webpack-plugin@3.0.7-beta.1","_npmVersion":"6.1.0","_nodeVersion":"10.5.0","_npmUser":{"name":"zackljackson","email":"zackary.l.jackson@gmail.com"},"dist":{"integrity":"sha512-Gj7k5lnjhPl80BtOqPAvMvVPV5IPEEJ8b9N8whT671HzFRJiXxGvzy0+qbNoHPGPZsC1Yn+zK97qvvhDH1kbVw==","shasum":"23caae75342fb365999526988e1331ecb29dba03","tarball":"https://registry.npmjs.org/extract-css-chunks-webpack-plugin/-/extract-css-chunks-webpack-plugin-3.0.7-beta.1.tgz","fileCount":9,"unpackedSize":51867,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbRUNmCRA9TVsSAnZWagAAJEwP/iDSsXYv6I9hBwb0YP3J\nSBmFQwIiIh+59iKwy5kZtSjd3weG77B7NY5wX9B/aIKYt92XX/l7sJM93igF\nvQrrcI8vlNuP+r0E1bw1bCpKLtDlDqm/ovvslr6KROdLEmBlHAr1WuDXp7N8\n+i99h4YQTcZzMdXidL0j5A4y/EaVEd8QC97G91NnX2p5uJNIrEPFWYqLzTNI\nfb54k/mDOFJSw9s4FN/PC9zx6dCz279OPRqnPb+ydC/gPzv5RHS4aOYGOBM/\ndnPhWLyIF/NtwXD+bGa87dBHcYzQtVBXSbNoGv8e3Vc4J1bonKuoL0TspsJ8\nL3BQdxOVAMT1HR5Cj5hXVDHrf7G2zrFCafx+bzeIePk+wwUNS9h2Qkhik7he\nrE7PA3ekPzeJb2Uexu3j3xjG7m6ZR29HGn8erQcrhhrVk79mDHczNvC+El9P\nOEdglLwHZEFJSPNKfqMCcNvtpVwxwN/hHxwoL4OD1vg82l9qZzJ3AXmH/DH5\nmDyFtzmRLrl4y1msI8qkpCRJ0g/q28Zpa8nYR2epkAy/AjH8tIuyAMetKWSc\nIIIT3QwUCYTXTl/dZFOtp7+hLhxIxTJabogvnx06w7s/yX5//3lhKm/TGZUP\nBAp53KLI+6EfOLm0zcV0RvvRE5m4N+P73dvsnNwcIv0rkmiqYL4zJsOtqNgg\nflJ8\r\n=n28F\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFPaSjrC5POKOHjkifJYxdPHX9RHadBFCY2ODcFp/V8PAiBS/jtFcOY+n5vbUUFF0oJ8F6IwNj5/GLnDMs0fK2xn/A=="}]},"maintainers":[{"email":"james@faceyspacey.com","name":"faceyspacey"},{"email":"zackary.l.jackson@gmail.com","name":"zackljackson"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/extract-css-chunks-webpack-plugin_3.0.7-beta.1_1531265894634_0.0648126761041854"},"_hasShrinkwrap":false},"3.0.7":{"name":"extract-css-chunks-webpack-plugin","version":"3.0.7","author":{"name":"James Gillmore","email":"james@faceyspacey.com"},"contributors":[{"name":"Zack Jackson","email":"zackary.l.jackson@gmail.com","url":"https://github.com/ScriptedAlchemy"}],"description":"Extract CSS from chunks into stylesheets + HMR. Supports Webpack 4","engines":{"node":">= 6.9.0 <7.0.0 || >= 8.9.0"},"main":"dist/cjs.js","files":["dist"],"keywords":["css","chunks","code splitting","mini-css","hot","hmr","universal","webpack","webpack 4"],"license":"MIT","scripts":{"start":"npm run build -- -w","build":"cross-env NODE_ENV=production babel src -d dist --ignore 'src/**/*.test.js' --copy-files","clean":"del-cli dist","lint":"eslint --cache --fix src","prebuild":"npm run clean","prepublish":"npm run build","security":"nsp check","test":"jest","test:watch":"jest --watch","test:coverage":"jest --collectCoverageFrom='src/**/*.js' --coverage","test:example":"npm run build && webpack-dev-server test/manual/src/index.js --config test/manual/webpack.config.js","ci:lint":"npm run lint && npm run security","ci:test":"npm run test -- --runInBand","ci:coverage":"npm run test:coverage -- --runInBand","build:example":"npm run build && webpack-dev-server test/manual/src/index.js --open --config test/manual/webpack.config.js","cm":"git-cz","release":"standard-version","semantic-release":"semantic-release pre && npm publish && semantic-release post","travis":"npm run ci:coverage"},"peerDependencies":{"webpack":"^4.8.3"},"dependencies":{"loader-utils":"^1.1.0","lodash":"^4.17.5","normalize-url":"^1.9.1","webpack-sources":"^1.1.0"},"devDependencies":{"@webpack-contrib/eslint-config-webpack":"^2.0.4","babel-cli":"^6.26.0","babel-eslint":"^7.2.3","babel-jest":"^22.2.2","babel-loader":"^7.1.4","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-polyfill":"^6.26.0","babel-preset-env":"^1.6.1","commitizen":"^2.10.1","conventional-github-releaser":"^2.0.2","cross-env":"^5.1.3","css-loader":"^0.28.10","cz-conventional-changelog":"^2.1.0","del":"^3.0.0","del-cli":"^1.1.0","eslint":"^3.19.0","eslint-config-airbnb":"^15.0.1","eslint-plugin-flowtype":"^2.32.1","eslint-plugin-import":"^2.8.0","eslint-plugin-jsx-a11y":"^5.0.3","eslint-plugin-prettier":"^2.6.0","eslint-plugin-react":"^7.0.1","husky":"^0.14.3","jest":"^22.2.2","memory-fs":"^0.4.1","nsp":"^3.1.0","pre-commit":"^1.2.2","prettier":"^1.11.1","standard-version":"^4.3.0","webpack":"4.8.3","webpack-cli":"^2.0.13","webpack-dev-server":"^3.1.1"},"homepage":"http://github.com/faceyspacey/extract-css-chunks-webpack-plugin","repository":{"type":"git","url":"git+https://github.com/faceyspacey/extract-css-chunks-webpack-plugin.git"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"gitHead":"41bddb4f65432c3805da776ee844f19f9bd14bc6","bugs":{"url":"https://github.com/faceyspacey/extract-css-chunks-webpack-plugin/issues"},"_id":"extract-css-chunks-webpack-plugin@3.0.7","_npmVersion":"5.5.1","_nodeVersion":"8.9.0","_npmUser":{"name":"zackljackson","email":"zackary.l.jackson@gmail.com"},"dist":{"integrity":"sha512-fFe48qYi0MeQr0mgHFXyaU1YX1yoKqxyl+LN+9koj5ODBTUTGILz/u3bzLa4L5ydRgY36kKTmC+Bml7mN/xNlA==","shasum":"5e63a55b818182faf69f150f9cefb1a935ef8fbb","tarball":"https://registry.npmjs.org/extract-css-chunks-webpack-plugin/-/extract-css-chunks-webpack-plugin-3.0.7.tgz","fileCount":9,"unpackedSize":51931,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbR3y0CRA9TVsSAnZWagAARbQP/1TmuUxQzfbD8Jcfw29Q\nbU5qQREyN7uMEpIDkGCbC/dW4F4vvvIYRsBwr0CVEXSwuFATLltl//IZ/ZMR\nks8CtYysIoFk8bes/klArcBcq6Mo9WBvlmRUaHRru94dus9wKDlwqbAu3zks\nSywrRL4jDwFN7lx0tEzTZM372FtWwgHCmG5t6LqWi0y9aH6qreqnThnCvWyX\nXzoOwPTePLMb8QR8JnIJQ8LXjyPBGQ5Y7BBbxqNwGSrOYHMNV5sIUQrCRSdv\nr/uBC4HrKL/M11iemvwUo8kAkVTWKrrPkfccw3CILHgGqazbQgNmdnH3WS+t\n71n75OVlIDLvATuIgSRuhlfON0yx4bh5OlZvIvErrOkoZzvr8d1nFRELwnoi\nOijTUg2IVsKTzQZa+YlJ4LyBp+obm1vT7smJeVWYIMDhJqOSPdv141ci1ZeG\n+ZgP7/3cFnInFglCoTndDWyj2nPlR755PRBs65SFXpF56W4nzXTI14hd9Y/L\nrQWRhG7Q1al4VhyrKl2BbOliFDK6LEpt+u1ru5k0U3Dqqa5gpEttqQnE41Xk\nuVdDbrTI/5ZUDhiL2zY15mVLNjbl6L717CYl//omrJCNZXACJLpkMVHaH8bH\nOsu+du4kvTFEYtseSeJ6Glex1IMLFM0Uj1XQb+kvtDx6he03cdP1AFsmtlHV\nNnJh\r\n=W9Q2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG+TGQxJ7WtZipI9UQdl0W1NEYwbtO8nNoOf6mTaYUM4AiAKLlKxVfff5qX6YYCLLIRIyw2xwQpJI3sZP/y3uAabcw=="}]},"maintainers":[{"email":"james@faceyspacey.com","name":"faceyspacey"},{"email":"zackary.l.jackson@gmail.com","name":"zackljackson"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/extract-css-chunks-webpack-plugin_3.0.7_1531411635855_0.9957790407578286"},"_hasShrinkwrap":false},"3.0.8-beta.1":{"name":"extract-css-chunks-webpack-plugin","version":"3.0.8-beta.1","author":{"name":"James Gillmore","email":"james@faceyspacey.com"},"contributors":[{"name":"Zack Jackson","email":"zackary.l.jackson@gmail.com","url":"https://github.com/ScriptedAlchemy"}],"description":"Extract CSS from chunks into stylesheets + HMR. Supports Webpack 4","engines":{"node":">= 6.9.0 <7.0.0 || >= 8.9.0"},"main":"dist/cjs.js","files":["dist"],"keywords":["css","chunks","code splitting","mini-css","hot","hmr","universal","webpack","webpack 4"],"license":"MIT","scripts":{"start":"npm run build -- -w","build":"cross-env NODE_ENV=production babel src -d dist --ignore 'src/**/*.test.js' --copy-files","clean":"del-cli dist","lint":"eslint --cache --fix src","prebuild":"npm run clean","prepublish":"npm run build","security":"nsp check","test":"jest","test:watch":"jest --watch","test:coverage":"jest --collectCoverageFrom='src/**/*.js' --coverage","test:example":"npm run build && webpack-dev-server test/manual/src/index.js --config test/manual/webpack.config.js","ci:lint":"npm run lint && npm run security","ci:test":"npm run test -- --runInBand","ci:coverage":"npm run test:coverage -- --runInBand","build:example":"npm run build && webpack-dev-server test/manual/src/index.js --open --config test/manual/webpack.config.js","cm":"git-cz","release":"standard-version","semantic-release":"semantic-release pre && npm publish && semantic-release post","travis":"npm run ci:coverage"},"peerDependencies":{"webpack":"^4.8.3"},"dependencies":{"loader-utils":"^1.1.0","lodash":"^4.17.5","normalize-url":"^1.9.1","webpack-sources":"^1.1.0"},"devDependencies":{"@webpack-contrib/eslint-config-webpack":"^2.0.4","babel-cli":"^6.26.0","babel-eslint":"^7.2.3","babel-jest":"^22.2.2","babel-loader":"^7.1.4","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-polyfill":"^6.26.0","babel-preset-env":"^1.6.1","commitizen":"^2.10.1","conventional-github-releaser":"^2.0.2","cross-env":"^5.1.3","css-loader":"^0.28.10","cz-conventional-changelog":"^2.1.0","del":"^3.0.0","del-cli":"^1.1.0","eslint":"^3.19.0","eslint-config-airbnb":"^15.0.1","eslint-plugin-flowtype":"^2.32.1","eslint-plugin-import":"^2.8.0","eslint-plugin-jsx-a11y":"^5.0.3","eslint-plugin-prettier":"^2.6.0","eslint-plugin-react":"^7.0.1","husky":"^0.14.3","jest":"^22.2.2","memory-fs":"^0.4.1","nsp":"^3.1.0","pre-commit":"^1.2.2","prettier":"^1.11.1","standard-version":"^4.3.0","webpack":"4.8.3","webpack-cli":"^2.0.13","webpack-dev-server":"^3.1.1"},"homepage":"http://github.com/faceyspacey/extract-css-chunks-webpack-plugin","repository":{"type":"git","url":"git+https://github.com/faceyspacey/extract-css-chunks-webpack-plugin.git"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"readme":"<a href=\"https://gitter.im/Reactlandia/Lobby\" target=\"_blank\">\n  <img alt=\"Edit Redux-First Router Demo\" src=\"http://cdn.reactlandia.com/chat-badge-reactlandia.png\">\n</a>\n\n\n# extract-css-chunks-webpack-plugin\n\n<p align=\"center\">\n  <a href=\"https://www.npmjs.com/package/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://img.shields.io/npm/v/extract-css-chunks-webpack-plugin.svg\" alt=\"Version\" />\n  </a>\n\n  <a href=\"https://travis-ci.org/faceyspacey/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://travis-ci.org/faceyspacey/extract-css-chunks-webpack-plugin.svg?branch=master\" alt=\"Build Status\" />\n  </a>\n\n  <a href=\"https://www.npmjs.com/package/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://img.shields.io/npm/dt/extract-css-chunks-webpack-plugin.svg\" alt=\"Downloads\" />\n  </a>\n\n  <a href=\"https://www.npmjs.com/package/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://img.shields.io/npm/dm/extract-css-chunks-webpack-plugin.svg\" alt=\"License\" />\n  </a>\n  \n  <a href=\"https://www.npmjs.com/package/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://img.shields.io/npm/l/extract-css-chunks-webpack-plugin.svg\" alt=\"License\" />\n  </a>\n</p>\n\n<h2 align=\"center\">🍾🍾🍾It's our absolute pleasure to announce Webpack 4 Support 🚀🚀🚀</h2>\n\n> **HEADLINES (May 2018): Now Independently supports Webpack 4:** \nYep that's right. The universal family is now fully Webpack 4. Thank you to all our users for your loyalty and patience! If you love Universal, then you are gonna fall head over heels when we bring out the main course! \n\nSo... why did we rebuild `extract-css-chunks`? What does it offer? \n\nIt's got all the goodness of `mini-css-extract-plugin` but with 2 gleaming, sought after benefits. \n\nCompared to the existing loaders, we are offering a single solution as opposed to needing to depend on multiple loaders to cater for different features:\n\n## Perks\n* **HMR:** It also has first-class support for **Hot Module Replacement** across ALL those css files/chunks!!!\n* cacheable stylesheets \n* smallest total bytes sent compared to \"render-path\" css-in-js solutions that include your CSS definitions in JS\n* Faster than the V2!\n* Async loading\n* No duplicate compilation (performance)\n* Easier to use\n* Specific to CSS\n* SSR Friendly development build, focused on frontend DX\n* Works seamlessly with the Universal family\n* Works fantastically as a standalone style loader (You can use it for any webpack project! with no extra dependencies!)\n\nAdditionally, if you are already a user of the universal family -- we will be waving goodbye to the mandatory ```window.__CSS_CHUNKS__```.\n\nThe functionality is still available to you via chunk flushing, and it can come in super handy when needing to easily resolve style assets as urls that might need to be passed to a third party.\n\n## Webpack 4 Standalone Installation:\n\nIf you are just looking for something that works like `mini-css-extract-plugin` but with HMR, then look no further.\n\nNOTE: We have aligned out loader implementation to be the same as `mini-css-extract-plugin` \n\n**If you already use `mini-css-extract-plugin`, then you can just change the `require` statement - it's that easy**\n\n\n**DONT USE THIS INSTALL CMD IF YOU ARE BETA TESTING:**\n```\nyarn add --dev extract-css-chunks-webpack-plugin\n```\n\n*webpack.config.js:*\n```js\nconst ExtractCssChunks = require(\"extract-css-chunks-webpack-plugin\")\n\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [\n           ExtractCssChunks.loader,\n           \"css-loader\"\n         ]\n      }\n    ]\n  },\n  plugins: [\n    new ExtractCssChunks(\n        {\n          // Options similar to the same options in webpackOptions.output\n          // both options are optional\n          filename: \"[name].css\",\n          chunkFilename: \"[id].css\",\n          hot: true // optional as the plugin cannot automatically detect if you are using HOT, not for production use\n        }\n    ),\n  ]\n}\n```\n\n*webpack.server.config.js*\n\nThe server needs to be handled differently, we still want one chunk. Luckily webpack 4 supports **LimitChunkCountPlugin**\n\n```js\nnew webpack.optimize.LimitChunkCountPlugin({\n    maxChunks: 1\n})\n```\n\n\n### What about Webpack 3?\nThis is a breaking change. The entire loader has been fundamentally rewritten specifically for Webpack 4. Aiming to support our existing user base, allowing them to upgrade their infrastructure to support Webpack 4 based universally code-split server-side rendered react applications. \n\nThere have been some challenges along the way since the release of webpack 4. Ultimately the only remaining hurdle is code split, async style loading. \n\nIf you do need Webpack 3, make sure to stick with the latest `v2.x.x` release. `v3.x.x` is only intended for users with Webpack 4\n\n\n\n\n*Note: this is a companion package to:*\n- [webpack-flush-chunks](https://github.com/faceyspacey/webpack-flush-chunks) \n- [react-universal-component](https://github.com/faceyspacey/react-universal-component)\n- [babel-plugin-universal-import](https://github.com/faceyspacey/babel-plugin-universal-import) ***or*** [babel-plugin-dual-import](https://github.com/faceyspacey/babel-plugin-dual-import)\n\n\n## Recommended Installation For Universal\n```\nyarn add react-universal-component webpack-flush-chunks\nyarn add --dev extract-css-chunks-webpack-plugin babel-plugin-universal-import\n```\n\n*.babelrc:*\n```js\n{\n  \"plugins\": [\"universal-import\"]\n}\n```\nThe main thing is you need to cater to the new chunking system of webpack!\nWith **webpack.optimize.CommonsChunkPlugin** plugin no longer part of Webpack 4, we need another way to define the code-splitting. Luckily we have `optimization` configs built into webpack now\n\n*webpack.config.js:*\n```js\nconst ExtractCssChunks = require(\"extract-css-chunks-webpack-plugin\")\n\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [\n          ExtractCssChunks.loader,\n          {\n            loader: 'css-loader',\n            options: {\n              modules: true,\n              localIdentName: '[name]__[local]--[hash:base64:5]',\n            },\n          },\n        ],\n      },\n    ],\n  },\n  optimization: {\n      // FOR PRODUCTION\n      minimizer: [\n          new UglifyJSPlugin({\n              uglifyOptions: {\n                  output: {\n                      comments: false,\n                      ascii_only: true\n                  },\n                  compress: {\n                      comparisons: false\n                  }\n              }\n          })\n      ],\n      // END\n      // NEEDED BOTH IN PROD AND DEV BUILDS\n      runtimeChunk: {\n          name: 'bootstrap'\n      },\n      splitChunks: {\n          chunks: 'initial', // <-- The key to this\n          cacheGroups: {\n              vendors: {\n                  test: /[\\\\/]node_modules[\\\\/]/,\n                  name: 'vendor'\n              }\n          }\n      }\n  },\n  plugins: [\n    new ExtractCssChunks({hot:true}), //if you want HMR - we try to automatically inject hot reloading but if it's not working, add it to the config\n  ]\n};\n```\n\n## Desired Output\nHere's the sort of CSS you can expect to serve:\n\n```\n<head>\n\t<link rel='stylesheet' href='/static/main.css' />\n\t<link rel='stylesheet' href='/static/0.css' />\n\t<link rel='stylesheet' href='/static/7.css' />\n</head> \n\n<body>\n\t<div id=\"react-root\"></div>\n\t\n\t<script type='text/javascript' src='/static/vendor.js'></script>\n\t<script type='text/javascript' src='/static/0.js'></script>\n\t<script type='text/javascript' src='/static/7.js'></script>\n\t<script type='text/javascript' src='/static/main.js'></script>\n</body>\n```\n\nIf you need to resolve your stylesheets on the client side, for whatever reason. \n\n[webpack-flush-chunks](https://github.com/faceyspacey/webpack-flush-chunks) will scoop up the exact stylesheets to embed in your response. It will give you an object which can be embedded on page\n\nHere's how you do it:\n\n\n*src/components/App.js:*\n```js\nconst UniversalComponent = universal(props => import(`./${props.page}`))\n\n<UniversalComponent page='Foo' />\n```\n\n*server/render.js:*\n```js\nimport { flushChunkNames } from 'react-universal-component/server'\nimport flushChunks from 'webpack-flush-chunks'\n\nconst app = ReactDOMServer.renderToString(<App />)\nconst { js, styles, cssHash } = flushChunks(webpackStats, {\n  chunkNames: flushChunkNames()\n})\n\nres.send(`\n  <!doctype html>\n  <html>\n    <head>\n      ${styles}\n    </head>\n    <body>\n      <div id=\"root\">${app}</div>\n      <!-- not needed unless you want to access css chunks urls manually  -->\n      ${cssHash}\n      <!-- extract-css-chunks takes care of loading the css assets automatically -->\n      ${js}\n    </body>\n  </html>\n`)\n```\n\n***As for asynchronous calls to `import()` on user navigation,*** [babel-plugin-universal-import](https://github.com/faceyspacey/babel-plugin-universal-import) is required if you're using [react-universal-component](https://github.com/faceyspacey/react-universal-component). And if you aren't, you must use: [babel-plugin-dual-import](https://github.com/faceyspacey/babel-plugin-dual-import). \n\n\nThese babel plugins request both your js + your css. *Very Nice!* This is the new feature of the 2.0. Read *Sokra's* (author of webpack) article on how [on how this is the future of CSS for webpack](https://medium.com/webpack/the-new-css-workflow-step-1-79583bd107d7). Use this and be in the future today.\n\n\n## API \nYou can pass the same options as `mini-css-extract` to `new ExtractCssChunks`, such as:\n\n```javascript\nnew ExtractCssChunk({\n      filename: devMode ? '[name].css' : '[name].[hash].css',\n      chunkFilename: devMode ? '[id].css' : '[id].[hash].css',\n})\n```\n\n>Keep in mind, by default `[name].css` is used when `process.env.NODE_ENV === 'development'` and `[name].[contenthash].css` during production, so you can likely forget about having to pass anything.\n\n### HMR Pitfall\n\nThe most common workflow when working with webpack is to write a \"development\" / \"production\" value in to the\n'process.env.NODE_ENV' namespace, typically, using webpack's built-in \"DefinePlugin\" plugin. e.g:\n\n```javascript\nnew webpack.DefinePlugin( {\n     'process.env': {\n        NODE_ENV: `\"${config.devMode ? 'development' : 'production'}\"`,\n      },\n} )\n```\nThe value set by the aforementioned plugin will only be available in the runtime ( when webpack's javascript output is executed ).\nIn order for this plugin to work with hot module reloading, The npm script / gulp task / grunt task etc, should be invoked with the same environment variable as shown above.\n\nFor example, when running the build using some form of npm script:\n\n```json\n{\n  \"scripts\": {\n     \"build\": \"cross-env NODE_ENV=production babel src -d dist --ignore 'src/**/*.test.js' --copy-files\"\n  }\n}\n```\n[cross-env](https://www.npmjs.com/package/cross-env) is optional but recommended. \n\n### What about Glamorous, Styled Components, Styled-Jsx, Aphrodite, etc?\n\nIf you effectively use code-splitting, **Extract Css Chunks** can be a far better option than using emerging solutions like *Glamorous*, *Styled Components*, and slightly older tools like *Aphrodite*, *Glamor*, etc. We aren't fans of either rounds of tools because of several issues, but particularly because they all have a runtime overhead. Every time your React component is rendered with those, CSS is generated and updated within the DOM. On the server, you're going to also see unnecessary cycles for flushing the CSS along the critical render path. *Next.js's* `styled-jsx`, by the way, doesn't even work on the server--*not so good when it comes to flash of unstyled content (FOUC).*\n\nThe reason **Extract CSS Chunk** can be a better option is because **we also generate multiple sets of CSS based on what is actually \"used\",** ***but without the runtime overhead***. The difference is our definition of \"used\" is modules determined *statically* (which may not in fact be rendered) vs. what is in the \"critical render path\" (as is the case with the other tools). \n\nSo yes, our CSS may be mildly larger and include unnecessary css, but our `no_css.js` bundles will be a lot smaller as they don't need to inject any styles. See, even though those solutions have the smallest possible CSS file size, their javascript bundles, **in order to continue to render your components styled properly on the client,** must contain the necessary CSS for all possibilities! Those solutions serve both your entire bundle's CSS (in your javascript) **and** the CSS flushed from the critical render path. \n\nOn top of that, those are extra packages all with a huge number of issues in their Github repos corresponding to various limitations in the CSS they generate--something that is prevented when your definition for \"CSS-in-JS\" is simply importing CSS files compiled as normal by powerful proven CSS-specific processors.\n\nLastly, those solutions don't provide cacheable stylesheets. They do a lot of work--but they will **continue** doing it for you when you could have been done in one go long ago. Cloudflare is free--serve them through their CDN and you're winning. I love true javascript in css--don't get me wrong--but first I'd have to see they generate cacheable stylesheets. In my opinion, for now, it's best for environments that natively support it such as React Native.\n\n\n### Next:\n\nNow with that out of the way, for completeness let's compare what bytes of just the CSS are sent over the wire. The difference basically is minimal. Whereas solutions that flush from the critical render path will capture no more than the precise bits of CSS from the `if/else` branches followed, **Extract Css Chunks** is all about you effectively using code-splitting to insure, for example, you don't serve your Administration Panel's CSS in your public-facing site, etc. *In other words, it's all about avoiding serving large swaths of CSS from completely different sections of your app.* ***I.e. the biggest gains available to you.*** \n\n<details>\n<summary>\n    Read more on the topic ^^\n</summary>\n\nThis is where the real problem lies--where the real amount of unnecessary CSS comes from. If you effectively code-split your app, you may end up with 10 chunks. Now you can serve just the corresponding CSS for that chunk. If you try to go even farther and remove the css not used in the render path, you're likely achieving somewhere between 1-20% of the gains you achieved by thorough code-splitting. In other words, code splitting fulfills the 80/20 rule and attains the simple sweetspot of 80% optimization you--*as a balanced, level-headed, non-neurotic and professional developer*--are looking to achieve.\n\n*In short, by putting code splitting in appropriate places you have a lot of control over the CSS files that are created and can send a sensible* ***minimal*** *amount of associated bytes over the wire for the first request, perhaps even the smallest amount of all options.* \n\nIt's our perspective that you have achieved 80-99% of the performance gains (i.e. the creation of small relevant css files) at this ***static stage***. Offloading this work to the runtime stage is ultimately nit-picking and results in diminishing returns. When you factor that your JS bundle has to contain that JS anyway, those solutions make less and less sense from the perspective of reducing bytes delivered in the initial request. \n\nThere may be other reasons to use those tools (e.g. you don't like setting up webpack configs, or somehow you're really fond of pre-creating many `<div />` elements with their styles), but we prefer a simple standards-based way (without HoCs or specialized style components) to import styles just as you would in React Native. However to give the other tools credit, many of them likely started out with a different problem motivating them: avoiding webpack configs so you can include packages and their contained CSS without client apps being required to setup something like CSS loaders in Webpack. Having your CSS completely contained in true JS has its use cases, but at the application level--especially when you're already using something like Webpack--we fail to see its benefits. About all they share is a solution to avoiding **flashes of unstyled content** (FOUC), except one can save you a lot more bytes in what you send over the wire and save you from a continual runtime overhead where it's not needed. ***Honorable Mention:*** *StyleTron's concept of \"atomic declaration-level deduplication\" where it will make a class out of, say, `color: blue` so you don't need to send redundant styles certainly is a novel innovation, but again if the code still exists in your JS and you're building an application using Webpack (instead of a package), what's the point. In fact, it just makes editing the stylesheets in your browser developer tools more complicated. One benefit of critical render path solutions is the browser can spend less time matching the smaller number of styles to new DOM nodes as they appear, but then again it also has to spend the time injecting and parsing the new styles constantly, which is likely costlier.*\n\nAs an aside, so many apps share code between web and React Native--so the answer to the styles problem must be one that is identical for both. From that perspective importing a styles object **still** makes a lot of sense. **You're not missing out on the fundamental aspect of CSS-in-JSS:** ***isolated component-level styles and the ability to import them just like any other javascript code.*** Put them in other files, and use tools like `extract-css-chunks-webpack-plugin` and your pre-processors of choice that innately get styles right for the browser. As long as you're using **CSS Modules**, you're still at the cutting edge of CSS-in-JSS. Let's just say the other tools took one wrong turn and took it too far, when we already were at our destination. \n</details>\n\n\n#### SUMMARY OF BENEFITS COMPARED TO \"CRITICAL-RENDER-PATH\" SOLUTIONS:\n\n- no continual runtime overhead during `render` using HoCs that inject styles\n- smaller JS bundles without CSS injection\n- **You DO NOT need to clutter your component code with a specialized way of applying CSS (HoCs, styled elements)!** \n- The way you import module-based styles is exactly how you would import styles in React Native that exist in a separate file, which allows for extremely interchangeable code between React Native and regular React. Hurray! \n- pretty much already does everything covered by [@vjeux's 2014 css-in-js talk](https://speakerdeck.com/vjeux/react-css-in-js), besides dead code elimination. Dead code elimination is only solved for the other tools--as per the explanation above how the CSS is in the JS anyway--so much as Webpack and Uglify can remove **JS** that is not used. Either way, it's not a stretch to eventually add this feature to `extract-text-webpack-plugin` as well as this plugin. Hey, maybe it already has it??\n\n## Emotion!\n\n[Emotion](https://github.com/tkh44/emotion) is different. They allow for the extraction of static styles via their *extract mode*. We're very much looking forward to this being the perfect companion to the css chunks approach. \n<details>\n<summary>\n    Read more on the topic ^^\n</summary>\n\nCurrently however *extract mode* does not support IE11. So that means it's a no go, but we have hopes that in the future they'll solve that problem.\n\nThe reason Emotion doesn't work in IE11+ is because they currently try to preserve any dynamic aspects of your CSS-in-JS by converting it CSS vars, which isn't supported in IE11. That was a very smart approach, but unfortunately not good enough. \n\nThe vision we'd like to see for that package is where dynamic css stays inline, and where only static CSS is extracted into stylesheets, in which case CSS vars aren't needed. I've heard from them they have some \"hidden flags\" that allow for something close to this. When, and if, they take this feature all the way, look forward to us pushing it as our recommended approach. *Go Emotion!*\n</details>\n\n## Linaria\n\nLinaria is another modern CSS-in-JSS library. It's focused around static styles, which may make it a perfect fit for usage with this plugin. Check it out:\n\nhttps://github.com/callstack/linaria\n\n## What if I don't use SSR and use html-webpack-plugin?\n\nFor that case you can use [css-chunks-html-webpack-plugin](https://github.com/teamable-software/css-chunks-html-webpack-plugin) which will extract CSS chunks paths into your HTML file.\n\n## Conclusion:\n**We love CSS modules; no less, no more.**\n\n**Long live the dream of Code Splitting Everywhere!**\n\n\n## Contributing\nWe use [commitizen](https://github.com/commitizen/cz-cli), so run `npm run cm` to make commits. A command-line form will appear, requiring you answer a few questions to automatically produce a nicely formatted commit. Releases, semantic version numbers, tags and changelogs will automatically be generated based on these commits thanks to [semantic-release](https://github.com/semantic-release/semantic-release). Be good.\n\n## More from FaceySpacey in Reactlandia\n- [redux-first-router](https://github.com/faceyspacey/redux-first-router). It's made to work perfectly with *Universal*. Together they comprise our *\"frameworkless\"* Redux-based approach to what Next.js does (splitting, SSR, prefetching, and routing). *People are lovin it by the way* 😎\n","readmeFilename":"README.md","gitHead":"ee84306e33f6b877100531e943e82b892e138ae1","bugs":{"url":"https://github.com/faceyspacey/extract-css-chunks-webpack-plugin/issues"},"_id":"extract-css-chunks-webpack-plugin@3.0.8-beta.1","_npmVersion":"5.5.1","_nodeVersion":"8.9.0","_npmUser":{"name":"zackljackson","email":"zackary.l.jackson@gmail.com"},"dist":{"integrity":"sha512-GwjeNg08pL42FQS9iCPfd/MLWzO3U3qsyXj0rpDPwDMW/gerDoHBd5AjSHEcyd57FNtWf5ICDb/Zm4soCKc8Hw==","shasum":"61a608b014e58d54cf8faec83b1c199fd768c65c","tarball":"https://registry.npmjs.org/extract-css-chunks-webpack-plugin/-/extract-css-chunks-webpack-plugin-3.0.8-beta.1.tgz","fileCount":9,"unpackedSize":51982,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbSPFkCRA9TVsSAnZWagAALYMP/1Eir+zS88auawCoH0Xs\ndkOHnDM+oAM/MOrhjUJtTU+/ps8ofbLDcrR1h7PYzLE/ajx5TXPRQ10jrxtR\nDNNW96a9QHY4r6s1pejIcOHAdFy/mfIdk1JKP9khEDuEn7Ik6Yo6cYPFQXIM\n8FLAFx/TB8xk2a3KxIkma+KaodPE2PElGURee8M+pCIgOUz5Biaj2i2S9IfW\nZxRc8lT12YQLj2tXJRl+pzK0Dj2HNsmryNF2bn0vHvYvEdF8iRDx8nyzuPKt\nE4vYmWVDWy7XyPefPe4xE6ZltUL/XoUMKftDYGVF3xLVCCnLhqx/HIX6HfSf\nH9H5ellVfdh6Cx4H03SHwGfd2eqnnc/wzrbQ2MH/ThhNntZzDwDDic4+9A/B\nT/PreDV1YyG1EGLxY78DbhcNl/YMAPXgzouegZqahjCuYr2PQHj9hTrA31RK\nqnjBzh35W+VEr/KZB9lfldo/+dNEOphxJ3H2cQUBkbhA6mUBCHhy38VCqLXJ\naCOoxh2/EJK4MLo0jxVbkvoSVT5B5yf3/ylHyPRM188WEWBxavyd7d6FiqCV\nXvkG+gVTVY9kDlcmDNRg7hGa6bRSg1l9lTPZ3MyzWImIYMtRzGRYT8Oulx9x\nAtVw8tP5w1f63EHf4lNVB6GcPwMy4SrLJVONkRrsIOwWFw1TA4bdIBg0l0+N\nu5gm\r\n=bpxt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCdIM1wUxo/cJRP3R7QSmsx1MwrrN4Ykvu6xcXyuSbfkgIgeMXii953+fA6vcPK/xHB6ScTpSG/8Mo7A8Yj5HZXU00="}]},"maintainers":[{"email":"james@faceyspacey.com","name":"faceyspacey"},{"email":"zackary.l.jackson@gmail.com","name":"zackljackson"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/extract-css-chunks-webpack-plugin_3.0.8-beta.1_1531507043973_0.7184441907072472"},"_hasShrinkwrap":false},"3.0.8-beta.2":{"name":"extract-css-chunks-webpack-plugin","version":"3.0.8-beta.2","author":{"name":"James Gillmore","email":"james@faceyspacey.com"},"contributors":[{"name":"Zack Jackson","email":"zackary.l.jackson@gmail.com","url":"https://github.com/ScriptedAlchemy"}],"description":"Extract CSS from chunks into stylesheets + HMR. Supports Webpack 4","engines":{"node":">= 6.9.0 <7.0.0 || >= 8.9.0"},"main":"dist/cjs.js","files":["dist"],"keywords":["css","chunks","code splitting","mini-css","hot","hmr","universal","webpack","webpack 4"],"license":"MIT","scripts":{"start":"npm run build -- -w","build":"cross-env NODE_ENV=production babel src -d dist --ignore 'src/**/*.test.js' --copy-files","clean":"del-cli dist","lint":"eslint --cache --fix src","prebuild":"npm run clean","prepublish":"npm run build","security":"nsp check","test":"jest","test:watch":"jest --watch","test:coverage":"jest --collectCoverageFrom='src/**/*.js' --coverage","test:example":"npm run build && webpack-dev-server test/manual/src/index.js --config test/manual/webpack.config.js","ci:lint":"npm run lint && npm run security","ci:test":"npm run test -- --runInBand","ci:coverage":"npm run test:coverage -- --runInBand","build:example":"npm run build && webpack-dev-server test/manual/src/index.js --open --config test/manual/webpack.config.js","cm":"git-cz","release":"standard-version","semantic-release":"semantic-release pre && npm publish && semantic-release post","travis":"npm run ci:coverage"},"peerDependencies":{"webpack":"^4.8.3"},"dependencies":{"loader-utils":"^1.1.0","lodash":"^4.17.5","normalize-url":"^1.9.1","webpack-sources":"^1.1.0"},"devDependencies":{"@webpack-contrib/eslint-config-webpack":"^2.0.4","babel-cli":"^6.26.0","babel-eslint":"^7.2.3","babel-jest":"^22.2.2","babel-loader":"^7.1.4","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-polyfill":"^6.26.0","babel-preset-env":"^1.6.1","commitizen":"^2.10.1","conventional-github-releaser":"^2.0.2","cross-env":"^5.1.3","css-loader":"^0.28.10","cz-conventional-changelog":"^2.1.0","del":"^3.0.0","del-cli":"^1.1.0","eslint":"^3.19.0","eslint-config-airbnb":"^15.0.1","eslint-plugin-flowtype":"^2.32.1","eslint-plugin-import":"^2.8.0","eslint-plugin-jsx-a11y":"^5.0.3","eslint-plugin-prettier":"^2.6.0","eslint-plugin-react":"^7.0.1","husky":"^0.14.3","jest":"^22.2.2","memory-fs":"^0.4.1","nsp":"^3.1.0","pre-commit":"^1.2.2","prettier":"^1.11.1","standard-version":"^4.3.0","webpack":"4.8.3","webpack-cli":"^2.0.13","webpack-dev-server":"^3.1.1"},"homepage":"http://github.com/faceyspacey/extract-css-chunks-webpack-plugin","repository":{"type":"git","url":"git+https://github.com/faceyspacey/extract-css-chunks-webpack-plugin.git"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"gitHead":"dae8cc5a42a60ed6b9bf34e0c9b0ef35c82ad629","readme":"<a href=\"https://gitter.im/Reactlandia/Lobby\" target=\"_blank\">\n  <img alt=\"Edit Redux-First Router Demo\" src=\"http://cdn.reactlandia.com/chat-badge-reactlandia.png\">\n</a>\n\n\n# extract-css-chunks-webpack-plugin\n\n<p align=\"center\">\n  <a href=\"https://www.npmjs.com/package/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://img.shields.io/npm/v/extract-css-chunks-webpack-plugin.svg\" alt=\"Version\" />\n  </a>\n\n  <a href=\"https://travis-ci.org/faceyspacey/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://travis-ci.org/faceyspacey/extract-css-chunks-webpack-plugin.svg?branch=master\" alt=\"Build Status\" />\n  </a>\n\n  <a href=\"https://www.npmjs.com/package/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://img.shields.io/npm/dt/extract-css-chunks-webpack-plugin.svg\" alt=\"Downloads\" />\n  </a>\n\n  <a href=\"https://www.npmjs.com/package/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://img.shields.io/npm/dm/extract-css-chunks-webpack-plugin.svg\" alt=\"License\" />\n  </a>\n  \n  <a href=\"https://www.npmjs.com/package/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://img.shields.io/npm/l/extract-css-chunks-webpack-plugin.svg\" alt=\"License\" />\n  </a>\n</p>\n\n<h2 align=\"center\">🍾🍾🍾It's our absolute pleasure to announce Webpack 4 Support 🚀🚀🚀</h2>\n\n> **HEADLINES (May 2018): Now Independently supports Webpack 4:** \nYep that's right. The universal family is now fully Webpack 4. Thank you to all our users for your loyalty and patience! If you love Universal, then you are gonna fall head over heels when we bring out the main course! \n\nSo... why did we rebuild `extract-css-chunks`? What does it offer? \n\nIt's got all the goodness of `mini-css-extract-plugin` but with 2 gleaming, sought after benefits. \n\nCompared to the existing loaders, we are offering a single solution as opposed to needing to depend on multiple loaders to cater for different features:\n\n## Perks\n* **HMR:** It also has first-class support for **Hot Module Replacement** across ALL those css files/chunks!!!\n* cacheable stylesheets \n* smallest total bytes sent compared to \"render-path\" css-in-js solutions that include your CSS definitions in JS\n* Faster than the V2!\n* Async loading\n* No duplicate compilation (performance)\n* Easier to use\n* Specific to CSS\n* SSR Friendly development build, focused on frontend DX\n* Works seamlessly with the Universal family\n* Works fantastically as a standalone style loader (You can use it for any webpack project! with no extra dependencies!)\n\nAdditionally, if you are already a user of the universal family -- we will be waving goodbye to the mandatory ```window.__CSS_CHUNKS__```.\n\nThe functionality is still available to you via chunk flushing, and it can come in super handy when needing to easily resolve style assets as urls that might need to be passed to a third party.\n\n## Webpack 4 Standalone Installation:\n\nIf you are just looking for something that works like `mini-css-extract-plugin` but with HMR, then look no further.\n\nNOTE: We have aligned out loader implementation to be the same as `mini-css-extract-plugin` \n\n**If you already use `mini-css-extract-plugin`, then you can just change the `require` statement - it's that easy**\n\n\n**DONT USE THIS INSTALL CMD IF YOU ARE BETA TESTING:**\n```\nyarn add --dev extract-css-chunks-webpack-plugin\n```\n\n*webpack.config.js:*\n```js\nconst ExtractCssChunks = require(\"extract-css-chunks-webpack-plugin\")\n\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [\n           ExtractCssChunks.loader,\n           \"css-loader\"\n         ]\n      }\n    ]\n  },\n  plugins: [\n    new ExtractCssChunks(\n        {\n          // Options similar to the same options in webpackOptions.output\n          // both options are optional\n          filename: \"[name].css\",\n          chunkFilename: \"[id].css\",\n          hot: true // optional as the plugin cannot automatically detect if you are using HOT, not for production use\n        }\n    ),\n  ]\n}\n```\n\n*webpack.server.config.js*\n\nThe server needs to be handled differently, we still want one chunk. Luckily webpack 4 supports **LimitChunkCountPlugin**\n\n```js\nnew webpack.optimize.LimitChunkCountPlugin({\n    maxChunks: 1\n})\n```\n\n\n### What about Webpack 3?\nThis is a breaking change. The entire loader has been fundamentally rewritten specifically for Webpack 4. Aiming to support our existing user base, allowing them to upgrade their infrastructure to support Webpack 4 based universally code-split server-side rendered react applications. \n\nThere have been some challenges along the way since the release of webpack 4. Ultimately the only remaining hurdle is code split, async style loading. \n\nIf you do need Webpack 3, make sure to stick with the latest `v2.x.x` release. `v3.x.x` is only intended for users with Webpack 4\n\n\n\n\n*Note: this is a companion package to:*\n- [webpack-flush-chunks](https://github.com/faceyspacey/webpack-flush-chunks) \n- [react-universal-component](https://github.com/faceyspacey/react-universal-component)\n- [babel-plugin-universal-import](https://github.com/faceyspacey/babel-plugin-universal-import) ***or*** [babel-plugin-dual-import](https://github.com/faceyspacey/babel-plugin-dual-import)\n\n\n## Recommended Installation For Universal\n```\nyarn add react-universal-component webpack-flush-chunks\nyarn add --dev extract-css-chunks-webpack-plugin babel-plugin-universal-import\n```\n\n*.babelrc:*\n```js\n{\n  \"plugins\": [\"universal-import\"]\n}\n```\nThe main thing is you need to cater to the new chunking system of webpack!\nWith **webpack.optimize.CommonsChunkPlugin** plugin no longer part of Webpack 4, we need another way to define the code-splitting. Luckily we have `optimization` configs built into webpack now\n\n*webpack.config.js:*\n```js\nconst ExtractCssChunks = require(\"extract-css-chunks-webpack-plugin\")\n\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [\n          ExtractCssChunks.loader,\n          {\n            loader: 'css-loader',\n            options: {\n              modules: true,\n              localIdentName: '[name]__[local]--[hash:base64:5]',\n            },\n          },\n        ],\n      },\n    ],\n  },\n  optimization: {\n      // FOR PRODUCTION\n      minimizer: [\n          new UglifyJSPlugin({\n              uglifyOptions: {\n                  output: {\n                      comments: false,\n                      ascii_only: true\n                  },\n                  compress: {\n                      comparisons: false\n                  }\n              }\n          })\n      ],\n      // END\n      // NEEDED BOTH IN PROD AND DEV BUILDS\n      runtimeChunk: {\n          name: 'bootstrap'\n      },\n      splitChunks: {\n          chunks: 'initial', // <-- The key to this\n          cacheGroups: {\n              vendors: {\n                  test: /[\\\\/]node_modules[\\\\/]/,\n                  name: 'vendor'\n              }\n          }\n      }\n  },\n  plugins: [\n    new ExtractCssChunks({hot:true}), //if you want HMR - we try to automatically inject hot reloading but if it's not working, add it to the config\n  ]\n};\n```\n\n## Desired Output\nHere's the sort of CSS you can expect to serve:\n\n```\n<head>\n\t<link rel='stylesheet' href='/static/main.css' />\n\t<link rel='stylesheet' href='/static/0.css' />\n\t<link rel='stylesheet' href='/static/7.css' />\n</head> \n\n<body>\n\t<div id=\"react-root\"></div>\n\t\n\t<script type='text/javascript' src='/static/vendor.js'></script>\n\t<script type='text/javascript' src='/static/0.js'></script>\n\t<script type='text/javascript' src='/static/7.js'></script>\n\t<script type='text/javascript' src='/static/main.js'></script>\n</body>\n```\n\nIf you need to resolve your stylesheets on the client side, for whatever reason. \n\n[webpack-flush-chunks](https://github.com/faceyspacey/webpack-flush-chunks) will scoop up the exact stylesheets to embed in your response. It will give you an object which can be embedded on page\n\nHere's how you do it:\n\n\n*src/components/App.js:*\n```js\nconst UniversalComponent = universal(props => import(`./${props.page}`))\n\n<UniversalComponent page='Foo' />\n```\n\n*server/render.js:*\n```js\nimport { flushChunkNames } from 'react-universal-component/server'\nimport flushChunks from 'webpack-flush-chunks'\n\nconst app = ReactDOMServer.renderToString(<App />)\nconst { js, styles, cssHash } = flushChunks(webpackStats, {\n  chunkNames: flushChunkNames()\n})\n\nres.send(`\n  <!doctype html>\n  <html>\n    <head>\n      ${styles}\n    </head>\n    <body>\n      <div id=\"root\">${app}</div>\n      <!-- not needed unless you want to access css chunks urls manually  -->\n      ${cssHash}\n      <!-- extract-css-chunks takes care of loading the css assets automatically -->\n      ${js}\n    </body>\n  </html>\n`)\n```\n\n***As for asynchronous calls to `import()` on user navigation,*** [babel-plugin-universal-import](https://github.com/faceyspacey/babel-plugin-universal-import) is required if you're using [react-universal-component](https://github.com/faceyspacey/react-universal-component). And if you aren't, you must use: [babel-plugin-dual-import](https://github.com/faceyspacey/babel-plugin-dual-import). \n\n\nThese babel plugins request both your js + your css. *Very Nice!* This is the new feature of the 2.0. Read *Sokra's* (author of webpack) article on how [on how this is the future of CSS for webpack](https://medium.com/webpack/the-new-css-workflow-step-1-79583bd107d7). Use this and be in the future today.\n\n\n## API \nYou can pass the same options as `mini-css-extract` to `new ExtractCssChunks`, such as:\n\n```javascript\nnew ExtractCssChunk({\n      filename: devMode ? '[name].css' : '[name].[hash].css',\n      chunkFilename: devMode ? '[id].css' : '[id].[hash].css',\n})\n```\n\n>Keep in mind, by default `[name].css` is used when `process.env.NODE_ENV === 'development'` and `[name].[contenthash].css` during production, so you can likely forget about having to pass anything.\n\n### HMR Pitfall\n\nThe most common workflow when working with webpack is to write a \"development\" / \"production\" value in to the\n'process.env.NODE_ENV' namespace, typically, using webpack's built-in \"DefinePlugin\" plugin. e.g:\n\n```javascript\nnew webpack.DefinePlugin( {\n     'process.env': {\n        NODE_ENV: `\"${config.devMode ? 'development' : 'production'}\"`,\n      },\n} )\n```\nThe value set by the aforementioned plugin will only be available in the runtime ( when webpack's javascript output is executed ).\nIn order for this plugin to work with hot module reloading, The npm script / gulp task / grunt task etc, should be invoked with the same environment variable as shown above.\n\nFor example, when running the build using some form of npm script:\n\n```json\n{\n  \"scripts\": {\n     \"build\": \"cross-env NODE_ENV=production babel src -d dist --ignore 'src/**/*.test.js' --copy-files\"\n  }\n}\n```\n[cross-env](https://www.npmjs.com/package/cross-env) is optional but recommended. \n\n### What about Glamorous, Styled Components, Styled-Jsx, Aphrodite, etc?\n\nIf you effectively use code-splitting, **Extract Css Chunks** can be a far better option than using emerging solutions like *Glamorous*, *Styled Components*, and slightly older tools like *Aphrodite*, *Glamor*, etc. We aren't fans of either rounds of tools because of several issues, but particularly because they all have a runtime overhead. Every time your React component is rendered with those, CSS is generated and updated within the DOM. On the server, you're going to also see unnecessary cycles for flushing the CSS along the critical render path. *Next.js's* `styled-jsx`, by the way, doesn't even work on the server--*not so good when it comes to flash of unstyled content (FOUC).*\n\nThe reason **Extract CSS Chunk** can be a better option is because **we also generate multiple sets of CSS based on what is actually \"used\",** ***but without the runtime overhead***. The difference is our definition of \"used\" is modules determined *statically* (which may not in fact be rendered) vs. what is in the \"critical render path\" (as is the case with the other tools). \n\nSo yes, our CSS may be mildly larger and include unnecessary css, but our `no_css.js` bundles will be a lot smaller as they don't need to inject any styles. See, even though those solutions have the smallest possible CSS file size, their javascript bundles, **in order to continue to render your components styled properly on the client,** must contain the necessary CSS for all possibilities! Those solutions serve both your entire bundle's CSS (in your javascript) **and** the CSS flushed from the critical render path. \n\nOn top of that, those are extra packages all with a huge number of issues in their Github repos corresponding to various limitations in the CSS they generate--something that is prevented when your definition for \"CSS-in-JS\" is simply importing CSS files compiled as normal by powerful proven CSS-specific processors.\n\nLastly, those solutions don't provide cacheable stylesheets. They do a lot of work--but they will **continue** doing it for you when you could have been done in one go long ago. Cloudflare is free--serve them through their CDN and you're winning. I love true javascript in css--don't get me wrong--but first I'd have to see they generate cacheable stylesheets. In my opinion, for now, it's best for environments that natively support it such as React Native.\n\n\n### Next:\n\nNow with that out of the way, for completeness let's compare what bytes of just the CSS are sent over the wire. The difference basically is minimal. Whereas solutions that flush from the critical render path will capture no more than the precise bits of CSS from the `if/else` branches followed, **Extract Css Chunks** is all about you effectively using code-splitting to insure, for example, you don't serve your Administration Panel's CSS in your public-facing site, etc. *In other words, it's all about avoiding serving large swaths of CSS from completely different sections of your app.* ***I.e. the biggest gains available to you.*** \n\n<details>\n<summary>\n    Read more on the topic ^^\n</summary>\n\nThis is where the real problem lies--where the real amount of unnecessary CSS comes from. If you effectively code-split your app, you may end up with 10 chunks. Now you can serve just the corresponding CSS for that chunk. If you try to go even farther and remove the css not used in the render path, you're likely achieving somewhere between 1-20% of the gains you achieved by thorough code-splitting. In other words, code splitting fulfills the 80/20 rule and attains the simple sweetspot of 80% optimization you--*as a balanced, level-headed, non-neurotic and professional developer*--are looking to achieve.\n\n*In short, by putting code splitting in appropriate places you have a lot of control over the CSS files that are created and can send a sensible* ***minimal*** *amount of associated bytes over the wire for the first request, perhaps even the smallest amount of all options.* \n\nIt's our perspective that you have achieved 80-99% of the performance gains (i.e. the creation of small relevant css files) at this ***static stage***. Offloading this work to the runtime stage is ultimately nit-picking and results in diminishing returns. When you factor that your JS bundle has to contain that JS anyway, those solutions make less and less sense from the perspective of reducing bytes delivered in the initial request. \n\nThere may be other reasons to use those tools (e.g. you don't like setting up webpack configs, or somehow you're really fond of pre-creating many `<div />` elements with their styles), but we prefer a simple standards-based way (without HoCs or specialized style components) to import styles just as you would in React Native. However to give the other tools credit, many of them likely started out with a different problem motivating them: avoiding webpack configs so you can include packages and their contained CSS without client apps being required to setup something like CSS loaders in Webpack. Having your CSS completely contained in true JS has its use cases, but at the application level--especially when you're already using something like Webpack--we fail to see its benefits. About all they share is a solution to avoiding **flashes of unstyled content** (FOUC), except one can save you a lot more bytes in what you send over the wire and save you from a continual runtime overhead where it's not needed. ***Honorable Mention:*** *StyleTron's concept of \"atomic declaration-level deduplication\" where it will make a class out of, say, `color: blue` so you don't need to send redundant styles certainly is a novel innovation, but again if the code still exists in your JS and you're building an application using Webpack (instead of a package), what's the point. In fact, it just makes editing the stylesheets in your browser developer tools more complicated. One benefit of critical render path solutions is the browser can spend less time matching the smaller number of styles to new DOM nodes as they appear, but then again it also has to spend the time injecting and parsing the new styles constantly, which is likely costlier.*\n\nAs an aside, so many apps share code between web and React Native--so the answer to the styles problem must be one that is identical for both. From that perspective importing a styles object **still** makes a lot of sense. **You're not missing out on the fundamental aspect of CSS-in-JSS:** ***isolated component-level styles and the ability to import them just like any other javascript code.*** Put them in other files, and use tools like `extract-css-chunks-webpack-plugin` and your pre-processors of choice that innately get styles right for the browser. As long as you're using **CSS Modules**, you're still at the cutting edge of CSS-in-JSS. Let's just say the other tools took one wrong turn and took it too far, when we already were at our destination. \n</details>\n\n\n#### SUMMARY OF BENEFITS COMPARED TO \"CRITICAL-RENDER-PATH\" SOLUTIONS:\n\n- no continual runtime overhead during `render` using HoCs that inject styles\n- smaller JS bundles without CSS injection\n- **You DO NOT need to clutter your component code with a specialized way of applying CSS (HoCs, styled elements)!** \n- The way you import module-based styles is exactly how you would import styles in React Native that exist in a separate file, which allows for extremely interchangeable code between React Native and regular React. Hurray! \n- pretty much already does everything covered by [@vjeux's 2014 css-in-js talk](https://speakerdeck.com/vjeux/react-css-in-js), besides dead code elimination. Dead code elimination is only solved for the other tools--as per the explanation above how the CSS is in the JS anyway--so much as Webpack and Uglify can remove **JS** that is not used. Either way, it's not a stretch to eventually add this feature to `extract-text-webpack-plugin` as well as this plugin. Hey, maybe it already has it??\n\n## Emotion!\n\n[Emotion](https://github.com/tkh44/emotion) is different. They allow for the extraction of static styles via their *extract mode*. We're very much looking forward to this being the perfect companion to the css chunks approach. \n<details>\n<summary>\n    Read more on the topic ^^\n</summary>\n\nCurrently however *extract mode* does not support IE11. So that means it's a no go, but we have hopes that in the future they'll solve that problem.\n\nThe reason Emotion doesn't work in IE11+ is because they currently try to preserve any dynamic aspects of your CSS-in-JS by converting it CSS vars, which isn't supported in IE11. That was a very smart approach, but unfortunately not good enough. \n\nThe vision we'd like to see for that package is where dynamic css stays inline, and where only static CSS is extracted into stylesheets, in which case CSS vars aren't needed. I've heard from them they have some \"hidden flags\" that allow for something close to this. When, and if, they take this feature all the way, look forward to us pushing it as our recommended approach. *Go Emotion!*\n</details>\n\n## Linaria\n\nLinaria is another modern CSS-in-JSS library. It's focused around static styles, which may make it a perfect fit for usage with this plugin. Check it out:\n\nhttps://github.com/callstack/linaria\n\n## What if I don't use SSR and use html-webpack-plugin?\n\nFor that case you can use [css-chunks-html-webpack-plugin](https://github.com/teamable-software/css-chunks-html-webpack-plugin) which will extract CSS chunks paths into your HTML file.\n\n## Conclusion:\n**We love CSS modules; no less, no more.**\n\n**Long live the dream of Code Splitting Everywhere!**\n\n\n## Contributing\nWe use [commitizen](https://github.com/commitizen/cz-cli), so run `npm run cm` to make commits. A command-line form will appear, requiring you answer a few questions to automatically produce a nicely formatted commit. Releases, semantic version numbers, tags and changelogs will automatically be generated based on these commits thanks to [semantic-release](https://github.com/semantic-release/semantic-release). Be good.\n\n## More from FaceySpacey in Reactlandia\n- [redux-first-router](https://github.com/faceyspacey/redux-first-router). It's made to work perfectly with *Universal*. Together they comprise our *\"frameworkless\"* Redux-based approach to what Next.js does (splitting, SSR, prefetching, and routing). *People are lovin it by the way* 😎\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/faceyspacey/extract-css-chunks-webpack-plugin/issues"},"_id":"extract-css-chunks-webpack-plugin@3.0.8-beta.2","_npmVersion":"5.5.1","_nodeVersion":"8.9.0","_npmUser":{"name":"zackljackson","email":"zackary.l.jackson@gmail.com"},"dist":{"integrity":"sha512-CEHggRibjUan8DbtiPgVsjUcHw/8bRMvvnJgbuX4VmBT5Awmc0osSqrvaB7sWS4UPh0djxP+h3DUhAt9ixyZwg==","shasum":"76243985082114e7bb4f2aa19fa9a33946d64fe6","tarball":"https://registry.npmjs.org/extract-css-chunks-webpack-plugin/-/extract-css-chunks-webpack-plugin-3.0.8-beta.2.tgz","fileCount":9,"unpackedSize":51899,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbSm/fCRA9TVsSAnZWagAAXagP/2gHFliReiL5iO54trfp\nVRSODu64p9v2EyQbCbAZXyvOQ3wHcTGQGol16KEVf+P2o+dSOjddbyJuHVsp\n4I2lMDG53SW2UqYdu5Grz9vbrbA5KCzvYitHxxNswYP1KVZtE/PFHHMB8hhB\nJLsrIHKvwruEg70oz8cxVDXlZAqq+niKmwK/oF/LeO9bPlT+/63QOigXCzLy\nPbnMJA0+Rub88cScLFp6fxjuynQjb0aqRok3u473X7AvxDD3x77QoWK4Om9N\nPjmo0bgHSfmPbLxC7ozn97IImfbGu7y7zcH/mkCd4mI12nVtHOiuaeu/kzsI\n9d3K0GvLMXsADYCGm95ftWScMS8Avr5j2Chy7hvXLQuXhZdDdoQhXT5lfIIW\nTfdy+3bojxHZ7SVa4PQiGTidalY/wKw80Py9dk98T2A9ROJIJ+sqG/H4uqi0\nXY0GzsKhZNTE7ZCO/j1gciv0EMkAHD8uLU8yT38ghtOpttUWFdV2QnY32TIN\neHoIY5A0a/tIc9nvhOJL3n9JTGs5v2tFcGBFn+zpvUVyaLdalqGmrtcEKvVz\n5kmqx+QbOiRdEU4mGdZ5esO61AHiXTg9Mb+U6RRz1cl+EGpUA3qlooLhYBi/\nLS1UfoSS245szLf1a6oT7JbujdttkBjHWNrOTUO6zifofgrooQH/wyrY0Pze\nQ3Cr\r\n=7A+w\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEx8Kn+qJSGWpOEmJDxM/RR96hqUMQTWStzj+BFY8+5YAiEA4f6MpREcE1yIk2seuP4L+msLPKV7aQ8TOM6qKMu7VKk="}]},"maintainers":[{"email":"james@faceyspacey.com","name":"faceyspacey"},{"email":"zackary.l.jackson@gmail.com","name":"zackljackson"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/extract-css-chunks-webpack-plugin_3.0.8-beta.2_1531604959494_0.9293791151406081"},"_hasShrinkwrap":false},"3.0.8-beta.3":{"name":"extract-css-chunks-webpack-plugin","version":"3.0.8-beta.3","author":{"name":"James Gillmore","email":"james@faceyspacey.com"},"contributors":[{"name":"Zack Jackson","email":"zackary.l.jackson@gmail.com","url":"https://github.com/ScriptedAlchemy"}],"description":"Extract CSS from chunks into stylesheets + HMR. Supports Webpack 4","engines":{"node":">= 6.9.0 <7.0.0 || >= 8.9.0"},"main":"dist/cjs.js","files":["dist"],"keywords":["css","chunks","code splitting","mini-css","hot","hmr","universal","webpack","webpack 4"],"license":"MIT","scripts":{"start":"npm run build -- -w","build":"cross-env NODE_ENV=production babel src -d dist --ignore 'src/**/*.test.js' --copy-files","clean":"del-cli dist","lint":"eslint --cache --fix src","prebuild":"npm run clean","prepublish":"npm run build","security":"nsp check","test":"jest","test:watch":"jest --watch","test:coverage":"jest --collectCoverageFrom='src/**/*.js' --coverage","test:example":"npm run build && webpack-dev-server test/manual/src/index.js --config test/manual/webpack.config.js","ci:lint":"npm run lint && npm run security","ci:test":"npm run test -- --runInBand","ci:coverage":"npm run test:coverage -- --runInBand","build:example":"npm run build && webpack-dev-server test/manual/src/index.js --open --config test/manual/webpack.config.js","cm":"git-cz","release":"standard-version","semantic-release":"semantic-release pre && npm publish && semantic-release post","travis":"npm run ci:coverage"},"peerDependencies":{"webpack":"^4.8.3"},"dependencies":{"loader-utils":"^1.1.0","lodash":"^4.17.5","normalize-url":"^1.9.1","webpack-sources":"^1.1.0"},"devDependencies":{"@webpack-contrib/eslint-config-webpack":"^2.0.4","babel-cli":"^6.26.0","babel-eslint":"^7.2.3","babel-jest":"^22.2.2","babel-loader":"^7.1.4","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-polyfill":"^6.26.0","babel-preset-env":"^1.6.1","commitizen":"^2.10.1","conventional-github-releaser":"^2.0.2","cross-env":"^5.1.3","css-loader":"^0.28.10","cz-conventional-changelog":"^2.1.0","del":"^3.0.0","del-cli":"^1.1.0","eslint":"^3.19.0","eslint-config-airbnb":"^15.0.1","eslint-plugin-flowtype":"^2.32.1","eslint-plugin-import":"^2.8.0","eslint-plugin-jsx-a11y":"^5.0.3","eslint-plugin-prettier":"^2.6.0","eslint-plugin-react":"^7.0.1","husky":"^0.14.3","jest":"^22.2.2","memory-fs":"^0.4.1","nsp":"^3.1.0","pre-commit":"^1.2.2","prettier":"^1.11.1","standard-version":"^4.3.0","webpack":"4.8.3","webpack-cli":"^2.0.13","webpack-dev-server":"^3.1.1"},"homepage":"http://github.com/faceyspacey/extract-css-chunks-webpack-plugin","repository":{"type":"git","url":"git+https://github.com/faceyspacey/extract-css-chunks-webpack-plugin.git"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"readme":"<a href=\"https://gitter.im/Reactlandia/Lobby\" target=\"_blank\">\n  <img alt=\"Edit Redux-First Router Demo\" src=\"http://cdn.reactlandia.com/chat-badge-reactlandia.png\">\n</a>\n\n\n# extract-css-chunks-webpack-plugin\n\n<p align=\"center\">\n  <a href=\"https://www.npmjs.com/package/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://img.shields.io/npm/v/extract-css-chunks-webpack-plugin.svg\" alt=\"Version\" />\n  </a>\n\n  <a href=\"https://travis-ci.org/faceyspacey/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://travis-ci.org/faceyspacey/extract-css-chunks-webpack-plugin.svg?branch=master\" alt=\"Build Status\" />\n  </a>\n\n  <a href=\"https://www.npmjs.com/package/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://img.shields.io/npm/dt/extract-css-chunks-webpack-plugin.svg\" alt=\"Downloads\" />\n  </a>\n\n  <a href=\"https://www.npmjs.com/package/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://img.shields.io/npm/dm/extract-css-chunks-webpack-plugin.svg\" alt=\"License\" />\n  </a>\n  \n  <a href=\"https://www.npmjs.com/package/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://img.shields.io/npm/l/extract-css-chunks-webpack-plugin.svg\" alt=\"License\" />\n  </a>\n</p>\n\n<h2 align=\"center\">🍾🍾🍾It's our absolute pleasure to announce Webpack 4 Support 🚀🚀🚀</h2>\n\n> **HEADLINES (May 2018): Now Independently supports Webpack 4:** \nYep that's right. The universal family is now fully Webpack 4. Thank you to all our users for your loyalty and patience! If you love Universal, then you are gonna fall head over heels when we bring out the main course! \n\nSo... why did we rebuild `extract-css-chunks`? What does it offer? \n\nIt's got all the goodness of `mini-css-extract-plugin` but with 2 gleaming, sought after benefits. \n\nCompared to the existing loaders, we are offering a single solution as opposed to needing to depend on multiple loaders to cater for different features:\n\n## Perks\n* **HMR:** It also has first-class support for **Hot Module Replacement** across ALL those css files/chunks!!!\n* cacheable stylesheets \n* smallest total bytes sent compared to \"render-path\" css-in-js solutions that include your CSS definitions in JS\n* Faster than the V2!\n* Async loading\n* No duplicate compilation (performance)\n* Easier to use\n* Specific to CSS\n* SSR Friendly development build, focused on frontend DX\n* Works seamlessly with the Universal family\n* Works fantastically as a standalone style loader (You can use it for any webpack project! with no extra dependencies!)\n\nAdditionally, if you are already a user of the universal family -- we will be waving goodbye to the mandatory ```window.__CSS_CHUNKS__```.\n\nThe functionality is still available to you via chunk flushing, and it can come in super handy when needing to easily resolve style assets as urls that might need to be passed to a third party.\n\n## Webpack 4 Standalone Installation:\n\nIf you are just looking for something that works like `mini-css-extract-plugin` but with HMR, then look no further.\n\nNOTE: We have aligned out loader implementation to be the same as `mini-css-extract-plugin` \n\n**If you already use `mini-css-extract-plugin`, then you can just change the `require` statement - it's that easy**\n\n```\nyarn add --dev extract-css-chunks-webpack-plugin\n```\n\n*webpack.config.js:*\n```js\nconst ExtractCssChunks = require(\"extract-css-chunks-webpack-plugin\")\n\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [\n           ExtractCssChunks.loader,\n           \"css-loader\"\n         ]\n      }\n    ]\n  },\n  plugins: [\n    new ExtractCssChunks(\n        {\n          // Options similar to the same options in webpackOptions.output\n          // both options are optional\n          filename: \"[name].css\",\n          chunkFilename: \"[id].css\",\n          hot: true // optional as the plugin cannot automatically detect if you are using HOT, not for production use\n        }\n    ),\n  ]\n}\n```\n\n*webpack.server.config.js*\n\nThe server needs to be handled differently, we still want one chunk. Luckily webpack 4 supports **LimitChunkCountPlugin**\n\n```js\nnew webpack.optimize.LimitChunkCountPlugin({\n    maxChunks: 1\n})\n```\n\n\n### What about Webpack 3?\nThis is a breaking change. The entire loader has been fundamentally rewritten specifically for Webpack 4. Aiming to support our existing user base, allowing them to upgrade their infrastructure to support Webpack 4 based universally code-split server-side rendered react applications. \n\nThere have been some challenges along the way since the release of webpack 4. Ultimately the only remaining hurdle is code split, async style loading. \n\nIf you do need Webpack 3, make sure to stick with the latest `v2.x.x` release. `v3.x.x` is only intended for users with Webpack 4\n\n\n\n\n*Note: this is a companion package to:*\n- [webpack-flush-chunks](https://github.com/faceyspacey/webpack-flush-chunks) \n- [react-universal-component](https://github.com/faceyspacey/react-universal-component)\n- [babel-plugin-universal-import](https://github.com/faceyspacey/babel-plugin-universal-import) ***or*** [babel-plugin-dual-import](https://github.com/faceyspacey/babel-plugin-dual-import)\n\n\n## Recommended Installation For Universal\n```\nyarn add react-universal-component webpack-flush-chunks\nyarn add --dev extract-css-chunks-webpack-plugin babel-plugin-universal-import\n```\n\n*.babelrc:*\n```js\n{\n  \"plugins\": [\"universal-import\"]\n}\n```\nThe main thing is you need to cater to the new chunking system of webpack!\nWith **webpack.optimize.CommonsChunkPlugin** plugin no longer part of Webpack 4, we need another way to define the code-splitting. Luckily we have `optimization` configs built into webpack now\n\n*webpack.config.js:*\n```js\nconst ExtractCssChunks = require(\"extract-css-chunks-webpack-plugin\")\n\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [\n          ExtractCssChunks.loader,\n          {\n            loader: 'css-loader',\n            options: {\n              modules: true,\n              localIdentName: '[name]__[local]--[hash:base64:5]',\n            },\n          },\n        ],\n      },\n    ],\n  },\n  optimization: {\n      // FOR PRODUCTION\n      minimizer: [\n          new UglifyJSPlugin({\n              uglifyOptions: {\n                  output: {\n                      comments: false,\n                      ascii_only: true\n                  },\n                  compress: {\n                      comparisons: false\n                  }\n              }\n          })\n      ],\n      // END\n      // NEEDED BOTH IN PROD AND DEV BUILDS\n      runtimeChunk: {\n          name: 'bootstrap'\n      },\n      splitChunks: {\n          chunks: 'initial', // <-- The key to this\n          cacheGroups: {\n              vendors: {\n                  test: /[\\\\/]node_modules[\\\\/]/,\n                  name: 'vendor'\n              }\n          }\n      }\n  },\n  plugins: [\n    new ExtractCssChunks({hot:true}), //if you want HMR - we try to automatically inject hot reloading but if it's not working, add it to the config\n  ]\n};\n```\n\n## Desired Output\nHere's the sort of CSS you can expect to serve:\n\n```\n<head>\n\t<link rel='stylesheet' href='/static/main.css' />\n\t<link rel='stylesheet' href='/static/0.css' />\n\t<link rel='stylesheet' href='/static/7.css' />\n</head> \n\n<body>\n\t<div id=\"react-root\"></div>\n\t\n\t<script type='text/javascript' src='/static/vendor.js'></script>\n\t<script type='text/javascript' src='/static/0.js'></script>\n\t<script type='text/javascript' src='/static/7.js'></script>\n\t<script type='text/javascript' src='/static/main.js'></script>\n</body>\n```\n\nIf you need to resolve your stylesheets on the client side, for whatever reason. \n\n[webpack-flush-chunks](https://github.com/faceyspacey/webpack-flush-chunks) will scoop up the exact stylesheets to embed in your response. It will give you an object which can be embedded on page\n\nHere's how you do it:\n\n\n*src/components/App.js:*\n```js\nconst UniversalComponent = universal(props => import(`./${props.page}`))\n\n<UniversalComponent page='Foo' />\n```\n\n*server/render.js:*\n```js\nimport { flushChunkNames } from 'react-universal-component/server'\nimport flushChunks from 'webpack-flush-chunks'\n\nconst app = ReactDOMServer.renderToString(<App />)\nconst { js, styles, cssHash } = flushChunks(webpackStats, {\n  chunkNames: flushChunkNames()\n})\n\nres.send(`\n  <!doctype html>\n  <html>\n    <head>\n      ${styles}\n    </head>\n    <body>\n      <div id=\"root\">${app}</div>\n      <!-- not needed unless you want to access css chunks urls manually  -->\n      ${cssHash}\n      <!-- extract-css-chunks takes care of loading the css assets automatically -->\n      ${js}\n    </body>\n  </html>\n`)\n```\n\n***As for asynchronous calls to `import()` on user navigation,*** [babel-plugin-universal-import](https://github.com/faceyspacey/babel-plugin-universal-import) is required if you're using [react-universal-component](https://github.com/faceyspacey/react-universal-component). And if you aren't, you must use: [babel-plugin-dual-import](https://github.com/faceyspacey/babel-plugin-dual-import). \n\n\nThese babel plugins request both your js + your css. *Very Nice!* This is the new feature of the 2.0. Read *Sokra's* (author of webpack) article on how [on how this is the future of CSS for webpack](https://medium.com/webpack/the-new-css-workflow-step-1-79583bd107d7). Use this and be in the future today.\n\n\n## API \nYou can pass the same options as `mini-css-extract` to `new ExtractCssChunks`, such as:\n\n```javascript\nnew ExtractCssChunk({\n      filename: devMode ? '[name].css' : '[name].[hash].css',\n      chunkFilename: devMode ? '[id].css' : '[id].[hash].css',\n})\n```\n\n>Keep in mind, by default `[name].css` is used when `process.env.NODE_ENV === 'development'` and `[name].[contenthash].css` during production, so you can likely forget about having to pass anything.\n\n### HMR Pitfall\n\nThe most common workflow when working with webpack is to write a \"development\" / \"production\" value in to the\n'process.env.NODE_ENV' namespace, typically, using webpack's built-in \"DefinePlugin\" plugin. e.g:\n\n```javascript\nnew webpack.DefinePlugin( {\n     'process.env': {\n        NODE_ENV: `\"${config.devMode ? 'development' : 'production'}\"`,\n      },\n} )\n```\nThe value set by the aforementioned plugin will only be available in the runtime ( when webpack's javascript output is executed ).\nIn order for this plugin to work with hot module reloading, The npm script / gulp task / grunt task etc, should be invoked with the same environment variable as shown above.\n\nFor example, when running the build using some form of npm script:\n\n```json\n{\n  \"scripts\": {\n     \"build\": \"cross-env NODE_ENV=production babel src -d dist --ignore 'src/**/*.test.js' --copy-files\"\n  }\n}\n```\n[cross-env](https://www.npmjs.com/package/cross-env) is optional but recommended. \n\n### What about Glamorous, Styled Components, Styled-Jsx, Aphrodite, etc?\n\nIf you effectively use code-splitting, **Extract Css Chunks** can be a far better option than using emerging solutions like *Glamorous*, *Styled Components*, and slightly older tools like *Aphrodite*, *Glamor*, etc. We aren't fans of either rounds of tools because of several issues, but particularly because they all have a runtime overhead. Every time your React component is rendered with those, CSS is generated and updated within the DOM. On the server, you're going to also see unnecessary cycles for flushing the CSS along the critical render path. *Next.js's* `styled-jsx`, by the way, doesn't even work on the server--*not so good when it comes to flash of unstyled content (FOUC).*\n\nThe reason **Extract CSS Chunk** can be a better option is because **we also generate multiple sets of CSS based on what is actually \"used\",** ***but without the runtime overhead***. The difference is our definition of \"used\" is modules determined *statically* (which may not in fact be rendered) vs. what is in the \"critical render path\" (as is the case with the other tools). \n\nSo yes, our CSS may be mildly larger and include unnecessary css, but our `no_css.js` bundles will be a lot smaller as they don't need to inject any styles. See, even though those solutions have the smallest possible CSS file size, their javascript bundles, **in order to continue to render your components styled properly on the client,** must contain the necessary CSS for all possibilities! Those solutions serve both your entire bundle's CSS (in your javascript) **and** the CSS flushed from the critical render path. \n\nOn top of that, those are extra packages all with a huge number of issues in their Github repos corresponding to various limitations in the CSS they generate--something that is prevented when your definition for \"CSS-in-JS\" is simply importing CSS files compiled as normal by powerful proven CSS-specific processors.\n\nLastly, those solutions don't provide cacheable stylesheets. They do a lot of work--but they will **continue** doing it for you when you could have been done in one go long ago. Cloudflare is free--serve them through their CDN and you're winning. I love true javascript in css--don't get me wrong--but first I'd have to see they generate cacheable stylesheets. In my opinion, for now, it's best for environments that natively support it such as React Native.\n\n\n### Next:\n\nNow with that out of the way, for completeness let's compare what bytes of just the CSS are sent over the wire. The difference basically is minimal. Whereas solutions that flush from the critical render path will capture no more than the precise bits of CSS from the `if/else` branches followed, **Extract Css Chunks** is all about you effectively using code-splitting to insure, for example, you don't serve your Administration Panel's CSS in your public-facing site, etc. *In other words, it's all about avoiding serving large swaths of CSS from completely different sections of your app.* ***I.e. the biggest gains available to you.*** \n\n<details>\n<summary>\n    Read more on the topic ^^\n</summary>\n\nThis is where the real problem lies--where the real amount of unnecessary CSS comes from. If you effectively code-split your app, you may end up with 10 chunks. Now you can serve just the corresponding CSS for that chunk. If you try to go even farther and remove the css not used in the render path, you're likely achieving somewhere between 1-20% of the gains you achieved by thorough code-splitting. In other words, code splitting fulfills the 80/20 rule and attains the simple sweetspot of 80% optimization you--*as a balanced, level-headed, non-neurotic and professional developer*--are looking to achieve.\n\n*In short, by putting code splitting in appropriate places you have a lot of control over the CSS files that are created and can send a sensible* ***minimal*** *amount of associated bytes over the wire for the first request, perhaps even the smallest amount of all options.* \n\nIt's our perspective that you have achieved 80-99% of the performance gains (i.e. the creation of small relevant css files) at this ***static stage***. Offloading this work to the runtime stage is ultimately nit-picking and results in diminishing returns. When you factor that your JS bundle has to contain that JS anyway, those solutions make less and less sense from the perspective of reducing bytes delivered in the initial request. \n\nThere may be other reasons to use those tools (e.g. you don't like setting up webpack configs, or somehow you're really fond of pre-creating many `<div />` elements with their styles), but we prefer a simple standards-based way (without HoCs or specialized style components) to import styles just as you would in React Native. However to give the other tools credit, many of them likely started out with a different problem motivating them: avoiding webpack configs so you can include packages and their contained CSS without client apps being required to setup something like CSS loaders in Webpack. Having your CSS completely contained in true JS has its use cases, but at the application level--especially when you're already using something like Webpack--we fail to see its benefits. About all they share is a solution to avoiding **flashes of unstyled content** (FOUC), except one can save you a lot more bytes in what you send over the wire and save you from a continual runtime overhead where it's not needed. ***Honorable Mention:*** *StyleTron's concept of \"atomic declaration-level deduplication\" where it will make a class out of, say, `color: blue` so you don't need to send redundant styles certainly is a novel innovation, but again if the code still exists in your JS and you're building an application using Webpack (instead of a package), what's the point. In fact, it just makes editing the stylesheets in your browser developer tools more complicated. One benefit of critical render path solutions is the browser can spend less time matching the smaller number of styles to new DOM nodes as they appear, but then again it also has to spend the time injecting and parsing the new styles constantly, which is likely costlier.*\n\nAs an aside, so many apps share code between web and React Native--so the answer to the styles problem must be one that is identical for both. From that perspective importing a styles object **still** makes a lot of sense. **You're not missing out on the fundamental aspect of CSS-in-JSS:** ***isolated component-level styles and the ability to import them just like any other javascript code.*** Put them in other files, and use tools like `extract-css-chunks-webpack-plugin` and your pre-processors of choice that innately get styles right for the browser. As long as you're using **CSS Modules**, you're still at the cutting edge of CSS-in-JSS. Let's just say the other tools took one wrong turn and took it too far, when we already were at our destination. \n</details>\n\n\n#### SUMMARY OF BENEFITS COMPARED TO \"CRITICAL-RENDER-PATH\" SOLUTIONS:\n\n- no continual runtime overhead during `render` using HoCs that inject styles\n- smaller JS bundles without CSS injection\n- **You DO NOT need to clutter your component code with a specialized way of applying CSS (HoCs, styled elements)!** \n- The way you import module-based styles is exactly how you would import styles in React Native that exist in a separate file, which allows for extremely interchangeable code between React Native and regular React. Hurray! \n- pretty much already does everything covered by [@vjeux's 2014 css-in-js talk](https://speakerdeck.com/vjeux/react-css-in-js), besides dead code elimination. Dead code elimination is only solved for the other tools--as per the explanation above how the CSS is in the JS anyway--so much as Webpack and Uglify can remove **JS** that is not used. Either way, it's not a stretch to eventually add this feature to `extract-text-webpack-plugin` as well as this plugin. Hey, maybe it already has it??\n\n## Emotion!\n\n[Emotion](https://github.com/tkh44/emotion) is different. They allow for the extraction of static styles via their *extract mode*. We're very much looking forward to this being the perfect companion to the css chunks approach. \n<details>\n<summary>\n    Read more on the topic ^^\n</summary>\n\nCurrently however *extract mode* does not support IE11. So that means it's a no go, but we have hopes that in the future they'll solve that problem.\n\nThe reason Emotion doesn't work in IE11+ is because they currently try to preserve any dynamic aspects of your CSS-in-JS by converting it CSS vars, which isn't supported in IE11. That was a very smart approach, but unfortunately not good enough. \n\nThe vision we'd like to see for that package is where dynamic css stays inline, and where only static CSS is extracted into stylesheets, in which case CSS vars aren't needed. I've heard from them they have some \"hidden flags\" that allow for something close to this. When, and if, they take this feature all the way, look forward to us pushing it as our recommended approach. *Go Emotion!*\n</details>\n\n## Linaria\n\nLinaria is another modern CSS-in-JSS library. It's focused around static styles, which may make it a perfect fit for usage with this plugin. Check it out:\n\nhttps://github.com/callstack/linaria\n\n## What if I don't use SSR and use html-webpack-plugin?\n\nFor that case you can use [css-chunks-html-webpack-plugin](https://github.com/teamable-software/css-chunks-html-webpack-plugin) which will extract CSS chunks paths into your HTML file.\n\n## Conclusion:\n**We love CSS modules; no less, no more.**\n\n**Long live the dream of Code Splitting Everywhere!**\n\n\n## Contributing\nWe use [commitizen](https://github.com/commitizen/cz-cli), so run `npm run cm` to make commits. A command-line form will appear, requiring you answer a few questions to automatically produce a nicely formatted commit. Releases, semantic version numbers, tags and changelogs will automatically be generated based on these commits thanks to [semantic-release](https://github.com/semantic-release/semantic-release). Be good.\n\n## More from FaceySpacey in Reactlandia\n- [redux-first-router](https://github.com/faceyspacey/redux-first-router). It's made to work perfectly with *Universal*. Together they comprise our *\"frameworkless\"* Redux-based approach to what Next.js does (splitting, SSR, prefetching, and routing). *People are lovin it by the way* 😎\n","readmeFilename":"README.md","gitHead":"523cb62e06df64647ff3899f4c41e192cad79720","bugs":{"url":"https://github.com/faceyspacey/extract-css-chunks-webpack-plugin/issues"},"_id":"extract-css-chunks-webpack-plugin@3.0.8-beta.3","_npmVersion":"5.5.1","_nodeVersion":"8.9.0","_npmUser":{"name":"zackljackson","email":"zackary.l.jackson@gmail.com"},"dist":{"integrity":"sha512-51ULCxVRuPJyO5Qt1EozAI7wRcUC+wYaDRRGf/IxyPojmnReMwEcOHnpPpl/QZA75NtTmEkbw9pQvz1XbLyHgQ==","shasum":"e143f485fab02901d739ca816ee9518a1385ff99","tarball":"https://registry.npmjs.org/extract-css-chunks-webpack-plugin/-/extract-css-chunks-webpack-plugin-3.0.8-beta.3.tgz","fileCount":9,"unpackedSize":51823,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbTNVnCRA9TVsSAnZWagAAmfYP/3ijl9BuNbp+FTQ+ZcKl\nlu5QKvUWas/0BsCyY2iYAdwVQEZKpCY7zCmogvnEH7GwFRWWyNuJmaQiITAs\nktyRehD5f92OpF1t/KOur68Ml5Fmv4OrO1WiKj3M8Q63dsyOHup8J6Wlx3bu\n8pCyWVG62AFrJa5MfVfGHzos9ZkUSZKo/gFWEmSgLvaX9Uvq011hYj42veUU\nHZQrC7vld+iXFO5TaGn0CDM0Al5nQ5QPeWvXV0PwMVY7cmubJkvhptnizkdu\ndQ/LYPqAZQ+WYFHSZXGbjpLtbbhLD5qBaTJCdVQMwHni9i19ttWAQH3zgyL/\nvz0/V7SIXBnPOoOq4vYzedLhzBKswZLXyaBKTrtflSefg/qgrk+tX4V/oY8o\n1JOZEjjfmP4VHFD9+Ik7k7awh/ijWkKQ64m5JJM2u4HC+BWwRrP7JnUDL4YL\nBVW30UJM3bFFKE2QDq0fzFiHxleNnraMZJKpwo2X6tz1+O8fzYyTRQ/Kxv/6\n7c1dB07XO/Wv1cg+qA3jZVe1F+c2Kmca1x3UZrA+b2hIUDABSDUwPh+vHpfV\nfYdB7XxJYetztHfOMR80sotd2kYbNTaN0NfrbiIY9w0/b2CgeIFAl0zUBqnQ\nhFgqAytnLKkBVZPk7cH4OeEvNwOiml+wl4nd808Acm3Izf/q9dCyIlp9Nehr\nH+aE\r\n=Z3K5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID+RIPhZMiX34imY3F+EqDYcRQ0fXNcDfTGAetsa2s/EAiB20VHJfdyqObA9LJ30+pRDAQ7I1iSfkBaPHLr2WnRDJQ=="}]},"maintainers":[{"email":"james@faceyspacey.com","name":"faceyspacey"},{"email":"zackary.l.jackson@gmail.com","name":"zackljackson"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/extract-css-chunks-webpack-plugin_3.0.8-beta.3_1531762023011_0.7286717322962044"},"_hasShrinkwrap":false},"3.0.8-beta.4":{"name":"extract-css-chunks-webpack-plugin","version":"3.0.8-beta.4","author":{"name":"James Gillmore","email":"james@faceyspacey.com"},"contributors":[{"name":"Zack Jackson","email":"zackary.l.jackson@gmail.com","url":"https://github.com/ScriptedAlchemy"}],"description":"Extract CSS from chunks into stylesheets + HMR. Supports Webpack 4","engines":{"node":">= 6.9.0 <7.0.0 || >= 8.9.0"},"main":"dist/cjs.js","files":["dist"],"keywords":["css","chunks","code splitting","mini-css","hot","hmr","universal","webpack","webpack 4"],"license":"MIT","scripts":{"start":"npm run build -- -w","build":"cross-env NODE_ENV=production babel src -d dist --ignore 'src/**/*.test.js' --copy-files","clean":"del-cli dist","lint":"eslint --cache --fix src","prebuild":"npm run clean","prepublish":"npm run build","security":"nsp check","test":"jest","test:watch":"jest --watch","test:coverage":"jest --collectCoverageFrom='src/**/*.js' --coverage","test:example":"npm run build && webpack-dev-server test/manual/src/index.js --config test/manual/webpack.config.js","ci:lint":"npm run lint && npm run security","ci:test":"npm run test -- --runInBand","ci:coverage":"npm run test:coverage -- --runInBand","build:example":"npm run build && webpack-dev-server test/manual/src/index.js --open --config test/manual/webpack.config.js","cm":"git-cz","release":"standard-version","semantic-release":"semantic-release pre && npm publish && semantic-release post","travis":"npm run ci:coverage"},"peerDependencies":{"webpack":"^4.8.3"},"dependencies":{"loader-utils":"^1.1.0","lodash":"^4.17.5","normalize-url":"^1.9.1","webpack-sources":"^1.1.0"},"devDependencies":{"@webpack-contrib/eslint-config-webpack":"^2.0.4","babel-cli":"^6.26.0","babel-eslint":"^7.2.3","babel-jest":"^22.2.2","babel-loader":"^7.1.4","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-polyfill":"^6.26.0","babel-preset-env":"^1.6.1","commitizen":"^2.10.1","conventional-github-releaser":"^2.0.2","cross-env":"^5.1.3","css-loader":"^0.28.10","cz-conventional-changelog":"^2.1.0","del":"^3.0.0","del-cli":"^1.1.0","eslint":"^3.19.0","eslint-config-airbnb":"^15.0.1","eslint-plugin-flowtype":"^2.32.1","eslint-plugin-import":"^2.8.0","eslint-plugin-jsx-a11y":"^5.0.3","eslint-plugin-prettier":"^2.6.0","eslint-plugin-react":"^7.0.1","husky":"^0.14.3","jest":"^22.2.2","memory-fs":"^0.4.1","nsp":"^3.1.0","pre-commit":"^1.2.2","prettier":"^1.11.1","standard-version":"^4.3.0","webpack":"4.8.3","webpack-cli":"^2.0.13","webpack-dev-server":"^3.1.1"},"homepage":"http://github.com/faceyspacey/extract-css-chunks-webpack-plugin","repository":{"type":"git","url":"git+https://github.com/faceyspacey/extract-css-chunks-webpack-plugin.git"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"readme":"<a href=\"https://gitter.im/Reactlandia/Lobby\" target=\"_blank\">\n  <img alt=\"Edit Redux-First Router Demo\" src=\"http://cdn.reactlandia.com/chat-badge-reactlandia.png\">\n</a>\n\n\n# extract-css-chunks-webpack-plugin\n\n<p align=\"center\">\n  <a href=\"https://www.npmjs.com/package/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://img.shields.io/npm/v/extract-css-chunks-webpack-plugin.svg\" alt=\"Version\" />\n  </a>\n\n  <a href=\"https://travis-ci.org/faceyspacey/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://travis-ci.org/faceyspacey/extract-css-chunks-webpack-plugin.svg?branch=master\" alt=\"Build Status\" />\n  </a>\n\n  <a href=\"https://www.npmjs.com/package/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://img.shields.io/npm/dt/extract-css-chunks-webpack-plugin.svg\" alt=\"Downloads\" />\n  </a>\n\n  <a href=\"https://www.npmjs.com/package/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://img.shields.io/npm/dm/extract-css-chunks-webpack-plugin.svg\" alt=\"License\" />\n  </a>\n  \n  <a href=\"https://www.npmjs.com/package/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://img.shields.io/npm/l/extract-css-chunks-webpack-plugin.svg\" alt=\"License\" />\n  </a>\n</p>\n\n<h2 align=\"center\">🍾🍾🍾It's our absolute pleasure to announce Webpack 4 Support 🚀🚀🚀</h2>\n\n> **HEADLINES (May 2018): Now Independently supports Webpack 4:** \nYep that's right. The universal family is now fully Webpack 4. Thank you to all our users for your loyalty and patience! If you love Universal, then you are gonna fall head over heels when we bring out the main course! \n\nSo... why did we rebuild `extract-css-chunks`? What does it offer? \n\nIt's got all the goodness of `mini-css-extract-plugin` but with 2 gleaming, sought after benefits. \n\nCompared to the existing loaders, we are offering a single solution as opposed to needing to depend on multiple loaders to cater for different features:\n\n## Perks\n* **HMR:** It also has first-class support for **Hot Module Replacement** across ALL those css files/chunks!!!\n* cacheable stylesheets \n* smallest total bytes sent compared to \"render-path\" css-in-js solutions that include your CSS definitions in JS\n* Faster than the V2!\n* Async loading\n* No duplicate compilation (performance)\n* Easier to use\n* Specific to CSS\n* SSR Friendly development build, focused on frontend DX\n* Works seamlessly with the Universal family\n* Works fantastically as a standalone style loader (You can use it for any webpack project! with no extra dependencies!)\n\nAdditionally, if you are already a user of the universal family -- we will be waving goodbye to the mandatory ```window.__CSS_CHUNKS__```.\n\nThe functionality is still available to you via chunk flushing, and it can come in super handy when needing to easily resolve style assets as urls that might need to be passed to a third party.\n\n## Webpack 4 Standalone Installation:\n\nIf you are just looking for something that works like `mini-css-extract-plugin` but with HMR, then look no further.\n\nNOTE: We have aligned out loader implementation to be the same as `mini-css-extract-plugin` \n\n**If you already use `mini-css-extract-plugin`, then you can just change the `require` statement - it's that easy**\n\n```\nyarn add --dev extract-css-chunks-webpack-plugin\n```\n\n*webpack.config.js:*\n```js\nconst ExtractCssChunks = require(\"extract-css-chunks-webpack-plugin\")\n\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [\n           ExtractCssChunks.loader,\n           \"css-loader\"\n         ]\n      }\n    ]\n  },\n  plugins: [\n    new ExtractCssChunks(\n        {\n          // Options similar to the same options in webpackOptions.output\n          // both options are optional\n          filename: \"[name].css\",\n          chunkFilename: \"[id].css\",\n          hot: true // optional as the plugin cannot automatically detect if you are using HOT, not for production use\n        }\n    ),\n  ]\n}\n```\n\n*webpack.server.config.js*\n\nThe server needs to be handled differently, we still want one chunk. Luckily webpack 4 supports **LimitChunkCountPlugin**\n\n```js\nnew webpack.optimize.LimitChunkCountPlugin({\n    maxChunks: 1\n})\n```\n\n\n### What about Webpack 3?\nThis is a breaking change. The entire loader has been fundamentally rewritten specifically for Webpack 4. Aiming to support our existing user base, allowing them to upgrade their infrastructure to support Webpack 4 based universally code-split server-side rendered react applications. \n\nThere have been some challenges along the way since the release of webpack 4. Ultimately the only remaining hurdle is code split, async style loading. \n\nIf you do need Webpack 3, make sure to stick with the latest `v2.x.x` release. `v3.x.x` is only intended for users with Webpack 4\n\n\n\n\n*Note: this is a companion package to:*\n- [webpack-flush-chunks](https://github.com/faceyspacey/webpack-flush-chunks) \n- [react-universal-component](https://github.com/faceyspacey/react-universal-component)\n- [babel-plugin-universal-import](https://github.com/faceyspacey/babel-plugin-universal-import) ***or*** [babel-plugin-dual-import](https://github.com/faceyspacey/babel-plugin-dual-import)\n\n\n## Recommended Installation For Universal\n```\nyarn add react-universal-component webpack-flush-chunks\nyarn add --dev extract-css-chunks-webpack-plugin babel-plugin-universal-import\n```\n\n*.babelrc:*\n```js\n{\n  \"plugins\": [\"universal-import\"]\n}\n```\nThe main thing is you need to cater to the new chunking system of webpack!\nWith **webpack.optimize.CommonsChunkPlugin** plugin no longer part of Webpack 4, we need another way to define the code-splitting. Luckily we have `optimization` configs built into webpack now\n\n*webpack.config.js:*\n```js\nconst ExtractCssChunks = require(\"extract-css-chunks-webpack-plugin\")\n\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [\n          ExtractCssChunks.loader,\n          {\n            loader: 'css-loader',\n            options: {\n              modules: true,\n              localIdentName: '[name]__[local]--[hash:base64:5]',\n            },\n          },\n        ],\n      },\n    ],\n  },\n  optimization: {\n      // FOR PRODUCTION\n      minimizer: [\n          new UglifyJSPlugin({\n              uglifyOptions: {\n                  output: {\n                      comments: false,\n                      ascii_only: true\n                  },\n                  compress: {\n                      comparisons: false\n                  }\n              }\n          })\n      ],\n      // END\n      // NEEDED BOTH IN PROD AND DEV BUILDS\n      runtimeChunk: {\n          name: 'bootstrap'\n      },\n      splitChunks: {\n          chunks: 'initial', // <-- The key to this\n          cacheGroups: {\n              vendors: {\n                  test: /[\\\\/]node_modules[\\\\/]/,\n                  name: 'vendor'\n              }\n          }\n      }\n  },\n  plugins: [\n    new ExtractCssChunks({hot:true}), //if you want HMR - we try to automatically inject hot reloading but if it's not working, add it to the config\n  ]\n};\n```\n\n## Desired Output\nHere's the sort of CSS you can expect to serve:\n\n```\n<head>\n\t<link rel='stylesheet' href='/static/main.css' />\n\t<link rel='stylesheet' href='/static/0.css' />\n\t<link rel='stylesheet' href='/static/7.css' />\n</head> \n\n<body>\n\t<div id=\"react-root\"></div>\n\t\n\t<script type='text/javascript' src='/static/vendor.js'></script>\n\t<script type='text/javascript' src='/static/0.js'></script>\n\t<script type='text/javascript' src='/static/7.js'></script>\n\t<script type='text/javascript' src='/static/main.js'></script>\n</body>\n```\n\nIf you need to resolve your stylesheets on the client side, for whatever reason. \n\n[webpack-flush-chunks](https://github.com/faceyspacey/webpack-flush-chunks) will scoop up the exact stylesheets to embed in your response. It will give you an object which can be embedded on page\n\nHere's how you do it:\n\n\n*src/components/App.js:*\n```js\nconst UniversalComponent = universal(props => import(`./${props.page}`))\n\n<UniversalComponent page='Foo' />\n```\n\n*server/render.js:*\n```js\nimport { flushChunkNames } from 'react-universal-component/server'\nimport flushChunks from 'webpack-flush-chunks'\n\nconst app = ReactDOMServer.renderToString(<App />)\nconst { js, styles, cssHash } = flushChunks(webpackStats, {\n  chunkNames: flushChunkNames()\n})\n\nres.send(`\n  <!doctype html>\n  <html>\n    <head>\n      ${styles}\n    </head>\n    <body>\n      <div id=\"root\">${app}</div>\n      <!-- not needed unless you want to access css chunks urls manually  -->\n      ${cssHash}\n      <!-- extract-css-chunks takes care of loading the css assets automatically -->\n      ${js}\n    </body>\n  </html>\n`)\n```\n\n***As for asynchronous calls to `import()` on user navigation,*** [babel-plugin-universal-import](https://github.com/faceyspacey/babel-plugin-universal-import) is required if you're using [react-universal-component](https://github.com/faceyspacey/react-universal-component). And if you aren't, you must use: [babel-plugin-dual-import](https://github.com/faceyspacey/babel-plugin-dual-import). \n\n\nThese babel plugins request both your js + your css. *Very Nice!* This is the new feature of the 2.0. Read *Sokra's* (author of webpack) article on how [on how this is the future of CSS for webpack](https://medium.com/webpack/the-new-css-workflow-step-1-79583bd107d7). Use this and be in the future today.\n\n\n## API \nYou can pass the same options as `mini-css-extract` to `new ExtractCssChunks`, such as:\n\n```javascript\nnew ExtractCssChunk({\n      filename: devMode ? '[name].css' : '[name].[hash].css',\n      chunkFilename: devMode ? '[id].css' : '[id].[hash].css',\n})\n```\n\n>Keep in mind, by default `[name].css` is used when `process.env.NODE_ENV === 'development'` and `[name].[contenthash].css` during production, so you can likely forget about having to pass anything.\n\n### HMR Pitfall\n\nThe most common workflow when working with webpack is to write a \"development\" / \"production\" value in to the\n'process.env.NODE_ENV' namespace, typically, using webpack's built-in \"DefinePlugin\" plugin. e.g:\n\n```javascript\nnew webpack.DefinePlugin( {\n     'process.env': {\n        NODE_ENV: `\"${config.devMode ? 'development' : 'production'}\"`,\n      },\n} )\n```\nThe value set by the aforementioned plugin will only be available in the runtime ( when webpack's javascript output is executed ).\nIn order for this plugin to work with hot module reloading, The npm script / gulp task / grunt task etc, should be invoked with the same environment variable as shown above.\n\nFor example, when running the build using some form of npm script:\n\n```json\n{\n  \"scripts\": {\n     \"build\": \"cross-env NODE_ENV=production babel src -d dist --ignore 'src/**/*.test.js' --copy-files\"\n  }\n}\n```\n[cross-env](https://www.npmjs.com/package/cross-env) is optional but recommended. \n\n### What about Glamorous, Styled Components, Styled-Jsx, Aphrodite, etc?\n\nIf you effectively use code-splitting, **Extract Css Chunks** can be a far better option than using emerging solutions like *Glamorous*, *Styled Components*, and slightly older tools like *Aphrodite*, *Glamor*, etc. We aren't fans of either rounds of tools because of several issues, but particularly because they all have a runtime overhead. Every time your React component is rendered with those, CSS is generated and updated within the DOM. On the server, you're going to also see unnecessary cycles for flushing the CSS along the critical render path. *Next.js's* `styled-jsx`, by the way, doesn't even work on the server--*not so good when it comes to flash of unstyled content (FOUC).*\n\nThe reason **Extract CSS Chunk** can be a better option is because **we also generate multiple sets of CSS based on what is actually \"used\",** ***but without the runtime overhead***. The difference is our definition of \"used\" is modules determined *statically* (which may not in fact be rendered) vs. what is in the \"critical render path\" (as is the case with the other tools). \n\nSo yes, our CSS may be mildly larger and include unnecessary css, but our `no_css.js` bundles will be a lot smaller as they don't need to inject any styles. See, even though those solutions have the smallest possible CSS file size, their javascript bundles, **in order to continue to render your components styled properly on the client,** must contain the necessary CSS for all possibilities! Those solutions serve both your entire bundle's CSS (in your javascript) **and** the CSS flushed from the critical render path. \n\nOn top of that, those are extra packages all with a huge number of issues in their Github repos corresponding to various limitations in the CSS they generate--something that is prevented when your definition for \"CSS-in-JS\" is simply importing CSS files compiled as normal by powerful proven CSS-specific processors.\n\nLastly, those solutions don't provide cacheable stylesheets. They do a lot of work--but they will **continue** doing it for you when you could have been done in one go long ago. Cloudflare is free--serve them through their CDN and you're winning. I love true javascript in css--don't get me wrong--but first I'd have to see they generate cacheable stylesheets. In my opinion, for now, it's best for environments that natively support it such as React Native.\n\n\n### Next:\n\nNow with that out of the way, for completeness let's compare what bytes of just the CSS are sent over the wire. The difference basically is minimal. Whereas solutions that flush from the critical render path will capture no more than the precise bits of CSS from the `if/else` branches followed, **Extract Css Chunks** is all about you effectively using code-splitting to insure, for example, you don't serve your Administration Panel's CSS in your public-facing site, etc. *In other words, it's all about avoiding serving large swaths of CSS from completely different sections of your app.* ***I.e. the biggest gains available to you.*** \n\n<details>\n<summary>\n    Read more on the topic ^^\n</summary>\n\nThis is where the real problem lies--where the real amount of unnecessary CSS comes from. If you effectively code-split your app, you may end up with 10 chunks. Now you can serve just the corresponding CSS for that chunk. If you try to go even farther and remove the css not used in the render path, you're likely achieving somewhere between 1-20% of the gains you achieved by thorough code-splitting. In other words, code splitting fulfills the 80/20 rule and attains the simple sweetspot of 80% optimization you--*as a balanced, level-headed, non-neurotic and professional developer*--are looking to achieve.\n\n*In short, by putting code splitting in appropriate places you have a lot of control over the CSS files that are created and can send a sensible* ***minimal*** *amount of associated bytes over the wire for the first request, perhaps even the smallest amount of all options.* \n\nIt's our perspective that you have achieved 80-99% of the performance gains (i.e. the creation of small relevant css files) at this ***static stage***. Offloading this work to the runtime stage is ultimately nit-picking and results in diminishing returns. When you factor that your JS bundle has to contain that JS anyway, those solutions make less and less sense from the perspective of reducing bytes delivered in the initial request. \n\nThere may be other reasons to use those tools (e.g. you don't like setting up webpack configs, or somehow you're really fond of pre-creating many `<div />` elements with their styles), but we prefer a simple standards-based way (without HoCs or specialized style components) to import styles just as you would in React Native. However to give the other tools credit, many of them likely started out with a different problem motivating them: avoiding webpack configs so you can include packages and their contained CSS without client apps being required to setup something like CSS loaders in Webpack. Having your CSS completely contained in true JS has its use cases, but at the application level--especially when you're already using something like Webpack--we fail to see its benefits. About all they share is a solution to avoiding **flashes of unstyled content** (FOUC), except one can save you a lot more bytes in what you send over the wire and save you from a continual runtime overhead where it's not needed. ***Honorable Mention:*** *StyleTron's concept of \"atomic declaration-level deduplication\" where it will make a class out of, say, `color: blue` so you don't need to send redundant styles certainly is a novel innovation, but again if the code still exists in your JS and you're building an application using Webpack (instead of a package), what's the point. In fact, it just makes editing the stylesheets in your browser developer tools more complicated. One benefit of critical render path solutions is the browser can spend less time matching the smaller number of styles to new DOM nodes as they appear, but then again it also has to spend the time injecting and parsing the new styles constantly, which is likely costlier.*\n\nAs an aside, so many apps share code between web and React Native--so the answer to the styles problem must be one that is identical for both. From that perspective importing a styles object **still** makes a lot of sense. **You're not missing out on the fundamental aspect of CSS-in-JSS:** ***isolated component-level styles and the ability to import them just like any other javascript code.*** Put them in other files, and use tools like `extract-css-chunks-webpack-plugin` and your pre-processors of choice that innately get styles right for the browser. As long as you're using **CSS Modules**, you're still at the cutting edge of CSS-in-JSS. Let's just say the other tools took one wrong turn and took it too far, when we already were at our destination. \n</details>\n\n\n#### SUMMARY OF BENEFITS COMPARED TO \"CRITICAL-RENDER-PATH\" SOLUTIONS:\n\n- no continual runtime overhead during `render` using HoCs that inject styles\n- smaller JS bundles without CSS injection\n- **You DO NOT need to clutter your component code with a specialized way of applying CSS (HoCs, styled elements)!** \n- The way you import module-based styles is exactly how you would import styles in React Native that exist in a separate file, which allows for extremely interchangeable code between React Native and regular React. Hurray! \n- pretty much already does everything covered by [@vjeux's 2014 css-in-js talk](https://speakerdeck.com/vjeux/react-css-in-js), besides dead code elimination. Dead code elimination is only solved for the other tools--as per the explanation above how the CSS is in the JS anyway--so much as Webpack and Uglify can remove **JS** that is not used. Either way, it's not a stretch to eventually add this feature to `extract-text-webpack-plugin` as well as this plugin. Hey, maybe it already has it??\n\n## Emotion!\n\n[Emotion](https://github.com/tkh44/emotion) is different. They allow for the extraction of static styles via their *extract mode*. We're very much looking forward to this being the perfect companion to the css chunks approach. \n<details>\n<summary>\n    Read more on the topic ^^\n</summary>\n\nCurrently however *extract mode* does not support IE11. So that means it's a no go, but we have hopes that in the future they'll solve that problem.\n\nThe reason Emotion doesn't work in IE11+ is because they currently try to preserve any dynamic aspects of your CSS-in-JS by converting it CSS vars, which isn't supported in IE11. That was a very smart approach, but unfortunately not good enough. \n\nThe vision we'd like to see for that package is where dynamic css stays inline, and where only static CSS is extracted into stylesheets, in which case CSS vars aren't needed. I've heard from them they have some \"hidden flags\" that allow for something close to this. When, and if, they take this feature all the way, look forward to us pushing it as our recommended approach. *Go Emotion!*\n</details>\n\n## Linaria\n\nLinaria is another modern CSS-in-JSS library. It's focused around static styles, which may make it a perfect fit for usage with this plugin. Check it out:\n\nhttps://github.com/callstack/linaria\n\n## What if I don't use SSR and use html-webpack-plugin?\n\nFor that case you can use [css-chunks-html-webpack-plugin](https://github.com/teamable-software/css-chunks-html-webpack-plugin) which will extract CSS chunks paths into your HTML file.\n\n## Conclusion:\n**We love CSS modules; no less, no more.**\n\n**Long live the dream of Code Splitting Everywhere!**\n\n\n## Contributing\nWe use [commitizen](https://github.com/commitizen/cz-cli), so run `npm run cm` to make commits. A command-line form will appear, requiring you answer a few questions to automatically produce a nicely formatted commit. Releases, semantic version numbers, tags and changelogs will automatically be generated based on these commits thanks to [semantic-release](https://github.com/semantic-release/semantic-release). Be good.\n\n## More from FaceySpacey in Reactlandia\n- [redux-first-router](https://github.com/faceyspacey/redux-first-router). It's made to work perfectly with *Universal*. Together they comprise our *\"frameworkless\"* Redux-based approach to what Next.js does (splitting, SSR, prefetching, and routing). *People are lovin it by the way* 😎\n","readmeFilename":"README.md","gitHead":"22ee3a143f0b5935a969a52051712f9cfd5d3b3a","bugs":{"url":"https://github.com/faceyspacey/extract-css-chunks-webpack-plugin/issues"},"_id":"extract-css-chunks-webpack-plugin@3.0.8-beta.4","_npmVersion":"5.5.1","_nodeVersion":"8.9.0","_npmUser":{"name":"zackljackson","email":"zackary.l.jackson@gmail.com"},"dist":{"integrity":"sha512-clKiN3N2+0ydCTk494nm205xTOJ7CUPNx4WAhUaxczxB3B+NPkeX0kQ6OYiB6rdCW4cACL6GSOgGkK5gHBYucw==","shasum":"fc33d490ccf1c393003c5f59c97d8d4f1c3f723a","tarball":"https://registry.npmjs.org/extract-css-chunks-webpack-plugin/-/extract-css-chunks-webpack-plugin-3.0.8-beta.4.tgz","fileCount":9,"unpackedSize":51840,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbTO0yCRA9TVsSAnZWagAAo9QP+QHc98QJHANpqOhppKND\n4UEz5NPiHciHNyxhayNTJGqZ+NDQc9SXSRSXiezFJVe0fXqS6kts3iqjX6eD\nY3pt0U2kd88zG0hEHb/Z3cs9voQD4gKTh4qpghpwwI1gKjBSGLYUgEsZthxD\nrXtZAkzoUgLjAm6CyHsts2QyK76obWVLC3qkhC3C8eCDTFZuao777A3KiSUQ\nncBTDmKwD8v+zrFB8ad7+fQB/TvHKiW0yBuNJE68bkbn293T0U9r05YC1TWr\nUe1S388jVg+Us6AeYhqVckuJYq1FYOlY9G1k9QvzQEigZDnGqkUcA26xy0Rk\nCTDQLzXEdYsObjmghtxsROfLGvXtQZbP/MH6DHjWYXMlpXWMFujusQnKIngK\nhg/K8LBc9I4YFqE94kFdbmhwZblJ6h++ZY01hQfqJAAMqoAHECXGKIHKS1NQ\nODZhGrbn/N3J7KLRdFu+rQNw/fbwIMouSYcnHSbb3xVgcSgiEPwUcz5/Qz4i\nejDaHfj32WuIiNBN2/uWX354/tM8azUZk+RZxzShvFSa8nRs/Uw8f+oTAhCQ\nwHOgO7CNSpetaLYHejcIospI5i9fQLGtSCqygpceOYYq1MlWQpwCii16GlUt\nMKnj8HirXmBO8O119wSZsq9znJDsyc4dCY/BLGqTC6bXud55ad4ZUQCdD0vk\nVJOG\r\n=MrJ6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIExLnImWjpelw5+CHYc5Bi3RVLvT3hKE79dOFrItU/jnAiEAjfVVrNWrMiievmyRd8kmdwsvld28iTtHua6Dymb8vc0="}]},"maintainers":[{"email":"james@faceyspacey.com","name":"faceyspacey"},{"email":"zackary.l.jackson@gmail.com","name":"zackljackson"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/extract-css-chunks-webpack-plugin_3.0.8-beta.4_1531768113847_0.5382356070962164"},"_hasShrinkwrap":false},"3.0.8-beta.5":{"name":"extract-css-chunks-webpack-plugin","version":"3.0.8-beta.5","author":{"name":"James Gillmore","email":"james@faceyspacey.com"},"contributors":[{"name":"Zack Jackson","email":"zackary.l.jackson@gmail.com","url":"https://github.com/ScriptedAlchemy"}],"description":"Extract CSS from chunks into stylesheets + HMR. Supports Webpack 4","engines":{"node":">= 6.9.0 <7.0.0 || >= 8.9.0"},"main":"dist/cjs.js","files":["dist"],"keywords":["css","chunks","code splitting","mini-css","hot","hmr","universal","webpack","webpack 4"],"license":"MIT","scripts":{"start":"npm run build -- -w","build":"cross-env NODE_ENV=production babel src -d dist --ignore 'src/**/*.test.js' --copy-files","clean":"del-cli dist","lint":"eslint --cache --fix src","prebuild":"npm run clean","prepublish":"npm run build","security":"nsp check","test":"jest","test:watch":"jest --watch","test:coverage":"jest --collectCoverageFrom='src/**/*.js' --coverage","test:example":"npm run build && webpack-dev-server test/manual/src/index.js --config test/manual/webpack.config.js","ci:lint":"npm run lint && npm run security","ci:test":"npm run test -- --runInBand","ci:coverage":"npm run test:coverage -- --runInBand","build:example":"npm run build && webpack-dev-server test/manual/src/index.js --open --config test/manual/webpack.config.js","cm":"git-cz","release":"standard-version","semantic-release":"semantic-release pre && npm publish && semantic-release post","travis":"npm run ci:coverage"},"peerDependencies":{"webpack":"^4.8.3"},"dependencies":{"loader-utils":"^1.1.0","lodash":"^4.17.5","normalize-url":"^1.9.1","webpack-sources":"^1.1.0"},"devDependencies":{"@webpack-contrib/eslint-config-webpack":"^2.0.4","babel-cli":"^6.26.0","babel-eslint":"^7.2.3","babel-jest":"^22.2.2","babel-loader":"^7.1.4","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-polyfill":"^6.26.0","babel-preset-env":"^1.6.1","commitizen":"^2.10.1","conventional-github-releaser":"^2.0.2","cross-env":"^5.1.3","css-loader":"^0.28.10","cz-conventional-changelog":"^2.1.0","del":"^3.0.0","del-cli":"^1.1.0","eslint":"^3.19.0","eslint-config-airbnb":"^15.0.1","eslint-plugin-flowtype":"^2.32.1","eslint-plugin-import":"^2.8.0","eslint-plugin-jsx-a11y":"^5.0.3","eslint-plugin-prettier":"^2.6.0","eslint-plugin-react":"^7.0.1","husky":"^0.14.3","jest":"^22.2.2","memory-fs":"^0.4.1","nsp":"^3.1.0","pre-commit":"^1.2.2","prettier":"^1.11.1","standard-version":"^4.3.0","webpack":"4.8.3","webpack-cli":"^2.0.13","webpack-dev-server":"^3.1.1"},"homepage":"http://github.com/faceyspacey/extract-css-chunks-webpack-plugin","repository":{"type":"git","url":"git+https://github.com/faceyspacey/extract-css-chunks-webpack-plugin.git"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"readme":"<a href=\"https://gitter.im/Reactlandia/Lobby\" target=\"_blank\">\n  <img alt=\"Edit Redux-First Router Demo\" src=\"http://cdn.reactlandia.com/chat-badge-reactlandia.png\">\n</a>\n\n\n# extract-css-chunks-webpack-plugin\n\n<p align=\"center\">\n  <a href=\"https://www.npmjs.com/package/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://img.shields.io/npm/v/extract-css-chunks-webpack-plugin.svg\" alt=\"Version\" />\n  </a>\n\n  <a href=\"https://travis-ci.org/faceyspacey/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://travis-ci.org/faceyspacey/extract-css-chunks-webpack-plugin.svg?branch=master\" alt=\"Build Status\" />\n  </a>\n\n  <a href=\"https://www.npmjs.com/package/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://img.shields.io/npm/dt/extract-css-chunks-webpack-plugin.svg\" alt=\"Downloads\" />\n  </a>\n\n  <a href=\"https://www.npmjs.com/package/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://img.shields.io/npm/dm/extract-css-chunks-webpack-plugin.svg\" alt=\"License\" />\n  </a>\n  \n  <a href=\"https://www.npmjs.com/package/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://img.shields.io/npm/l/extract-css-chunks-webpack-plugin.svg\" alt=\"License\" />\n  </a>\n</p>\n\n<h2 align=\"center\">🍾🍾🍾It's our absolute pleasure to announce Webpack 4 Support 🚀🚀🚀</h2>\n\n> **HEADLINES (May 2018): Now Independently supports Webpack 4:** \nYep that's right. The universal family is now fully Webpack 4. Thank you to all our users for your loyalty and patience! If you love Universal, then you are gonna fall head over heels when we bring out the main course! \n\nSo... why did we rebuild `extract-css-chunks`? What does it offer? \n\nIt's got all the goodness of `mini-css-extract-plugin` but with 2 gleaming, sought after benefits. \n\nCompared to the existing loaders, we are offering a single solution as opposed to needing to depend on multiple loaders to cater for different features:\n\n## Perks\n* **HMR:** It also has first-class support for **Hot Module Replacement** across ALL those css files/chunks!!!\n* cacheable stylesheets \n* smallest total bytes sent compared to \"render-path\" css-in-js solutions that include your CSS definitions in JS\n* Faster than the V2!\n* Async loading\n* No duplicate compilation (performance)\n* Easier to use\n* Specific to CSS\n* SSR Friendly development build, focused on frontend DX\n* Works seamlessly with the Universal family\n* Works fantastically as a standalone style loader (You can use it for any webpack project! with no extra dependencies!)\n\nAdditionally, if you are already a user of the universal family -- we will be waving goodbye to the mandatory ```window.__CSS_CHUNKS__```.\n\nThe functionality is still available to you via chunk flushing, and it can come in super handy when needing to easily resolve style assets as urls that might need to be passed to a third party.\n\n## Webpack 4 Standalone Installation:\n\nIf you are just looking for something that works like `mini-css-extract-plugin` but with HMR, then look no further.\n\nNOTE: We have aligned out loader implementation to be the same as `mini-css-extract-plugin` \n\n**If you already use `mini-css-extract-plugin`, then you can just change the `require` statement - it's that easy**\n\n```\nyarn add --dev extract-css-chunks-webpack-plugin\n```\n\n*webpack.config.js:*\n```js\nconst ExtractCssChunks = require(\"extract-css-chunks-webpack-plugin\")\n\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [\n           ExtractCssChunks.loader,\n           \"css-loader\"\n         ]\n      }\n    ]\n  },\n  plugins: [\n    new ExtractCssChunks(\n        {\n          // Options similar to the same options in webpackOptions.output\n          // both options are optional\n          filename: \"[name].css\",\n          chunkFilename: \"[id].css\",\n          hot: true // optional as the plugin cannot automatically detect if you are using HOT, not for production use\n        }\n    ),\n  ]\n}\n```\n\n*webpack.server.config.js*\n\nThe server needs to be handled differently, we still want one chunk. Luckily webpack 4 supports **LimitChunkCountPlugin**\n\n```js\nnew webpack.optimize.LimitChunkCountPlugin({\n    maxChunks: 1\n})\n```\n\n\n### What about Webpack 3?\nThis is a breaking change. The entire loader has been fundamentally rewritten specifically for Webpack 4. Aiming to support our existing user base, allowing them to upgrade their infrastructure to support Webpack 4 based universally code-split server-side rendered react applications. \n\nThere have been some challenges along the way since the release of webpack 4. Ultimately the only remaining hurdle is code split, async style loading. \n\nIf you do need Webpack 3, make sure to stick with the latest `v2.x.x` release. `v3.x.x` is only intended for users with Webpack 4\n\n\n\n\n*Note: this is a companion package to:*\n- [webpack-flush-chunks](https://github.com/faceyspacey/webpack-flush-chunks) \n- [react-universal-component](https://github.com/faceyspacey/react-universal-component)\n- [babel-plugin-universal-import](https://github.com/faceyspacey/babel-plugin-universal-import) ***or*** [babel-plugin-dual-import](https://github.com/faceyspacey/babel-plugin-dual-import)\n\n\n## Recommended Installation For Universal\n```\nyarn add react-universal-component webpack-flush-chunks\nyarn add --dev extract-css-chunks-webpack-plugin babel-plugin-universal-import\n```\n\n*.babelrc:*\n```js\n{\n  \"plugins\": [\"universal-import\"]\n}\n```\nThe main thing is you need to cater to the new chunking system of webpack!\nWith **webpack.optimize.CommonsChunkPlugin** plugin no longer part of Webpack 4, we need another way to define the code-splitting. Luckily we have `optimization` configs built into webpack now\n\n*webpack.config.js:*\n```js\nconst ExtractCssChunks = require(\"extract-css-chunks-webpack-plugin\")\n\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [\n          ExtractCssChunks.loader,\n          {\n            loader: 'css-loader',\n            options: {\n              modules: true,\n              localIdentName: '[name]__[local]--[hash:base64:5]',\n            },\n          },\n        ],\n      },\n    ],\n  },\n  optimization: {\n      // FOR PRODUCTION\n      minimizer: [\n          new UglifyJSPlugin({\n              uglifyOptions: {\n                  output: {\n                      comments: false,\n                      ascii_only: true\n                  },\n                  compress: {\n                      comparisons: false\n                  }\n              }\n          })\n      ],\n      // END\n      // NEEDED BOTH IN PROD AND DEV BUILDS\n      runtimeChunk: {\n          name: 'bootstrap'\n      },\n      splitChunks: {\n          chunks: 'initial', // <-- The key to this\n          cacheGroups: {\n              vendors: {\n                  test: /[\\\\/]node_modules[\\\\/]/,\n                  name: 'vendor'\n              }\n          }\n      }\n  },\n  plugins: [\n    new ExtractCssChunks({hot:true}), //if you want HMR - we try to automatically inject hot reloading but if it's not working, add it to the config\n  ]\n};\n```\n\n## Desired Output\nHere's the sort of CSS you can expect to serve:\n\n```\n<head>\n\t<link rel='stylesheet' href='/static/main.css' />\n\t<link rel='stylesheet' href='/static/0.css' />\n\t<link rel='stylesheet' href='/static/7.css' />\n</head> \n\n<body>\n\t<div id=\"react-root\"></div>\n\t\n\t<script type='text/javascript' src='/static/vendor.js'></script>\n\t<script type='text/javascript' src='/static/0.js'></script>\n\t<script type='text/javascript' src='/static/7.js'></script>\n\t<script type='text/javascript' src='/static/main.js'></script>\n</body>\n```\n\nIf you need to resolve your stylesheets on the client side, for whatever reason. \n\n[webpack-flush-chunks](https://github.com/faceyspacey/webpack-flush-chunks) will scoop up the exact stylesheets to embed in your response. It will give you an object which can be embedded on page\n\nHere's how you do it:\n\n\n*src/components/App.js:*\n```js\nconst UniversalComponent = universal(props => import(`./${props.page}`))\n\n<UniversalComponent page='Foo' />\n```\n\n*server/render.js:*\n```js\nimport { flushChunkNames } from 'react-universal-component/server'\nimport flushChunks from 'webpack-flush-chunks'\n\nconst app = ReactDOMServer.renderToString(<App />)\nconst { js, styles, cssHash } = flushChunks(webpackStats, {\n  chunkNames: flushChunkNames()\n})\n\nres.send(`\n  <!doctype html>\n  <html>\n    <head>\n      ${styles}\n    </head>\n    <body>\n      <div id=\"root\">${app}</div>\n      <!-- not needed unless you want to access css chunks urls manually  -->\n      ${cssHash}\n      <!-- extract-css-chunks takes care of loading the css assets automatically -->\n      ${js}\n    </body>\n  </html>\n`)\n```\n\n***As for asynchronous calls to `import()` on user navigation,*** [babel-plugin-universal-import](https://github.com/faceyspacey/babel-plugin-universal-import) is required if you're using [react-universal-component](https://github.com/faceyspacey/react-universal-component). And if you aren't, you must use: [babel-plugin-dual-import](https://github.com/faceyspacey/babel-plugin-dual-import). \n\n\nThese babel plugins request both your js + your css. *Very Nice!* This is the new feature of the 2.0. Read *Sokra's* (author of webpack) article on how [on how this is the future of CSS for webpack](https://medium.com/webpack/the-new-css-workflow-step-1-79583bd107d7). Use this and be in the future today.\n\n\n## API \nYou can pass the same options as `mini-css-extract` to `new ExtractCssChunks`, such as:\n\n```javascript\nnew ExtractCssChunk({\n      filename: devMode ? '[name].css' : '[name].[hash].css',\n      chunkFilename: devMode ? '[id].css' : '[id].[hash].css',\n})\n```\n\n>Keep in mind, by default `[name].css` is used when `process.env.NODE_ENV === 'development'` and `[name].[contenthash].css` during production, so you can likely forget about having to pass anything.\n\n### HMR Pitfall\n\nThe most common workflow when working with webpack is to write a \"development\" / \"production\" value in to the\n'process.env.NODE_ENV' namespace, typically, using webpack's built-in \"DefinePlugin\" plugin. e.g:\n\n```javascript\nnew webpack.DefinePlugin( {\n     'process.env': {\n        NODE_ENV: `\"${config.devMode ? 'development' : 'production'}\"`,\n      },\n} )\n```\nThe value set by the aforementioned plugin will only be available in the runtime ( when webpack's javascript output is executed ).\nIn order for this plugin to work with hot module reloading, The npm script / gulp task / grunt task etc, should be invoked with the same environment variable as shown above.\n\nFor example, when running the build using some form of npm script:\n\n```json\n{\n  \"scripts\": {\n     \"build\": \"cross-env NODE_ENV=production babel src -d dist --ignore 'src/**/*.test.js' --copy-files\"\n  }\n}\n```\n[cross-env](https://www.npmjs.com/package/cross-env) is optional but recommended. \n\n### What about Glamorous, Styled Components, Styled-Jsx, Aphrodite, etc?\n\nIf you effectively use code-splitting, **Extract Css Chunks** can be a far better option than using emerging solutions like *Glamorous*, *Styled Components*, and slightly older tools like *Aphrodite*, *Glamor*, etc. We aren't fans of either rounds of tools because of several issues, but particularly because they all have a runtime overhead. Every time your React component is rendered with those, CSS is generated and updated within the DOM. On the server, you're going to also see unnecessary cycles for flushing the CSS along the critical render path. *Next.js's* `styled-jsx`, by the way, doesn't even work on the server--*not so good when it comes to flash of unstyled content (FOUC).*\n\nThe reason **Extract CSS Chunk** can be a better option is because **we also generate multiple sets of CSS based on what is actually \"used\",** ***but without the runtime overhead***. The difference is our definition of \"used\" is modules determined *statically* (which may not in fact be rendered) vs. what is in the \"critical render path\" (as is the case with the other tools). \n\nSo yes, our CSS may be mildly larger and include unnecessary css, but our `no_css.js` bundles will be a lot smaller as they don't need to inject any styles. See, even though those solutions have the smallest possible CSS file size, their javascript bundles, **in order to continue to render your components styled properly on the client,** must contain the necessary CSS for all possibilities! Those solutions serve both your entire bundle's CSS (in your javascript) **and** the CSS flushed from the critical render path. \n\nOn top of that, those are extra packages all with a huge number of issues in their Github repos corresponding to various limitations in the CSS they generate--something that is prevented when your definition for \"CSS-in-JS\" is simply importing CSS files compiled as normal by powerful proven CSS-specific processors.\n\nLastly, those solutions don't provide cacheable stylesheets. They do a lot of work--but they will **continue** doing it for you when you could have been done in one go long ago. Cloudflare is free--serve them through their CDN and you're winning. I love true javascript in css--don't get me wrong--but first I'd have to see they generate cacheable stylesheets. In my opinion, for now, it's best for environments that natively support it such as React Native.\n\n\n### Next:\n\nNow with that out of the way, for completeness let's compare what bytes of just the CSS are sent over the wire. The difference basically is minimal. Whereas solutions that flush from the critical render path will capture no more than the precise bits of CSS from the `if/else` branches followed, **Extract Css Chunks** is all about you effectively using code-splitting to insure, for example, you don't serve your Administration Panel's CSS in your public-facing site, etc. *In other words, it's all about avoiding serving large swaths of CSS from completely different sections of your app.* ***I.e. the biggest gains available to you.*** \n\n<details>\n<summary>\n    Read more on the topic ^^\n</summary>\n\nThis is where the real problem lies--where the real amount of unnecessary CSS comes from. If you effectively code-split your app, you may end up with 10 chunks. Now you can serve just the corresponding CSS for that chunk. If you try to go even farther and remove the css not used in the render path, you're likely achieving somewhere between 1-20% of the gains you achieved by thorough code-splitting. In other words, code splitting fulfills the 80/20 rule and attains the simple sweetspot of 80% optimization you--*as a balanced, level-headed, non-neurotic and professional developer*--are looking to achieve.\n\n*In short, by putting code splitting in appropriate places you have a lot of control over the CSS files that are created and can send a sensible* ***minimal*** *amount of associated bytes over the wire for the first request, perhaps even the smallest amount of all options.* \n\nIt's our perspective that you have achieved 80-99% of the performance gains (i.e. the creation of small relevant css files) at this ***static stage***. Offloading this work to the runtime stage is ultimately nit-picking and results in diminishing returns. When you factor that your JS bundle has to contain that JS anyway, those solutions make less and less sense from the perspective of reducing bytes delivered in the initial request. \n\nThere may be other reasons to use those tools (e.g. you don't like setting up webpack configs, or somehow you're really fond of pre-creating many `<div />` elements with their styles), but we prefer a simple standards-based way (without HoCs or specialized style components) to import styles just as you would in React Native. However to give the other tools credit, many of them likely started out with a different problem motivating them: avoiding webpack configs so you can include packages and their contained CSS without client apps being required to setup something like CSS loaders in Webpack. Having your CSS completely contained in true JS has its use cases, but at the application level--especially when you're already using something like Webpack--we fail to see its benefits. About all they share is a solution to avoiding **flashes of unstyled content** (FOUC), except one can save you a lot more bytes in what you send over the wire and save you from a continual runtime overhead where it's not needed. ***Honorable Mention:*** *StyleTron's concept of \"atomic declaration-level deduplication\" where it will make a class out of, say, `color: blue` so you don't need to send redundant styles certainly is a novel innovation, but again if the code still exists in your JS and you're building an application using Webpack (instead of a package), what's the point. In fact, it just makes editing the stylesheets in your browser developer tools more complicated. One benefit of critical render path solutions is the browser can spend less time matching the smaller number of styles to new DOM nodes as they appear, but then again it also has to spend the time injecting and parsing the new styles constantly, which is likely costlier.*\n\nAs an aside, so many apps share code between web and React Native--so the answer to the styles problem must be one that is identical for both. From that perspective importing a styles object **still** makes a lot of sense. **You're not missing out on the fundamental aspect of CSS-in-JSS:** ***isolated component-level styles and the ability to import them just like any other javascript code.*** Put them in other files, and use tools like `extract-css-chunks-webpack-plugin` and your pre-processors of choice that innately get styles right for the browser. As long as you're using **CSS Modules**, you're still at the cutting edge of CSS-in-JSS. Let's just say the other tools took one wrong turn and took it too far, when we already were at our destination. \n</details>\n\n\n#### SUMMARY OF BENEFITS COMPARED TO \"CRITICAL-RENDER-PATH\" SOLUTIONS:\n\n- no continual runtime overhead during `render` using HoCs that inject styles\n- smaller JS bundles without CSS injection\n- **You DO NOT need to clutter your component code with a specialized way of applying CSS (HoCs, styled elements)!** \n- The way you import module-based styles is exactly how you would import styles in React Native that exist in a separate file, which allows for extremely interchangeable code between React Native and regular React. Hurray! \n- pretty much already does everything covered by [@vjeux's 2014 css-in-js talk](https://speakerdeck.com/vjeux/react-css-in-js), besides dead code elimination. Dead code elimination is only solved for the other tools--as per the explanation above how the CSS is in the JS anyway--so much as Webpack and Uglify can remove **JS** that is not used. Either way, it's not a stretch to eventually add this feature to `extract-text-webpack-plugin` as well as this plugin. Hey, maybe it already has it??\n\n## Emotion!\n\n[Emotion](https://github.com/tkh44/emotion) is different. They allow for the extraction of static styles via their *extract mode*. We're very much looking forward to this being the perfect companion to the css chunks approach. \n<details>\n<summary>\n    Read more on the topic ^^\n</summary>\n\nCurrently however *extract mode* does not support IE11. So that means it's a no go, but we have hopes that in the future they'll solve that problem.\n\nThe reason Emotion doesn't work in IE11+ is because they currently try to preserve any dynamic aspects of your CSS-in-JS by converting it CSS vars, which isn't supported in IE11. That was a very smart approach, but unfortunately not good enough. \n\nThe vision we'd like to see for that package is where dynamic css stays inline, and where only static CSS is extracted into stylesheets, in which case CSS vars aren't needed. I've heard from them they have some \"hidden flags\" that allow for something close to this. When, and if, they take this feature all the way, look forward to us pushing it as our recommended approach. *Go Emotion!*\n</details>\n\n## Linaria\n\nLinaria is another modern CSS-in-JSS library. It's focused around static styles, which may make it a perfect fit for usage with this plugin. Check it out:\n\nhttps://github.com/callstack/linaria\n\n## What if I don't use SSR and use html-webpack-plugin?\n\nFor that case you can use [css-chunks-html-webpack-plugin](https://github.com/teamable-software/css-chunks-html-webpack-plugin) which will extract CSS chunks paths into your HTML file.\n\n## Conclusion:\n**We love CSS modules; no less, no more.**\n\n**Long live the dream of Code Splitting Everywhere!**\n\n\n## Contributing\nWe use [commitizen](https://github.com/commitizen/cz-cli), so run `npm run cm` to make commits. A command-line form will appear, requiring you answer a few questions to automatically produce a nicely formatted commit. Releases, semantic version numbers, tags and changelogs will automatically be generated based on these commits thanks to [semantic-release](https://github.com/semantic-release/semantic-release). Be good.\n\n## More from FaceySpacey in Reactlandia\n- [redux-first-router](https://github.com/faceyspacey/redux-first-router). It's made to work perfectly with *Universal*. Together they comprise our *\"frameworkless\"* Redux-based approach to what Next.js does (splitting, SSR, prefetching, and routing). *People are lovin it by the way* 😎\n","readmeFilename":"README.md","gitHead":"dcbb39e0156d0c5e5b600e7fdc59b2b7f369839c","bugs":{"url":"https://github.com/faceyspacey/extract-css-chunks-webpack-plugin/issues"},"_id":"extract-css-chunks-webpack-plugin@3.0.8-beta.5","_npmVersion":"5.5.1","_nodeVersion":"8.9.0","_npmUser":{"name":"zackljackson","email":"zackary.l.jackson@gmail.com"},"dist":{"integrity":"sha512-jcNpF5r5JTNpWBfTem63x5uSYdkWMIckQYiKoDERrzE6zT3DVkGHYsHjjsbrBX1CnBsP5R3En/ebf9uIuTx9Xw==","shasum":"c442065ec6c7524a912fc8c5dd68bda1619767e3","tarball":"https://registry.npmjs.org/extract-css-chunks-webpack-plugin/-/extract-css-chunks-webpack-plugin-3.0.8-beta.5.tgz","fileCount":9,"unpackedSize":51843,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbTO9mCRA9TVsSAnZWagAAkY8P/3pZja8WN3PgjP5QZglS\nL2+Lue6R9+cEE83jzJ3F4AZTmbXlm4N3agCnq/LQvVdJrZLjFlsKPxqQkNL0\nLvw+ISYK/ZZc1GOmf9t2/MEwjwDlBLvhJWheB0X2EVBsLe+kSlRSKOwOqKay\nVAD2FpvPykzk3NSruZh5DdnqOPn80/r70vgIAH8e1HARP+0Wtfc2qn2Oo9E4\nXGoeIjBSnMe8Ya/m/O6mEkCgRrI8GeK9jFC0UjdWGbx7uqdI0vMUh2xTS/QH\ngMsxoZLhGrY5aHwX7UN5UbcaeTztNwaSHVGfuM8LGzRkulTNdIyJgc5+PM4v\naW9VCANbcSJAoR+3CuLLfo4HwJw94CRGNiY9MTeSNQ26Tc3lvGVoOeZLu1+u\nh3BFMjctwx+0M0zeFueV2r7n82pwMhXRLhR08zStCWUwfxc0o+21X2BQnYW0\nWlUsyT7UKzGgyUOSDbUDmZdtKoJ5f/cXUAvDeDqHgs2nk7IdWaEdvKiyG2ZN\nh05yxKwDl5/5eaTTmzjpynZUjo6WIck9+H0hT4IA+LLSsuIWTiIvR3/jGRhT\n3Iantn6bf702H9Zn2Fx0vllP0fB1lE+VUCuh8x1Bbb3UUACUeViNqtaR95b6\nvAAAeq0XdFiklWdC5pddh23FupOzNcuRwYsxUaDmxgjumM4EJzqEuE08UNi9\nDK6z\r\n=4Odc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDxCwEE81ZnDd0t4bofKazS6QXZ6DtGUoT/qauXS8P+qgIgCCZmigSLyDQciocUAKWi1sLLEGuSOudgigB8Xw3kat4="}]},"maintainers":[{"email":"james@faceyspacey.com","name":"faceyspacey"},{"email":"zackary.l.jackson@gmail.com","name":"zackljackson"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/extract-css-chunks-webpack-plugin_3.0.8-beta.5_1531768678838_0.023158119021075896"},"_hasShrinkwrap":false},"3.0.9":{"name":"extract-css-chunks-webpack-plugin","version":"3.0.9","author":{"name":"James Gillmore","email":"james@faceyspacey.com"},"contributors":[{"name":"Zack Jackson","email":"zackary.l.jackson@gmail.com","url":"https://github.com/ScriptedAlchemy"}],"description":"Extract CSS from chunks into stylesheets + HMR. Supports Webpack 4","engines":{"node":">= 6.9.0 <7.0.0 || >= 8.9.0"},"main":"dist/cjs.js","files":["dist"],"keywords":["css","chunks","code splitting","mini-css","hot","hmr","universal","webpack","webpack 4"],"license":"MIT","scripts":{"start":"npm run build -- -w","build":"cross-env NODE_ENV=production babel src -d dist --ignore 'src/**/*.test.js' --copy-files","clean":"del-cli dist","lint":"eslint --cache --fix src","prebuild":"npm run clean","prepublish":"npm run build","security":"nsp check","test":"jest","test:watch":"jest --watch","test:coverage":"jest --collectCoverageFrom='src/**/*.js' --coverage","test:example":"npm run build && webpack-dev-server test/manual/src/index.js --config test/manual/webpack.config.js","ci:lint":"npm run lint && npm run security","ci:test":"npm run test -- --runInBand","ci:coverage":"npm run test:coverage -- --runInBand","build:example":"npm run build && webpack-dev-server test/manual/src/index.js --open --config test/manual/webpack.config.js","cm":"git-cz","release":"standard-version","semantic-release":"semantic-release pre && npm publish && semantic-release post","travis":"npm run ci:coverage"},"peerDependencies":{"webpack":"^4.8.3"},"dependencies":{"loader-utils":"^1.1.0","lodash":"^4.17.5","normalize-url":"^1.9.1","webpack-sources":"^1.1.0"},"devDependencies":{"@webpack-contrib/eslint-config-webpack":"^2.0.4","babel-cli":"^6.26.0","babel-eslint":"^7.2.3","babel-jest":"^22.2.2","babel-loader":"^7.1.4","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-polyfill":"^6.26.0","babel-preset-env":"^1.6.1","commitizen":"^2.10.1","conventional-github-releaser":"^2.0.2","cross-env":"^5.1.3","css-loader":"^0.28.10","cz-conventional-changelog":"^2.1.0","del":"^3.0.0","del-cli":"^1.1.0","eslint":"^3.19.0","eslint-config-airbnb":"^15.0.1","eslint-plugin-flowtype":"^2.32.1","eslint-plugin-import":"^2.8.0","eslint-plugin-jsx-a11y":"^5.0.3","eslint-plugin-prettier":"^2.6.0","eslint-plugin-react":"^7.0.1","husky":"^0.14.3","jest":"^22.2.2","memory-fs":"^0.4.1","nsp":"^3.1.0","pre-commit":"^1.2.2","prettier":"^1.11.1","standard-version":"^4.3.0","webpack":"4.8.3","webpack-cli":"^2.0.13","webpack-dev-server":"^3.1.1"},"homepage":"http://github.com/faceyspacey/extract-css-chunks-webpack-plugin","repository":{"type":"git","url":"git+https://github.com/faceyspacey/extract-css-chunks-webpack-plugin.git"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"gitHead":"1897d8d6f61b1a2cb5e2bca80632a9a50f8378bb","bugs":{"url":"https://github.com/faceyspacey/extract-css-chunks-webpack-plugin/issues"},"_id":"extract-css-chunks-webpack-plugin@3.0.9","_npmVersion":"5.5.1","_nodeVersion":"8.9.0","_npmUser":{"name":"zackljackson","email":"zackary.l.jackson@gmail.com"},"dist":{"integrity":"sha512-v40ssLqkt+1lRSII4e31xuP6sa2b75pc8HoT4CQ+SY/ygpYmekfBJftycJ3X2C3wSHwsVPmLtw0PTWtqBkCu7g==","shasum":"1d19585daee6318ecd8353685738f00e7bd9bcf4","tarball":"https://registry.npmjs.org/extract-css-chunks-webpack-plugin/-/extract-css-chunks-webpack-plugin-3.0.9.tgz","fileCount":9,"unpackedSize":51836,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbTPVnCRA9TVsSAnZWagAASa8P/2GfhaMmLf0q0LLybmpY\nZO0QJc94hhs7IvdNYBEwqUFQkSMJKdfsNW79jD2nkR2eBq1w+kZ2Ym1D/V6T\nCkTo/xnc85erE2aA5qQDxRlc/yAGcH0exRookre+FCWyOjH8GgRQhawkLhr1\nGNE1kOF3m8r1qgzZ4xBbYOU0DpwLF6zqeUGLjFd0tMfUrHWJrbCSjlO35nf5\niyXCI0P38lz+bJ8RdmwLtQrwQscfp8VFUdWDip4vYgPqtvKIy4+SSUmOCJvB\nqDvSLLPIZHuWYceWiHfue6slwpVTmqItdxUtwFKvD+SUP5WT42oJxuMObNw/\nzY++obqaT0FYluOioCLK0JF+auOhsd0G3ISzxK4WGHIR3W2M4C6ljSbOAwIk\ne/SasbMLxozSjSLT/rPOEngmefT2QZceOo1R5o4qJkg7ARFnrt7YDWoGStIl\nhesHMkyC2/vIH3PPlcsEslkN80Ekp9Wo0H8pSlonE0rZi9S7CKjo18qis8OD\nXIKaA289E2MusZ3HrUORmdRd8qqbWYKK+n4GeG+WTebBb3hj04eyd+M8U4KD\naSfjIe0ciJYm1GsNUxLPzF9zFJ6O3zxFPfm/CniQcDoni3ClK+wnSbRC7upi\nbMVIXYMw0/BzR/1pTzRaq4ngeIsA1Sm4uhnYxw8/IuNDBYsuVTfyRv0ej//f\nVXwf\r\n=zdbG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICNms6vA8UnS9/a2I1L7EliXeuD8TVMY9fuwyMgdCuj0AiEA7hPGvx8y3cv1SlUCMSouS4z25rVGsdyibVivGih0FOk="}]},"maintainers":[{"email":"james@faceyspacey.com","name":"faceyspacey"},{"email":"zackary.l.jackson@gmail.com","name":"zackljackson"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/extract-css-chunks-webpack-plugin_3.0.9_1531770215674_0.21217674480317172"},"_hasShrinkwrap":false},"3.1.0-beta.1":{"name":"extract-css-chunks-webpack-plugin","version":"3.1.0-beta.1","author":{"name":"James Gillmore","email":"james@faceyspacey.com"},"contributors":[{"name":"Zack Jackson","email":"zackary.l.jackson@gmail.com","url":"https://github.com/ScriptedAlchemy"}],"description":"Extract CSS from chunks into stylesheets + HMR. Supports Webpack 4","engines":{"node":">= 6.9.0 <7.0.0 || >= 8.9.0"},"main":"dist/cjs.js","files":["dist"],"keywords":["css","chunks","code splitting","mini-css","hot","hmr","universal","webpack","webpack 4"],"license":"MIT","scripts":{"start":"npm run build -- -w","build":"cross-env NODE_ENV=production babel src -d dist --ignore 'src/**/*.test.js' --copy-files","clean":"del-cli dist","lint":"eslint --cache --fix src","prebuild":"npm run clean","prepublish":"npm run build","security":"nsp check","test":"jest","test:watch":"jest --watch","test:coverage":"jest --collectCoverageFrom='src/**/*.js' --coverage","test:example":"npm run build && webpack-dev-server test/manual/src/index.js --config test/manual/webpack.config.js","ci:lint":"npm run lint && npm run security","ci:test":"npm run test -- --runInBand","ci:coverage":"npm run test:coverage -- --runInBand","build:example":"npm run build && webpack-dev-server test/manual/src/index.js --open --config test/manual/webpack.config.js","cm":"git-cz","release":"standard-version","semantic-release":"semantic-release pre && npm publish && semantic-release post","travis":"npm run ci:coverage"},"peerDependencies":{"webpack":"^4.8.3"},"dependencies":{"loader-utils":"^1.1.0","lodash":"^4.17.5","normalize-url":"^1.9.1","webpack-sources":"^1.1.0"},"devDependencies":{"@webpack-contrib/eslint-config-webpack":"^2.0.4","babel-cli":"^6.26.0","babel-eslint":"^7.2.3","babel-jest":"^22.2.2","babel-loader":"^7.1.4","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-polyfill":"^6.26.0","babel-preset-env":"^1.6.1","commitizen":"^2.10.1","conventional-github-releaser":"^2.0.2","cross-env":"^5.1.3","css-loader":"^0.28.10","cz-conventional-changelog":"^2.1.0","del":"^3.0.0","del-cli":"^1.1.0","eslint":"^3.19.0","eslint-config-airbnb":"^15.0.1","eslint-plugin-flowtype":"^2.32.1","eslint-plugin-import":"^2.8.0","eslint-plugin-jsx-a11y":"^5.0.3","eslint-plugin-prettier":"^2.6.0","eslint-plugin-react":"^7.0.1","husky":"^0.14.3","jest":"^22.2.2","memory-fs":"^0.4.1","nsp":"^3.1.0","pre-commit":"^1.2.2","prettier":"^1.11.1","standard-version":"^4.3.0","webpack":"4.8.3","webpack-cli":"^2.0.13","webpack-dev-server":"^3.1.1"},"homepage":"http://github.com/faceyspacey/extract-css-chunks-webpack-plugin","repository":{"type":"git","url":"git+https://github.com/faceyspacey/extract-css-chunks-webpack-plugin.git"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"readme":"<a href=\"https://gitter.im/Reactlandia/Lobby\" target=\"_blank\">\n  <img alt=\"Edit Redux-First Router Demo\" src=\"http://cdn.reactlandia.com/chat-badge-reactlandia.png\">\n</a>\n\n\n# extract-css-chunks-webpack-plugin\n\n<p align=\"center\">\n  <a href=\"https://www.npmjs.com/package/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://img.shields.io/npm/v/extract-css-chunks-webpack-plugin.svg\" alt=\"Version\" />\n  </a>\n\n  <a href=\"https://travis-ci.org/faceyspacey/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://travis-ci.org/faceyspacey/extract-css-chunks-webpack-plugin.svg?branch=master\" alt=\"Build Status\" />\n  </a>\n\n  <a href=\"https://www.npmjs.com/package/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://img.shields.io/npm/dt/extract-css-chunks-webpack-plugin.svg\" alt=\"Downloads\" />\n  </a>\n\n  <a href=\"https://www.npmjs.com/package/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://img.shields.io/npm/dm/extract-css-chunks-webpack-plugin.svg\" alt=\"License\" />\n  </a>\n  \n  <a href=\"https://www.npmjs.com/package/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://img.shields.io/npm/l/extract-css-chunks-webpack-plugin.svg\" alt=\"License\" />\n  </a>\n</p>\n\n<h2 align=\"center\">🍾🍾🍾It's our absolute pleasure to announce Webpack 4 Support 🚀🚀🚀</h2>\n\n> **HEADLINES (May 2018): Now Independently supports Webpack 4:** \nYep that's right. The universal family is now fully Webpack 4. Thank you to all our users for your loyalty and patience! If you love Universal, then you are gonna fall head over heels when we bring out the main course! \n\nSo... why did we rebuild `extract-css-chunks`? What does it offer? \n\nIt's got all the goodness of `mini-css-extract-plugin` but with 2 gleaming, sought after benefits. \n\nCompared to the existing loaders, we are offering a single solution as opposed to needing to depend on multiple loaders to cater for different features:\n\n## Perks\n* **HMR:** It also has first-class support for **Hot Module Replacement** across ALL those css files/chunks!!!\n* cacheable stylesheets \n* smallest total bytes sent compared to \"render-path\" css-in-js solutions that include your CSS definitions in JS\n* Faster than the V2!\n* Async loading\n* No duplicate compilation (performance)\n* Easier to use\n* Specific to CSS\n* SSR Friendly development build, focused on frontend DX\n* Works seamlessly with the Universal family\n* Works fantastically as a standalone style loader (You can use it for any webpack project! with no extra dependencies!)\n\nAdditionally, if you are already a user of the universal family -- we will be waving goodbye to the mandatory ```window.__CSS_CHUNKS__```.\n\nThe functionality is still available to you via chunk flushing, and it can come in super handy when needing to easily resolve style assets as urls that might need to be passed to a third party.\n\n## Webpack 4 Standalone Installation:\n\nIf you are just looking for something that works like `mini-css-extract-plugin` but with HMR, then look no further.\n\nNOTE: We have aligned out loader implementation to be the same as `mini-css-extract-plugin` \n\n**If you already use `mini-css-extract-plugin`, then you can just change the `require` statement - it's that easy**\n\n```\nyarn add --dev extract-css-chunks-webpack-plugin\n```\n\n*webpack.config.js:*\n```js\nconst ExtractCssChunks = require(\"extract-css-chunks-webpack-plugin\")\n\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [\n           ExtractCssChunks.loader,\n           \"css-loader\"\n         ]\n      }\n    ]\n  },\n  plugins: [\n    new ExtractCssChunks(\n        {\n          // Options similar to the same options in webpackOptions.output\n          // both options are optional\n          filename: \"[name].css\",\n          chunkFilename: \"[id].css\",\n          hot: true // optional as the plugin cannot automatically detect if you are using HOT, not for production use\n        }\n    ),\n  ]\n}\n```\n\n*webpack.server.config.js*\n\nThe server needs to be handled differently, we still want one chunk. Luckily webpack 4 supports **LimitChunkCountPlugin**\n\n```js\nnew webpack.optimize.LimitChunkCountPlugin({\n    maxChunks: 1\n})\n```\n\n\n### What about Webpack 3?\nThis is a breaking change. The entire loader has been fundamentally rewritten specifically for Webpack 4. Aiming to support our existing user base, allowing them to upgrade their infrastructure to support Webpack 4 based universally code-split server-side rendered react applications. \n\nThere have been some challenges along the way since the release of webpack 4. Ultimately the only remaining hurdle is code split, async style loading. \n\nIf you do need Webpack 3, make sure to stick with the latest `v2.x.x` release. `v3.x.x` is only intended for users with Webpack 4\n\n\n\n\n*Note: this is a companion package to:*\n- [webpack-flush-chunks](https://github.com/faceyspacey/webpack-flush-chunks) \n- [react-universal-component](https://github.com/faceyspacey/react-universal-component)\n- [babel-plugin-universal-import](https://github.com/faceyspacey/babel-plugin-universal-import) ***or*** [babel-plugin-dual-import](https://github.com/faceyspacey/babel-plugin-dual-import)\n\n\n## Recommended Installation For Universal\n```\nyarn add react-universal-component webpack-flush-chunks\nyarn add --dev extract-css-chunks-webpack-plugin babel-plugin-universal-import\n```\n\n*.babelrc:*\n```js\n{\n  \"plugins\": [\"universal-import\"]\n}\n```\nThe main thing is you need to cater to the new chunking system of webpack!\nWith **webpack.optimize.CommonsChunkPlugin** plugin no longer part of Webpack 4, we need another way to define the code-splitting. Luckily we have `optimization` configs built into webpack now\n\n*webpack.config.js:*\n```js\nconst ExtractCssChunks = require(\"extract-css-chunks-webpack-plugin\")\n\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [\n          ExtractCssChunks.loader,\n          {\n            loader: 'css-loader',\n            options: {\n              modules: true,\n              localIdentName: '[name]__[local]--[hash:base64:5]',\n            },\n          },\n        ],\n      },\n    ],\n  },\n  optimization: {\n      // FOR PRODUCTION\n      minimizer: [\n          new UglifyJSPlugin({\n              uglifyOptions: {\n                  output: {\n                      comments: false,\n                      ascii_only: true\n                  },\n                  compress: {\n                      comparisons: false\n                  }\n              }\n          })\n      ],\n      // END\n      // NEEDED BOTH IN PROD AND DEV BUILDS\n      runtimeChunk: {\n          name: 'bootstrap'\n      },\n      splitChunks: {\n          chunks: 'initial', // <-- The key to this\n          cacheGroups: {\n              vendors: {\n                  test: /[\\\\/]node_modules[\\\\/]/,\n                  name: 'vendor'\n              }\n          }\n      }\n  },\n  plugins: [\n    new ExtractCssChunks({hot:true}), //if you want HMR - we try to automatically inject hot reloading but if it's not working, add it to the config\n  ]\n};\n```\n\n## Desired Output\nHere's the sort of CSS you can expect to serve:\n\n```\n<head>\n\t<link rel='stylesheet' href='/static/main.css' />\n\t<link rel='stylesheet' href='/static/0.css' />\n\t<link rel='stylesheet' href='/static/7.css' />\n</head> \n\n<body>\n\t<div id=\"react-root\"></div>\n\t\n\t<script type='text/javascript' src='/static/vendor.js'></script>\n\t<script type='text/javascript' src='/static/0.js'></script>\n\t<script type='text/javascript' src='/static/7.js'></script>\n\t<script type='text/javascript' src='/static/main.js'></script>\n</body>\n```\n\nIf you need to resolve your stylesheets on the client side, for whatever reason. \n\n[webpack-flush-chunks](https://github.com/faceyspacey/webpack-flush-chunks) will scoop up the exact stylesheets to embed in your response. It will give you an object which can be embedded on page\n\nHere's how you do it:\n\n\n*src/components/App.js:*\n```js\nconst UniversalComponent = universal(props => import(`./${props.page}`))\n\n<UniversalComponent page='Foo' />\n```\n\n*server/render.js:*\n```js\nimport { flushChunkNames } from 'react-universal-component/server'\nimport flushChunks from 'webpack-flush-chunks'\n\nconst app = ReactDOMServer.renderToString(<App />)\nconst { js, styles, cssHash } = flushChunks(webpackStats, {\n  chunkNames: flushChunkNames()\n})\n\nres.send(`\n  <!doctype html>\n  <html>\n    <head>\n      ${styles}\n    </head>\n    <body>\n      <div id=\"root\">${app}</div>\n      <!-- not needed unless you want to access css chunks urls manually  -->\n      ${cssHash}\n      <!-- extract-css-chunks takes care of loading the css assets automatically -->\n      ${js}\n    </body>\n  </html>\n`)\n```\n\n***As for asynchronous calls to `import()` on user navigation,*** [babel-plugin-universal-import](https://github.com/faceyspacey/babel-plugin-universal-import) is required if you're using [react-universal-component](https://github.com/faceyspacey/react-universal-component). And if you aren't, you must use: [babel-plugin-dual-import](https://github.com/faceyspacey/babel-plugin-dual-import). \n\n\nThese babel plugins request both your js + your css. *Very Nice!* This is the new feature of the 2.0. Read *Sokra's* (author of webpack) article on how [on how this is the future of CSS for webpack](https://medium.com/webpack/the-new-css-workflow-step-1-79583bd107d7). Use this and be in the future today.\n\n\n## API \nYou can pass the same options as `mini-css-extract` to `new ExtractCssChunks`, such as:\n\n```javascript\nnew ExtractCssChunk({\n      filename: devMode ? '[name].css' : '[name].[hash].css',\n      chunkFilename: devMode ? '[id].css' : '[id].[hash].css',\n})\n```\n\n>Keep in mind, by default `[name].css` is used when `process.env.NODE_ENV === 'development'` and `[name].[contenthash].css` during production, so you can likely forget about having to pass anything.\n\n### HMR Pitfall\n\nThe most common workflow when working with webpack is to write a \"development\" / \"production\" value in to the\n'process.env.NODE_ENV' namespace, typically, using webpack's built-in \"DefinePlugin\" plugin. e.g:\n\n```javascript\nnew webpack.DefinePlugin( {\n     'process.env': {\n        NODE_ENV: `\"${config.devMode ? 'development' : 'production'}\"`,\n      },\n} )\n```\nThe value set by the aforementioned plugin will only be available in the runtime ( when webpack's javascript output is executed ).\nIn order for this plugin to work with hot module reloading, The npm script / gulp task / grunt task etc, should be invoked with the same environment variable as shown above.\n\nFor example, when running the build using some form of npm script:\n\n```json\n{\n  \"scripts\": {\n     \"build\": \"cross-env NODE_ENV=production babel src -d dist --ignore 'src/**/*.test.js' --copy-files\"\n  }\n}\n```\n[cross-env](https://www.npmjs.com/package/cross-env) is optional but recommended. \n\n### What about Glamorous, Styled Components, Styled-Jsx, Aphrodite, etc?\n\nIf you effectively use code-splitting, **Extract Css Chunks** can be a far better option than using emerging solutions like *Glamorous*, *Styled Components*, and slightly older tools like *Aphrodite*, *Glamor*, etc. We aren't fans of either rounds of tools because of several issues, but particularly because they all have a runtime overhead. Every time your React component is rendered with those, CSS is generated and updated within the DOM. On the server, you're going to also see unnecessary cycles for flushing the CSS along the critical render path. *Next.js's* `styled-jsx`, by the way, doesn't even work on the server--*not so good when it comes to flash of unstyled content (FOUC).*\n\nThe reason **Extract CSS Chunk** can be a better option is because **we also generate multiple sets of CSS based on what is actually \"used\",** ***but without the runtime overhead***. The difference is our definition of \"used\" is modules determined *statically* (which may not in fact be rendered) vs. what is in the \"critical render path\" (as is the case with the other tools). \n\nSo yes, our CSS may be mildly larger and include unnecessary css, but our `no_css.js` bundles will be a lot smaller as they don't need to inject any styles. See, even though those solutions have the smallest possible CSS file size, their javascript bundles, **in order to continue to render your components styled properly on the client,** must contain the necessary CSS for all possibilities! Those solutions serve both your entire bundle's CSS (in your javascript) **and** the CSS flushed from the critical render path. \n\nOn top of that, those are extra packages all with a huge number of issues in their Github repos corresponding to various limitations in the CSS they generate--something that is prevented when your definition for \"CSS-in-JS\" is simply importing CSS files compiled as normal by powerful proven CSS-specific processors.\n\nLastly, those solutions don't provide cacheable stylesheets. They do a lot of work--but they will **continue** doing it for you when you could have been done in one go long ago. Cloudflare is free--serve them through their CDN and you're winning. I love true javascript in css--don't get me wrong--but first I'd have to see they generate cacheable stylesheets. In my opinion, for now, it's best for environments that natively support it such as React Native.\n\n\n### Next:\n\nNow with that out of the way, for completeness let's compare what bytes of just the CSS are sent over the wire. The difference basically is minimal. Whereas solutions that flush from the critical render path will capture no more than the precise bits of CSS from the `if/else` branches followed, **Extract Css Chunks** is all about you effectively using code-splitting to insure, for example, you don't serve your Administration Panel's CSS in your public-facing site, etc. *In other words, it's all about avoiding serving large swaths of CSS from completely different sections of your app.* ***I.e. the biggest gains available to you.*** \n\n<details>\n<summary>\n    Read more on the topic ^^\n</summary>\n\nThis is where the real problem lies--where the real amount of unnecessary CSS comes from. If you effectively code-split your app, you may end up with 10 chunks. Now you can serve just the corresponding CSS for that chunk. If you try to go even farther and remove the css not used in the render path, you're likely achieving somewhere between 1-20% of the gains you achieved by thorough code-splitting. In other words, code splitting fulfills the 80/20 rule and attains the simple sweetspot of 80% optimization you--*as a balanced, level-headed, non-neurotic and professional developer*--are looking to achieve.\n\n*In short, by putting code splitting in appropriate places you have a lot of control over the CSS files that are created and can send a sensible* ***minimal*** *amount of associated bytes over the wire for the first request, perhaps even the smallest amount of all options.* \n\nIt's our perspective that you have achieved 80-99% of the performance gains (i.e. the creation of small relevant css files) at this ***static stage***. Offloading this work to the runtime stage is ultimately nit-picking and results in diminishing returns. When you factor that your JS bundle has to contain that JS anyway, those solutions make less and less sense from the perspective of reducing bytes delivered in the initial request. \n\nThere may be other reasons to use those tools (e.g. you don't like setting up webpack configs, or somehow you're really fond of pre-creating many `<div />` elements with their styles), but we prefer a simple standards-based way (without HoCs or specialized style components) to import styles just as you would in React Native. However to give the other tools credit, many of them likely started out with a different problem motivating them: avoiding webpack configs so you can include packages and their contained CSS without client apps being required to setup something like CSS loaders in Webpack. Having your CSS completely contained in true JS has its use cases, but at the application level--especially when you're already using something like Webpack--we fail to see its benefits. About all they share is a solution to avoiding **flashes of unstyled content** (FOUC), except one can save you a lot more bytes in what you send over the wire and save you from a continual runtime overhead where it's not needed. ***Honorable Mention:*** *StyleTron's concept of \"atomic declaration-level deduplication\" where it will make a class out of, say, `color: blue` so you don't need to send redundant styles certainly is a novel innovation, but again if the code still exists in your JS and you're building an application using Webpack (instead of a package), what's the point. In fact, it just makes editing the stylesheets in your browser developer tools more complicated. One benefit of critical render path solutions is the browser can spend less time matching the smaller number of styles to new DOM nodes as they appear, but then again it also has to spend the time injecting and parsing the new styles constantly, which is likely costlier.*\n\nAs an aside, so many apps share code between web and React Native--so the answer to the styles problem must be one that is identical for both. From that perspective importing a styles object **still** makes a lot of sense. **You're not missing out on the fundamental aspect of CSS-in-JSS:** ***isolated component-level styles and the ability to import them just like any other javascript code.*** Put them in other files, and use tools like `extract-css-chunks-webpack-plugin` and your pre-processors of choice that innately get styles right for the browser. As long as you're using **CSS Modules**, you're still at the cutting edge of CSS-in-JSS. Let's just say the other tools took one wrong turn and took it too far, when we already were at our destination. \n</details>\n\n\n#### SUMMARY OF BENEFITS COMPARED TO \"CRITICAL-RENDER-PATH\" SOLUTIONS:\n\n- no continual runtime overhead during `render` using HoCs that inject styles\n- smaller JS bundles without CSS injection\n- **You DO NOT need to clutter your component code with a specialized way of applying CSS (HoCs, styled elements)!** \n- The way you import module-based styles is exactly how you would import styles in React Native that exist in a separate file, which allows for extremely interchangeable code between React Native and regular React. Hurray! \n- pretty much already does everything covered by [@vjeux's 2014 css-in-js talk](https://speakerdeck.com/vjeux/react-css-in-js), besides dead code elimination. Dead code elimination is only solved for the other tools--as per the explanation above how the CSS is in the JS anyway--so much as Webpack and Uglify can remove **JS** that is not used. Either way, it's not a stretch to eventually add this feature to `extract-text-webpack-plugin` as well as this plugin. Hey, maybe it already has it??\n\n## Emotion!\n\n[Emotion](https://github.com/tkh44/emotion) is different. They allow for the extraction of static styles via their *extract mode*. We're very much looking forward to this being the perfect companion to the css chunks approach. \n<details>\n<summary>\n    Read more on the topic ^^\n</summary>\n\nCurrently however *extract mode* does not support IE11. So that means it's a no go, but we have hopes that in the future they'll solve that problem.\n\nThe reason Emotion doesn't work in IE11+ is because they currently try to preserve any dynamic aspects of your CSS-in-JS by converting it CSS vars, which isn't supported in IE11. That was a very smart approach, but unfortunately not good enough. \n\nThe vision we'd like to see for that package is where dynamic css stays inline, and where only static CSS is extracted into stylesheets, in which case CSS vars aren't needed. I've heard from them they have some \"hidden flags\" that allow for something close to this. When, and if, they take this feature all the way, look forward to us pushing it as our recommended approach. *Go Emotion!*\n</details>\n\n## Linaria\n\nLinaria is another modern CSS-in-JSS library. It's focused around static styles, which may make it a perfect fit for usage with this plugin. Check it out:\n\nhttps://github.com/callstack/linaria\n\n## What if I don't use SSR and use html-webpack-plugin?\n\nFor that case you can use [css-chunks-html-webpack-plugin](https://github.com/teamable-software/css-chunks-html-webpack-plugin) which will extract CSS chunks paths into your HTML file.\n\n## Conclusion:\n**We love CSS modules; no less, no more.**\n\n**Long live the dream of Code Splitting Everywhere!**\n\n\n## Contributing\nWe use [commitizen](https://github.com/commitizen/cz-cli), so run `npm run cm` to make commits. A command-line form will appear, requiring you answer a few questions to automatically produce a nicely formatted commit. Releases, semantic version numbers, tags and changelogs will automatically be generated based on these commits thanks to [semantic-release](https://github.com/semantic-release/semantic-release). Be good.\n\n## More from FaceySpacey in Reactlandia\n- [redux-first-router](https://github.com/faceyspacey/redux-first-router). It's made to work perfectly with *Universal*. Together they comprise our *\"frameworkless\"* Redux-based approach to what Next.js does (splitting, SSR, prefetching, and routing). *People are lovin it by the way* 😎\n","readmeFilename":"README.md","gitHead":"58966be8b6836fc8e8c384cbd4be0cc5b4b81eaf","bugs":{"url":"https://github.com/faceyspacey/extract-css-chunks-webpack-plugin/issues"},"_id":"extract-css-chunks-webpack-plugin@3.1.0-beta.1","_npmVersion":"5.5.1","_nodeVersion":"8.9.0","_npmUser":{"name":"zackljackson","email":"zackary.l.jackson@gmail.com"},"dist":{"integrity":"sha512-Tqa20M4EiBbq01DJdx4JtofYwqBY9fJSQCa3/TtpSRXxYs55qhxaSw8Chum+Jqt4+/RvOPpg2zMmY/g24/ycSg==","shasum":"3ef6b31326af0f2a480d384a5e8c2fdfcb356478","tarball":"https://registry.npmjs.org/extract-css-chunks-webpack-plugin/-/extract-css-chunks-webpack-plugin-3.1.0-beta.1.tgz","fileCount":8,"unpackedSize":49652,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbTjCDCRA9TVsSAnZWagAAVF0P/00J07fztozCPo3st8h3\nevJxUS8hq0LKf9y/j+FT7JRXR8y8vuVeb3bJyepyRLZdz6AOty/jNJXh/6TX\nmy7jO+drbvmhC6wcYlEH3VuHXimv51eLiTE6IABoVr+ITSj0pruuZewt8883\nKX4htH/jzTrFzhfDyJ7VuxA0148x0Za1ZR1Xi6kMLuiHtHO6d9uKvaOlngfE\n9v8rnAJkO+hIXWlTRTrcrwhFnH2WwUHHHvuFOchnqQSjtCbEr+XbBfpRyl/u\nuHLesqpKcN85Jc7QRoi8Xon5LJ8t2aCfAqAze/CaohRZID6oh8zqVhnVjuYK\nHwxYmmIH1Pg1Wr+eAMfM1UJ/fmEyxGIFmuO73VE+cvltAVJShpZHcXtYIFXc\nnnKs+hwppxLDBB8h4CupTv2tTI1U9yLYbquz5HF3XtylIN22NPI/3K5JI1KD\nTn31qlNgWd2esdFehXVL99kXOPqAAb46P8xTNaT7Hrh0FaSw/dPwaVPH/PuJ\nAn44MK531TvPn6bGbz2fpPW86Y3JLDt5Hs5vbDFszx9ZWA4e4ozbk7GWPVSH\naLs528rr6Ob9WXDJsGwakzxIqSFPzUT4IZkAwbVgpRJ+r4h6VP3zWSSK6QwK\nRsC7U39EkqOI27Zy92/f1UhQIcD6jjSg9GtPvWG8V/2gIwyuxx5Vu2BveAaI\nGeKL\r\n=6x9e\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCRz7q30QRrYDHh8X1fKmI2yltGLM7z9utZNfaCMkh44QIhAKVgUqJLsNx8UPPdYrTHEiRNj4qQGutrlDiOUaV4okcA"}]},"maintainers":[{"email":"james@faceyspacey.com","name":"faceyspacey"},{"email":"zackary.l.jackson@gmail.com","name":"zackljackson"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/extract-css-chunks-webpack-plugin_3.1.0-beta.1_1531850883320_0.3083452788456924"},"_hasShrinkwrap":false},"3.1.0-beta.2":{"name":"extract-css-chunks-webpack-plugin","version":"3.1.0-beta.2","author":{"name":"James Gillmore","email":"james@faceyspacey.com"},"contributors":[{"name":"Zack Jackson","email":"zackary.l.jackson@gmail.com","url":"https://github.com/ScriptedAlchemy"}],"description":"Extract CSS from chunks into stylesheets + HMR. Supports Webpack 4","engines":{"node":">= 6.9.0 <7.0.0 || >= 8.9.0"},"main":"dist/cjs.js","files":["dist"],"keywords":["css","chunks","code splitting","mini-css","hot","hmr","universal","webpack","webpack 4"],"license":"MIT","scripts":{"start":"npm run build -- -w","build":"cross-env NODE_ENV=production babel src -d dist --ignore 'src/**/*.test.js' --copy-files","clean":"del-cli dist","lint":"eslint --cache --fix src","prebuild":"npm run clean","prepublish":"npm run build","security":"nsp check","test":"jest","test:watch":"jest --watch","test:coverage":"jest --collectCoverageFrom='src/**/*.js' --coverage","test:example":"npm run build && webpack-dev-server test/manual/src/index.js --config test/manual/webpack.config.js","ci:lint":"npm run lint && npm run security","ci:test":"npm run test -- --runInBand","ci:coverage":"npm run test:coverage -- --runInBand","build:example":"npm run build && webpack-dev-server test/manual/src/index.js --open --config test/manual/webpack.config.js","cm":"git-cz","release":"standard-version","semantic-release":"semantic-release pre && npm publish && semantic-release post","travis":"npm run ci:coverage"},"peerDependencies":{"webpack":"^4.8.3"},"dependencies":{"loader-utils":"^1.1.0","lodash":"^4.17.5","normalize-url":"^1.9.1","webpack-sources":"^1.1.0"},"devDependencies":{"@webpack-contrib/eslint-config-webpack":"^2.0.4","babel-cli":"^6.26.0","babel-eslint":"^7.2.3","babel-jest":"^22.2.2","babel-loader":"^7.1.4","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-polyfill":"^6.26.0","babel-preset-env":"^1.6.1","commitizen":"^2.10.1","conventional-github-releaser":"^2.0.2","cross-env":"^5.1.3","css-loader":"^0.28.10","cz-conventional-changelog":"^2.1.0","del":"^3.0.0","del-cli":"^1.1.0","eslint":"^3.19.0","eslint-config-airbnb":"^15.0.1","eslint-plugin-flowtype":"^2.32.1","eslint-plugin-import":"^2.8.0","eslint-plugin-jsx-a11y":"^5.0.3","eslint-plugin-prettier":"^2.6.0","eslint-plugin-react":"^7.0.1","husky":"^0.14.3","jest":"^22.2.2","memory-fs":"^0.4.1","nsp":"^3.1.0","pre-commit":"^1.2.2","prettier":"^1.11.1","standard-version":"^4.3.0","webpack":"4.8.3","webpack-cli":"^2.0.13","webpack-dev-server":"^3.1.1"},"homepage":"http://github.com/faceyspacey/extract-css-chunks-webpack-plugin","repository":{"type":"git","url":"git+https://github.com/faceyspacey/extract-css-chunks-webpack-plugin.git"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"readme":"<a href=\"https://gitter.im/Reactlandia/Lobby\" target=\"_blank\">\n  <img alt=\"Edit Redux-First Router Demo\" src=\"http://cdn.reactlandia.com/chat-badge-reactlandia.png\">\n</a>\n\n\n# extract-css-chunks-webpack-plugin\n\n<p align=\"center\">\n  <a href=\"https://www.npmjs.com/package/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://img.shields.io/npm/v/extract-css-chunks-webpack-plugin.svg\" alt=\"Version\" />\n  </a>\n\n  <a href=\"https://travis-ci.org/faceyspacey/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://travis-ci.org/faceyspacey/extract-css-chunks-webpack-plugin.svg?branch=master\" alt=\"Build Status\" />\n  </a>\n\n  <a href=\"https://www.npmjs.com/package/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://img.shields.io/npm/dt/extract-css-chunks-webpack-plugin.svg\" alt=\"Downloads\" />\n  </a>\n\n  <a href=\"https://www.npmjs.com/package/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://img.shields.io/npm/dm/extract-css-chunks-webpack-plugin.svg\" alt=\"License\" />\n  </a>\n  \n  <a href=\"https://www.npmjs.com/package/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://img.shields.io/npm/l/extract-css-chunks-webpack-plugin.svg\" alt=\"License\" />\n  </a>\n</p>\n\n<h2 align=\"center\">🍾🍾🍾It's our absolute pleasure to announce Webpack 4 Support 🚀🚀🚀</h2>\n\n> **HEADLINES (May 2018): Now Independently supports Webpack 4:** \nYep that's right. The universal family is now fully Webpack 4. Thank you to all our users for your loyalty and patience! If you love Universal, then you are gonna fall head over heels when we bring out the main course! \n\nSo... why did we rebuild `extract-css-chunks`? What does it offer? \n\nIt's got all the goodness of `mini-css-extract-plugin` but with 2 gleaming, sought after benefits. \n\nCompared to the existing loaders, we are offering a single solution as opposed to needing to depend on multiple loaders to cater for different features:\n\n## Perks\n* **HMR:** It also has first-class support for **Hot Module Replacement** across ALL those css files/chunks!!!\n* cacheable stylesheets \n* smallest total bytes sent compared to \"render-path\" css-in-js solutions that include your CSS definitions in JS\n* Faster than the V2!\n* Async loading\n* No duplicate compilation (performance)\n* Easier to use\n* Specific to CSS\n* SSR Friendly development build, focused on frontend DX\n* Works seamlessly with the Universal family\n* Works fantastically as a standalone style loader (You can use it for any webpack project! with no extra dependencies!)\n\nAdditionally, if you are already a user of the universal family -- we will be waving goodbye to the mandatory ```window.__CSS_CHUNKS__```.\n\nThe functionality is still available to you via chunk flushing, and it can come in super handy when needing to easily resolve style assets as urls that might need to be passed to a third party.\n\n## Webpack 4 Standalone Installation:\n\nIf you are just looking for something that works like `mini-css-extract-plugin` but with HMR, then look no further.\n\nNOTE: We have aligned out loader implementation to be the same as `mini-css-extract-plugin` \n\n**If you already use `mini-css-extract-plugin`, then you can just change the `require` statement - it's that easy**\n\n```\nyarn add --dev extract-css-chunks-webpack-plugin\n```\n\n*webpack.config.js:*\n```js\nconst ExtractCssChunks = require(\"extract-css-chunks-webpack-plugin\")\n\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [\n           ExtractCssChunks.loader,\n           \"css-loader\"\n         ]\n      }\n    ]\n  },\n  plugins: [\n    new ExtractCssChunks(\n        {\n          // Options similar to the same options in webpackOptions.output\n          // both options are optional\n          filename: \"[name].css\",\n          chunkFilename: \"[id].css\",\n          hot: true // optional as the plugin cannot automatically detect if you are using HOT, not for production use\n        }\n    ),\n  ]\n}\n```\n\n*webpack.server.config.js*\n\nThe server needs to be handled differently, we still want one chunk. Luckily webpack 4 supports **LimitChunkCountPlugin**\n\n```js\nnew webpack.optimize.LimitChunkCountPlugin({\n    maxChunks: 1\n})\n```\n\n\n### What about Webpack 3?\nThis is a breaking change. The entire loader has been fundamentally rewritten specifically for Webpack 4. Aiming to support our existing user base, allowing them to upgrade their infrastructure to support Webpack 4 based universally code-split server-side rendered react applications. \n\nThere have been some challenges along the way since the release of webpack 4. Ultimately the only remaining hurdle is code split, async style loading. \n\nIf you do need Webpack 3, make sure to stick with the latest `v2.x.x` release. `v3.x.x` is only intended for users with Webpack 4\n\n\n\n\n*Note: this is a companion package to:*\n- [webpack-flush-chunks](https://github.com/faceyspacey/webpack-flush-chunks) \n- [react-universal-component](https://github.com/faceyspacey/react-universal-component)\n- [babel-plugin-universal-import](https://github.com/faceyspacey/babel-plugin-universal-import) ***or*** [babel-plugin-dual-import](https://github.com/faceyspacey/babel-plugin-dual-import)\n\n\n## Recommended Installation For Universal\n```\nyarn add react-universal-component webpack-flush-chunks\nyarn add --dev extract-css-chunks-webpack-plugin babel-plugin-universal-import\n```\n\n*.babelrc:*\n```js\n{\n  \"plugins\": [\"universal-import\"]\n}\n```\nThe main thing is you need to cater to the new chunking system of webpack!\nWith **webpack.optimize.CommonsChunkPlugin** plugin no longer part of Webpack 4, we need another way to define the code-splitting. Luckily we have `optimization` configs built into webpack now\n\n*webpack.config.js:*\n```js\nconst ExtractCssChunks = require(\"extract-css-chunks-webpack-plugin\")\n\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [\n          ExtractCssChunks.loader,\n          {\n            loader: 'css-loader',\n            options: {\n              modules: true,\n              localIdentName: '[name]__[local]--[hash:base64:5]',\n            },\n          },\n        ],\n      },\n    ],\n  },\n  optimization: {\n      // FOR PRODUCTION\n      minimizer: [\n          new UglifyJSPlugin({\n              uglifyOptions: {\n                  output: {\n                      comments: false,\n                      ascii_only: true\n                  },\n                  compress: {\n                      comparisons: false\n                  }\n              }\n          })\n      ],\n      // END\n      // NEEDED BOTH IN PROD AND DEV BUILDS\n      runtimeChunk: {\n          name: 'bootstrap'\n      },\n      splitChunks: {\n          chunks: 'initial', // <-- The key to this\n          cacheGroups: {\n              vendors: {\n                  test: /[\\\\/]node_modules[\\\\/]/,\n                  name: 'vendor'\n              }\n          }\n      }\n  },\n  plugins: [\n    new ExtractCssChunks({hot:true}), //if you want HMR - we try to automatically inject hot reloading but if it's not working, add it to the config\n  ]\n};\n```\n\n## Desired Output\nHere's the sort of CSS you can expect to serve:\n\n```\n<head>\n\t<link rel='stylesheet' href='/static/main.css' />\n\t<link rel='stylesheet' href='/static/0.css' />\n\t<link rel='stylesheet' href='/static/7.css' />\n</head> \n\n<body>\n\t<div id=\"react-root\"></div>\n\t\n\t<script type='text/javascript' src='/static/vendor.js'></script>\n\t<script type='text/javascript' src='/static/0.js'></script>\n\t<script type='text/javascript' src='/static/7.js'></script>\n\t<script type='text/javascript' src='/static/main.js'></script>\n</body>\n```\n\nIf you need to resolve your stylesheets on the client side, for whatever reason. \n\n[webpack-flush-chunks](https://github.com/faceyspacey/webpack-flush-chunks) will scoop up the exact stylesheets to embed in your response. It will give you an object which can be embedded on page\n\nHere's how you do it:\n\n\n*src/components/App.js:*\n```js\nconst UniversalComponent = universal(props => import(`./${props.page}`))\n\n<UniversalComponent page='Foo' />\n```\n\n*server/render.js:*\n```js\nimport { flushChunkNames } from 'react-universal-component/server'\nimport flushChunks from 'webpack-flush-chunks'\n\nconst app = ReactDOMServer.renderToString(<App />)\nconst { js, styles, cssHash } = flushChunks(webpackStats, {\n  chunkNames: flushChunkNames()\n})\n\nres.send(`\n  <!doctype html>\n  <html>\n    <head>\n      ${styles}\n    </head>\n    <body>\n      <div id=\"root\">${app}</div>\n      <!-- not needed unless you want to access css chunks urls manually  -->\n      ${cssHash}\n      <!-- extract-css-chunks takes care of loading the css assets automatically -->\n      ${js}\n    </body>\n  </html>\n`)\n```\n\n***As for asynchronous calls to `import()` on user navigation,*** [babel-plugin-universal-import](https://github.com/faceyspacey/babel-plugin-universal-import) is required if you're using [react-universal-component](https://github.com/faceyspacey/react-universal-component). And if you aren't, you must use: [babel-plugin-dual-import](https://github.com/faceyspacey/babel-plugin-dual-import). \n\n\nThese babel plugins request both your js + your css. *Very Nice!* This is the new feature of the 2.0. Read *Sokra's* (author of webpack) article on how [on how this is the future of CSS for webpack](https://medium.com/webpack/the-new-css-workflow-step-1-79583bd107d7). Use this and be in the future today.\n\n\n## API \nYou can pass the same options as `mini-css-extract` to `new ExtractCssChunks`, such as:\n\n```javascript\nnew ExtractCssChunk({\n      filename: devMode ? '[name].css' : '[name].[hash].css',\n      chunkFilename: devMode ? '[id].css' : '[id].[hash].css',\n})\n```\n\n>Keep in mind, by default `[name].css` is used when `process.env.NODE_ENV === 'development'` and `[name].[contenthash].css` during production, so you can likely forget about having to pass anything.\n\n### HMR Pitfall\n\nThe most common workflow when working with webpack is to write a \"development\" / \"production\" value in to the\n'process.env.NODE_ENV' namespace, typically, using webpack's built-in \"DefinePlugin\" plugin. e.g:\n\n```javascript\nnew webpack.DefinePlugin( {\n     'process.env': {\n        NODE_ENV: `\"${config.devMode ? 'development' : 'production'}\"`,\n      },\n} )\n```\nThe value set by the aforementioned plugin will only be available in the runtime ( when webpack's javascript output is executed ).\nIn order for this plugin to work with hot module reloading, The npm script / gulp task / grunt task etc, should be invoked with the same environment variable as shown above.\n\nFor example, when running the build using some form of npm script:\n\n```json\n{\n  \"scripts\": {\n     \"build\": \"cross-env NODE_ENV=production babel src -d dist --ignore 'src/**/*.test.js' --copy-files\"\n  }\n}\n```\n[cross-env](https://www.npmjs.com/package/cross-env) is optional but recommended. \n\n### What about Glamorous, Styled Components, Styled-Jsx, Aphrodite, etc?\n\nIf you effectively use code-splitting, **Extract Css Chunks** can be a far better option than using emerging solutions like *Glamorous*, *Styled Components*, and slightly older tools like *Aphrodite*, *Glamor*, etc. We aren't fans of either rounds of tools because of several issues, but particularly because they all have a runtime overhead. Every time your React component is rendered with those, CSS is generated and updated within the DOM. On the server, you're going to also see unnecessary cycles for flushing the CSS along the critical render path. *Next.js's* `styled-jsx`, by the way, doesn't even work on the server--*not so good when it comes to flash of unstyled content (FOUC).*\n\nThe reason **Extract CSS Chunk** can be a better option is because **we also generate multiple sets of CSS based on what is actually \"used\",** ***but without the runtime overhead***. The difference is our definition of \"used\" is modules determined *statically* (which may not in fact be rendered) vs. what is in the \"critical render path\" (as is the case with the other tools). \n\nSo yes, our CSS may be mildly larger and include unnecessary css, but our `no_css.js` bundles will be a lot smaller as they don't need to inject any styles. See, even though those solutions have the smallest possible CSS file size, their javascript bundles, **in order to continue to render your components styled properly on the client,** must contain the necessary CSS for all possibilities! Those solutions serve both your entire bundle's CSS (in your javascript) **and** the CSS flushed from the critical render path. \n\nOn top of that, those are extra packages all with a huge number of issues in their Github repos corresponding to various limitations in the CSS they generate--something that is prevented when your definition for \"CSS-in-JS\" is simply importing CSS files compiled as normal by powerful proven CSS-specific processors.\n\nLastly, those solutions don't provide cacheable stylesheets. They do a lot of work--but they will **continue** doing it for you when you could have been done in one go long ago. Cloudflare is free--serve them through their CDN and you're winning. I love true javascript in css--don't get me wrong--but first I'd have to see they generate cacheable stylesheets. In my opinion, for now, it's best for environments that natively support it such as React Native.\n\n\n### Next:\n\nNow with that out of the way, for completeness let's compare what bytes of just the CSS are sent over the wire. The difference basically is minimal. Whereas solutions that flush from the critical render path will capture no more than the precise bits of CSS from the `if/else` branches followed, **Extract Css Chunks** is all about you effectively using code-splitting to insure, for example, you don't serve your Administration Panel's CSS in your public-facing site, etc. *In other words, it's all about avoiding serving large swaths of CSS from completely different sections of your app.* ***I.e. the biggest gains available to you.*** \n\n<details>\n<summary>\n    Read more on the topic ^^\n</summary>\n\nThis is where the real problem lies--where the real amount of unnecessary CSS comes from. If you effectively code-split your app, you may end up with 10 chunks. Now you can serve just the corresponding CSS for that chunk. If you try to go even farther and remove the css not used in the render path, you're likely achieving somewhere between 1-20% of the gains you achieved by thorough code-splitting. In other words, code splitting fulfills the 80/20 rule and attains the simple sweetspot of 80% optimization you--*as a balanced, level-headed, non-neurotic and professional developer*--are looking to achieve.\n\n*In short, by putting code splitting in appropriate places you have a lot of control over the CSS files that are created and can send a sensible* ***minimal*** *amount of associated bytes over the wire for the first request, perhaps even the smallest amount of all options.* \n\nIt's our perspective that you have achieved 80-99% of the performance gains (i.e. the creation of small relevant css files) at this ***static stage***. Offloading this work to the runtime stage is ultimately nit-picking and results in diminishing returns. When you factor that your JS bundle has to contain that JS anyway, those solutions make less and less sense from the perspective of reducing bytes delivered in the initial request. \n\nThere may be other reasons to use those tools (e.g. you don't like setting up webpack configs, or somehow you're really fond of pre-creating many `<div />` elements with their styles), but we prefer a simple standards-based way (without HoCs or specialized style components) to import styles just as you would in React Native. However to give the other tools credit, many of them likely started out with a different problem motivating them: avoiding webpack configs so you can include packages and their contained CSS without client apps being required to setup something like CSS loaders in Webpack. Having your CSS completely contained in true JS has its use cases, but at the application level--especially when you're already using something like Webpack--we fail to see its benefits. About all they share is a solution to avoiding **flashes of unstyled content** (FOUC), except one can save you a lot more bytes in what you send over the wire and save you from a continual runtime overhead where it's not needed. ***Honorable Mention:*** *StyleTron's concept of \"atomic declaration-level deduplication\" where it will make a class out of, say, `color: blue` so you don't need to send redundant styles certainly is a novel innovation, but again if the code still exists in your JS and you're building an application using Webpack (instead of a package), what's the point. In fact, it just makes editing the stylesheets in your browser developer tools more complicated. One benefit of critical render path solutions is the browser can spend less time matching the smaller number of styles to new DOM nodes as they appear, but then again it also has to spend the time injecting and parsing the new styles constantly, which is likely costlier.*\n\nAs an aside, so many apps share code between web and React Native--so the answer to the styles problem must be one that is identical for both. From that perspective importing a styles object **still** makes a lot of sense. **You're not missing out on the fundamental aspect of CSS-in-JSS:** ***isolated component-level styles and the ability to import them just like any other javascript code.*** Put them in other files, and use tools like `extract-css-chunks-webpack-plugin` and your pre-processors of choice that innately get styles right for the browser. As long as you're using **CSS Modules**, you're still at the cutting edge of CSS-in-JSS. Let's just say the other tools took one wrong turn and took it too far, when we already were at our destination. \n</details>\n\n\n#### SUMMARY OF BENEFITS COMPARED TO \"CRITICAL-RENDER-PATH\" SOLUTIONS:\n\n- no continual runtime overhead during `render` using HoCs that inject styles\n- smaller JS bundles without CSS injection\n- **You DO NOT need to clutter your component code with a specialized way of applying CSS (HoCs, styled elements)!** \n- The way you import module-based styles is exactly how you would import styles in React Native that exist in a separate file, which allows for extremely interchangeable code between React Native and regular React. Hurray! \n- pretty much already does everything covered by [@vjeux's 2014 css-in-js talk](https://speakerdeck.com/vjeux/react-css-in-js), besides dead code elimination. Dead code elimination is only solved for the other tools--as per the explanation above how the CSS is in the JS anyway--so much as Webpack and Uglify can remove **JS** that is not used. Either way, it's not a stretch to eventually add this feature to `extract-text-webpack-plugin` as well as this plugin. Hey, maybe it already has it??\n\n## Emotion!\n\n[Emotion](https://github.com/tkh44/emotion) is different. They allow for the extraction of static styles via their *extract mode*. We're very much looking forward to this being the perfect companion to the css chunks approach. \n<details>\n<summary>\n    Read more on the topic ^^\n</summary>\n\nCurrently however *extract mode* does not support IE11. So that means it's a no go, but we have hopes that in the future they'll solve that problem.\n\nThe reason Emotion doesn't work in IE11+ is because they currently try to preserve any dynamic aspects of your CSS-in-JS by converting it CSS vars, which isn't supported in IE11. That was a very smart approach, but unfortunately not good enough. \n\nThe vision we'd like to see for that package is where dynamic css stays inline, and where only static CSS is extracted into stylesheets, in which case CSS vars aren't needed. I've heard from them they have some \"hidden flags\" that allow for something close to this. When, and if, they take this feature all the way, look forward to us pushing it as our recommended approach. *Go Emotion!*\n</details>\n\n## Linaria\n\nLinaria is another modern CSS-in-JSS library. It's focused around static styles, which may make it a perfect fit for usage with this plugin. Check it out:\n\nhttps://github.com/callstack/linaria\n\n## What if I don't use SSR and use html-webpack-plugin?\n\nFor that case you can use [css-chunks-html-webpack-plugin](https://github.com/teamable-software/css-chunks-html-webpack-plugin) which will extract CSS chunks paths into your HTML file.\n\n## Conclusion:\n**We love CSS modules; no less, no more.**\n\n**Long live the dream of Code Splitting Everywhere!**\n\n\n## Contributing\nWe use [commitizen](https://github.com/commitizen/cz-cli), so run `npm run cm` to make commits. A command-line form will appear, requiring you answer a few questions to automatically produce a nicely formatted commit. Releases, semantic version numbers, tags and changelogs will automatically be generated based on these commits thanks to [semantic-release](https://github.com/semantic-release/semantic-release). Be good.\n\n## More from FaceySpacey in Reactlandia\n- [redux-first-router](https://github.com/faceyspacey/redux-first-router). It's made to work perfectly with *Universal*. Together they comprise our *\"frameworkless\"* Redux-based approach to what Next.js does (splitting, SSR, prefetching, and routing). *People are lovin it by the way* 😎\n","readmeFilename":"README.md","gitHead":"2049c100b7f29ab625d7140311eff6dfb4d49ba8","bugs":{"url":"https://github.com/faceyspacey/extract-css-chunks-webpack-plugin/issues"},"_id":"extract-css-chunks-webpack-plugin@3.1.0-beta.2","_npmVersion":"5.5.1","_nodeVersion":"8.9.0","_npmUser":{"name":"zackljackson","email":"zackary.l.jackson@gmail.com"},"dist":{"integrity":"sha512-vsjgbto0uqo+tCKFcSNu0JY8y1A4KnDMdPDDDlv9ZYBEFJV/oVJbmlfOhzYHDb3LvcmEZjsZSaEYwmRpBQjjcw==","shasum":"3a76202ad416ee6c7c8733dde8c6846a8c02ee07","tarball":"https://registry.npmjs.org/extract-css-chunks-webpack-plugin/-/extract-css-chunks-webpack-plugin-3.1.0-beta.2.tgz","fileCount":8,"unpackedSize":49688,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbT2vHCRA9TVsSAnZWagAAi/MQAIZd3P2WPA8cAWJbE5XZ\nHRyCvuBKvcW52PHHhZ9xTjNRo0/1AxPl121KMvEs1+IiA+5tuuUJuB7m79D+\nT6oJzZlnwa311MjgpTU+L+86RhLBY2PqLbv+ddUXHh27zlZSPjbSSUEgzFPf\nBb1IlDkjx2LRntmsgYuZDADcxJbHo3sM45V+GrT+O6rUwk5+GMNVyWWeiX7U\npcx9RFJYtbYfi0LQMXvqKryIyFtDeY7rN1V/yhT0x2F2UcgNoPTrBTAIYUpq\nyg8B4PE3TesuwscgwgQpDVdnz9JWWhx5A92jQ0F+5ALj6Gg9EpJd4UZsor62\nVnGDZifmDmsSeiKyAo26fQ0naqQZ7JxLHjfj7tYy8qG0D3mq+4atOCEyKCKk\ntokYxP2aV7zUGFe7kBDcdfd3Np2WNepNc7512ARywxO4/V+wc+6jG2e5GKFs\nw+toEVBgHwVMMSqsau+/4kdCImc+mfftT5EC7aIwgbVMmJxzOVDt5K4+Z96l\n0wBoBanimdjV3ipigOwuiXHUWCnaocq5HsY4M1X1bPaa2CYS53mYu79tOrmO\nwGXyzI3KoyHbqOIqbDIO0SelE323BZ2BHpINn38n/kw69r42dS4BClfAeMaI\nBvvGr6dckPe5eMlpIiniqPsrUyp5/VIVX96BA8JjZ44iHE2uHA52WnSTEMdj\nnjf5\r\n=7+Nt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCI57aw6cEY4pMFhAPRJ7beyW8tSU44npQgcXTqoH7k8AIhAOKCZUicmDaP8LEPgJJy0EnFintEGsL4iu+k4ej/TV8k"}]},"maintainers":[{"email":"james@faceyspacey.com","name":"faceyspacey"},{"email":"zackary.l.jackson@gmail.com","name":"zackljackson"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/extract-css-chunks-webpack-plugin_3.1.0-beta.2_1531931591866_0.01764334156582037"},"_hasShrinkwrap":false},"3.0.10":{"name":"extract-css-chunks-webpack-plugin","version":"3.0.10","author":{"name":"James Gillmore","email":"james@faceyspacey.com"},"contributors":[{"name":"Zack Jackson","email":"zackary.l.jackson@gmail.com","url":"https://github.com/ScriptedAlchemy"}],"description":"Extract CSS from chunks into stylesheets + HMR. Supports Webpack 4","engines":{"node":">= 6.9.0 <7.0.0 || >= 8.9.0"},"main":"dist/cjs.js","files":["dist"],"keywords":["css","chunks","code splitting","mini-css","hot","hmr","universal","webpack","webpack 4"],"license":"MIT","scripts":{"start":"npm run build -- -w","build":"cross-env NODE_ENV=production babel src -d dist --ignore 'src/**/*.test.js' --copy-files","clean":"del-cli dist","lint":"eslint --cache --fix src","prebuild":"npm run clean","prepublish":"npm run build","security":"nsp check","test":"jest","test:watch":"jest --watch","test:coverage":"jest --collectCoverageFrom='src/**/*.js' --coverage","test:example":"npm run build && webpack-dev-server test/manual/src/index.js --config test/manual/webpack.config.js","ci:lint":"npm run lint && npm run security","ci:test":"npm run test -- --runInBand","ci:coverage":"npm run test:coverage -- --runInBand","build:example":"npm run build && webpack-dev-server test/manual/src/index.js --open --config test/manual/webpack.config.js","cm":"git-cz","release":"standard-version","semantic-release":"semantic-release pre && npm publish && semantic-release post","travis":"npm run ci:coverage"},"peerDependencies":{"webpack":"^4.8.3"},"dependencies":{"loader-utils":"^1.1.0","lodash":"^4.17.5","normalize-url":"^1.9.1","webpack-sources":"^1.1.0"},"devDependencies":{"@webpack-contrib/eslint-config-webpack":"^2.0.4","babel-cli":"^6.26.0","babel-eslint":"^7.2.3","babel-jest":"^22.2.2","babel-loader":"^7.1.4","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-polyfill":"^6.26.0","babel-preset-env":"^1.6.1","commitizen":"^2.10.1","conventional-github-releaser":"^2.0.2","cross-env":"^5.1.3","css-loader":"^0.28.10","cz-conventional-changelog":"^2.1.0","del":"^3.0.0","del-cli":"^1.1.0","eslint":"^3.19.0","eslint-config-airbnb":"^15.0.1","eslint-plugin-flowtype":"^2.32.1","eslint-plugin-import":"^2.8.0","eslint-plugin-jsx-a11y":"^5.0.3","eslint-plugin-prettier":"^2.6.0","eslint-plugin-react":"^7.0.1","husky":"^0.14.3","jest":"^22.2.2","memory-fs":"^0.4.1","nsp":"^3.1.0","pre-commit":"^1.2.2","prettier":"^1.11.1","standard-version":"^4.3.0","webpack":"4.8.3","webpack-cli":"^2.0.13","webpack-dev-server":"^3.1.1"},"homepage":"http://github.com/faceyspacey/extract-css-chunks-webpack-plugin","repository":{"type":"git","url":"git+https://github.com/faceyspacey/extract-css-chunks-webpack-plugin.git"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"gitHead":"55eab8e96d3e6e76d4ab3b45c14ea04232c7286a","bugs":{"url":"https://github.com/faceyspacey/extract-css-chunks-webpack-plugin/issues"},"_id":"extract-css-chunks-webpack-plugin@3.0.10","_npmVersion":"5.5.1","_nodeVersion":"8.9.0","_npmUser":{"name":"zackljackson","email":"zackary.l.jackson@gmail.com"},"dist":{"integrity":"sha512-rB2oRLJXfQTOFb2vw+q/OSWtZ6Lpoe/v85e/+vQJxrBoK1+xT6NE8LLsGRWCxafEnZGDtY7U6oKwxG5lo8U3fg==","shasum":"121d4b13d2e63f4fc9616c2ab0b43df81c1069d6","tarball":"https://registry.npmjs.org/extract-css-chunks-webpack-plugin/-/extract-css-chunks-webpack-plugin-3.0.10.tgz","fileCount":9,"unpackedSize":51873,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbT2wECRA9TVsSAnZWagAAEaAP/AgY9Tj+y94wlFa5B3a2\nTiR06HkSi0fZ0Lpz7JJsgzaSWBh8NesNp09dJyEGi0KWjg8D6PmyaBTYPuDy\nuE1kB1HcDHg0+Y/9yQTuDXNfNOY2W8W++LXReNn2NGPqCVuJaNl/fHyB3qDW\nDbEMPQRdbnrzjYKDdUKUJYfZa+z1W1jxp3pKHqNL44eMA1IKjU8DyACb495J\nYhf3GSG/nKxOg6vAANED8p5+YmYbKiPjnQcfhgC9rOhJAdqpuavSbjWch5o+\nQ+YiKfXhaM4gbynxshVx/pzFPo4HOllBmFCb+TCGmvE7K8qC0E0cuJfNbK9S\nuaIaTI1xIATgW4lvu3acYw3fAoXdF5pjhPOzTdCGVxT52tVVTdMNjrkSKqud\n3h8vZSNlMFXYGYayzpB3wP5HfSD+M/gm0ombP7rtGnasCX+gGd8LW4C3uUVZ\no5vq/ucL7jodk8nRpJcISoWWpdlgsijChaF0GZKAhsfO+Ey3zdwWXqv1h/CT\nLiw/1WK5o372mmjeD0/U4ivYazDveoZ/R2mHVAP9/a5HYBRD9sztY5v+KbLD\n3D8xOw7Z5/cboXP6OO8gkK5g+A4FxFQwBYZ2ydYk6dIBCxI4Z0oicyzvvpEl\nb7h/Ri0Yuigp5xbDHWSSZepl1+5gLPpMI05L/AeqFGwA5d1/a9OkTbTeZskC\n08DI\r\n=UgHv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGhC+2lDzwdVxS3lx9/bQNhXhfDmUome5JrJUmsvM6gaAiEAx86AlH1vkKJBuT65PXdYsaPrGUeYkSISYYoT+exFL7w="}]},"maintainers":[{"email":"james@faceyspacey.com","name":"faceyspacey"},{"email":"zackary.l.jackson@gmail.com","name":"zackljackson"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/extract-css-chunks-webpack-plugin_3.0.10_1531931652715_0.2150635985803595"},"_hasShrinkwrap":false},"3.0.11":{"name":"extract-css-chunks-webpack-plugin","version":"3.0.11","author":{"name":"James Gillmore","email":"james@faceyspacey.com"},"contributors":[{"name":"Zack Jackson","email":"zackary.l.jackson@gmail.com","url":"https://github.com/ScriptedAlchemy"}],"description":"Extract CSS from chunks into stylesheets + HMR. Supports Webpack 4","engines":{"node":">= 6.9.0 <7.0.0 || >= 8.9.0"},"main":"dist/cjs.js","files":["dist"],"keywords":["css","chunks","code splitting","mini-css","hot","hmr","universal","webpack","webpack 4"],"license":"MIT","scripts":{"start":"npm run build -- -w","build":"cross-env NODE_ENV=production babel src -d dist --ignore 'src/**/*.test.js' --copy-files","clean":"del-cli dist","lint":"eslint --cache --fix src","prebuild":"npm run clean","prepublish":"npm run build","security":"nsp check","test":"jest","test:watch":"jest --watch","test:coverage":"jest --collectCoverageFrom='src/**/*.js' --coverage","test:example":"npm run build && webpack-dev-server test/manual/src/index.js --config test/manual/webpack.config.js","ci:lint":"npm run lint && npm run security","ci:test":"npm run test -- --runInBand","ci:coverage":"npm run test:coverage -- --runInBand","build:example":"npm run build && webpack-dev-server test/manual/src/index.js --open --config test/manual/webpack.config.js","cm":"git-cz","release":"standard-version","semantic-release":"semantic-release pre && npm publish && semantic-release post","travis":"npm run ci:coverage"},"peerDependencies":{"webpack":"^4.8.3"},"dependencies":{"loader-utils":"^1.1.0","lodash":"^4.17.5","normalize-url":"^1.9.1","webpack-sources":"^1.1.0"},"devDependencies":{"@webpack-contrib/eslint-config-webpack":"^2.0.4","babel-cli":"^6.26.0","babel-eslint":"^7.2.3","babel-jest":"^22.2.2","babel-loader":"^7.1.4","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-polyfill":"^6.26.0","babel-preset-env":"^1.6.1","commitizen":"^2.10.1","conventional-github-releaser":"^2.0.2","cross-env":"^5.1.3","css-loader":"^0.28.10","cz-conventional-changelog":"^2.1.0","del":"^3.0.0","del-cli":"^1.1.0","eslint":"^3.19.0","eslint-config-airbnb":"^15.0.1","eslint-plugin-flowtype":"^2.32.1","eslint-plugin-import":"^2.8.0","eslint-plugin-jsx-a11y":"^5.0.3","eslint-plugin-prettier":"^2.6.0","eslint-plugin-react":"^7.0.1","husky":"^0.14.3","jest":"^22.2.2","memory-fs":"^0.4.1","nsp":"^3.1.0","pre-commit":"^1.2.2","prettier":"^1.11.1","standard-version":"^4.3.0","webpack":"4.8.3","webpack-cli":"^2.0.13","webpack-dev-server":"^3.1.1"},"homepage":"http://github.com/faceyspacey/extract-css-chunks-webpack-plugin","repository":{"type":"git","url":"git+https://github.com/faceyspacey/extract-css-chunks-webpack-plugin.git"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"gitHead":"abb3321fd1c22fc5219d4eeafb1186accf98143d","bugs":{"url":"https://github.com/faceyspacey/extract-css-chunks-webpack-plugin/issues"},"_id":"extract-css-chunks-webpack-plugin@3.0.11","_npmVersion":"5.5.1","_nodeVersion":"8.9.0","_npmUser":{"name":"zackljackson","email":"zackary.l.jackson@gmail.com"},"dist":{"integrity":"sha512-uYXgpkr/24Ivyc86qW+o3++WR8xSQBPBGN+HQ2AKoqZfl6d0sS4S38+XNhjCXwGyNFaCUn90w1g0K67uHBnxtg==","shasum":"19588b3784c00a92281698167cf78c2797c8ffe5","tarball":"https://registry.npmjs.org/extract-css-chunks-webpack-plugin/-/extract-css-chunks-webpack-plugin-3.0.11.tgz","fileCount":9,"unpackedSize":52102,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbWSeuCRA9TVsSAnZWagAAEIIP/0FNeirtwokMeZfZ6qDZ\nPsDOkagiX9g2KGYEWxfoj+sua9h1RKbGHQs9VwakgeCKpM8tWRdGiIX4Pxnr\nVC3Gj0HxS5xWg0673Qmc/wUIeh6aLKTSeLEyXjGGbnXV4rqvYfngbaaOv2JX\nl/8g84WZv6qYqfr1um7ahnwxf5KM0oEw6louQCoCVE5pex/h2mp/q69is7Y1\nSkJRka2qW+fktOQvhTnqzeKy0786d2w/YbBND2paTUbAfBob27NdoMMM2wV2\n49EFnF62ROOsXsix5D/jIZQBag8FbH3afkyE7f+cTIEKlwkY7EuQckl3wvND\ntVgA6iklhzoFNObIZpACbgKxcaR+g4nJqwzPAQSiXWkDQnG2F6eCx1peMhPm\nDaZhGYOxJkdxCkY2dpfSHFyhS+uWGjahYmaUEQer288dERRfXQRE7JCCm3Tq\nZLEzzaUsd7jn/yyCAtG0pY19TXZ9JE/Bomvnmroe2JPfztN+1nWvP6nPt57A\nhwma9klnDLf9c4QqaIOz8cUldm+KwjEKXc6uFb8I7Ct29mbZjOj2/VlXNfdZ\n0ujMgEfOD5MTIX5WpAqEILUN/jubQDHW8oTk73Qyhk7OoPBIfHgrq7jQvk3b\ngi6K3TJvvZXuHYxnYUAD7Y7dUeSr8StOl3iW+b/W3oe/mUjFHOi88GPFOwWh\nLKXQ\r\n=MdUX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF8v7/WO/5Dlw4EWjUIyWhXB4VP6/KNyf5NHa33+2Jg2AiA71M0/noB6dYnur9jk34uKW0CP2+Ieu+YrNBy1n0f5Wg=="}]},"maintainers":[{"email":"james@faceyspacey.com","name":"faceyspacey"},{"email":"zackary.l.jackson@gmail.com","name":"zackljackson"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/extract-css-chunks-webpack-plugin_3.0.11_1532569518152_0.7596433524323298"},"_hasShrinkwrap":false},"3.1.0-beta.3":{"name":"extract-css-chunks-webpack-plugin","version":"3.1.0-beta.3","author":{"name":"James Gillmore","email":"james@faceyspacey.com"},"contributors":[{"name":"Zack Jackson","email":"zackary.l.jackson@gmail.com","url":"https://github.com/ScriptedAlchemy"}],"description":"Extract CSS from chunks into stylesheets + HMR. Supports Webpack 4","engines":{"node":">= 6.9.0 <7.0.0 || >= 8.9.0"},"main":"dist/cjs.js","files":["dist"],"keywords":["css","chunks","code splitting","mini-css","hot","hmr","universal","webpack","webpack 4"],"license":"MIT","scripts":{"start":"npm run build -- -w","build":"cross-env NODE_ENV=production babel src -d dist --ignore 'src/**/*.test.js' --copy-files","clean":"del-cli dist","lint":"eslint --cache --fix src","prebuild":"npm run clean","prepublish":"npm run build","security":"nsp check","test":"jest","test:watch":"jest --watch","test:coverage":"jest --collectCoverageFrom='src/**/*.js' --coverage","test:example":"npm run build && webpack-dev-server test/manual/src/index.js --config test/manual/webpack.config.js","ci:lint":"npm run lint && npm run security","ci:test":"npm run test -- --runInBand","ci:coverage":"npm run test:coverage -- --runInBand","build:example":"npm run build && webpack-dev-server test/manual/src/index.js --open --config test/manual/webpack.config.js","cm":"git-cz","release":"standard-version","semantic-release":"semantic-release pre && npm publish && semantic-release post","travis":"npm run ci:coverage"},"peerDependencies":{"webpack":"^4.8.3"},"dependencies":{"loader-utils":"^1.1.0","lodash":"^4.17.5","normalize-url":"^1.9.1","webpack-sources":"^1.1.0"},"devDependencies":{"@webpack-contrib/eslint-config-webpack":"^2.0.4","babel-cli":"^6.26.0","babel-eslint":"^7.2.3","babel-jest":"^22.2.2","babel-loader":"^7.1.4","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-polyfill":"^6.26.0","babel-preset-env":"^1.6.1","commitizen":"^2.10.1","conventional-github-releaser":"^2.0.2","cross-env":"^5.1.3","css-loader":"^0.28.10","cz-conventional-changelog":"^2.1.0","del":"^3.0.0","del-cli":"^1.1.0","eslint":"^3.19.0","eslint-config-airbnb":"^15.0.1","eslint-plugin-flowtype":"^2.32.1","eslint-plugin-import":"^2.8.0","eslint-plugin-jsx-a11y":"^5.0.3","eslint-plugin-prettier":"^2.6.0","eslint-plugin-react":"^7.0.1","husky":"^0.14.3","jest":"^22.2.2","memory-fs":"^0.4.1","nsp":"^3.1.0","pre-commit":"^1.2.2","prettier":"^1.11.1","standard-version":"^4.3.0","webpack":"4.8.3","webpack-cli":"^2.0.13","webpack-dev-server":"^3.1.1"},"homepage":"http://github.com/faceyspacey/extract-css-chunks-webpack-plugin","repository":{"type":"git","url":"git+https://github.com/faceyspacey/extract-css-chunks-webpack-plugin.git"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"readme":"<a href=\"https://gitter.im/Reactlandia/Lobby\" target=\"_blank\">\n  <img alt=\"Edit Redux-First Router Demo\" src=\"http://cdn.reactlandia.com/chat-badge-reactlandia.png\">\n</a>\n\n\n# extract-css-chunks-webpack-plugin\n\n<p align=\"center\">\n  <a href=\"https://www.npmjs.com/package/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://img.shields.io/npm/v/extract-css-chunks-webpack-plugin.svg\" alt=\"Version\" />\n  </a>\n\n  <a href=\"https://travis-ci.org/faceyspacey/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://travis-ci.org/faceyspacey/extract-css-chunks-webpack-plugin.svg?branch=master\" alt=\"Build Status\" />\n  </a>\n\n  <a href=\"https://www.npmjs.com/package/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://img.shields.io/npm/dt/extract-css-chunks-webpack-plugin.svg\" alt=\"Downloads\" />\n  </a>\n\n  <a href=\"https://www.npmjs.com/package/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://img.shields.io/npm/dm/extract-css-chunks-webpack-plugin.svg\" alt=\"License\" />\n  </a>\n  \n  <a href=\"https://www.npmjs.com/package/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://img.shields.io/npm/l/extract-css-chunks-webpack-plugin.svg\" alt=\"License\" />\n  </a>\n</p>\n\n<h2 align=\"center\">🍾🍾🍾It's our absolute pleasure to announce Webpack 4 Support 🚀🚀🚀</h2>\n\n> **HEADLINES (May 2018): Now Independently supports Webpack 4:** \nYep that's right. The universal family is now fully Webpack 4. Thank you to all our users for your loyalty and patience! If you love Universal, then you are gonna fall head over heels when we bring out the main course! \n\nSo... why did we rebuild `extract-css-chunks`? What does it offer? \n\nIt's got all the goodness of `mini-css-extract-plugin` but with 2 gleaming, sought after benefits. \n\nCompared to the existing loaders, we are offering a single solution as opposed to needing to depend on multiple loaders to cater for different features:\n\n## Perks\n* **HMR:** It also has first-class support for **Hot Module Replacement** across ALL those css files/chunks!!!\n* cacheable stylesheets \n* smallest total bytes sent compared to \"render-path\" css-in-js solutions that include your CSS definitions in JS\n* Faster than the V2!\n* Async loading\n* No duplicate compilation (performance)\n* Easier to use\n* Specific to CSS\n* SSR Friendly development build, focused on frontend DX\n* Works seamlessly with the Universal family\n* Works fantastically as a standalone style loader (You can use it for any webpack project! with no extra dependencies!)\n\nAdditionally, if you are already a user of the universal family -- we will be waving goodbye to the mandatory ```window.__CSS_CHUNKS__```.\n\nThe functionality is still available to you via chunk flushing, and it can come in super handy when needing to easily resolve style assets as urls that might need to be passed to a third party.\n\n## Webpack 4 Standalone Installation:\n\nIf you are just looking for something that works like `mini-css-extract-plugin` but with HMR, then look no further.\n\nNOTE: We have aligned out loader implementation to be the same as `mini-css-extract-plugin` \n\n**If you already use `mini-css-extract-plugin`, then you can just change the `require` statement - it's that easy**\n\n```\nyarn add --dev extract-css-chunks-webpack-plugin\n```\n\n*webpack.config.js:*\n```js\nconst ExtractCssChunks = require(\"extract-css-chunks-webpack-plugin\")\n\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [\n           ExtractCssChunks.loader,\n           \"css-loader\"\n         ]\n      }\n    ]\n  },\n  plugins: [\n    new ExtractCssChunks(\n        {\n          // Options similar to the same options in webpackOptions.output\n          // both options are optional\n          filename: \"[name].css\",\n          chunkFilename: \"[id].css\",\n          hot: true // optional as the plugin cannot automatically detect if you are using HOT, not for production use\n        }\n    ),\n  ]\n}\n```\n\n*webpack.server.config.js*\n\nThe server needs to be handled differently, we still want one chunk. Luckily webpack 4 supports **LimitChunkCountPlugin**\n\n```js\nnew webpack.optimize.LimitChunkCountPlugin({\n    maxChunks: 1\n})\n```\n\n\n### What about Webpack 3?\nThis is a breaking change. The entire loader has been fundamentally rewritten specifically for Webpack 4. Aiming to support our existing user base, allowing them to upgrade their infrastructure to support Webpack 4 based universally code-split server-side rendered react applications. \n\nThere have been some challenges along the way since the release of webpack 4. Ultimately the only remaining hurdle is code split, async style loading. \n\nIf you do need Webpack 3, make sure to stick with the latest `v2.x.x` release. `v3.x.x` is only intended for users with Webpack 4\n\n\n\n\n*Note: this is a companion package to:*\n- [webpack-flush-chunks](https://github.com/faceyspacey/webpack-flush-chunks) \n- [react-universal-component](https://github.com/faceyspacey/react-universal-component)\n- [babel-plugin-universal-import](https://github.com/faceyspacey/babel-plugin-universal-import) ***or*** [babel-plugin-dual-import](https://github.com/faceyspacey/babel-plugin-dual-import)\n\n\n## Recommended Installation For Universal\n```\nyarn add react-universal-component webpack-flush-chunks\nyarn add --dev extract-css-chunks-webpack-plugin babel-plugin-universal-import\n```\n\n*.babelrc:*\n```js\n{\n  \"plugins\": [\"universal-import\"]\n}\n```\nThe main thing is you need to cater to the new chunking system of webpack!\nWith **webpack.optimize.CommonsChunkPlugin** plugin no longer part of Webpack 4, we need another way to define the code-splitting. Luckily we have `optimization` configs built into webpack now\n\n> There are more aggressive ways to code split, thanks to webpack 4. Check out the RUC Readme if you are looking for a more aggressive code split optimization configuration. These are just examples, you should be able to configure them as you see fit\n\n*webpack.config.js:*\n```js\nconst ExtractCssChunks = require(\"extract-css-chunks-webpack-plugin\")\n\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [\n          ExtractCssChunks.loader,\n          {\n            loader: 'css-loader',\n            options: {\n              modules: true,\n              localIdentName: '[name]__[local]--[hash:base64:5]',\n            },\n          },\n        ],\n      },\n    ],\n  },\n  optimization: {\n      // FOR PRODUCTION\n      minimizer: [\n          new UglifyJSPlugin({\n              uglifyOptions: {\n                  output: {\n                      comments: false,\n                      ascii_only: true\n                  },\n                  compress: {\n                      comparisons: false\n                  }\n              }\n          })\n      ],\n      // END\n      // NEEDED BOTH IN PROD AND DEV BUILDS\n      runtimeChunk: {\n          name: 'bootstrap'\n      },\n      splitChunks: {\n          chunks: 'initial',\n          cacheGroups: {\n              vendors: {\n                  test: /[\\\\/]node_modules[\\\\/]/,\n                  name: 'vendor'\n              }\n          }\n      }\n  },\n  plugins: [\n    new ExtractCssChunks({hot:true}), //if you want HMR - we try to automatically inject hot reloading but if it's not working, add it to the config\n  ]\n};\n```\n\n## Desired Output\nHere's the sort of CSS you can expect to serve:\n\n```\n<head>\n\t<link rel='stylesheet' href='/static/main.css' />\n\t<link rel='stylesheet' href='/static/0.css' />\n\t<link rel='stylesheet' href='/static/7.css' />\n</head> \n\n<body>\n\t<div id=\"react-root\"></div>\n\t\n\t<script type='text/javascript' src='/static/vendor.js'></script>\n\t<script type='text/javascript' src='/static/0.js'></script>\n\t<script type='text/javascript' src='/static/7.js'></script>\n\t<script type='text/javascript' src='/static/main.js'></script>\n</body>\n```\n\nIf you need to resolve your stylesheets on the client side, for whatever reason. \n\n[webpack-flush-chunks](https://github.com/faceyspacey/webpack-flush-chunks) will scoop up the exact stylesheets to embed in your response. It will give you an object which can be embedded on page\n\nHere's how you do it:\n\n\n*src/components/App.js:*\n```js\nconst UniversalComponent = universal(props => import(`./${props.page}`))\n\n<UniversalComponent page='Foo' />\n```\n\n*server/render.js:*\n```js\nimport { flushChunkNames } from 'react-universal-component/server'\nimport flushChunks from 'webpack-flush-chunks'\n\nconst app = ReactDOMServer.renderToString(<App />)\nconst { js, styles, cssHash } = flushChunks(webpackStats, {\n  chunkNames: flushChunkNames()\n})\n\nres.send(`\n  <!doctype html>\n  <html>\n    <head>\n      ${styles}\n    </head>\n    <body>\n      <div id=\"root\">${app}</div>\n      <!-- not needed unless you want to access css chunks urls manually  -->\n      ${cssHash}\n      <!-- extract-css-chunks takes care of loading the css assets automatically -->\n      ${js}\n    </body>\n  </html>\n`)\n```\n\n***As for asynchronous calls to `import()` on user navigation,*** [babel-plugin-universal-import](https://github.com/faceyspacey/babel-plugin-universal-import) is required if you're using [react-universal-component](https://github.com/faceyspacey/react-universal-component). And if you aren't, you must use: [babel-plugin-dual-import](https://github.com/faceyspacey/babel-plugin-dual-import). \n\n\nThese babel plugins request both your js + your css. *Very Nice!* This is the new feature of the 2.0. Read *Sokra's* (author of webpack) article on how [on how this is the future of CSS for webpack](https://medium.com/webpack/the-new-css-workflow-step-1-79583bd107d7). Use this and be in the future today.\n\n\n## API \nYou can pass the same options as `mini-css-extract` to `new ExtractCssChunks`, such as:\n\n```javascript\nnew ExtractCssChunk({\n      filename: devMode ? '[name].css' : '[name].[hash].css',\n      chunkFilename: devMode ? '[id].css' : '[id].[hash].css',\n})\n```\n\n>Keep in mind, by default `[name].css` is used when `process.env.NODE_ENV === 'development'` and `[name].[contenthash].css` during production, so you can likely forget about having to pass anything.\n\n### HMR Pitfall\n\nThe most common workflow when working with webpack is to write a \"development\" / \"production\" value in to the\n'process.env.NODE_ENV' namespace, typically, using webpack's built-in \"DefinePlugin\" plugin. e.g:\n\n```javascript\nnew webpack.DefinePlugin( {\n     'process.env': {\n        NODE_ENV: `\"${config.devMode ? 'development' : 'production'}\"`,\n      },\n} )\n```\nThe value set by the aforementioned plugin will only be available in the runtime ( when webpack's javascript output is executed ).\nIn order for this plugin to work with hot module reloading, The npm script / gulp task / grunt task etc, should be invoked with the same environment variable as shown above.\n\nFor example, when running the build using some form of npm script:\n\n```json\n{\n  \"scripts\": {\n     \"build\": \"cross-env NODE_ENV=production babel src -d dist --ignore 'src/**/*.test.js' --copy-files\"\n  }\n}\n```\n[cross-env](https://www.npmjs.com/package/cross-env) is optional but recommended. \n\n### What about Glamorous, Styled Components, Styled-Jsx, Aphrodite, etc?\n\nIf you effectively use code-splitting, **Extract Css Chunks** can be a far better option than using emerging solutions like *Glamorous*, *Styled Components*, and slightly older tools like *Aphrodite*, *Glamor*, etc. We aren't fans of either rounds of tools because of several issues, but particularly because they all have a runtime overhead. Every time your React component is rendered with those, CSS is generated and updated within the DOM. On the server, you're going to also see unnecessary cycles for flushing the CSS along the critical render path. *Next.js's* `styled-jsx`, by the way, doesn't even work on the server--*not so good when it comes to flash of unstyled content (FOUC).*\n\nThe reason **Extract CSS Chunk** can be a better option is because **we also generate multiple sets of CSS based on what is actually \"used\",** ***but without the runtime overhead***. The difference is our definition of \"used\" is modules determined *statically* (which may not in fact be rendered) vs. what is in the \"critical render path\" (as is the case with the other tools). \n\nSo yes, our CSS may be mildly larger and include unnecessary css, but our `no_css.js` bundles will be a lot smaller as they don't need to inject any styles. See, even though those solutions have the smallest possible CSS file size, their javascript bundles, **in order to continue to render your components styled properly on the client,** must contain the necessary CSS for all possibilities! Those solutions serve both your entire bundle's CSS (in your javascript) **and** the CSS flushed from the critical render path. \n\nOn top of that, those are extra packages all with a huge number of issues in their Github repos corresponding to various limitations in the CSS they generate--something that is prevented when your definition for \"CSS-in-JS\" is simply importing CSS files compiled as normal by powerful proven CSS-specific processors.\n\nLastly, those solutions don't provide cacheable stylesheets. They do a lot of work--but they will **continue** doing it for you when you could have been done in one go long ago. Cloudflare is free--serve them through their CDN and you're winning. I love true javascript in css--don't get me wrong--but first I'd have to see they generate cacheable stylesheets. In my opinion, for now, it's best for environments that natively support it such as React Native.\n\n\n### Next:\n\nNow with that out of the way, for completeness let's compare what bytes of just the CSS are sent over the wire. The difference basically is minimal. Whereas solutions that flush from the critical render path will capture no more than the precise bits of CSS from the `if/else` branches followed, **Extract Css Chunks** is all about you effectively using code-splitting to insure, for example, you don't serve your Administration Panel's CSS in your public-facing site, etc. *In other words, it's all about avoiding serving large swaths of CSS from completely different sections of your app.* ***I.e. the biggest gains available to you.*** \n\n<details>\n<summary>\n    Read more on the topic ^^\n</summary>\n\nThis is where the real problem lies--where the real amount of unnecessary CSS comes from. If you effectively code-split your app, you may end up with 10 chunks. Now you can serve just the corresponding CSS for that chunk. If you try to go even farther and remove the css not used in the render path, you're likely achieving somewhere between 1-20% of the gains you achieved by thorough code-splitting. In other words, code splitting fulfills the 80/20 rule and attains the simple sweetspot of 80% optimization you--*as a balanced, level-headed, non-neurotic and professional developer*--are looking to achieve.\n\n*In short, by putting code splitting in appropriate places you have a lot of control over the CSS files that are created and can send a sensible* ***minimal*** *amount of associated bytes over the wire for the first request, perhaps even the smallest amount of all options.* \n\nIt's our perspective that you have achieved 80-99% of the performance gains (i.e. the creation of small relevant css files) at this ***static stage***. Offloading this work to the runtime stage is ultimately nit-picking and results in diminishing returns. When you factor that your JS bundle has to contain that JS anyway, those solutions make less and less sense from the perspective of reducing bytes delivered in the initial request. \n\nThere may be other reasons to use those tools (e.g. you don't like setting up webpack configs, or somehow you're really fond of pre-creating many `<div />` elements with their styles), but we prefer a simple standards-based way (without HoCs or specialized style components) to import styles just as you would in React Native. However to give the other tools credit, many of them likely started out with a different problem motivating them: avoiding webpack configs so you can include packages and their contained CSS without client apps being required to setup something like CSS loaders in Webpack. Having your CSS completely contained in true JS has its use cases, but at the application level--especially when you're already using something like Webpack--we fail to see its benefits. About all they share is a solution to avoiding **flashes of unstyled content** (FOUC), except one can save you a lot more bytes in what you send over the wire and save you from a continual runtime overhead where it's not needed. ***Honorable Mention:*** *StyleTron's concept of \"atomic declaration-level deduplication\" where it will make a class out of, say, `color: blue` so you don't need to send redundant styles certainly is a novel innovation, but again if the code still exists in your JS and you're building an application using Webpack (instead of a package), what's the point. In fact, it just makes editing the stylesheets in your browser developer tools more complicated. One benefit of critical render path solutions is the browser can spend less time matching the smaller number of styles to new DOM nodes as they appear, but then again it also has to spend the time injecting and parsing the new styles constantly, which is likely costlier.*\n\nAs an aside, so many apps share code between web and React Native--so the answer to the styles problem must be one that is identical for both. From that perspective importing a styles object **still** makes a lot of sense. **You're not missing out on the fundamental aspect of CSS-in-JSS:** ***isolated component-level styles and the ability to import them just like any other javascript code.*** Put them in other files, and use tools like `extract-css-chunks-webpack-plugin` and your pre-processors of choice that innately get styles right for the browser. As long as you're using **CSS Modules**, you're still at the cutting edge of CSS-in-JSS. Let's just say the other tools took one wrong turn and took it too far, when we already were at our destination. \n</details>\n\n\n#### SUMMARY OF BENEFITS COMPARED TO \"CRITICAL-RENDER-PATH\" SOLUTIONS:\n\n- no continual runtime overhead during `render` using HoCs that inject styles\n- smaller JS bundles without CSS injection\n- **You DO NOT need to clutter your component code with a specialized way of applying CSS (HoCs, styled elements)!** \n- The way you import module-based styles is exactly how you would import styles in React Native that exist in a separate file, which allows for extremely interchangeable code between React Native and regular React. Hurray! \n- pretty much already does everything covered by [@vjeux's 2014 css-in-js talk](https://speakerdeck.com/vjeux/react-css-in-js), besides dead code elimination. Dead code elimination is only solved for the other tools--as per the explanation above how the CSS is in the JS anyway--so much as Webpack and Uglify can remove **JS** that is not used. Either way, it's not a stretch to eventually add this feature to `extract-text-webpack-plugin` as well as this plugin. Hey, maybe it already has it??\n\n## Emotion!\n\n[Emotion](https://github.com/tkh44/emotion) is different. They allow for the extraction of static styles via their *extract mode*. We're very much looking forward to this being the perfect companion to the css chunks approach. \n<details>\n<summary>\n    Read more on the topic ^^\n</summary>\n\nCurrently however *extract mode* does not support IE11. So that means it's a no go, but we have hopes that in the future they'll solve that problem.\n\nThe reason Emotion doesn't work in IE11+ is because they currently try to preserve any dynamic aspects of your CSS-in-JS by converting it CSS vars, which isn't supported in IE11. That was a very smart approach, but unfortunately not good enough. \n\nThe vision we'd like to see for that package is where dynamic css stays inline, and where only static CSS is extracted into stylesheets, in which case CSS vars aren't needed. I've heard from them they have some \"hidden flags\" that allow for something close to this. When, and if, they take this feature all the way, look forward to us pushing it as our recommended approach. *Go Emotion!*\n</details>\n\n## Linaria\n\nLinaria is another modern CSS-in-JSS library. It's focused around static styles, which may make it a perfect fit for usage with this plugin. Check it out:\n\nhttps://github.com/callstack/linaria\n\n## What if I don't use SSR and use html-webpack-plugin?\n\nFor that case you can use [css-chunks-html-webpack-plugin](https://github.com/teamable-software/css-chunks-html-webpack-plugin) which will extract CSS chunks paths into your HTML file.\n\n## Conclusion:\n**We love CSS modules; no less, no more.**\n\n**Long live the dream of Code Splitting Everywhere!**\n\n\n## Contributing\nWe use [commitizen](https://github.com/commitizen/cz-cli), so run `npm run cm` to make commits. A command-line form will appear, requiring you answer a few questions to automatically produce a nicely formatted commit. Releases, semantic version numbers, tags and changelogs will automatically be generated based on these commits thanks to [semantic-release](https://github.com/semantic-release/semantic-release). Be good.\n\n## More from FaceySpacey in Reactlandia\n- [redux-first-router](https://github.com/faceyspacey/redux-first-router). It's made to work perfectly with *Universal*. Together they comprise our *\"frameworkless\"* Redux-based approach to what Next.js does (splitting, SSR, prefetching, and routing). *People are lovin it by the way* 😎\n","readmeFilename":"README.md","gitHead":"5798a4574e1c005629d13eb79bc05e84e3e838fe","bugs":{"url":"https://github.com/faceyspacey/extract-css-chunks-webpack-plugin/issues"},"_id":"extract-css-chunks-webpack-plugin@3.1.0-beta.3","_npmVersion":"5.5.1","_nodeVersion":"8.9.0","_npmUser":{"name":"zackljackson","email":"zackary.l.jackson@gmail.com"},"dist":{"integrity":"sha512-wcGxSLNakUr2JgRNLJTvXoZyzyElB5BC5kvYE6sLK26LPkVtW3CZs4H6ia2CgbsGnej+L0pKa2UlVtbwO0hWLA==","shasum":"61039a9f7ebe374bbca000c038653db5070f3f23","tarball":"https://registry.npmjs.org/extract-css-chunks-webpack-plugin/-/extract-css-chunks-webpack-plugin-3.1.0-beta.3.tgz","fileCount":8,"unpackedSize":49917,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbWSgpCRA9TVsSAnZWagAAg2kP/0jkJHAh3mHdOi/5vtcj\nC4LDPvCnPo5rrMwjwYKVZBwnMgzF0auQ5eqZhuMkFN+BYL94hNkPRgIKbkPt\nBsHplrEjMTuXGBPVlcr0Cj/CHzC4S3XRUBJqWMSClIWDu9Er4wkb0ZGGxRli\ncZ1BmrW0Tfhr2INbVQvxUgL5OT5ctDzNA/HQ5F+tkculxzsJZdYKL4WHoMf+\nz/QsUjKA62gHxlR/qc1ODaTT92dES/zxbeS9qIoimHr/RPQvBSagWQd1V40Y\neDTj48j60t9A4Mbvrmop5SD2NgStKQIOO4lBLeVeRIXcVf603VISPn6JZllE\n2C8YBlAcMVQTW2nJx/nbZw3Pq9Jlg/RElWsFoQviBCSPN9wjLd1kXu19McuO\nC3t7uij5MlEHBWnPNJQlQ9uQk1YeIX4v7mJk3CwRV0D0fmC8Valw4GjyPeTh\nsbgAU2QI55rmBeB75TJAD/OkkvblZoI19hRWasbRaSr7SzhNxuho2HOWXL4A\nXBwZkCgTGZvZciM5AEFZsI3vmeeyjwZaoHlrbOPFIRQoKW/9IgOuAYaiGGpc\nQclxe/Vk4j3FpK8PDAQruYn3Xi69j7k5NllZbn5uyx5vZnhd1EzzW9ODVxNz\nv0CtxH1mqHH71C+Bz0Xp/XTrUs+OdqVT1TF0nu0WQqeg0eCDX8iAIdR2bAd9\nyCoP\r\n=cH1B\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCzsmv4Jh0XYX9h1iYOMt1sGvRRj5z2eKtfZyCiikB/9AIhANlR3hGL7tmPdzgQJjbdWcanrDDIflLa+GCv07AW5H3A"}]},"maintainers":[{"email":"james@faceyspacey.com","name":"faceyspacey"},{"email":"zackary.l.jackson@gmail.com","name":"zackljackson"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/extract-css-chunks-webpack-plugin_3.1.0-beta.3_1532569641600_0.9043220377631098"},"_hasShrinkwrap":false},"3.1.0-beta.4":{"name":"extract-css-chunks-webpack-plugin","version":"3.1.0-beta.4","author":{"name":"James Gillmore","email":"james@faceyspacey.com"},"contributors":[{"name":"Zack Jackson","email":"zackary.l.jackson@gmail.com","url":"https://github.com/ScriptedAlchemy"}],"description":"Extract CSS from chunks into stylesheets + HMR. Supports Webpack 4","engines":{"node":">= 6.9.0 <7.0.0 || >= 8.9.0"},"main":"dist/cjs.js","files":["dist"],"keywords":["css","chunks","code splitting","mini-css","hot","hmr","universal","webpack","webpack 4"],"license":"MIT","scripts":{"start":"npm run build -- -w","build":"cross-env NODE_ENV=production babel src -d dist --ignore 'src/**/*.test.js' --copy-files","clean":"del-cli dist","lint":"eslint --cache --fix src","prebuild":"npm run clean","prepublish":"npm run build","security":"nsp check","test":"jest","test:watch":"jest --watch","test:coverage":"jest --collectCoverageFrom='src/**/*.js' --coverage","test:example":"npm run build && webpack-dev-server test/manual/src/index.js --config test/manual/webpack.config.js","ci:lint":"npm run lint && npm run security","ci:test":"npm run test -- --runInBand","ci:coverage":"npm run test:coverage -- --runInBand","build:example":"npm run build && webpack-dev-server test/manual/src/index.js --open --config test/manual/webpack.config.js","cm":"git-cz","release":"standard-version","semantic-release":"semantic-release pre && npm publish && semantic-release post","travis":"npm run ci:coverage"},"peerDependencies":{"webpack":"^4.8.3"},"dependencies":{"loader-utils":"^1.1.0","lodash":"^4.17.5","normalize-url":"^1.9.1","webpack-sources":"^1.1.0"},"devDependencies":{"@webpack-contrib/eslint-config-webpack":"^2.0.4","babel-cli":"^6.26.0","babel-eslint":"^7.2.3","babel-jest":"^22.2.2","babel-loader":"^7.1.4","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-polyfill":"^6.26.0","babel-preset-env":"^1.6.1","commitizen":"^2.10.1","conventional-github-releaser":"^2.0.2","cross-env":"^5.1.3","css-loader":"^0.28.10","cz-conventional-changelog":"^2.1.0","del":"^3.0.0","del-cli":"^1.1.0","eslint":"^3.19.0","eslint-config-airbnb":"^15.0.1","eslint-plugin-flowtype":"^2.32.1","eslint-plugin-import":"^2.8.0","eslint-plugin-jsx-a11y":"^5.0.3","eslint-plugin-prettier":"^2.6.0","eslint-plugin-react":"^7.0.1","husky":"^0.14.3","jest":"^22.2.2","memory-fs":"^0.4.1","nsp":"^3.1.0","pre-commit":"^1.2.2","prettier":"^1.11.1","standard-version":"^4.3.0","webpack":"4.8.3","webpack-cli":"^2.0.13","webpack-dev-server":"^3.1.1"},"homepage":"http://github.com/faceyspacey/extract-css-chunks-webpack-plugin","repository":{"type":"git","url":"git+https://github.com/faceyspacey/extract-css-chunks-webpack-plugin.git"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"readme":"<a href=\"https://gitter.im/Reactlandia/Lobby\" target=\"_blank\">\n  <img alt=\"Edit Redux-First Router Demo\" src=\"http://cdn.reactlandia.com/chat-badge-reactlandia.png\">\n</a>\n\n\n# extract-css-chunks-webpack-plugin\n\n<p align=\"center\">\n  <a href=\"https://www.npmjs.com/package/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://img.shields.io/npm/v/extract-css-chunks-webpack-plugin.svg\" alt=\"Version\" />\n  </a>\n\n  <a href=\"https://travis-ci.org/faceyspacey/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://travis-ci.org/faceyspacey/extract-css-chunks-webpack-plugin.svg?branch=master\" alt=\"Build Status\" />\n  </a>\n\n  <a href=\"https://www.npmjs.com/package/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://img.shields.io/npm/dt/extract-css-chunks-webpack-plugin.svg\" alt=\"Downloads\" />\n  </a>\n\n  <a href=\"https://www.npmjs.com/package/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://img.shields.io/npm/dm/extract-css-chunks-webpack-plugin.svg\" alt=\"License\" />\n  </a>\n  \n  <a href=\"https://www.npmjs.com/package/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://img.shields.io/npm/l/extract-css-chunks-webpack-plugin.svg\" alt=\"License\" />\n  </a>\n</p>\n\n<h2 align=\"center\">🍾🍾🍾It's our absolute pleasure to announce Webpack 4 Support 🚀🚀🚀</h2>\n\n> **HEADLINES (May 2018): Now Independently supports Webpack 4:** \nYep that's right. The universal family is now fully Webpack 4. Thank you to all our users for your loyalty and patience! If you love Universal, then you are gonna fall head over heels when we bring out the main course! \n\nSo... why did we rebuild `extract-css-chunks`? What does it offer? \n\nIt's got all the goodness of `mini-css-extract-plugin` but with 2 gleaming, sought after benefits. \n\nCompared to the existing loaders, we are offering a single solution as opposed to needing to depend on multiple loaders to cater for different features:\n\n## Perks\n* **HMR:** It also has first-class support for **Hot Module Replacement** across ALL those css files/chunks!!!\n* cacheable stylesheets \n* smallest total bytes sent compared to \"render-path\" css-in-js solutions that include your CSS definitions in JS\n* Faster than the V2!\n* Async loading\n* No duplicate compilation (performance)\n* Easier to use\n* Specific to CSS\n* SSR Friendly development build, focused on frontend DX\n* Works seamlessly with the Universal family\n* Works fantastically as a standalone style loader (You can use it for any webpack project! with no extra dependencies!)\n\nAdditionally, if you are already a user of the universal family -- we will be waving goodbye to the mandatory ```window.__CSS_CHUNKS__```.\n\nThe functionality is still available to you via chunk flushing, and it can come in super handy when needing to easily resolve style assets as urls that might need to be passed to a third party.\n\n## Webpack 4 Standalone Installation:\n\nIf you are just looking for something that works like `mini-css-extract-plugin` but with HMR, then look no further.\n\nNOTE: We have aligned out loader implementation to be the same as `mini-css-extract-plugin` \n\n**If you already use `mini-css-extract-plugin`, then you can just change the `require` statement - it's that easy**\n\n```\nyarn add --dev extract-css-chunks-webpack-plugin\n```\n\n*webpack.config.js:*\n```js\nconst ExtractCssChunks = require(\"extract-css-chunks-webpack-plugin\")\n\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [\n           ExtractCssChunks.loader,\n           \"css-loader\"\n         ]\n      }\n    ]\n  },\n  plugins: [\n    new ExtractCssChunks(\n        {\n          // Options similar to the same options in webpackOptions.output\n          // both options are optional\n          filename: \"[name].css\",\n          chunkFilename: \"[id].css\",\n          hot: true // optional as the plugin cannot automatically detect if you are using HOT, not for production use\n        }\n    ),\n  ]\n}\n```\n\n*webpack.server.config.js*\n\nThe server needs to be handled differently, we still want one chunk. Luckily webpack 4 supports **LimitChunkCountPlugin**\n\n```js\nnew webpack.optimize.LimitChunkCountPlugin({\n    maxChunks: 1\n})\n```\n\n\n### What about Webpack 3?\nThis is a breaking change. The entire loader has been fundamentally rewritten specifically for Webpack 4. Aiming to support our existing user base, allowing them to upgrade their infrastructure to support Webpack 4 based universally code-split server-side rendered react applications. \n\nThere have been some challenges along the way since the release of webpack 4. Ultimately the only remaining hurdle is code split, async style loading. \n\nIf you do need Webpack 3, make sure to stick with the latest `v2.x.x` release. `v3.x.x` is only intended for users with Webpack 4\n\n\n\n\n*Note: this is a companion package to:*\n- [webpack-flush-chunks](https://github.com/faceyspacey/webpack-flush-chunks) \n- [react-universal-component](https://github.com/faceyspacey/react-universal-component)\n- [babel-plugin-universal-import](https://github.com/faceyspacey/babel-plugin-universal-import) ***or*** [babel-plugin-dual-import](https://github.com/faceyspacey/babel-plugin-dual-import)\n\n\n## Recommended Installation For Universal\n```\nyarn add react-universal-component webpack-flush-chunks\nyarn add --dev extract-css-chunks-webpack-plugin babel-plugin-universal-import\n```\n\n*.babelrc:*\n```js\n{\n  \"plugins\": [\"universal-import\"]\n}\n```\nThe main thing is you need to cater to the new chunking system of webpack!\nWith **webpack.optimize.CommonsChunkPlugin** plugin no longer part of Webpack 4, we need another way to define the code-splitting. Luckily we have `optimization` configs built into webpack now\n\n> There are more aggressive ways to code split, thanks to webpack 4. Check out the RUC Readme if you are looking for a more aggressive code split optimization configuration. These are just examples, you should be able to configure them as you see fit\n\n*webpack.config.js:*\n```js\nconst ExtractCssChunks = require(\"extract-css-chunks-webpack-plugin\")\n\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [\n          ExtractCssChunks.loader,\n          {\n            loader: 'css-loader',\n            options: {\n              modules: true,\n              localIdentName: '[name]__[local]--[hash:base64:5]',\n            },\n          },\n        ],\n      },\n    ],\n  },\n  optimization: {\n      // FOR PRODUCTION\n      minimizer: [\n          new UglifyJSPlugin({\n              uglifyOptions: {\n                  output: {\n                      comments: false,\n                      ascii_only: true\n                  },\n                  compress: {\n                      comparisons: false\n                  }\n              }\n          })\n      ],\n      // END\n      // NEEDED BOTH IN PROD AND DEV BUILDS\n      runtimeChunk: {\n          name: 'bootstrap'\n      },\n      splitChunks: {\n          chunks: 'initial',\n          cacheGroups: {\n              vendors: {\n                  test: /[\\\\/]node_modules[\\\\/]/,\n                  name: 'vendor'\n              }\n          }\n      }\n  },\n  plugins: [\n    new ExtractCssChunks({hot:true}), //if you want HMR - we try to automatically inject hot reloading but if it's not working, add it to the config\n  ]\n};\n```\n\n## Desired Output\nHere's the sort of CSS you can expect to serve:\n\n```\n<head>\n\t<link rel='stylesheet' href='/static/main.css' />\n\t<link rel='stylesheet' href='/static/0.css' />\n\t<link rel='stylesheet' href='/static/7.css' />\n</head> \n\n<body>\n\t<div id=\"react-root\"></div>\n\t\n\t<script type='text/javascript' src='/static/vendor.js'></script>\n\t<script type='text/javascript' src='/static/0.js'></script>\n\t<script type='text/javascript' src='/static/7.js'></script>\n\t<script type='text/javascript' src='/static/main.js'></script>\n</body>\n```\n\nIf you need to resolve your stylesheets on the client side, for whatever reason. \n\n[webpack-flush-chunks](https://github.com/faceyspacey/webpack-flush-chunks) will scoop up the exact stylesheets to embed in your response. It will give you an object which can be embedded on page\n\nHere's how you do it:\n\n\n*src/components/App.js:*\n```js\nconst UniversalComponent = universal(props => import(`./${props.page}`))\n\n<UniversalComponent page='Foo' />\n```\n\n*server/render.js:*\n```js\nimport { flushChunkNames } from 'react-universal-component/server'\nimport flushChunks from 'webpack-flush-chunks'\n\nconst app = ReactDOMServer.renderToString(<App />)\nconst { js, styles, cssHash } = flushChunks(webpackStats, {\n  chunkNames: flushChunkNames()\n})\n\nres.send(`\n  <!doctype html>\n  <html>\n    <head>\n      ${styles}\n    </head>\n    <body>\n      <div id=\"root\">${app}</div>\n      <!-- not needed unless you want to access css chunks urls manually  -->\n      ${cssHash}\n      <!-- extract-css-chunks takes care of loading the css assets automatically -->\n      ${js}\n    </body>\n  </html>\n`)\n```\n\n***As for asynchronous calls to `import()` on user navigation,*** [babel-plugin-universal-import](https://github.com/faceyspacey/babel-plugin-universal-import) is required if you're using [react-universal-component](https://github.com/faceyspacey/react-universal-component). And if you aren't, you must use: [babel-plugin-dual-import](https://github.com/faceyspacey/babel-plugin-dual-import). \n\n\nThese babel plugins request both your js + your css. *Very Nice!* This is the new feature of the 2.0. Read *Sokra's* (author of webpack) article on how [on how this is the future of CSS for webpack](https://medium.com/webpack/the-new-css-workflow-step-1-79583bd107d7). Use this and be in the future today.\n\n\n## API \nYou can pass the same options as `mini-css-extract` to `new ExtractCssChunks`, such as:\n\n```javascript\nnew ExtractCssChunk({\n      filename: devMode ? '[name].css' : '[name].[hash].css',\n      chunkFilename: devMode ? '[id].css' : '[id].[hash].css',\n})\n```\n\n>Keep in mind, by default `[name].css` is used when `process.env.NODE_ENV === 'development'` and `[name].[contenthash].css` during production, so you can likely forget about having to pass anything.\n\n### HMR Pitfall\n\nThe most common workflow when working with webpack is to write a \"development\" / \"production\" value in to the\n'process.env.NODE_ENV' namespace, typically, using webpack's built-in \"DefinePlugin\" plugin. e.g:\n\n```javascript\nnew webpack.DefinePlugin( {\n     'process.env': {\n        NODE_ENV: `\"${config.devMode ? 'development' : 'production'}\"`,\n      },\n} )\n```\nThe value set by the aforementioned plugin will only be available in the runtime ( when webpack's javascript output is executed ).\nIn order for this plugin to work with hot module reloading, The npm script / gulp task / grunt task etc, should be invoked with the same environment variable as shown above.\n\nFor example, when running the build using some form of npm script:\n\n```json\n{\n  \"scripts\": {\n     \"build\": \"cross-env NODE_ENV=production babel src -d dist --ignore 'src/**/*.test.js' --copy-files\"\n  }\n}\n```\n[cross-env](https://www.npmjs.com/package/cross-env) is optional but recommended. \n\n### What about Glamorous, Styled Components, Styled-Jsx, Aphrodite, etc?\n\nIf you effectively use code-splitting, **Extract Css Chunks** can be a far better option than using emerging solutions like *Glamorous*, *Styled Components*, and slightly older tools like *Aphrodite*, *Glamor*, etc. We aren't fans of either rounds of tools because of several issues, but particularly because they all have a runtime overhead. Every time your React component is rendered with those, CSS is generated and updated within the DOM. On the server, you're going to also see unnecessary cycles for flushing the CSS along the critical render path. *Next.js's* `styled-jsx`, by the way, doesn't even work on the server--*not so good when it comes to flash of unstyled content (FOUC).*\n\nThe reason **Extract CSS Chunk** can be a better option is because **we also generate multiple sets of CSS based on what is actually \"used\",** ***but without the runtime overhead***. The difference is our definition of \"used\" is modules determined *statically* (which may not in fact be rendered) vs. what is in the \"critical render path\" (as is the case with the other tools). \n\nSo yes, our CSS may be mildly larger and include unnecessary css, but our `no_css.js` bundles will be a lot smaller as they don't need to inject any styles. See, even though those solutions have the smallest possible CSS file size, their javascript bundles, **in order to continue to render your components styled properly on the client,** must contain the necessary CSS for all possibilities! Those solutions serve both your entire bundle's CSS (in your javascript) **and** the CSS flushed from the critical render path. \n\nOn top of that, those are extra packages all with a huge number of issues in their Github repos corresponding to various limitations in the CSS they generate--something that is prevented when your definition for \"CSS-in-JS\" is simply importing CSS files compiled as normal by powerful proven CSS-specific processors.\n\nLastly, those solutions don't provide cacheable stylesheets. They do a lot of work--but they will **continue** doing it for you when you could have been done in one go long ago. Cloudflare is free--serve them through their CDN and you're winning. I love true javascript in css--don't get me wrong--but first I'd have to see they generate cacheable stylesheets. In my opinion, for now, it's best for environments that natively support it such as React Native.\n\n\n### Next:\n\nNow with that out of the way, for completeness let's compare what bytes of just the CSS are sent over the wire. The difference basically is minimal. Whereas solutions that flush from the critical render path will capture no more than the precise bits of CSS from the `if/else` branches followed, **Extract Css Chunks** is all about you effectively using code-splitting to insure, for example, you don't serve your Administration Panel's CSS in your public-facing site, etc. *In other words, it's all about avoiding serving large swaths of CSS from completely different sections of your app.* ***I.e. the biggest gains available to you.*** \n\n<details>\n<summary>\n    Read more on the topic ^^\n</summary>\n\nThis is where the real problem lies--where the real amount of unnecessary CSS comes from. If you effectively code-split your app, you may end up with 10 chunks. Now you can serve just the corresponding CSS for that chunk. If you try to go even farther and remove the css not used in the render path, you're likely achieving somewhere between 1-20% of the gains you achieved by thorough code-splitting. In other words, code splitting fulfills the 80/20 rule and attains the simple sweetspot of 80% optimization you--*as a balanced, level-headed, non-neurotic and professional developer*--are looking to achieve.\n\n*In short, by putting code splitting in appropriate places you have a lot of control over the CSS files that are created and can send a sensible* ***minimal*** *amount of associated bytes over the wire for the first request, perhaps even the smallest amount of all options.* \n\nIt's our perspective that you have achieved 80-99% of the performance gains (i.e. the creation of small relevant css files) at this ***static stage***. Offloading this work to the runtime stage is ultimately nit-picking and results in diminishing returns. When you factor that your JS bundle has to contain that JS anyway, those solutions make less and less sense from the perspective of reducing bytes delivered in the initial request. \n\nThere may be other reasons to use those tools (e.g. you don't like setting up webpack configs, or somehow you're really fond of pre-creating many `<div />` elements with their styles), but we prefer a simple standards-based way (without HoCs or specialized style components) to import styles just as you would in React Native. However to give the other tools credit, many of them likely started out with a different problem motivating them: avoiding webpack configs so you can include packages and their contained CSS without client apps being required to setup something like CSS loaders in Webpack. Having your CSS completely contained in true JS has its use cases, but at the application level--especially when you're already using something like Webpack--we fail to see its benefits. About all they share is a solution to avoiding **flashes of unstyled content** (FOUC), except one can save you a lot more bytes in what you send over the wire and save you from a continual runtime overhead where it's not needed. ***Honorable Mention:*** *StyleTron's concept of \"atomic declaration-level deduplication\" where it will make a class out of, say, `color: blue` so you don't need to send redundant styles certainly is a novel innovation, but again if the code still exists in your JS and you're building an application using Webpack (instead of a package), what's the point. In fact, it just makes editing the stylesheets in your browser developer tools more complicated. One benefit of critical render path solutions is the browser can spend less time matching the smaller number of styles to new DOM nodes as they appear, but then again it also has to spend the time injecting and parsing the new styles constantly, which is likely costlier.*\n\nAs an aside, so many apps share code between web and React Native--so the answer to the styles problem must be one that is identical for both. From that perspective importing a styles object **still** makes a lot of sense. **You're not missing out on the fundamental aspect of CSS-in-JSS:** ***isolated component-level styles and the ability to import them just like any other javascript code.*** Put them in other files, and use tools like `extract-css-chunks-webpack-plugin` and your pre-processors of choice that innately get styles right for the browser. As long as you're using **CSS Modules**, you're still at the cutting edge of CSS-in-JSS. Let's just say the other tools took one wrong turn and took it too far, when we already were at our destination. \n</details>\n\n\n#### SUMMARY OF BENEFITS COMPARED TO \"CRITICAL-RENDER-PATH\" SOLUTIONS:\n\n- no continual runtime overhead during `render` using HoCs that inject styles\n- smaller JS bundles without CSS injection\n- **You DO NOT need to clutter your component code with a specialized way of applying CSS (HoCs, styled elements)!** \n- The way you import module-based styles is exactly how you would import styles in React Native that exist in a separate file, which allows for extremely interchangeable code between React Native and regular React. Hurray! \n- pretty much already does everything covered by [@vjeux's 2014 css-in-js talk](https://speakerdeck.com/vjeux/react-css-in-js), besides dead code elimination. Dead code elimination is only solved for the other tools--as per the explanation above how the CSS is in the JS anyway--so much as Webpack and Uglify can remove **JS** that is not used. Either way, it's not a stretch to eventually add this feature to `extract-text-webpack-plugin` as well as this plugin. Hey, maybe it already has it??\n\n## Emotion!\n\n[Emotion](https://github.com/tkh44/emotion) is different. They allow for the extraction of static styles via their *extract mode*. We're very much looking forward to this being the perfect companion to the css chunks approach. \n<details>\n<summary>\n    Read more on the topic ^^\n</summary>\n\nCurrently however *extract mode* does not support IE11. So that means it's a no go, but we have hopes that in the future they'll solve that problem.\n\nThe reason Emotion doesn't work in IE11+ is because they currently try to preserve any dynamic aspects of your CSS-in-JS by converting it CSS vars, which isn't supported in IE11. That was a very smart approach, but unfortunately not good enough. \n\nThe vision we'd like to see for that package is where dynamic css stays inline, and where only static CSS is extracted into stylesheets, in which case CSS vars aren't needed. I've heard from them they have some \"hidden flags\" that allow for something close to this. When, and if, they take this feature all the way, look forward to us pushing it as our recommended approach. *Go Emotion!*\n</details>\n\n## Linaria\n\nLinaria is another modern CSS-in-JSS library. It's focused around static styles, which may make it a perfect fit for usage with this plugin. Check it out:\n\nhttps://github.com/callstack/linaria\n\n## What if I don't use SSR and use html-webpack-plugin?\n\nFor that case you can use [css-chunks-html-webpack-plugin](https://github.com/teamable-software/css-chunks-html-webpack-plugin) which will extract CSS chunks paths into your HTML file.\n\n## Conclusion:\n**We love CSS modules; no less, no more.**\n\n**Long live the dream of Code Splitting Everywhere!**\n\n\n## Contributing\nWe use [commitizen](https://github.com/commitizen/cz-cli), so run `npm run cm` to make commits. A command-line form will appear, requiring you answer a few questions to automatically produce a nicely formatted commit. Releases, semantic version numbers, tags and changelogs will automatically be generated based on these commits thanks to [semantic-release](https://github.com/semantic-release/semantic-release). Be good.\n\n## More from FaceySpacey in Reactlandia\n- [redux-first-router](https://github.com/faceyspacey/redux-first-router). It's made to work perfectly with *Universal*. Together they comprise our *\"frameworkless\"* Redux-based approach to what Next.js does (splitting, SSR, prefetching, and routing). *People are lovin it by the way* 😎\n","readmeFilename":"README.md","gitHead":"1d60e6ef17c547637fc072cd40fb9aec5fd64903","bugs":{"url":"https://github.com/faceyspacey/extract-css-chunks-webpack-plugin/issues"},"_id":"extract-css-chunks-webpack-plugin@3.1.0-beta.4","_npmVersion":"5.5.1","_nodeVersion":"8.9.0","_npmUser":{"name":"zackljackson","email":"zackary.l.jackson@gmail.com"},"dist":{"integrity":"sha512-szCa/rglh3ciPNM5dVe6IxkR9VJl8nnpvZXCZaUEj+KwouebcT5jjIjkO/5GcZ2khbeS4grX9YH89PRh/Vaitg==","shasum":"551238a7a7a42682e2fbc13162a1d43fb6f2b228","tarball":"https://registry.npmjs.org/extract-css-chunks-webpack-plugin/-/extract-css-chunks-webpack-plugin-3.1.0-beta.4.tgz","fileCount":8,"unpackedSize":49673,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbbM1qCRA9TVsSAnZWagAAlOUQAI51+anPvdndRZGR+wqI\nF7TBraQYjOIpXrr2T6VT1FGx+CEELT8vos8f5u0gS0mxi0z00TRUcVpV2X9n\nTCxICMdX0aAFYglleQvDpZgGNKwNkEriHH3QqoPyCSzeCRbQspf6yEvqOpMn\nnFJVbhYZMyWBvNyW4ooWF5Lh+NFVpP+irQKmshqbhECFXpw20UadHxCHl7mW\nWSJyjxb4XFGhlJs0LT9k/vpqHKUyxACMVcjDf/LAA3JCmNafHzmn3QsuH0ca\n03eTqdXr7Es4Cny0iex/hWcLAtBjsmyF9HHPAQtTulQqLqxOz+r5barvH3ih\nvwPM+yKKlKFzMS8ytMzNOEKoEYqe6yP41IsuCUExprbGp8v513BVykelLZUl\n6FeJ3UAYaUTuoOASgMLet4C88/N9miUTE6aAqaRCMs1R58TUSZ15fvHUMDTY\ngCUFpUIC3ikuzxu2axA40Xqy/Hval68U2oJ9gcdhFN+tuYGYaBpr6nh/fW2J\nz8C0Moeghd6Voqm1Spz3V2HR+m3kirVFiB0JrFrWTnqOS9UXMcEUK76p6hS6\njek3BuVCmQ9k4e42RYGll9rvgv8IHVJ3leVC5yUGfOefEQHq7yQuz6uRSHrc\nYvMti/SKzdxEvpFMvlJNmsEHuqDGQa6+k50CstI0kVdsBi/NBUTX83TwdtkI\nD5Xe\r\n=N4Q5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCWcrbjGI+hrfC0uqCx2jJoelYoawhSHfqaUAxBtaVH7AIhAOycfxkeoOTi/YiiQ7+IZJiuFAD13YdS4EN3d/q4M1uv"}]},"maintainers":[{"email":"james@faceyspacey.com","name":"faceyspacey"},{"email":"zackary.l.jackson@gmail.com","name":"zackljackson"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/extract-css-chunks-webpack-plugin_3.1.0-beta.4_1533857130015_0.7390529768111624"},"_hasShrinkwrap":false},"3.1.0-beta.7":{"name":"extract-css-chunks-webpack-plugin","version":"3.1.0-beta.7","author":{"name":"James Gillmore","email":"james@faceyspacey.com"},"contributors":[{"name":"Zack Jackson","email":"zackary.l.jackson@gmail.com","url":"https://github.com/ScriptedAlchemy"}],"description":"Extract CSS from chunks into stylesheets + HMR. Supports Webpack 4","engines":{"node":">= 6.9.0 <7.0.0 || >= 8.9.0"},"main":"dist/cjs.js","files":["dist"],"keywords":["css","chunks","code splitting","mini-css","hot","hmr","universal","webpack","webpack 4"],"license":"MIT","scripts":{"start":"npm run build -- -w","build":"cross-env NODE_ENV=production babel src -d dist --ignore 'src/**/*.test.js' --copy-files","clean":"del-cli dist","lint":"eslint --cache --fix src","prebuild":"npm run clean","prepublish":"npm run build","security":"nsp check","test":"jest","test:watch":"jest --watch","test:coverage":"jest --collectCoverageFrom='src/**/*.js' --coverage","test:example":"npm run build && webpack-dev-server test/manual/src/index.js --config test/manual/webpack.config.js","ci:lint":"npm run lint && npm run security","ci:test":"npm run test -- --runInBand","ci:coverage":"npm run test:coverage -- --runInBand","build:example":"npm run build && webpack-dev-server test/manual/src/index.js --open --config test/manual/webpack.config.js","cm":"git-cz","release":"standard-version","semantic-release":"semantic-release pre && npm publish && semantic-release post","travis":"npm run ci:coverage"},"peerDependencies":{"webpack":"^4.8.3"},"dependencies":{"loader-utils":"^1.1.0","lodash":"^4.17.5","normalize-url":"^1.9.1","webpack-sources":"^1.1.0"},"devDependencies":{"@webpack-contrib/eslint-config-webpack":"^2.0.4","babel-cli":"^6.26.0","babel-eslint":"^7.2.3","babel-jest":"^22.2.2","babel-loader":"^7.1.4","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-polyfill":"^6.26.0","babel-preset-env":"^1.6.1","commitizen":"^2.10.1","conventional-github-releaser":"^2.0.2","cross-env":"^5.1.3","css-loader":"^0.28.10","cz-conventional-changelog":"^2.1.0","del":"^3.0.0","del-cli":"^1.1.0","eslint":"^3.19.0","eslint-config-airbnb":"^15.0.1","eslint-plugin-flowtype":"^2.32.1","eslint-plugin-import":"^2.8.0","eslint-plugin-jsx-a11y":"^5.0.3","eslint-plugin-prettier":"^2.6.0","eslint-plugin-react":"^7.0.1","husky":"^0.14.3","jest":"^22.2.2","memory-fs":"^0.4.1","nsp":"^3.1.0","pre-commit":"^1.2.2","prettier":"^1.11.1","standard-version":"^4.3.0","webpack":"4.8.3","webpack-cli":"^2.0.13","webpack-dev-server":"^3.1.1"},"homepage":"http://github.com/faceyspacey/extract-css-chunks-webpack-plugin","repository":{"type":"git","url":"git+https://github.com/faceyspacey/extract-css-chunks-webpack-plugin.git"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"readme":"<a href=\"https://gitter.im/Reactlandia/Lobby\" target=\"_blank\">\n  <img alt=\"Edit Redux-First Router Demo\" src=\"http://cdn.reactlandia.com/chat-badge-reactlandia.png\">\n</a>\n\n\n# extract-css-chunks-webpack-plugin\n\n<p align=\"center\">\n  <a href=\"https://www.npmjs.com/package/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://img.shields.io/npm/v/extract-css-chunks-webpack-plugin.svg\" alt=\"Version\" />\n  </a>\n\n  <a href=\"https://travis-ci.org/faceyspacey/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://travis-ci.org/faceyspacey/extract-css-chunks-webpack-plugin.svg?branch=master\" alt=\"Build Status\" />\n  </a>\n\n  <a href=\"https://www.npmjs.com/package/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://img.shields.io/npm/dt/extract-css-chunks-webpack-plugin.svg\" alt=\"Downloads\" />\n  </a>\n\n  <a href=\"https://www.npmjs.com/package/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://img.shields.io/npm/dm/extract-css-chunks-webpack-plugin.svg\" alt=\"License\" />\n  </a>\n  \n  <a href=\"https://www.npmjs.com/package/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://img.shields.io/npm/l/extract-css-chunks-webpack-plugin.svg\" alt=\"License\" />\n  </a>\n</p>\n\n<h2 align=\"center\">🍾🍾🍾It's our absolute pleasure to announce Webpack 4 Support 🚀🚀🚀</h2>\n\n> **HEADLINES (May 2018): Now Independently supports Webpack 4:** \nYep that's right. The universal family is now fully Webpack 4. Thank you to all our users for your loyalty and patience! If you love Universal, then you are gonna fall head over heels when we bring out the main course! \n\nSo... why did we rebuild `extract-css-chunks`? What does it offer? \n\nIt's got all the goodness of `mini-css-extract-plugin` but with 2 gleaming, sought after benefits. \n\nCompared to the existing loaders, we are offering a single solution as opposed to needing to depend on multiple loaders to cater for different features:\n\n## Perks\n* **HMR:** It also has first-class support for **Hot Module Replacement** across ALL those css files/chunks!!!\n* cacheable stylesheets \n* smallest total bytes sent compared to \"render-path\" css-in-js solutions that include your CSS definitions in JS\n* Faster than the V2!\n* Async loading\n* No duplicate compilation (performance)\n* Easier to use\n* Specific to CSS\n* SSR Friendly development build, focused on frontend DX\n* Works seamlessly with the Universal family\n* Works fantastically as a standalone style loader (You can use it for any webpack project! with no extra dependencies!)\n\nAdditionally, if you are already a user of the universal family -- we will be waving goodbye to the mandatory ```window.__CSS_CHUNKS__```.\n\nThe functionality is still available to you via chunk flushing, and it can come in super handy when needing to easily resolve style assets as urls that might need to be passed to a third party.\n\n## Webpack 4 Standalone Installation:\n\nIf you are just looking for something that works like `mini-css-extract-plugin` but with HMR, then look no further.\n\nNOTE: We have aligned out loader implementation to be the same as `mini-css-extract-plugin` \n\n**If you already use `mini-css-extract-plugin`, then you can just change the `require` statement - it's that easy**\n\n```\nyarn add --dev extract-css-chunks-webpack-plugin\n```\n\n*webpack.config.js:*\n```js\nconst ExtractCssChunks = require(\"extract-css-chunks-webpack-plugin\")\n\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [\n           ExtractCssChunks.loader,\n           \"css-loader\"\n         ]\n      }\n    ]\n  },\n  plugins: [\n    new ExtractCssChunks(\n        {\n          // Options similar to the same options in webpackOptions.output\n          // both options are optional\n          filename: \"[name].css\",\n          chunkFilename: \"[id].css\",\n          hot: true // optional as the plugin cannot automatically detect if you are using HOT, not for production use\n        }\n    ),\n  ]\n}\n```\n\n*webpack.server.config.js*\n\nThe server needs to be handled differently, we still want one chunk. Luckily webpack 4 supports **LimitChunkCountPlugin**\n\n```js\nnew webpack.optimize.LimitChunkCountPlugin({\n    maxChunks: 1\n})\n```\n\n\n### What about Webpack 3?\nThis is a breaking change. The entire loader has been fundamentally rewritten specifically for Webpack 4. Aiming to support our existing user base, allowing them to upgrade their infrastructure to support Webpack 4 based universally code-split server-side rendered react applications. \n\nThere have been some challenges along the way since the release of webpack 4. Ultimately the only remaining hurdle is code split, async style loading. \n\nIf you do need Webpack 3, make sure to stick with the latest `v2.x.x` release. `v3.x.x` is only intended for users with Webpack 4\n\n\n\n\n*Note: this is a companion package to:*\n- [webpack-flush-chunks](https://github.com/faceyspacey/webpack-flush-chunks) \n- [react-universal-component](https://github.com/faceyspacey/react-universal-component)\n- [babel-plugin-universal-import](https://github.com/faceyspacey/babel-plugin-universal-import) ***or*** [babel-plugin-dual-import](https://github.com/faceyspacey/babel-plugin-dual-import)\n\n\n## Recommended Installation For Universal\n```\nyarn add react-universal-component webpack-flush-chunks\nyarn add --dev extract-css-chunks-webpack-plugin babel-plugin-universal-import\n```\n\n*.babelrc:*\n```js\n{\n  \"plugins\": [\"universal-import\"]\n}\n```\nThe main thing is you need to cater to the new chunking system of webpack!\nWith **webpack.optimize.CommonsChunkPlugin** plugin no longer part of Webpack 4, we need another way to define the code-splitting. Luckily we have `optimization` configs built into webpack now\n\n> There are more aggressive ways to code split, thanks to webpack 4. Check out the RUC Readme if you are looking for a more aggressive code split optimization configuration. These are just examples, you should be able to configure them as you see fit\n\n*webpack.config.js:*\n```js\nconst ExtractCssChunks = require(\"extract-css-chunks-webpack-plugin\")\n\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [\n          ExtractCssChunks.loader,\n          {\n            loader: 'css-loader',\n            options: {\n              modules: true,\n              localIdentName: '[name]__[local]--[hash:base64:5]',\n            },\n          },\n        ],\n      },\n    ],\n  },\n  optimization: {\n      // FOR PRODUCTION\n      minimizer: [\n          new UglifyJSPlugin({\n              uglifyOptions: {\n                  output: {\n                      comments: false,\n                      ascii_only: true\n                  },\n                  compress: {\n                      comparisons: false\n                  }\n              }\n          })\n      ],\n      // END\n      // NEEDED BOTH IN PROD AND DEV BUILDS\n      runtimeChunk: {\n          name: 'bootstrap'\n      },\n      splitChunks: {\n          chunks: 'initial',\n          cacheGroups: {\n              vendors: {\n                  test: /[\\\\/]node_modules[\\\\/]/,\n                  name: 'vendor'\n              }\n          }\n      }\n  },\n  plugins: [\n    new ExtractCssChunks({hot:true}), //if you want HMR - we try to automatically inject hot reloading but if it's not working, add it to the config\n  ]\n};\n```\n\n## Desired Output\nHere's the sort of CSS you can expect to serve:\n\n```\n<head>\n\t<link rel='stylesheet' href='/static/main.css' />\n\t<link rel='stylesheet' href='/static/0.css' />\n\t<link rel='stylesheet' href='/static/7.css' />\n</head> \n\n<body>\n\t<div id=\"react-root\"></div>\n\t\n\t<script type='text/javascript' src='/static/vendor.js'></script>\n\t<script type='text/javascript' src='/static/0.js'></script>\n\t<script type='text/javascript' src='/static/7.js'></script>\n\t<script type='text/javascript' src='/static/main.js'></script>\n</body>\n```\n\nIf you need to resolve your stylesheets on the client side, for whatever reason. \n\n[webpack-flush-chunks](https://github.com/faceyspacey/webpack-flush-chunks) will scoop up the exact stylesheets to embed in your response. It will give you an object which can be embedded on page\n\nHere's how you do it:\n\n\n*src/components/App.js:*\n```js\nconst UniversalComponent = universal(props => import(`./${props.page}`))\n\n<UniversalComponent page='Foo' />\n```\n\n*server/render.js:*\n```js\nimport { flushChunkNames } from 'react-universal-component/server'\nimport flushChunks from 'webpack-flush-chunks'\n\nconst app = ReactDOMServer.renderToString(<App />)\nconst { js, styles, cssHash } = flushChunks(webpackStats, {\n  chunkNames: flushChunkNames()\n})\n\nres.send(`\n  <!doctype html>\n  <html>\n    <head>\n      ${styles}\n    </head>\n    <body>\n      <div id=\"root\">${app}</div>\n      <!-- not needed unless you want to access css chunks urls manually  -->\n      ${cssHash}\n      <!-- extract-css-chunks takes care of loading the css assets automatically -->\n      ${js}\n    </body>\n  </html>\n`)\n```\n\n***As for asynchronous calls to `import()` on user navigation,*** [babel-plugin-universal-import](https://github.com/faceyspacey/babel-plugin-universal-import) is required if you're using [react-universal-component](https://github.com/faceyspacey/react-universal-component). And if you aren't, you must use: [babel-plugin-dual-import](https://github.com/faceyspacey/babel-plugin-dual-import). \n\n\nThese babel plugins request both your js + your css. *Very Nice!* This is the new feature of the 2.0. Read *Sokra's* (author of webpack) article on how [on how this is the future of CSS for webpack](https://medium.com/webpack/the-new-css-workflow-step-1-79583bd107d7). Use this and be in the future today.\n\n\n## API \nYou can pass the same options as `mini-css-extract` to `new ExtractCssChunks`, such as:\n\n```javascript\nnew ExtractCssChunk({\n      filename: devMode ? '[name].css' : '[name].[hash].css',\n      chunkFilename: devMode ? '[id].css' : '[id].[hash].css',\n})\n```\n\n>Keep in mind, by default `[name].css` is used when `process.env.NODE_ENV === 'development'` and `[name].[contenthash].css` during production, so you can likely forget about having to pass anything.\n\n### HMR Pitfall\n\nThe most common workflow when working with webpack is to write a \"development\" / \"production\" value in to the\n'process.env.NODE_ENV' namespace, typically, using webpack's built-in \"DefinePlugin\" plugin. e.g:\n\n```javascript\nnew webpack.DefinePlugin( {\n     'process.env': {\n        NODE_ENV: `\"${config.devMode ? 'development' : 'production'}\"`,\n      },\n} )\n```\nThe value set by the aforementioned plugin will only be available in the runtime ( when webpack's javascript output is executed ).\nIn order for this plugin to work with hot module reloading, The npm script / gulp task / grunt task etc, should be invoked with the same environment variable as shown above.\n\nFor example, when running the build using some form of npm script:\n\n```json\n{\n  \"scripts\": {\n     \"build\": \"cross-env NODE_ENV=production babel src -d dist --ignore 'src/**/*.test.js' --copy-files\"\n  }\n}\n```\n[cross-env](https://www.npmjs.com/package/cross-env) is optional but recommended. \n\n### What about Glamorous, Styled Components, Styled-Jsx, Aphrodite, etc?\n\nIf you effectively use code-splitting, **Extract Css Chunks** can be a far better option than using emerging solutions like *Glamorous*, *Styled Components*, and slightly older tools like *Aphrodite*, *Glamor*, etc. We aren't fans of either rounds of tools because of several issues, but particularly because they all have a runtime overhead. Every time your React component is rendered with those, CSS is generated and updated within the DOM. On the server, you're going to also see unnecessary cycles for flushing the CSS along the critical render path. *Next.js's* `styled-jsx`, by the way, doesn't even work on the server--*not so good when it comes to flash of unstyled content (FOUC).*\n\nThe reason **Extract CSS Chunk** can be a better option is because **we also generate multiple sets of CSS based on what is actually \"used\",** ***but without the runtime overhead***. The difference is our definition of \"used\" is modules determined *statically* (which may not in fact be rendered) vs. what is in the \"critical render path\" (as is the case with the other tools). \n\nSo yes, our CSS may be mildly larger and include unnecessary css, but our `no_css.js` bundles will be a lot smaller as they don't need to inject any styles. See, even though those solutions have the smallest possible CSS file size, their javascript bundles, **in order to continue to render your components styled properly on the client,** must contain the necessary CSS for all possibilities! Those solutions serve both your entire bundle's CSS (in your javascript) **and** the CSS flushed from the critical render path. \n\nOn top of that, those are extra packages all with a huge number of issues in their Github repos corresponding to various limitations in the CSS they generate--something that is prevented when your definition for \"CSS-in-JS\" is simply importing CSS files compiled as normal by powerful proven CSS-specific processors.\n\nLastly, those solutions don't provide cacheable stylesheets. They do a lot of work--but they will **continue** doing it for you when you could have been done in one go long ago. Cloudflare is free--serve them through their CDN and you're winning. I love true javascript in css--don't get me wrong--but first I'd have to see they generate cacheable stylesheets. In my opinion, for now, it's best for environments that natively support it such as React Native.\n\n\n### Next:\n\nNow with that out of the way, for completeness let's compare what bytes of just the CSS are sent over the wire. The difference basically is minimal. Whereas solutions that flush from the critical render path will capture no more than the precise bits of CSS from the `if/else` branches followed, **Extract Css Chunks** is all about you effectively using code-splitting to insure, for example, you don't serve your Administration Panel's CSS in your public-facing site, etc. *In other words, it's all about avoiding serving large swaths of CSS from completely different sections of your app.* ***I.e. the biggest gains available to you.*** \n\n<details>\n<summary>\n    Read more on the topic ^^\n</summary>\n\nThis is where the real problem lies--where the real amount of unnecessary CSS comes from. If you effectively code-split your app, you may end up with 10 chunks. Now you can serve just the corresponding CSS for that chunk. If you try to go even farther and remove the css not used in the render path, you're likely achieving somewhere between 1-20% of the gains you achieved by thorough code-splitting. In other words, code splitting fulfills the 80/20 rule and attains the simple sweetspot of 80% optimization you--*as a balanced, level-headed, non-neurotic and professional developer*--are looking to achieve.\n\n*In short, by putting code splitting in appropriate places you have a lot of control over the CSS files that are created and can send a sensible* ***minimal*** *amount of associated bytes over the wire for the first request, perhaps even the smallest amount of all options.* \n\nIt's our perspective that you have achieved 80-99% of the performance gains (i.e. the creation of small relevant css files) at this ***static stage***. Offloading this work to the runtime stage is ultimately nit-picking and results in diminishing returns. When you factor that your JS bundle has to contain that JS anyway, those solutions make less and less sense from the perspective of reducing bytes delivered in the initial request. \n\nThere may be other reasons to use those tools (e.g. you don't like setting up webpack configs, or somehow you're really fond of pre-creating many `<div />` elements with their styles), but we prefer a simple standards-based way (without HoCs or specialized style components) to import styles just as you would in React Native. However to give the other tools credit, many of them likely started out with a different problem motivating them: avoiding webpack configs so you can include packages and their contained CSS without client apps being required to setup something like CSS loaders in Webpack. Having your CSS completely contained in true JS has its use cases, but at the application level--especially when you're already using something like Webpack--we fail to see its benefits. About all they share is a solution to avoiding **flashes of unstyled content** (FOUC), except one can save you a lot more bytes in what you send over the wire and save you from a continual runtime overhead where it's not needed. ***Honorable Mention:*** *StyleTron's concept of \"atomic declaration-level deduplication\" where it will make a class out of, say, `color: blue` so you don't need to send redundant styles certainly is a novel innovation, but again if the code still exists in your JS and you're building an application using Webpack (instead of a package), what's the point. In fact, it just makes editing the stylesheets in your browser developer tools more complicated. One benefit of critical render path solutions is the browser can spend less time matching the smaller number of styles to new DOM nodes as they appear, but then again it also has to spend the time injecting and parsing the new styles constantly, which is likely costlier.*\n\nAs an aside, so many apps share code between web and React Native--so the answer to the styles problem must be one that is identical for both. From that perspective importing a styles object **still** makes a lot of sense. **You're not missing out on the fundamental aspect of CSS-in-JSS:** ***isolated component-level styles and the ability to import them just like any other javascript code.*** Put them in other files, and use tools like `extract-css-chunks-webpack-plugin` and your pre-processors of choice that innately get styles right for the browser. As long as you're using **CSS Modules**, you're still at the cutting edge of CSS-in-JSS. Let's just say the other tools took one wrong turn and took it too far, when we already were at our destination. \n</details>\n\n\n#### SUMMARY OF BENEFITS COMPARED TO \"CRITICAL-RENDER-PATH\" SOLUTIONS:\n\n- no continual runtime overhead during `render` using HoCs that inject styles\n- smaller JS bundles without CSS injection\n- **You DO NOT need to clutter your component code with a specialized way of applying CSS (HoCs, styled elements)!** \n- The way you import module-based styles is exactly how you would import styles in React Native that exist in a separate file, which allows for extremely interchangeable code between React Native and regular React. Hurray! \n- pretty much already does everything covered by [@vjeux's 2014 css-in-js talk](https://speakerdeck.com/vjeux/react-css-in-js), besides dead code elimination. Dead code elimination is only solved for the other tools--as per the explanation above how the CSS is in the JS anyway--so much as Webpack and Uglify can remove **JS** that is not used. Either way, it's not a stretch to eventually add this feature to `extract-text-webpack-plugin` as well as this plugin. Hey, maybe it already has it??\n\n## Emotion!\n\n[Emotion](https://github.com/tkh44/emotion) is different. They allow for the extraction of static styles via their *extract mode*. We're very much looking forward to this being the perfect companion to the css chunks approach. \n<details>\n<summary>\n    Read more on the topic ^^\n</summary>\n\nCurrently however *extract mode* does not support IE11. So that means it's a no go, but we have hopes that in the future they'll solve that problem.\n\nThe reason Emotion doesn't work in IE11+ is because they currently try to preserve any dynamic aspects of your CSS-in-JS by converting it CSS vars, which isn't supported in IE11. That was a very smart approach, but unfortunately not good enough. \n\nThe vision we'd like to see for that package is where dynamic css stays inline, and where only static CSS is extracted into stylesheets, in which case CSS vars aren't needed. I've heard from them they have some \"hidden flags\" that allow for something close to this. When, and if, they take this feature all the way, look forward to us pushing it as our recommended approach. *Go Emotion!*\n</details>\n\n## Linaria\n\nLinaria is another modern CSS-in-JSS library. It's focused around static styles, which may make it a perfect fit for usage with this plugin. Check it out:\n\nhttps://github.com/callstack/linaria\n\n## What if I don't use SSR and use html-webpack-plugin?\n\nFor that case you can use [css-chunks-html-webpack-plugin](https://github.com/teamable-software/css-chunks-html-webpack-plugin) which will extract CSS chunks paths into your HTML file.\n\n## Conclusion:\n**We love CSS modules; no less, no more.**\n\n**Long live the dream of Code Splitting Everywhere!**\n\n\n## Contributing\nWe use [commitizen](https://github.com/commitizen/cz-cli), so run `npm run cm` to make commits. A command-line form will appear, requiring you answer a few questions to automatically produce a nicely formatted commit. Releases, semantic version numbers, tags and changelogs will automatically be generated based on these commits thanks to [semantic-release](https://github.com/semantic-release/semantic-release). Be good.\n\n## More from FaceySpacey in Reactlandia\n- [redux-first-router](https://github.com/faceyspacey/redux-first-router). It's made to work perfectly with *Universal*. Together they comprise our *\"frameworkless\"* Redux-based approach to what Next.js does (splitting, SSR, prefetching, and routing). *People are lovin it by the way* 😎\n","readmeFilename":"README.md","gitHead":"e8d89bdcf5e3067c7c2658567455c858366b76e6","bugs":{"url":"https://github.com/faceyspacey/extract-css-chunks-webpack-plugin/issues"},"_id":"extract-css-chunks-webpack-plugin@3.1.0-beta.7","_npmVersion":"5.5.1","_nodeVersion":"8.9.0","_npmUser":{"name":"zackljackson","email":"zackary.l.jackson@gmail.com"},"dist":{"integrity":"sha512-ogd1p26OkbjXD9BrOJ8VEeMuH+jThftZ6waRWfk3ZXASBqsYTUFHoV1kyMgeCGCJ6tnjS2BC7QMzO8sx4kw85A==","shasum":"82c0772844854bba9bc59257b893178a7ed1f256","tarball":"https://registry.npmjs.org/extract-css-chunks-webpack-plugin/-/extract-css-chunks-webpack-plugin-3.1.0-beta.7.tgz","fileCount":8,"unpackedSize":49536,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbcb7PCRA9TVsSAnZWagAAeH4P/0ifinHUWCq0AR6DEsPD\niLVigzo8AwdqBShDFyPN5zNky5yasQMwxGRTL8HTK9rHmh0e+xrrL9eyWoIM\nah4koJ1zqHs0xupjlVPbXp6WMsULbjHWb5FnylfAly2eC+LLCQc1Jl0lOmtq\n5cNIa5k54eWc9iRZZyI2lqvyhw2IiyAD7dcc/OZ6x6E83yI/v2e7lWDaBz3N\nM8BVSNryOpiW/AjyMFecHl98rmtufqhGsDawSKZfPW5eqIFB6b4kbL6FzsHv\nJcifAGKEzEG5FhvcL47/qG9XIEnIZ4SFB0aEyO10/T/8C6oTkquikd9XXND+\n59d3aJDYhJzlysXxtV7Yrgjf049jwXKhPLGZZBgSKlpHGzpKBz4mDifU128K\nA/XGh92tAob9LG2mODUTb2thJKsIP6vDuB4WsXFdtTWUlk0BmtgH/0ccW27M\nX8DiRxToRu2xRJwghRflvHGI7PYLjvqZ8Tu4oB4iilLjo5Ipoz824KY3K5G2\nw6uzbeyvkRN14tEP2oE4P9B2C6SU96ttlYe9j+wDnrqJ/JIZ2I105fLXQ8n+\ntkcDAo3dYb/yMHsf5GLq4n4ScR+issE0L5gquW/1joObVwRhBCLebQIJlEPs\nK2qfvedgwf54+/jLq5+KB3GeYtbr/y2Ig3bEyT47q5wISlLtVTeuDgmBQDC8\n7Dku\r\n=bdHu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDG44UtWevqGzPKdueNT3eM3f5x+hKjsgs7sM9EwHNTPAIgazVj5e4FFYr7JQPaYbvu/0N+iqql/JPfroKtObqeClI="}]},"maintainers":[{"email":"james@faceyspacey.com","name":"faceyspacey"},{"email":"zackary.l.jackson@gmail.com","name":"zackljackson"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/extract-css-chunks-webpack-plugin_3.1.0-beta.7_1534181070657_0.9101676367270559"},"_hasShrinkwrap":false},"3.1.0-beta.8":{"name":"extract-css-chunks-webpack-plugin","version":"3.1.0-beta.8","author":{"name":"James Gillmore","email":"james@faceyspacey.com"},"contributors":[{"name":"Zack Jackson","email":"zackary.l.jackson@gmail.com","url":"https://github.com/ScriptedAlchemy"}],"description":"Extract CSS from chunks into stylesheets + HMR. Supports Webpack 4","engines":{"node":">= 6.9.0 <7.0.0 || >= 8.9.0"},"main":"dist/cjs.js","files":["dist"],"keywords":["css","chunks","code splitting","mini-css","hot","hmr","universal","webpack","webpack 4"],"license":"MIT","scripts":{"start":"npm run build -- -w","build":"cross-env NODE_ENV=production babel src -d dist --ignore 'src/**/*.test.js' --copy-files","clean":"del-cli dist","lint":"eslint --cache --fix src","prebuild":"npm run clean","prepublish":"npm run build","security":"nsp check","test":"jest","test:watch":"jest --watch","test:coverage":"jest --collectCoverageFrom='src/**/*.js' --coverage","test:example":"npm run build && webpack-dev-server test/manual/src/index.js --config test/manual/webpack.config.js","ci:lint":"npm run lint && npm run security","ci:test":"npm run test -- --runInBand","ci:coverage":"npm run test:coverage -- --runInBand","build:example":"npm run build && webpack-dev-server test/manual/src/index.js --open --config test/manual/webpack.config.js","cm":"git-cz","release":"standard-version","semantic-release":"semantic-release pre && npm publish && semantic-release post","travis":"npm run ci:coverage"},"peerDependencies":{"webpack":"^4.8.3"},"dependencies":{"loader-utils":"^1.1.0","lodash":"^4.17.5","normalize-url":"^1.9.1","webpack-sources":"^1.1.0"},"devDependencies":{"@webpack-contrib/eslint-config-webpack":"^2.0.4","babel-cli":"^6.26.0","babel-eslint":"^7.2.3","babel-jest":"^22.2.2","babel-loader":"^7.1.4","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-polyfill":"^6.26.0","babel-preset-env":"^1.6.1","commitizen":"^2.10.1","conventional-github-releaser":"^2.0.2","cross-env":"^5.1.3","css-loader":"^0.28.10","cz-conventional-changelog":"^2.1.0","del":"^3.0.0","del-cli":"^1.1.0","eslint":"^3.19.0","eslint-config-airbnb":"^15.0.1","eslint-plugin-flowtype":"^2.32.1","eslint-plugin-import":"^2.8.0","eslint-plugin-jsx-a11y":"^5.0.3","eslint-plugin-prettier":"^2.6.0","eslint-plugin-react":"^7.0.1","husky":"^0.14.3","jest":"^22.2.2","memory-fs":"^0.4.1","nsp":"^3.1.0","pre-commit":"^1.2.2","prettier":"^1.11.1","standard-version":"^4.3.0","webpack":"4.8.3","webpack-cli":"^2.0.13","webpack-dev-server":"^3.1.1"},"homepage":"http://github.com/faceyspacey/extract-css-chunks-webpack-plugin","repository":{"type":"git","url":"git+https://github.com/faceyspacey/extract-css-chunks-webpack-plugin.git"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"readme":"<a href=\"https://gitter.im/Reactlandia/Lobby\" target=\"_blank\">\n  <img alt=\"Edit Redux-First Router Demo\" src=\"http://cdn.reactlandia.com/chat-badge-reactlandia.png\">\n</a>\n\n\n# extract-css-chunks-webpack-plugin\n\n<p align=\"center\">\n  <a href=\"https://www.npmjs.com/package/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://img.shields.io/npm/v/extract-css-chunks-webpack-plugin.svg\" alt=\"Version\" />\n  </a>\n\n  <a href=\"https://travis-ci.org/faceyspacey/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://travis-ci.org/faceyspacey/extract-css-chunks-webpack-plugin.svg?branch=master\" alt=\"Build Status\" />\n  </a>\n\n  <a href=\"https://www.npmjs.com/package/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://img.shields.io/npm/dt/extract-css-chunks-webpack-plugin.svg\" alt=\"Downloads\" />\n  </a>\n\n  <a href=\"https://www.npmjs.com/package/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://img.shields.io/npm/dm/extract-css-chunks-webpack-plugin.svg\" alt=\"License\" />\n  </a>\n  \n  <a href=\"https://www.npmjs.com/package/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://img.shields.io/npm/l/extract-css-chunks-webpack-plugin.svg\" alt=\"License\" />\n  </a>\n</p>\n\n<h2 align=\"center\">🍾🍾🍾It's our absolute pleasure to announce Webpack 4 Support 🚀🚀🚀</h2>\n\n> **HEADLINES (May 2018): Now Independently supports Webpack 4:** \nYep that's right. The universal family is now fully Webpack 4. Thank you to all our users for your loyalty and patience! If you love Universal, then you are gonna fall head over heels when we bring out the main course! \n\nSo... why did we rebuild `extract-css-chunks`? What does it offer? \n\nIt's got all the goodness of `mini-css-extract-plugin` but with 2 gleaming, sought after benefits. \n\nCompared to the existing loaders, we are offering a single solution as opposed to needing to depend on multiple loaders to cater for different features:\n\n## Perks\n* **HMR:** It also has first-class support for **Hot Module Replacement** across ALL those css files/chunks!!!\n* cacheable stylesheets \n* smallest total bytes sent compared to \"render-path\" css-in-js solutions that include your CSS definitions in JS\n* Faster than the V2!\n* Async loading\n* No duplicate compilation (performance)\n* Easier to use\n* Specific to CSS\n* SSR Friendly development build, focused on frontend DX\n* Works seamlessly with the Universal family\n* Works fantastically as a standalone style loader (You can use it for any webpack project! with no extra dependencies!)\n\nAdditionally, if you are already a user of the universal family -- we will be waving goodbye to the mandatory ```window.__CSS_CHUNKS__```.\n\nThe functionality is still available to you via chunk flushing, and it can come in super handy when needing to easily resolve style assets as urls that might need to be passed to a third party.\n\n## Webpack 4 Standalone Installation:\n\nIf you are just looking for something that works like `mini-css-extract-plugin` but with HMR, then look no further.\n\nNOTE: We have aligned out loader implementation to be the same as `mini-css-extract-plugin` \n\n**If you already use `mini-css-extract-plugin`, then you can just change the `require` statement - it's that easy**\n\n```\nyarn add --dev extract-css-chunks-webpack-plugin\n```\n\n*webpack.config.js:*\n```js\nconst ExtractCssChunks = require(\"extract-css-chunks-webpack-plugin\")\n\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [\n           ExtractCssChunks.loader,\n           \"css-loader\"\n         ]\n      }\n    ]\n  },\n  plugins: [\n    new ExtractCssChunks(\n        {\n          // Options similar to the same options in webpackOptions.output\n          // both options are optional\n          filename: \"[name].css\",\n          chunkFilename: \"[id].css\",\n          hot: true // optional as the plugin cannot automatically detect if you are using HOT, not for production use\n        }\n    ),\n  ]\n}\n```\n\n*webpack.server.config.js*\n\nThe server needs to be handled differently, we still want one chunk. Luckily webpack 4 supports **LimitChunkCountPlugin**\n\n```js\nnew webpack.optimize.LimitChunkCountPlugin({\n    maxChunks: 1\n})\n```\n\n\n### What about Webpack 3?\nThis is a breaking change. The entire loader has been fundamentally rewritten specifically for Webpack 4. Aiming to support our existing user base, allowing them to upgrade their infrastructure to support Webpack 4 based universally code-split server-side rendered react applications. \n\nThere have been some challenges along the way since the release of webpack 4. Ultimately the only remaining hurdle is code split, async style loading. \n\nIf you do need Webpack 3, make sure to stick with the latest `v2.x.x` release. `v3.x.x` is only intended for users with Webpack 4\n\n\n\n\n*Note: this is a companion package to:*\n- [webpack-flush-chunks](https://github.com/faceyspacey/webpack-flush-chunks) \n- [react-universal-component](https://github.com/faceyspacey/react-universal-component)\n- [babel-plugin-universal-import](https://github.com/faceyspacey/babel-plugin-universal-import) ***or*** [babel-plugin-dual-import](https://github.com/faceyspacey/babel-plugin-dual-import)\n\n\n## Recommended Installation For Universal\n```\nyarn add react-universal-component webpack-flush-chunks\nyarn add --dev extract-css-chunks-webpack-plugin babel-plugin-universal-import\n```\n\n*.babelrc:*\n```js\n{\n  \"plugins\": [\"universal-import\"]\n}\n```\nThe main thing is you need to cater to the new chunking system of webpack!\nWith **webpack.optimize.CommonsChunkPlugin** plugin no longer part of Webpack 4, we need another way to define the code-splitting. Luckily we have `optimization` configs built into webpack now\n\n> There are more aggressive ways to code split, thanks to webpack 4. Check out the RUC Readme if you are looking for a more aggressive code split optimization configuration. These are just examples, you should be able to configure them as you see fit\n\n*webpack.config.js:*\n```js\nconst ExtractCssChunks = require(\"extract-css-chunks-webpack-plugin\")\n\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [\n          ExtractCssChunks.loader,\n          {\n            loader: 'css-loader',\n            options: {\n              modules: true,\n              localIdentName: '[name]__[local]--[hash:base64:5]',\n            },\n          },\n        ],\n      },\n    ],\n  },\n  optimization: {\n      // FOR PRODUCTION\n      minimizer: [\n          new UglifyJSPlugin({\n              uglifyOptions: {\n                  output: {\n                      comments: false,\n                      ascii_only: true\n                  },\n                  compress: {\n                      comparisons: false\n                  }\n              }\n          })\n      ],\n      // END\n      // NEEDED BOTH IN PROD AND DEV BUILDS\n      runtimeChunk: {\n          name: 'bootstrap'\n      },\n      splitChunks: {\n          chunks: 'initial',\n          cacheGroups: {\n              vendors: {\n                  test: /[\\\\/]node_modules[\\\\/]/,\n                  name: 'vendor'\n              }\n          }\n      }\n  },\n  plugins: [\n    new ExtractCssChunks({hot:true}), //if you want HMR - we try to automatically inject hot reloading but if it's not working, add it to the config\n  ]\n};\n```\n\n## Desired Output\nHere's the sort of CSS you can expect to serve:\n\n```\n<head>\n\t<link rel='stylesheet' href='/static/main.css' />\n\t<link rel='stylesheet' href='/static/0.css' />\n\t<link rel='stylesheet' href='/static/7.css' />\n</head> \n\n<body>\n\t<div id=\"react-root\"></div>\n\t\n\t<script type='text/javascript' src='/static/vendor.js'></script>\n\t<script type='text/javascript' src='/static/0.js'></script>\n\t<script type='text/javascript' src='/static/7.js'></script>\n\t<script type='text/javascript' src='/static/main.js'></script>\n</body>\n```\n\nIf you need to resolve your stylesheets on the client side, for whatever reason. \n\n[webpack-flush-chunks](https://github.com/faceyspacey/webpack-flush-chunks) will scoop up the exact stylesheets to embed in your response. It will give you an object which can be embedded on page\n\nHere's how you do it:\n\n\n*src/components/App.js:*\n```js\nconst UniversalComponent = universal(props => import(`./${props.page}`))\n\n<UniversalComponent page='Foo' />\n```\n\n*server/render.js:*\n```js\nimport { flushChunkNames } from 'react-universal-component/server'\nimport flushChunks from 'webpack-flush-chunks'\n\nconst app = ReactDOMServer.renderToString(<App />)\nconst { js, styles, cssHash } = flushChunks(webpackStats, {\n  chunkNames: flushChunkNames()\n})\n\nres.send(`\n  <!doctype html>\n  <html>\n    <head>\n      ${styles}\n    </head>\n    <body>\n      <div id=\"root\">${app}</div>\n      <!-- not needed unless you want to access css chunks urls manually  -->\n      ${cssHash}\n      <!-- extract-css-chunks takes care of loading the css assets automatically -->\n      ${js}\n    </body>\n  </html>\n`)\n```\n\n***As for asynchronous calls to `import()` on user navigation,*** [babel-plugin-universal-import](https://github.com/faceyspacey/babel-plugin-universal-import) is required if you're using [react-universal-component](https://github.com/faceyspacey/react-universal-component). And if you aren't, you must use: [babel-plugin-dual-import](https://github.com/faceyspacey/babel-plugin-dual-import). \n\n\nThese babel plugins request both your js + your css. *Very Nice!* This is the new feature of the 2.0. Read *Sokra's* (author of webpack) article on how [on how this is the future of CSS for webpack](https://medium.com/webpack/the-new-css-workflow-step-1-79583bd107d7). Use this and be in the future today.\n\n\n## API \nYou can pass the same options as `mini-css-extract` to `new ExtractCssChunks`, such as:\n\n```javascript\nnew ExtractCssChunk({\n      filename: devMode ? '[name].css' : '[name].[hash].css',\n      chunkFilename: devMode ? '[id].css' : '[id].[hash].css',\n})\n```\n\n>Keep in mind, by default `[name].css` is used when `process.env.NODE_ENV === 'development'` and `[name].[contenthash].css` during production, so you can likely forget about having to pass anything.\n\n### HMR Pitfall\n\nThe most common workflow when working with webpack is to write a \"development\" / \"production\" value in to the\n'process.env.NODE_ENV' namespace, typically, using webpack's built-in \"DefinePlugin\" plugin. e.g:\n\n```javascript\nnew webpack.DefinePlugin( {\n     'process.env': {\n        NODE_ENV: `\"${config.devMode ? 'development' : 'production'}\"`,\n      },\n} )\n```\nThe value set by the aforementioned plugin will only be available in the runtime ( when webpack's javascript output is executed ).\nIn order for this plugin to work with hot module reloading, The npm script / gulp task / grunt task etc, should be invoked with the same environment variable as shown above.\n\nFor example, when running the build using some form of npm script:\n\n```json\n{\n  \"scripts\": {\n     \"build\": \"cross-env NODE_ENV=production babel src -d dist --ignore 'src/**/*.test.js' --copy-files\"\n  }\n}\n```\n[cross-env](https://www.npmjs.com/package/cross-env) is optional but recommended. \n\n### What about Glamorous, Styled Components, Styled-Jsx, Aphrodite, etc?\n\nIf you effectively use code-splitting, **Extract Css Chunks** can be a far better option than using emerging solutions like *Glamorous*, *Styled Components*, and slightly older tools like *Aphrodite*, *Glamor*, etc. We aren't fans of either rounds of tools because of several issues, but particularly because they all have a runtime overhead. Every time your React component is rendered with those, CSS is generated and updated within the DOM. On the server, you're going to also see unnecessary cycles for flushing the CSS along the critical render path. *Next.js's* `styled-jsx`, by the way, doesn't even work on the server--*not so good when it comes to flash of unstyled content (FOUC).*\n\nThe reason **Extract CSS Chunk** can be a better option is because **we also generate multiple sets of CSS based on what is actually \"used\",** ***but without the runtime overhead***. The difference is our definition of \"used\" is modules determined *statically* (which may not in fact be rendered) vs. what is in the \"critical render path\" (as is the case with the other tools). \n\nSo yes, our CSS may be mildly larger and include unnecessary css, but our `no_css.js` bundles will be a lot smaller as they don't need to inject any styles. See, even though those solutions have the smallest possible CSS file size, their javascript bundles, **in order to continue to render your components styled properly on the client,** must contain the necessary CSS for all possibilities! Those solutions serve both your entire bundle's CSS (in your javascript) **and** the CSS flushed from the critical render path. \n\nOn top of that, those are extra packages all with a huge number of issues in their Github repos corresponding to various limitations in the CSS they generate--something that is prevented when your definition for \"CSS-in-JS\" is simply importing CSS files compiled as normal by powerful proven CSS-specific processors.\n\nLastly, those solutions don't provide cacheable stylesheets. They do a lot of work--but they will **continue** doing it for you when you could have been done in one go long ago. Cloudflare is free--serve them through their CDN and you're winning. I love true javascript in css--don't get me wrong--but first I'd have to see they generate cacheable stylesheets. In my opinion, for now, it's best for environments that natively support it such as React Native.\n\n\n### Next:\n\nNow with that out of the way, for completeness let's compare what bytes of just the CSS are sent over the wire. The difference basically is minimal. Whereas solutions that flush from the critical render path will capture no more than the precise bits of CSS from the `if/else` branches followed, **Extract Css Chunks** is all about you effectively using code-splitting to insure, for example, you don't serve your Administration Panel's CSS in your public-facing site, etc. *In other words, it's all about avoiding serving large swaths of CSS from completely different sections of your app.* ***I.e. the biggest gains available to you.*** \n\n<details>\n<summary>\n    Read more on the topic ^^\n</summary>\n\nThis is where the real problem lies--where the real amount of unnecessary CSS comes from. If you effectively code-split your app, you may end up with 10 chunks. Now you can serve just the corresponding CSS for that chunk. If you try to go even farther and remove the css not used in the render path, you're likely achieving somewhere between 1-20% of the gains you achieved by thorough code-splitting. In other words, code splitting fulfills the 80/20 rule and attains the simple sweetspot of 80% optimization you--*as a balanced, level-headed, non-neurotic and professional developer*--are looking to achieve.\n\n*In short, by putting code splitting in appropriate places you have a lot of control over the CSS files that are created and can send a sensible* ***minimal*** *amount of associated bytes over the wire for the first request, perhaps even the smallest amount of all options.* \n\nIt's our perspective that you have achieved 80-99% of the performance gains (i.e. the creation of small relevant css files) at this ***static stage***. Offloading this work to the runtime stage is ultimately nit-picking and results in diminishing returns. When you factor that your JS bundle has to contain that JS anyway, those solutions make less and less sense from the perspective of reducing bytes delivered in the initial request. \n\nThere may be other reasons to use those tools (e.g. you don't like setting up webpack configs, or somehow you're really fond of pre-creating many `<div />` elements with their styles), but we prefer a simple standards-based way (without HoCs or specialized style components) to import styles just as you would in React Native. However to give the other tools credit, many of them likely started out with a different problem motivating them: avoiding webpack configs so you can include packages and their contained CSS without client apps being required to setup something like CSS loaders in Webpack. Having your CSS completely contained in true JS has its use cases, but at the application level--especially when you're already using something like Webpack--we fail to see its benefits. About all they share is a solution to avoiding **flashes of unstyled content** (FOUC), except one can save you a lot more bytes in what you send over the wire and save you from a continual runtime overhead where it's not needed. ***Honorable Mention:*** *StyleTron's concept of \"atomic declaration-level deduplication\" where it will make a class out of, say, `color: blue` so you don't need to send redundant styles certainly is a novel innovation, but again if the code still exists in your JS and you're building an application using Webpack (instead of a package), what's the point. In fact, it just makes editing the stylesheets in your browser developer tools more complicated. One benefit of critical render path solutions is the browser can spend less time matching the smaller number of styles to new DOM nodes as they appear, but then again it also has to spend the time injecting and parsing the new styles constantly, which is likely costlier.*\n\nAs an aside, so many apps share code between web and React Native--so the answer to the styles problem must be one that is identical for both. From that perspective importing a styles object **still** makes a lot of sense. **You're not missing out on the fundamental aspect of CSS-in-JSS:** ***isolated component-level styles and the ability to import them just like any other javascript code.*** Put them in other files, and use tools like `extract-css-chunks-webpack-plugin` and your pre-processors of choice that innately get styles right for the browser. As long as you're using **CSS Modules**, you're still at the cutting edge of CSS-in-JSS. Let's just say the other tools took one wrong turn and took it too far, when we already were at our destination. \n</details>\n\n\n#### SUMMARY OF BENEFITS COMPARED TO \"CRITICAL-RENDER-PATH\" SOLUTIONS:\n\n- no continual runtime overhead during `render` using HoCs that inject styles\n- smaller JS bundles without CSS injection\n- **You DO NOT need to clutter your component code with a specialized way of applying CSS (HoCs, styled elements)!** \n- The way you import module-based styles is exactly how you would import styles in React Native that exist in a separate file, which allows for extremely interchangeable code between React Native and regular React. Hurray! \n- pretty much already does everything covered by [@vjeux's 2014 css-in-js talk](https://speakerdeck.com/vjeux/react-css-in-js), besides dead code elimination. Dead code elimination is only solved for the other tools--as per the explanation above how the CSS is in the JS anyway--so much as Webpack and Uglify can remove **JS** that is not used. Either way, it's not a stretch to eventually add this feature to `extract-text-webpack-plugin` as well as this plugin. Hey, maybe it already has it??\n\n## Emotion!\n\n[Emotion](https://github.com/tkh44/emotion) is different. They allow for the extraction of static styles via their *extract mode*. We're very much looking forward to this being the perfect companion to the css chunks approach. \n<details>\n<summary>\n    Read more on the topic ^^\n</summary>\n\nCurrently however *extract mode* does not support IE11. So that means it's a no go, but we have hopes that in the future they'll solve that problem.\n\nThe reason Emotion doesn't work in IE11+ is because they currently try to preserve any dynamic aspects of your CSS-in-JS by converting it CSS vars, which isn't supported in IE11. That was a very smart approach, but unfortunately not good enough. \n\nThe vision we'd like to see for that package is where dynamic css stays inline, and where only static CSS is extracted into stylesheets, in which case CSS vars aren't needed. I've heard from them they have some \"hidden flags\" that allow for something close to this. When, and if, they take this feature all the way, look forward to us pushing it as our recommended approach. *Go Emotion!*\n</details>\n\n## Linaria\n\nLinaria is another modern CSS-in-JSS library. It's focused around static styles, which may make it a perfect fit for usage with this plugin. Check it out:\n\nhttps://github.com/callstack/linaria\n\n## What if I don't use SSR and use html-webpack-plugin?\n\nFor that case you can use [css-chunks-html-webpack-plugin](https://github.com/teamable-software/css-chunks-html-webpack-plugin) which will extract CSS chunks paths into your HTML file.\n\n## Conclusion:\n**We love CSS modules; no less, no more.**\n\n**Long live the dream of Code Splitting Everywhere!**\n\n\n## Contributing\nWe use [commitizen](https://github.com/commitizen/cz-cli), so run `npm run cm` to make commits. A command-line form will appear, requiring you answer a few questions to automatically produce a nicely formatted commit. Releases, semantic version numbers, tags and changelogs will automatically be generated based on these commits thanks to [semantic-release](https://github.com/semantic-release/semantic-release). Be good.\n\n## More from FaceySpacey in Reactlandia\n- [redux-first-router](https://github.com/faceyspacey/redux-first-router). It's made to work perfectly with *Universal*. Together they comprise our *\"frameworkless\"* Redux-based approach to what Next.js does (splitting, SSR, prefetching, and routing). *People are lovin it by the way* 😎\n","readmeFilename":"README.md","gitHead":"5e0a34f492857da6613fb8d9a621470a13595745","bugs":{"url":"https://github.com/faceyspacey/extract-css-chunks-webpack-plugin/issues"},"_id":"extract-css-chunks-webpack-plugin@3.1.0-beta.8","_npmVersion":"5.5.1","_nodeVersion":"8.9.0","_npmUser":{"name":"zackljackson","email":"zackary.l.jackson@gmail.com"},"dist":{"integrity":"sha512-1F4dX5IXn5MxzxYGvNM7J2Nbc6Hcjn87anTQpX45eBsgvuMD9IkpZTXqSFuok+pFTP5qK9bUYZbZ5MszvRm/ew==","shasum":"138715c8481d9213e958b873a979d4ae9900d944","tarball":"https://registry.npmjs.org/extract-css-chunks-webpack-plugin/-/extract-css-chunks-webpack-plugin-3.1.0-beta.8.tgz","fileCount":8,"unpackedSize":49536,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbcvAcCRA9TVsSAnZWagAArDUP/Rxst0GyDY2MT4DRWzxa\n1iXfvaVfhRa/ifymr4BnoYEs1CirvQJHlLTvwTAdteRud6YpvdVa3JAgDl46\nwYCstLOJCQLxufb1rjuOxkqHQX+RA812eqIUYrOpWhS9dWMnuP9NJl7Rrroy\n5n7W8U5Ta4w9xyBPq4Nrild4Y0967DaeWRMTnrPRk+UOWsUSGblMdCecyE2C\ncnLrAsCQZDs82fi/ZFQJNHbS2cXrMHKATXF3h+kBjlbNiH+2QoWGNQVyoPkm\n9bwM8kRxREXkyimNV/YUjKv2tpY0GzywL3eWnQ2TM8m3n2Du0BshVF6S4GKa\nqneVUr+LSNRS93GK4u6k6h9MFIh2UlcVhiykRnYWwV1EgewvQheNy5kmlEiN\nY+ckyy1YMXeFg7wESWDFiLZM6klENjAzOvJEk3QY5QDvkwzmStFcK9gD/ZG/\nAM7lycYtUfjI2O64mi0WP1E+mObDlhY5NJVZyhWc6Fmo57RV5WJzT+/7tqLc\ni+/oWhrgTem6i8QgrN0cyeA810FePcb8Y/qPKTKM7LfNrLX5ouImPgbTZY7c\n/dsNxSsf70lfh3d0jzq5672T1Mu8KsLmTY8PwZSyAtepf5OwiA7f2HedDVDp\naaxFNR7awC6IHig7UOvWvtfAy7QnwFOc/4c9sgfoZLTuFuulwCRiTIgJrdO+\nnF+z\r\n=Rf+K\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGxXYXEV5gfm2hptBV7cSl44GDwLkkwJoSsIPUuuKvXcAiBf07jUaRAjB9SPAwuMi90BLgfXPIWzI9T7GZ/Cquyfyw=="}]},"maintainers":[{"email":"james@faceyspacey.com","name":"faceyspacey"},{"email":"zackary.l.jackson@gmail.com","name":"zackljackson"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/extract-css-chunks-webpack-plugin_3.1.0-beta.8_1534259228049_0.6233671565407224"},"_hasShrinkwrap":false},"3.1.0-beta.9":{"name":"extract-css-chunks-webpack-plugin","version":"3.1.0-beta.9","author":{"name":"James Gillmore","email":"james@faceyspacey.com"},"contributors":[{"name":"Zack Jackson","email":"zackary.l.jackson@gmail.com","url":"https://github.com/ScriptedAlchemy"}],"description":"Extract CSS from chunks into stylesheets + HMR. Supports Webpack 4","engines":{"node":">= 6.9.0 <7.0.0 || >= 8.9.0"},"main":"dist/cjs.js","files":["dist"],"keywords":["css","chunks","code splitting","mini-css","hot","hmr","universal","webpack","webpack 4"],"license":"MIT","scripts":{"start":"npm run build -- -w","build":"cross-env NODE_ENV=production babel src -d dist --ignore 'src/**/*.test.js' --copy-files","clean":"del-cli dist","lint":"eslint --cache --fix src","prebuild":"npm run clean","prepublish":"npm run build","security":"nsp check","test":"jest","test:watch":"jest --watch","test:coverage":"jest --collectCoverageFrom='src/**/*.js' --coverage","test:example":"npm run build && webpack-dev-server test/manual/src/index.js --config test/manual/webpack.config.js","ci:lint":"npm run lint && npm run security","ci:test":"npm run test -- --runInBand","ci:coverage":"npm run test:coverage -- --runInBand","build:example":"npm run build && webpack-dev-server test/manual/src/index.js --open --config test/manual/webpack.config.js","cm":"git-cz","release":"standard-version","semantic-release":"semantic-release pre && npm publish && semantic-release post","travis":"npm run ci:coverage"},"peerDependencies":{"webpack":"^4.8.3"},"dependencies":{"loader-utils":"^1.1.0","lodash":"^4.17.5","normalize-url":"^1.9.1","webpack-sources":"^1.1.0"},"devDependencies":{"@webpack-contrib/eslint-config-webpack":"^2.0.4","babel-cli":"^6.26.0","babel-eslint":"^7.2.3","babel-jest":"^22.2.2","babel-loader":"^7.1.4","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-polyfill":"^6.26.0","babel-preset-env":"^1.6.1","commitizen":"^2.10.1","conventional-github-releaser":"^2.0.2","cross-env":"^5.1.3","css-loader":"^0.28.10","cz-conventional-changelog":"^2.1.0","del":"^3.0.0","del-cli":"^1.1.0","eslint":"^3.19.0","eslint-config-airbnb":"^15.0.1","eslint-plugin-flowtype":"^2.32.1","eslint-plugin-import":"^2.8.0","eslint-plugin-jsx-a11y":"^5.0.3","eslint-plugin-prettier":"^2.6.0","eslint-plugin-react":"^7.0.1","husky":"^0.14.3","jest":"^22.2.2","memory-fs":"^0.4.1","nsp":"^3.1.0","pre-commit":"^1.2.2","prettier":"^1.11.1","standard-version":"^4.3.0","webpack":"4.8.3","webpack-cli":"^2.0.13","webpack-dev-server":"^3.1.1"},"homepage":"http://github.com/faceyspacey/extract-css-chunks-webpack-plugin","repository":{"type":"git","url":"git+https://github.com/faceyspacey/extract-css-chunks-webpack-plugin.git"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"readme":"<a href=\"https://gitter.im/Reactlandia/Lobby\" target=\"_blank\">\n  <img alt=\"Edit Redux-First Router Demo\" src=\"http://cdn.reactlandia.com/chat-badge-reactlandia.png\">\n</a>\n\n\n# extract-css-chunks-webpack-plugin\n\n<p align=\"center\">\n  <a href=\"https://www.npmjs.com/package/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://img.shields.io/npm/v/extract-css-chunks-webpack-plugin.svg\" alt=\"Version\" />\n  </a>\n\n  <a href=\"https://travis-ci.org/faceyspacey/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://travis-ci.org/faceyspacey/extract-css-chunks-webpack-plugin.svg?branch=master\" alt=\"Build Status\" />\n  </a>\n\n  <a href=\"https://www.npmjs.com/package/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://img.shields.io/npm/dt/extract-css-chunks-webpack-plugin.svg\" alt=\"Downloads\" />\n  </a>\n\n  <a href=\"https://www.npmjs.com/package/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://img.shields.io/npm/dm/extract-css-chunks-webpack-plugin.svg\" alt=\"License\" />\n  </a>\n  \n  <a href=\"https://www.npmjs.com/package/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://img.shields.io/npm/l/extract-css-chunks-webpack-plugin.svg\" alt=\"License\" />\n  </a>\n</p>\n\n<h2 align=\"center\">🍾🍾🍾It's our absolute pleasure to announce Webpack 4 Support 🚀🚀🚀</h2>\n\n> **HEADLINES (May 2018): Now Independently supports Webpack 4:** \nYep that's right. The universal family is now fully Webpack 4. Thank you to all our users for your loyalty and patience! If you love Universal, then you are gonna fall head over heels when we bring out the main course! \n\nSo... why did we rebuild `extract-css-chunks`? What does it offer? \n\nIt's got all the goodness of `mini-css-extract-plugin` but with 2 gleaming, sought after benefits. \n\nCompared to the existing loaders, we are offering a single solution as opposed to needing to depend on multiple loaders to cater for different features:\n\n## Perks\n* **HMR:** It also has first-class support for **Hot Module Replacement** across ALL those css files/chunks!!!\n* cacheable stylesheets \n* smallest total bytes sent compared to \"render-path\" css-in-js solutions that include your CSS definitions in JS\n* Faster than the V2!\n* Async loading\n* No duplicate compilation (performance)\n* Easier to use\n* Specific to CSS\n* SSR Friendly development build, focused on frontend DX\n* Works seamlessly with the Universal family\n* Works fantastically as a standalone style loader (You can use it for any webpack project! with no extra dependencies!)\n\nAdditionally, if you are already a user of the universal family -- we will be waving goodbye to the mandatory ```window.__CSS_CHUNKS__```.\n\nThe functionality is still available to you via chunk flushing, and it can come in super handy when needing to easily resolve style assets as urls that might need to be passed to a third party.\n\n## Webpack 4 Standalone Installation:\n\nIf you are just looking for something that works like `mini-css-extract-plugin` but with HMR, then look no further.\n\nNOTE: We have aligned out loader implementation to be the same as `mini-css-extract-plugin` \n\n**If you already use `mini-css-extract-plugin`, then you can just change the `require` statement - it's that easy**\n\n```\nyarn add --dev extract-css-chunks-webpack-plugin\n```\n\n*webpack.config.js:*\n```js\nconst ExtractCssChunks = require(\"extract-css-chunks-webpack-plugin\")\n\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [\n           ExtractCssChunks.loader,\n           \"css-loader\"\n         ]\n      }\n    ]\n  },\n  plugins: [\n    new ExtractCssChunks(\n        {\n          // Options similar to the same options in webpackOptions.output\n          // both options are optional\n          filename: \"[name].css\",\n          chunkFilename: \"[id].css\",\n          hot: true // optional as the plugin cannot automatically detect if you are using HOT, not for production use\n        }\n    ),\n  ]\n}\n```\n\n*webpack.server.config.js*\n\nThe server needs to be handled differently, we still want one chunk. Luckily webpack 4 supports **LimitChunkCountPlugin**\n\n```js\nnew webpack.optimize.LimitChunkCountPlugin({\n    maxChunks: 1\n})\n```\n\n\n### What about Webpack 3?\nThis is a breaking change. The entire loader has been fundamentally rewritten specifically for Webpack 4. Aiming to support our existing user base, allowing them to upgrade their infrastructure to support Webpack 4 based universally code-split server-side rendered react applications. \n\nThere have been some challenges along the way since the release of webpack 4. Ultimately the only remaining hurdle is code split, async style loading. \n\nIf you do need Webpack 3, make sure to stick with the latest `v2.x.x` release. `v3.x.x` is only intended for users with Webpack 4\n\n\n\n\n*Note: this is a companion package to:*\n- [webpack-flush-chunks](https://github.com/faceyspacey/webpack-flush-chunks) \n- [react-universal-component](https://github.com/faceyspacey/react-universal-component)\n- [babel-plugin-universal-import](https://github.com/faceyspacey/babel-plugin-universal-import) ***or*** [babel-plugin-dual-import](https://github.com/faceyspacey/babel-plugin-dual-import)\n\n\n## Recommended Installation For Universal\n```\nyarn add react-universal-component webpack-flush-chunks\nyarn add --dev extract-css-chunks-webpack-plugin babel-plugin-universal-import\n```\n\n*.babelrc:*\n```js\n{\n  \"plugins\": [\"universal-import\"]\n}\n```\nThe main thing is you need to cater to the new chunking system of webpack!\nWith **webpack.optimize.CommonsChunkPlugin** plugin no longer part of Webpack 4, we need another way to define the code-splitting. Luckily we have `optimization` configs built into webpack now\n\n> There are more aggressive ways to code split, thanks to webpack 4. Check out the RUC Readme if you are looking for a more aggressive code split optimization configuration. These are just examples, you should be able to configure them as you see fit\n\n*webpack.config.js:*\n```js\nconst ExtractCssChunks = require(\"extract-css-chunks-webpack-plugin\")\n\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [\n          ExtractCssChunks.loader,\n          {\n            loader: 'css-loader',\n            options: {\n              modules: true,\n              localIdentName: '[name]__[local]--[hash:base64:5]',\n            },\n          },\n        ],\n      },\n    ],\n  },\n  optimization: {\n      // FOR PRODUCTION\n      minimizer: [\n          new UglifyJSPlugin({\n              uglifyOptions: {\n                  output: {\n                      comments: false,\n                      ascii_only: true\n                  },\n                  compress: {\n                      comparisons: false\n                  }\n              }\n          })\n      ],\n      // END\n      // NEEDED BOTH IN PROD AND DEV BUILDS\n      runtimeChunk: {\n          name: 'bootstrap'\n      },\n      splitChunks: {\n          chunks: 'initial',\n          cacheGroups: {\n              vendors: {\n                  test: /[\\\\/]node_modules[\\\\/]/,\n                  name: 'vendor'\n              }\n          }\n      }\n  },\n  plugins: [\n    new ExtractCssChunks({hot:true}), //if you want HMR - we try to automatically inject hot reloading but if it's not working, add it to the config\n  ]\n};\n```\n\n## Desired Output\nHere's the sort of CSS you can expect to serve:\n\n```\n<head>\n\t<link rel='stylesheet' href='/static/main.css' />\n\t<link rel='stylesheet' href='/static/0.css' />\n\t<link rel='stylesheet' href='/static/7.css' />\n</head> \n\n<body>\n\t<div id=\"react-root\"></div>\n\t\n\t<script type='text/javascript' src='/static/vendor.js'></script>\n\t<script type='text/javascript' src='/static/0.js'></script>\n\t<script type='text/javascript' src='/static/7.js'></script>\n\t<script type='text/javascript' src='/static/main.js'></script>\n</body>\n```\n\nIf you need to resolve your stylesheets on the client side, for whatever reason. \n\n[webpack-flush-chunks](https://github.com/faceyspacey/webpack-flush-chunks) will scoop up the exact stylesheets to embed in your response. It will give you an object which can be embedded on page\n\nHere's how you do it:\n\n\n*src/components/App.js:*\n```js\nconst UniversalComponent = universal(props => import(`./${props.page}`))\n\n<UniversalComponent page='Foo' />\n```\n\n*server/render.js:*\n```js\nimport { flushChunkNames } from 'react-universal-component/server'\nimport flushChunks from 'webpack-flush-chunks'\n\nconst app = ReactDOMServer.renderToString(<App />)\nconst { js, styles, cssHash } = flushChunks(webpackStats, {\n  chunkNames: flushChunkNames()\n})\n\nres.send(`\n  <!doctype html>\n  <html>\n    <head>\n      ${styles}\n    </head>\n    <body>\n      <div id=\"root\">${app}</div>\n      <!-- not needed unless you want to access css chunks urls manually  -->\n      ${cssHash}\n      <!-- extract-css-chunks takes care of loading the css assets automatically -->\n      ${js}\n    </body>\n  </html>\n`)\n```\n\n***As for asynchronous calls to `import()` on user navigation,*** [babel-plugin-universal-import](https://github.com/faceyspacey/babel-plugin-universal-import) is required if you're using [react-universal-component](https://github.com/faceyspacey/react-universal-component). And if you aren't, you must use: [babel-plugin-dual-import](https://github.com/faceyspacey/babel-plugin-dual-import). \n\n\nThese babel plugins request both your js + your css. *Very Nice!* This is the new feature of the 2.0. Read *Sokra's* (author of webpack) article on how [on how this is the future of CSS for webpack](https://medium.com/webpack/the-new-css-workflow-step-1-79583bd107d7). Use this and be in the future today.\n\n\n## API \nYou can pass the same options as `mini-css-extract` to `new ExtractCssChunks`, such as:\n\n```javascript\nnew ExtractCssChunk({\n      filename: devMode ? '[name].css' : '[name].[hash].css',\n      chunkFilename: devMode ? '[id].css' : '[id].[hash].css',\n})\n```\n\n>Keep in mind, by default `[name].css` is used when `process.env.NODE_ENV === 'development'` and `[name].[contenthash].css` during production, so you can likely forget about having to pass anything.\n\n### HMR Pitfall\n\nThe most common workflow when working with webpack is to write a \"development\" / \"production\" value in to the\n'process.env.NODE_ENV' namespace, typically, using webpack's built-in \"DefinePlugin\" plugin. e.g:\n\n```javascript\nnew webpack.DefinePlugin( {\n     'process.env': {\n        NODE_ENV: `\"${config.devMode ? 'development' : 'production'}\"`,\n      },\n} )\n```\nThe value set by the aforementioned plugin will only be available in the runtime ( when webpack's javascript output is executed ).\nIn order for this plugin to work with hot module reloading, The npm script / gulp task / grunt task etc, should be invoked with the same environment variable as shown above.\n\nFor example, when running the build using some form of npm script:\n\n```json\n{\n  \"scripts\": {\n     \"build\": \"cross-env NODE_ENV=production babel src -d dist --ignore 'src/**/*.test.js' --copy-files\"\n  }\n}\n```\n[cross-env](https://www.npmjs.com/package/cross-env) is optional but recommended. \n\n### What about Glamorous, Styled Components, Styled-Jsx, Aphrodite, etc?\n\nIf you effectively use code-splitting, **Extract Css Chunks** can be a far better option than using emerging solutions like *Glamorous*, *Styled Components*, and slightly older tools like *Aphrodite*, *Glamor*, etc. We aren't fans of either rounds of tools because of several issues, but particularly because they all have a runtime overhead. Every time your React component is rendered with those, CSS is generated and updated within the DOM. On the server, you're going to also see unnecessary cycles for flushing the CSS along the critical render path. *Next.js's* `styled-jsx`, by the way, doesn't even work on the server--*not so good when it comes to flash of unstyled content (FOUC).*\n\nThe reason **Extract CSS Chunk** can be a better option is because **we also generate multiple sets of CSS based on what is actually \"used\",** ***but without the runtime overhead***. The difference is our definition of \"used\" is modules determined *statically* (which may not in fact be rendered) vs. what is in the \"critical render path\" (as is the case with the other tools). \n\nSo yes, our CSS may be mildly larger and include unnecessary css, but our `no_css.js` bundles will be a lot smaller as they don't need to inject any styles. See, even though those solutions have the smallest possible CSS file size, their javascript bundles, **in order to continue to render your components styled properly on the client,** must contain the necessary CSS for all possibilities! Those solutions serve both your entire bundle's CSS (in your javascript) **and** the CSS flushed from the critical render path. \n\nOn top of that, those are extra packages all with a huge number of issues in their Github repos corresponding to various limitations in the CSS they generate--something that is prevented when your definition for \"CSS-in-JS\" is simply importing CSS files compiled as normal by powerful proven CSS-specific processors.\n\nLastly, those solutions don't provide cacheable stylesheets. They do a lot of work--but they will **continue** doing it for you when you could have been done in one go long ago. Cloudflare is free--serve them through their CDN and you're winning. I love true javascript in css--don't get me wrong--but first I'd have to see they generate cacheable stylesheets. In my opinion, for now, it's best for environments that natively support it such as React Native.\n\n\n### Next:\n\nNow with that out of the way, for completeness let's compare what bytes of just the CSS are sent over the wire. The difference basically is minimal. Whereas solutions that flush from the critical render path will capture no more than the precise bits of CSS from the `if/else` branches followed, **Extract Css Chunks** is all about you effectively using code-splitting to insure, for example, you don't serve your Administration Panel's CSS in your public-facing site, etc. *In other words, it's all about avoiding serving large swaths of CSS from completely different sections of your app.* ***I.e. the biggest gains available to you.*** \n\n<details>\n<summary>\n    Read more on the topic ^^\n</summary>\n\nThis is where the real problem lies--where the real amount of unnecessary CSS comes from. If you effectively code-split your app, you may end up with 10 chunks. Now you can serve just the corresponding CSS for that chunk. If you try to go even farther and remove the css not used in the render path, you're likely achieving somewhere between 1-20% of the gains you achieved by thorough code-splitting. In other words, code splitting fulfills the 80/20 rule and attains the simple sweetspot of 80% optimization you--*as a balanced, level-headed, non-neurotic and professional developer*--are looking to achieve.\n\n*In short, by putting code splitting in appropriate places you have a lot of control over the CSS files that are created and can send a sensible* ***minimal*** *amount of associated bytes over the wire for the first request, perhaps even the smallest amount of all options.* \n\nIt's our perspective that you have achieved 80-99% of the performance gains (i.e. the creation of small relevant css files) at this ***static stage***. Offloading this work to the runtime stage is ultimately nit-picking and results in diminishing returns. When you factor that your JS bundle has to contain that JS anyway, those solutions make less and less sense from the perspective of reducing bytes delivered in the initial request. \n\nThere may be other reasons to use those tools (e.g. you don't like setting up webpack configs, or somehow you're really fond of pre-creating many `<div />` elements with their styles), but we prefer a simple standards-based way (without HoCs or specialized style components) to import styles just as you would in React Native. However to give the other tools credit, many of them likely started out with a different problem motivating them: avoiding webpack configs so you can include packages and their contained CSS without client apps being required to setup something like CSS loaders in Webpack. Having your CSS completely contained in true JS has its use cases, but at the application level--especially when you're already using something like Webpack--we fail to see its benefits. About all they share is a solution to avoiding **flashes of unstyled content** (FOUC), except one can save you a lot more bytes in what you send over the wire and save you from a continual runtime overhead where it's not needed. ***Honorable Mention:*** *StyleTron's concept of \"atomic declaration-level deduplication\" where it will make a class out of, say, `color: blue` so you don't need to send redundant styles certainly is a novel innovation, but again if the code still exists in your JS and you're building an application using Webpack (instead of a package), what's the point. In fact, it just makes editing the stylesheets in your browser developer tools more complicated. One benefit of critical render path solutions is the browser can spend less time matching the smaller number of styles to new DOM nodes as they appear, but then again it also has to spend the time injecting and parsing the new styles constantly, which is likely costlier.*\n\nAs an aside, so many apps share code between web and React Native--so the answer to the styles problem must be one that is identical for both. From that perspective importing a styles object **still** makes a lot of sense. **You're not missing out on the fundamental aspect of CSS-in-JSS:** ***isolated component-level styles and the ability to import them just like any other javascript code.*** Put them in other files, and use tools like `extract-css-chunks-webpack-plugin` and your pre-processors of choice that innately get styles right for the browser. As long as you're using **CSS Modules**, you're still at the cutting edge of CSS-in-JSS. Let's just say the other tools took one wrong turn and took it too far, when we already were at our destination. \n</details>\n\n\n#### SUMMARY OF BENEFITS COMPARED TO \"CRITICAL-RENDER-PATH\" SOLUTIONS:\n\n- no continual runtime overhead during `render` using HoCs that inject styles\n- smaller JS bundles without CSS injection\n- **You DO NOT need to clutter your component code with a specialized way of applying CSS (HoCs, styled elements)!** \n- The way you import module-based styles is exactly how you would import styles in React Native that exist in a separate file, which allows for extremely interchangeable code between React Native and regular React. Hurray! \n- pretty much already does everything covered by [@vjeux's 2014 css-in-js talk](https://speakerdeck.com/vjeux/react-css-in-js), besides dead code elimination. Dead code elimination is only solved for the other tools--as per the explanation above how the CSS is in the JS anyway--so much as Webpack and Uglify can remove **JS** that is not used. Either way, it's not a stretch to eventually add this feature to `extract-text-webpack-plugin` as well as this plugin. Hey, maybe it already has it??\n\n## Emotion!\n\n[Emotion](https://github.com/tkh44/emotion) is different. They allow for the extraction of static styles via their *extract mode*. We're very much looking forward to this being the perfect companion to the css chunks approach. \n<details>\n<summary>\n    Read more on the topic ^^\n</summary>\n\nCurrently however *extract mode* does not support IE11. So that means it's a no go, but we have hopes that in the future they'll solve that problem.\n\nThe reason Emotion doesn't work in IE11+ is because they currently try to preserve any dynamic aspects of your CSS-in-JS by converting it CSS vars, which isn't supported in IE11. That was a very smart approach, but unfortunately not good enough. \n\nThe vision we'd like to see for that package is where dynamic css stays inline, and where only static CSS is extracted into stylesheets, in which case CSS vars aren't needed. I've heard from them they have some \"hidden flags\" that allow for something close to this. When, and if, they take this feature all the way, look forward to us pushing it as our recommended approach. *Go Emotion!*\n</details>\n\n## Linaria\n\nLinaria is another modern CSS-in-JSS library. It's focused around static styles, which may make it a perfect fit for usage with this plugin. Check it out:\n\nhttps://github.com/callstack/linaria\n\n## What if I don't use SSR and use html-webpack-plugin?\n\nFor that case you can use [css-chunks-html-webpack-plugin](https://github.com/teamable-software/css-chunks-html-webpack-plugin) which will extract CSS chunks paths into your HTML file.\n\n## Conclusion:\n**We love CSS modules; no less, no more.**\n\n**Long live the dream of Code Splitting Everywhere!**\n\n\n## Contributing\nWe use [commitizen](https://github.com/commitizen/cz-cli), so run `npm run cm` to make commits. A command-line form will appear, requiring you answer a few questions to automatically produce a nicely formatted commit. Releases, semantic version numbers, tags and changelogs will automatically be generated based on these commits thanks to [semantic-release](https://github.com/semantic-release/semantic-release). Be good.\n\n## More from FaceySpacey in Reactlandia\n- [redux-first-router](https://github.com/faceyspacey/redux-first-router). It's made to work perfectly with *Universal*. Together they comprise our *\"frameworkless\"* Redux-based approach to what Next.js does (splitting, SSR, prefetching, and routing). *People are lovin it by the way* 😎\n","readmeFilename":"README.md","gitHead":"71dbb7306f2d06262c5b42c2d03ef579d16fa37f","bugs":{"url":"https://github.com/faceyspacey/extract-css-chunks-webpack-plugin/issues"},"_id":"extract-css-chunks-webpack-plugin@3.1.0-beta.9","_npmVersion":"5.5.1","_nodeVersion":"8.9.0","_npmUser":{"name":"zackljackson","email":"zackary.l.jackson@gmail.com"},"dist":{"integrity":"sha512-Rm6+3qE6sVbewWqkL8vl/qYVHHCl0d0NuBnc4nKm93YSTAu9tgedV94vWXs7ltulv1nFYuhZp8JT3G2cIq01fw==","shasum":"69c96d456dc10afc1796a2e32d0ca3b4b96d4572","tarball":"https://registry.npmjs.org/extract-css-chunks-webpack-plugin/-/extract-css-chunks-webpack-plugin-3.1.0-beta.9.tgz","fileCount":8,"unpackedSize":49673,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbcvPhCRA9TVsSAnZWagAA3QsP/3LSZvYQPpQSHIbT4WFr\nPkVrFocfZtYb6Cj4yUNpbHsu05pbVMXQFMiH2K9qjsJDxOK1cZXlVBOZPnVc\n2MLApjG3FC63+cUzUqd9ts3uaIemPfKpd2deNyrO0W1KMF84lV8uZpj3OibM\nr2oXyd8bxq3jR7Fr+Wt/bMbBf/COnSLFiEAsp11G6B4cpsaXWUtntwWnr5aP\ngOcoJHEUh3Cxaup4pDRR0SPLwhgRJyOnH7QzHMcRV9rcrJ4QSBEd1+NU3C4/\nKVoqWeJteSjlC/QYL+p1z8U75pF6tktljSGo8eXu7WkaQyQmoQvhaMbed0lu\nLRjK7xnbzSFb8940YJVla4Nl3nQyx1NqBfbJIV1L3xwcf7HeROaVITCYrZm+\nsYMZEhmx63BgviDddNkD4pYbyLiJ27rxvR/NlrmwgyF1QYe0F8hCHUUGGjz+\nHEXGmaWl7ej6FMOeaSHROzpzNDs2smgwyQM9RjyieIhfJoce//LOO7Kqw6Wu\nKLeqilXWL0i83MejfNWw3vpoX/bWjh+eVD9zsOudmqo9aOCmPf0Rk3NrtQgz\nSscVZbL0xuIpo2IuHKDa+CcdydQylMqnf55xkPn2cLgyEhkG37IQb+rSIY1Z\n0S/SNzKPUyLt2mGoUwl4TAK0kEQ8iO96H1XJ0sL5GcdGa+yYzGjE2u/vtgpF\n2ZwX\r\n=ARgH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC0jiZIVeDvhWkKSqC1++fa3lYg5OMHW92jKxFb2czoswIhAJ396ZBKPYiAcdlrNC+JvAGfyvwCC5LT/Xbo7Pzppmvp"}]},"maintainers":[{"email":"james@faceyspacey.com","name":"faceyspacey"},{"email":"zackary.l.jackson@gmail.com","name":"zackljackson"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/extract-css-chunks-webpack-plugin_3.1.0-beta.9_1534260193087_0.4832986001955413"},"_hasShrinkwrap":false},"3.0.12":{"name":"extract-css-chunks-webpack-plugin","version":"3.0.12","author":{"name":"James Gillmore","email":"james@faceyspacey.com"},"contributors":[{"name":"Zack Jackson","email":"zackary.l.jackson@gmail.com","url":"https://github.com/ScriptedAlchemy"}],"description":"Extract CSS from chunks into stylesheets + HMR. Supports Webpack 4","engines":{"node":">= 6.9.0 <7.0.0 || >= 8.9.0"},"main":"dist/cjs.js","types":"index.d.ts","keywords":["css","chunks","code splitting","mini-css","hot","hmr","universal","webpack","webpack 4"],"license":"MIT","scripts":{"start":"npm run build -- -w","build":"cross-env NODE_ENV=production babel src -d dist --ignore 'src/**/*.test.js' --copy-files","clean":"del-cli dist","lint":"eslint --cache --fix src","prebuild":"npm run clean","prepublish":"npm run build","security":"nsp check","test":"jest","test:watch":"jest --watch","test:coverage":"jest --collectCoverageFrom='src/**/*.js' --coverage","test:example":"npm run build && webpack-dev-server test/manual/src/index.js --config test/manual/webpack.config.js","ci:lint":"npm run lint && npm run security","ci:test":"npm run test -- --runInBand","ci:coverage":"npm run test:coverage -- --runInBand","build:example":"npm run build && webpack-dev-server test/manual/src/index.js --open --config test/manual/webpack.config.js","cm":"git-cz","release":"standard-version","semantic-release":"semantic-release pre && npm publish && semantic-release post","travis":"npm run ci:coverage"},"peerDependencies":{"webpack":"^4.8.3"},"dependencies":{"loader-utils":"^1.1.0","lodash":"^4.17.5","normalize-url":"^1.9.1","webpack-sources":"^1.1.0"},"devDependencies":{"@webpack-contrib/eslint-config-webpack":"^2.0.4","babel-cli":"^6.26.0","babel-eslint":"^7.2.3","babel-jest":"^22.2.2","babel-loader":"^7.1.4","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-polyfill":"^6.26.0","babel-preset-env":"^1.6.1","commitizen":"^2.10.1","conventional-github-releaser":"^2.0.2","cross-env":"^5.1.3","css-loader":"^0.28.10","cz-conventional-changelog":"^2.1.0","del":"^3.0.0","del-cli":"^1.1.0","eslint":"^3.19.0","eslint-config-airbnb":"^15.0.1","eslint-plugin-flowtype":"^2.32.1","eslint-plugin-import":"^2.8.0","eslint-plugin-jsx-a11y":"^5.0.3","eslint-plugin-prettier":"^2.6.0","eslint-plugin-react":"^7.0.1","husky":"^0.14.3","jest":"^22.2.2","memory-fs":"^0.4.1","nsp":"^3.1.0","pre-commit":"^1.2.2","prettier":"^1.11.1","standard-version":"^4.3.0","webpack":"4.8.3","webpack-cli":"^2.0.13","webpack-dev-server":"^3.1.1"},"homepage":"http://github.com/faceyspacey/extract-css-chunks-webpack-plugin","repository":{"type":"git","url":"git+https://github.com/faceyspacey/extract-css-chunks-webpack-plugin.git"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"gitHead":"a36437081d379aa8db2b7a8c457cfff5f56b45d5","bugs":{"url":"https://github.com/faceyspacey/extract-css-chunks-webpack-plugin/issues"},"_id":"extract-css-chunks-webpack-plugin@3.0.12","_npmVersion":"5.5.1","_nodeVersion":"8.9.0","_npmUser":{"name":"zackljackson","email":"zackary.l.jackson@gmail.com"},"dist":{"integrity":"sha512-s2N5dnw3Nfgq7Rp8vUVcqJx1Nd2CneU5/tghBSFZMvb1N4pVsYWJqOP0CZLl7+aVgl8B2njiTJeKbouSf7vXRQ==","shasum":"60e32bccb72ebc78b3f23eb8488e0b18cec7a6b0","tarball":"https://registry.npmjs.org/extract-css-chunks-webpack-plugin/-/extract-css-chunks-webpack-plugin-3.0.12.tgz","fileCount":9,"unpackedSize":50388,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbiYuSCRA9TVsSAnZWagAAA7MP/j0kLux3oHNn1P1+1QwY\nBcoMEyjUdBlz/1z1hiesHzp9mUqzYWXOI2n+tYz7F9s44V9rb1uo45Ixppgs\n58KLeWwasHiEYBaMPNxE5vmRBJV1/YvHhyfbHcrN1Tgy10tut1WzCtfWVy+G\nZ9WPdVx8vGGCAwiUBovPrDTURhclJKAtmwlqpyVMGHGIEQ9RCJ5rgHJ3buDr\nmGvLPb0aJN7KuJ73k+Nxhtm4kdk1OGveOyN6EYHi3SxB7bT8YoAmAFsx9+ks\n2l2QP1k4sl3vKv9dwuDsdU/dwoJ0CuaJ5FdqtAGhyZaRWfWZOWVVeTFtKeiw\nm2fowtd9YpjsMtSfNM06UqtRmVr2zoVQKgBqZxJaIbYExoSPMEytDCwuTvTx\noAGOwzqsTILAGJRFm9xItkgS+cWYekFC7I8OzrmzuH0FxD/HyugS9IDWzZox\nWoZDk3VN0TKC9AugAp0NnJfdwoDaSHrg/SGotk3UDm7BvgaPU3XtbIt1QLL/\nxeVNhvwGmsT5x4KF5H1H5rsPK/8gwAUgyLPcHjHsJbM4T2cAkm2fNab3R803\nQvshzxRubVOqHiLBlJw2ec/IDutIT4fPhGfYw8FBFodYwoOAts6HFrRoe1A3\niarKXYoSDnS5O3kTnBe8Y/Zg5zNlLvRBS3x1ghGXnsWkoUh19KWkIc/lKCYP\ny0JU\r\n=otA7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDSGGzCBaK1H7ZNCQd3iau5aMUz49DRcHMQDMvpfOtHtAIgeSCzGZtqe/htG7bGx8QR99R0smBucI098mJ0BQ8Y+q4="}]},"maintainers":[{"email":"james@faceyspacey.com","name":"faceyspacey"},{"email":"zackary.l.jackson@gmail.com","name":"zackljackson"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/extract-css-chunks-webpack-plugin_3.0.12_1535740817699_0.4622468105680657"},"_hasShrinkwrap":false},"3.1.0":{"name":"extract-css-chunks-webpack-plugin","version":"3.1.0","author":{"name":"James Gillmore","email":"james@faceyspacey.com"},"contributors":[{"name":"Zack Jackson","email":"zackary.l.jackson@gmail.com","url":"https://github.com/ScriptedAlchemy"}],"description":"Extract CSS from chunks into stylesheets + HMR. Supports Webpack 4","engines":{"node":">= 6.9.0 <7.0.0 || >= 8.9.0"},"main":"dist/cjs.js","types":"index.d.ts","keywords":["css","chunks","code splitting","mini-css","hot","hmr","universal","webpack","webpack 4"],"license":"MIT","scripts":{"start":"npm run build -- -w","build":"cross-env NODE_ENV=production babel src -d dist --ignore 'src/**/*.test.js' --copy-files","clean":"del-cli dist","lint":"eslint --cache --fix src","prebuild":"npm run clean","prepublish":"npm run build","security":"nsp check","test":"jest","test:watch":"jest --watch","test:coverage":"jest --collectCoverageFrom='src/**/*.js' --coverage","test:example":"npm run build && webpack-dev-server test/manual/src/index.js --config test/manual/webpack.config.js","ci:lint":"npm run lint && npm run security","ci:test":"npm run test -- --runInBand","ci:coverage":"npm run test:coverage -- --runInBand","build:example":"npm run build && webpack-dev-server test/manual/src/index.js --open --config test/manual/webpack.config.js","cm":"git-cz","release":"standard-version","semantic-release":"semantic-release pre && npm publish && semantic-release post","travis":"npm run ci:coverage"},"peerDependencies":{"webpack":"^4.8.3"},"dependencies":{"loader-utils":"^1.1.0","lodash":"^4.17.5","normalize-url":"^1.9.1","webpack-sources":"^1.1.0"},"devDependencies":{"@webpack-contrib/eslint-config-webpack":"^2.0.4","babel-cli":"^6.26.0","babel-eslint":"^7.2.3","babel-jest":"^22.2.2","babel-loader":"^7.1.4","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-polyfill":"^6.26.0","babel-preset-env":"^1.6.1","commitizen":"^2.10.1","conventional-github-releaser":"^2.0.2","cross-env":"^5.1.3","css-loader":"^0.28.10","cz-conventional-changelog":"^2.1.0","del":"^3.0.0","del-cli":"^1.1.0","eslint":"^3.19.0","eslint-config-airbnb":"^15.0.1","eslint-plugin-flowtype":"^2.32.1","eslint-plugin-import":"^2.8.0","eslint-plugin-jsx-a11y":"^5.0.3","eslint-plugin-prettier":"^2.6.0","eslint-plugin-react":"^7.0.1","husky":"^0.14.3","jest":"^22.2.2","memory-fs":"^0.4.1","nsp":"^3.1.0","pre-commit":"^1.2.2","prettier":"^1.11.1","standard-version":"^4.3.0","webpack":"4.8.3","webpack-cli":"^2.0.13","webpack-dev-server":"^3.1.1"},"homepage":"http://github.com/faceyspacey/extract-css-chunks-webpack-plugin","repository":{"type":"git","url":"git+https://github.com/faceyspacey/extract-css-chunks-webpack-plugin.git"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"gitHead":"2e242d2ce1d239f2ae14b53cb9b3da2312ebb630","bugs":{"url":"https://github.com/faceyspacey/extract-css-chunks-webpack-plugin/issues"},"_id":"extract-css-chunks-webpack-plugin@3.1.0","_npmVersion":"5.5.1","_nodeVersion":"8.9.0","_npmUser":{"name":"zackljackson","email":"zackary.l.jackson@gmail.com"},"dist":{"integrity":"sha512-lilxk5d2S1qqMh5/tlS9G1hnAGxVx/GHcDeEdiVhW0LHuC3+8Vdx5E+msIItfEJTPJVdv1Pbz9txo4xsZdcNOg==","shasum":"8599293cc8ac13525986442dcea6be726784cf81","tarball":"https://registry.npmjs.org/extract-css-chunks-webpack-plugin/-/extract-css-chunks-webpack-plugin-3.1.0.tgz","fileCount":9,"unpackedSize":52901,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbihvACRA9TVsSAnZWagAAY3UQAJF73VYHjlBDSKmdPbxe\nX6LdwXf5Bmd/igHM4zYZUQg2OA3WYS8nsdXEA4QiobKb/oNaoZnrrMFGrzgY\nxY2cLwGG9Zo7XeZ/Y748Ld2WPsxRDDdf8El0Q4W+E98llI16dUjwR5p4jtYz\n4wFuU7l3vOdDnySMHL2KyMr2kROpCMEwsBMJ6fnxq6BfIz26ccjsQwEXSk96\ngZ0a8nBmt2bz8F5fLjXu9GB0M1fhEtMJ4REveFEdnwnFVd1HFszvzjOJjau/\nC/3+jz8FVXVIrGuBgkbZ5uFUwOkUecRBFdkNfL78pIKKqr/gqp3Ro2dGILt3\n9YlB59llMlpzF8g1L6JYzd0ZuSWQoY43WuUeQiI3QGHNOnnVvfQdZRNXImYG\nflvDfLLnu7tjtE88gyrrIMVt6AJnSpmoxTx1F3ocegMXClySI0weO0WChLOy\n4eYQMnouuPvxXYmSW1i8wkogq7tmJ3EueIWesdduZtX79HTow88Z5osayGQc\njr88jlQuL5vyw02/RId2A3lxu550FnC2rEcmeKZ8FgyeelAIOywJ4kgeQ7RM\nl5+1yxULQZJIBaOXjcFyOW3KuhAfMPJ09g2ORsePcY/BcXbds0bZ0OgupQgR\nEBzQywUB3c8v3J6UdgkkdVLDwCBtn2xTO7xY1xEiVxacwDQScdVCSjoCBGty\nxEe6\r\n=S30h\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDzk99ODEjFpZfoicrt4lsFEtNwZSecxH6c0PJ5v+PsBgIgP6yQSul/dXqxIP0Ah7vcT+x4oMDWPyFdiBhpkIzAs5s="}]},"maintainers":[{"email":"james@faceyspacey.com","name":"faceyspacey"},{"email":"zackary.l.jackson@gmail.com","name":"zackljackson"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/extract-css-chunks-webpack-plugin_3.1.0_1535777727528_0.486667457801335"},"_hasShrinkwrap":false},"3.1.1":{"name":"extract-css-chunks-webpack-plugin","version":"3.1.1","author":{"name":"James Gillmore","email":"james@faceyspacey.com"},"contributors":[{"name":"Zack Jackson","email":"zack@ScriptedAlchemy.com","url":"https://github.com/ScriptedAlchemy"}],"description":"Extract CSS from chunks into stylesheets + HMR. Supports Webpack 4","engines":{"node":">= 6.9.0 <7.0.0 || >= 8.9.0"},"main":"dist/cjs.js","types":"index.d.ts","keywords":["css","chunks","code splitting","mini-css","hot","hmr","universal","webpack","webpack 4"],"license":"MIT","scripts":{"start":"npm run build -- -w","build":"cross-env NODE_ENV=production babel src -d dist --ignore 'src/**/*.test.js' --copy-files","clean":"del-cli dist","lint":"eslint --cache --fix src","prebuild":"npm run clean","prepublish":"npm run build","security":"nsp check","test":"jest","test:watch":"jest --watch","test:coverage":"jest --collectCoverageFrom='src/**/*.js' --coverage","test:example":"npm run build && webpack-dev-server test/manual/src/index.js --config test/manual/webpack.config.js","ci:lint":"npm run lint && npm run security","ci:test":"npm run test -- --runInBand","ci:coverage":"npm run test:coverage -- --runInBand","build:example":"npm run build && webpack-dev-server test/manual/src/index.js --open --config test/manual/webpack.config.js","cm":"git-cz","release":"standard-version","semantic-release":"semantic-release pre && npm publish && semantic-release post","travis":"npm run ci:coverage"},"peerDependencies":{"webpack":"^4.8.3"},"dependencies":{"loader-utils":"^1.1.0","lodash":"^4.17.5","normalize-url":"^1.9.1","webpack-sources":"^1.1.0"},"devDependencies":{"@webpack-contrib/eslint-config-webpack":"^2.0.4","babel-cli":"^6.26.0","babel-eslint":"^7.2.3","babel-jest":"^22.2.2","babel-loader":"^7.1.4","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-polyfill":"^6.26.0","babel-preset-env":"^1.6.1","commitizen":"^2.10.1","conventional-github-releaser":"^2.0.2","cross-env":"^5.1.3","css-loader":"^0.28.10","cz-conventional-changelog":"^2.1.0","del":"^3.0.0","del-cli":"^1.1.0","eslint":"^3.19.0","eslint-config-airbnb":"^15.0.1","eslint-plugin-flowtype":"^2.32.1","eslint-plugin-import":"^2.8.0","eslint-plugin-jsx-a11y":"^5.0.3","eslint-plugin-prettier":"^2.6.0","eslint-plugin-react":"^7.0.1","husky":"^0.14.3","jest":"^22.2.2","memory-fs":"^0.4.1","nsp":"^3.1.0","pre-commit":"^1.2.2","prettier":"^1.11.1","standard-version":"^4.3.0","webpack":"4.8.3","webpack-cli":"^2.0.13","webpack-dev-server":"^3.1.1"},"homepage":"http://github.com/faceyspacey/extract-css-chunks-webpack-plugin","repository":{"type":"git","url":"git+https://github.com/faceyspacey/extract-css-chunks-webpack-plugin.git"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"gitHead":"7e15d9de88c9a1de287665e67d3ede60963c0c09","bugs":{"url":"https://github.com/faceyspacey/extract-css-chunks-webpack-plugin/issues"},"_id":"extract-css-chunks-webpack-plugin@3.1.1","_npmVersion":"5.5.1","_nodeVersion":"8.9.0","_npmUser":{"name":"zackljackson","email":"zackary.l.jackson@gmail.com"},"dist":{"integrity":"sha512-iD9USV9qTYH+w3lbVIPQ7d9zCnDyoHv7vDg7gpf1Xrgl4b+oC1XW1hx8omYWSS0xrJeHw6xHGEoXyiyIg2zBtA==","shasum":"b5a5bbc441fc87238d1b365f315a315090146a9a","tarball":"https://registry.npmjs.org/extract-css-chunks-webpack-plugin/-/extract-css-chunks-webpack-plugin-3.1.1.tgz","fileCount":9,"unpackedSize":53000,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbika1CRA9TVsSAnZWagAARLwP/2GQd27/dUtWQzCL/ADe\nUBoEPU+d9ZeRYmztoYFeS1EzPMkdXBnBfsjdCRT1cSDfimGlpJP7uRN7f1tP\nBDgYrFpS5EGSmtPGTY9YaUHoPnzaxym9baLuvGq2HzuAOlQoaBglW46pMFZX\nbLMaInijYoh7Ts5fF29ZncOdlik2sSiEicJTB46Yb8Y28+w8WFGUidvAvXDs\nyPqGEmQHFhdFyYyFvIU7uYHrZWjpZofNO7kCL1L0rc2zSB4BZLTBisp3zrip\niUHOOvuo5oSvPo7+yGcxwC+Wbh6c6w5FHbqADuKKWSjPAI+4R2XARi1vJMt7\n99zMI39I2StX7/wk6SbnbzGO7a5BrbojmO7ahQ4gQ7ezlxLZe5fz2vzFWDKS\nqW6tXme/+B1IBoLWHSdugbHwAQydR/C3Xjxq/AeOUmPXqPyH0ZrSiPjZWVLb\nR/gKsjaftViKCCTMZGUM2amRTCgujZs1sptD7CLf8Z92wmKsNfJ/AVeYeGvk\nXh2Gtabv5uO69Jw2mnWVh75tPtLEunigDfF6cJXh33NvVm4jey2r3vg52Exw\njX7x3Yl9VRspX733uTWJkILsPgse+U3fHmUzm79kJB1Cxj/6DJUrJU/EVdOh\n4hEJekhT/u1/JsDQOZmVlB5nmWFk5bN4VgHLlcvh5kBuePouWdGXh+sKx0ut\nPht6\r\n=ysAH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAFpfiFSrdaMcP+j4/OS/ttxL/VrKjbUbfNuMs3KWlgUAiAeEIewCBZGuVZRy4ZQOVPsKC+mqGvg80k0ek+bhXChpA=="}]},"maintainers":[{"email":"james@faceyspacey.com","name":"faceyspacey"},{"email":"zackary.l.jackson@gmail.com","name":"zackljackson"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/extract-css-chunks-webpack-plugin_3.1.1_1535788724003_0.03028865372507017"},"_hasShrinkwrap":false},"3.1.2-beta.1":{"name":"extract-css-chunks-webpack-plugin","version":"3.1.2-beta.1","author":{"name":"James Gillmore","email":"james@faceyspacey.com"},"contributors":[{"name":"Zack Jackson","email":"zack@ScriptedAlchemy.com","url":"https://github.com/ScriptedAlchemy"}],"description":"Extract CSS from chunks into stylesheets + HMR. Supports Webpack 4","engines":{"node":">= 6.9.0 <7.0.0 || >= 8.9.0"},"main":"dist/cjs.js","types":"index.d.ts","keywords":["css","chunks","code splitting","mini-css","hot","hmr","universal","webpack","webpack 4"],"license":"MIT","scripts":{"start":"npm run build -- -w","build":"cross-env NODE_ENV=production babel src -d dist --ignore 'src/**/*.test.js' --copy-files","clean":"del-cli dist","lint":"eslint --cache --fix src","prebuild":"npm run clean","prepublish":"npm run build","security":"nsp check","test":"jest","test:watch":"jest --watch","test:coverage":"jest --collectCoverageFrom='src/**/*.js' --coverage","test:example":"npm run build && webpack-dev-server test/manual/src/index.js --config test/manual/webpack.config.js","ci:lint":"npm run lint && npm run security","ci:test":"npm run test -- --runInBand","ci:coverage":"npm run test:coverage -- --runInBand","build:example":"npm run build && webpack-dev-server test/manual/src/index.js --open --config test/manual/webpack.config.js","cm":"git-cz","release":"standard-version","semantic-release":"semantic-release pre && npm publish && semantic-release post","travis":"npm run ci:coverage"},"peerDependencies":{"webpack":"^4.8.3"},"dependencies":{"loader-utils":"^1.1.0","lodash":"^4.17.5","normalize-url":"^1.9.1","webpack-sources":"^1.1.0"},"devDependencies":{"@webpack-contrib/eslint-config-webpack":"^2.0.4","babel-cli":"^6.26.0","babel-eslint":"^7.2.3","babel-jest":"^22.2.2","babel-loader":"^7.1.4","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-polyfill":"^6.26.0","babel-preset-env":"^1.6.1","commitizen":"^2.10.1","conventional-github-releaser":"^2.0.2","cross-env":"^5.1.3","css-loader":"^0.28.10","cz-conventional-changelog":"^2.1.0","del":"^3.0.0","del-cli":"^1.1.0","eslint":"^3.19.0","eslint-config-airbnb":"^15.0.1","eslint-plugin-flowtype":"^2.32.1","eslint-plugin-import":"^2.8.0","eslint-plugin-jsx-a11y":"^5.0.3","eslint-plugin-prettier":"^2.6.0","eslint-plugin-react":"^7.0.1","husky":"^0.14.3","jest":"^22.2.2","memory-fs":"^0.4.1","nsp":"^3.1.0","pre-commit":"^1.2.2","prettier":"^1.11.1","standard-version":"^4.3.0","webpack":"4.8.3","webpack-cli":"^2.0.13","webpack-dev-server":"^3.1.1"},"homepage":"http://github.com/faceyspacey/extract-css-chunks-webpack-plugin","repository":{"type":"git","url":"git+https://github.com/faceyspacey/extract-css-chunks-webpack-plugin.git"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"readme":"<a href=\"https://gitter.im/Reactlandia/Lobby\" target=\"_blank\">\n  <img alt=\"Edit Redux-First Router Demo\" src=\"http://cdn.reactlandia.com/chat-badge-reactlandia.png\">\n</a>\n\n\n# extract-css-chunks-webpack-plugin\n\n<p align=\"center\">\n  <a href=\"https://www.npmjs.com/package/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://img.shields.io/npm/v/extract-css-chunks-webpack-plugin.svg\" alt=\"Version\" />\n  </a>\n\n  <a href=\"https://travis-ci.org/faceyspacey/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://travis-ci.org/faceyspacey/extract-css-chunks-webpack-plugin.svg?branch=master\" alt=\"Build Status\" />\n  </a>\n\n  <a href=\"https://www.npmjs.com/package/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://img.shields.io/npm/dt/extract-css-chunks-webpack-plugin.svg\" alt=\"Downloads\" />\n  </a>\n\n  <a href=\"https://www.npmjs.com/package/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://img.shields.io/npm/dm/extract-css-chunks-webpack-plugin.svg\" alt=\"License\" />\n  </a>\n  \n  <a href=\"https://www.npmjs.com/package/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://img.shields.io/npm/l/extract-css-chunks-webpack-plugin.svg\" alt=\"License\" />\n  </a>\n</p>\n\n<h2 align=\"center\">🍾🍾🍾It's our absolute pleasure to announce Webpack 4 Support 🚀🚀🚀</h2>\n\n> **HEADLINES (May 2018): Now Independently supports Webpack 4:** \nYep that's right. The universal family is now fully Webpack 4. Thank you to all our users for your loyalty and patience! If you love Universal, then you are gonna fall head over heels when we bring out the main course! \n\nSo... why did we rebuild `extract-css-chunks`? What does it offer? \n\nIt's got all the goodness of `mini-css-extract-plugin` but with 2 gleaming, sought after benefits. \n\nCompared to the existing loaders, we are offering a single solution as opposed to needing to depend on multiple loaders to cater for different features:\n\n## Perks\n* **HMR:** It also has first-class support for **Hot Module Replacement** across ALL those css files/chunks!!!\n* cacheable stylesheets \n* smallest total bytes sent compared to \"render-path\" css-in-js solutions that include your CSS definitions in JS\n* Faster than the V2!\n* Async loading\n* No duplicate compilation (performance)\n* Easier to use\n* Specific to CSS\n* SSR Friendly development build, focused on frontend DX\n* Works seamlessly with the Universal family\n* Works fantastically as a standalone style loader (You can use it for any webpack project! with no extra dependencies!)\n\nAdditionally, if you are already a user of the universal family -- we will be waving goodbye to the mandatory ```window.__CSS_CHUNKS__```.\n\nThe functionality is still available to you via chunk flushing, and it can come in super handy when needing to easily resolve style assets as urls that might need to be passed to a third party.\n\n## Webpack 4 Standalone Installation:\n\nIf you are just looking for something that works like `mini-css-extract-plugin` but with HMR, then look no further.\n\nNOTE: We have aligned out loader implementation to be the same as `mini-css-extract-plugin` \n\n**If you already use `mini-css-extract-plugin`, then you can just change the `require` statement - it's that easy**\n\n```\nyarn add --dev extract-css-chunks-webpack-plugin\n```\n\n*webpack.config.js:*\n```js\nconst ExtractCssChunks = require(\"extract-css-chunks-webpack-plugin\")\n\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [\n           ExtractCssChunks.loader,\n           \"css-loader\"\n         ]\n      }\n    ]\n  },\n  plugins: [\n    new ExtractCssChunks(\n        {\n          // Options similar to the same options in webpackOptions.output\n          // both options are optional\n          filename: \"[name].css\",\n          chunkFilename: \"[id].css\",\n          hot: true // optional as the plugin cannot automatically detect if you are using HOT, not for production use\n        }\n    ),\n  ]\n}\n```\n\n*webpack.server.config.js*\n\nThe server needs to be handled differently, we still want one chunk. Luckily webpack 4 supports **LimitChunkCountPlugin**\n\n```js\nnew webpack.optimize.LimitChunkCountPlugin({\n    maxChunks: 1\n})\n```\n\n\n### What about Webpack 3?\nThis is a breaking change. The entire loader has been fundamentally rewritten specifically for Webpack 4. Aiming to support our existing user base, allowing them to upgrade their infrastructure to support Webpack 4 based universally code-split server-side rendered react applications. \n\nThere have been some challenges along the way since the release of webpack 4. Ultimately the only remaining hurdle is code split, async style loading. \n\nIf you do need Webpack 3, make sure to stick with the latest `v2.x.x` release. `v3.x.x` is only intended for users with Webpack 4\n\n\n\n\n*Note: this is a companion package to:*\n- [webpack-flush-chunks](https://github.com/faceyspacey/webpack-flush-chunks) \n- [react-universal-component](https://github.com/faceyspacey/react-universal-component)\n- [babel-plugin-universal-import](https://github.com/faceyspacey/babel-plugin-universal-import) ***or*** [babel-plugin-dual-import](https://github.com/faceyspacey/babel-plugin-dual-import)\n\n\n## Recommended Installation For Universal\n```\nyarn add react-universal-component webpack-flush-chunks\nyarn add --dev extract-css-chunks-webpack-plugin babel-plugin-universal-import\n```\n\n*.babelrc:*\n```js\n{\n  \"plugins\": [\"universal-import\"]\n}\n```\nThe main thing is you need to cater to the new chunking system of webpack!\nWith **webpack.optimize.CommonsChunkPlugin** plugin no longer part of Webpack 4, we need another way to define the code-splitting. Luckily we have `optimization` configs built into webpack now\n\n> There are more aggressive ways to code split, thanks to webpack 4. Check out the RUC Readme if you are looking for a more aggressive code split optimization configuration. These are just examples, you should be able to configure them as you see fit\n\n*webpack.config.js:*\n```js\nconst ExtractCssChunks = require(\"extract-css-chunks-webpack-plugin\")\n\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [\n          ExtractCssChunks.loader,\n          {\n            loader: 'css-loader',\n            options: {\n              modules: true,\n              localIdentName: '[name]__[local]--[hash:base64:5]',\n            },\n          },\n        ],\n      },\n    ],\n  },\n  optimization: {\n      // FOR PRODUCTION\n      minimizer: [\n          new UglifyJSPlugin({\n              uglifyOptions: {\n                  output: {\n                      comments: false,\n                      ascii_only: true\n                  },\n                  compress: {\n                      comparisons: false\n                  }\n              }\n          })\n      ],\n      // END\n      // NEEDED BOTH IN PROD AND DEV BUILDS\n      runtimeChunk: {\n          name: 'bootstrap'\n      },\n      splitChunks: {\n          chunks: 'initial',\n          cacheGroups: {\n              vendors: {\n                  test: /[\\\\/]node_modules[\\\\/]/,\n                  name: 'vendor'\n              }\n          }\n      }\n  },\n  plugins: [\n    new ExtractCssChunks({hot:true}), //if you want HMR - we try to automatically inject hot reloading but if it's not working, add it to the config\n  ]\n};\n```\n\n## Desired Output\nHere's the sort of CSS you can expect to serve:\n\n```\n<head>\n\t<link rel='stylesheet' href='/static/main.css' />\n\t<link rel='stylesheet' href='/static/0.css' />\n\t<link rel='stylesheet' href='/static/7.css' />\n</head> \n\n<body>\n\t<div id=\"react-root\"></div>\n\t\n\t<script type='text/javascript' src='/static/vendor.js'></script>\n\t<script type='text/javascript' src='/static/0.js'></script>\n\t<script type='text/javascript' src='/static/7.js'></script>\n\t<script type='text/javascript' src='/static/main.js'></script>\n</body>\n```\n\nIf you need to resolve your stylesheets on the client side, for whatever reason. \n\n[webpack-flush-chunks](https://github.com/faceyspacey/webpack-flush-chunks) will scoop up the exact stylesheets to embed in your response. It will give you an object which can be embedded on page\n\nHere's how you do it:\n\n\n*src/components/App.js:*\n```js\nconst UniversalComponent = universal(props => import(`./${props.page}`))\n\n<UniversalComponent page='Foo' />\n```\n\n*server/render.js:*\n```js\nimport { flushChunkNames } from 'react-universal-component/server'\nimport flushChunks from 'webpack-flush-chunks'\n\nconst app = ReactDOMServer.renderToString(<App />)\nconst { js, styles, cssHash } = flushChunks(webpackStats, {\n  chunkNames: flushChunkNames()\n})\n\nres.send(`\n  <!doctype html>\n  <html>\n    <head>\n      ${styles}\n    </head>\n    <body>\n      <div id=\"root\">${app}</div>\n      <!-- not needed unless you want to access css chunks urls manually  -->\n      ${cssHash}\n      <!-- extract-css-chunks takes care of loading the css assets automatically -->\n      ${js}\n    </body>\n  </html>\n`)\n```\n\n***As for asynchronous calls to `import()` on user navigation,*** [babel-plugin-universal-import](https://github.com/faceyspacey/babel-plugin-universal-import) is required if you're using [react-universal-component](https://github.com/faceyspacey/react-universal-component). And if you aren't, you must use: [babel-plugin-dual-import](https://github.com/faceyspacey/babel-plugin-dual-import). \n\n\nThese babel plugins request both your js + your css. *Very Nice!* This is the new feature of the 2.0. Read *Sokra's* (author of webpack) article on how [on how this is the future of CSS for webpack](https://medium.com/webpack/the-new-css-workflow-step-1-79583bd107d7). Use this and be in the future today.\n\n\n## API \nYou can pass the same options as `mini-css-extract` to `new ExtractCssChunks`, such as:\n\n```javascript\nnew ExtractCssChunk({\n      filename: devMode ? '[name].css' : '[name].[hash].css',\n      chunkFilename: devMode ? '[id].css' : '[id].[hash].css',\n})\n```\n\n>Keep in mind, by default `[name].css` is used when `process.env.NODE_ENV === 'development'` and `[name].[contenthash].css` during production, so you can likely forget about having to pass anything.\n\n### HMR Pitfall\n\nThe most common workflow when working with webpack is to write a \"development\" / \"production\" value in to the\n'process.env.NODE_ENV' namespace, typically, using webpack's built-in \"DefinePlugin\" plugin. e.g:\n\n```javascript\nnew webpack.DefinePlugin( {\n     'process.env': {\n        NODE_ENV: `\"${config.devMode ? 'development' : 'production'}\"`,\n      },\n} )\n```\nThe value set by the aforementioned plugin will only be available in the runtime ( when webpack's javascript output is executed ).\nIn order for this plugin to work with hot module reloading, The npm script / gulp task / grunt task etc, should be invoked with the same environment variable as shown above.\n\nFor example, when running the build using some form of npm script:\n\n```json\n{\n  \"scripts\": {\n     \"build\": \"cross-env NODE_ENV=production babel src -d dist --ignore 'src/**/*.test.js' --copy-files\"\n  }\n}\n```\n[cross-env](https://www.npmjs.com/package/cross-env) is optional but recommended. \n\n### What about Glamorous, Styled Components, Styled-Jsx, Aphrodite, etc?\n\nIf you effectively use code-splitting, **Extract Css Chunks** can be a far better option than using emerging solutions like *Glamorous*, *Styled Components*, and slightly older tools like *Aphrodite*, *Glamor*, etc. We aren't fans of either rounds of tools because of several issues, but particularly because they all have a runtime overhead. Every time your React component is rendered with those, CSS is generated and updated within the DOM. On the server, you're going to also see unnecessary cycles for flushing the CSS along the critical render path. *Next.js's* `styled-jsx`, by the way, doesn't even work on the server--*not so good when it comes to flash of unstyled content (FOUC).*\n\nThe reason **Extract CSS Chunk** can be a better option is because **we also generate multiple sets of CSS based on what is actually \"used\",** ***but without the runtime overhead***. The difference is our definition of \"used\" is modules determined *statically* (which may not in fact be rendered) vs. what is in the \"critical render path\" (as is the case with the other tools). \n\nSo yes, our CSS may be mildly larger and include unnecessary css, but our `no_css.js` bundles will be a lot smaller as they don't need to inject any styles. See, even though those solutions have the smallest possible CSS file size, their javascript bundles, **in order to continue to render your components styled properly on the client,** must contain the necessary CSS for all possibilities! Those solutions serve both your entire bundle's CSS (in your javascript) **and** the CSS flushed from the critical render path. \n\nOn top of that, those are extra packages all with a huge number of issues in their Github repos corresponding to various limitations in the CSS they generate--something that is prevented when your definition for \"CSS-in-JS\" is simply importing CSS files compiled as normal by powerful proven CSS-specific processors.\n\nLastly, those solutions don't provide cacheable stylesheets. They do a lot of work--but they will **continue** doing it for you when you could have been done in one go long ago. Cloudflare is free--serve them through their CDN and you're winning. I love true javascript in css--don't get me wrong--but first I'd have to see they generate cacheable stylesheets. In my opinion, for now, it's best for environments that natively support it such as React Native.\n\n\n### Next:\n\nNow with that out of the way, for completeness let's compare what bytes of just the CSS are sent over the wire. The difference basically is minimal. Whereas solutions that flush from the critical render path will capture no more than the precise bits of CSS from the `if/else` branches followed, **Extract Css Chunks** is all about you effectively using code-splitting to insure, for example, you don't serve your Administration Panel's CSS in your public-facing site, etc. *In other words, it's all about avoiding serving large swaths of CSS from completely different sections of your app.* ***I.e. the biggest gains available to you.*** \n\n<details>\n<summary>\n    Read more on the topic ^^\n</summary>\n\nThis is where the real problem lies--where the real amount of unnecessary CSS comes from. If you effectively code-split your app, you may end up with 10 chunks. Now you can serve just the corresponding CSS for that chunk. If you try to go even farther and remove the css not used in the render path, you're likely achieving somewhere between 1-20% of the gains you achieved by thorough code-splitting. In other words, code splitting fulfills the 80/20 rule and attains the simple sweetspot of 80% optimization you--*as a balanced, level-headed, non-neurotic and professional developer*--are looking to achieve.\n\n*In short, by putting code splitting in appropriate places you have a lot of control over the CSS files that are created and can send a sensible* ***minimal*** *amount of associated bytes over the wire for the first request, perhaps even the smallest amount of all options.* \n\nIt's our perspective that you have achieved 80-99% of the performance gains (i.e. the creation of small relevant css files) at this ***static stage***. Offloading this work to the runtime stage is ultimately nit-picking and results in diminishing returns. When you factor that your JS bundle has to contain that JS anyway, those solutions make less and less sense from the perspective of reducing bytes delivered in the initial request. \n\nThere may be other reasons to use those tools (e.g. you don't like setting up webpack configs, or somehow you're really fond of pre-creating many `<div />` elements with their styles), but we prefer a simple standards-based way (without HoCs or specialized style components) to import styles just as you would in React Native. However to give the other tools credit, many of them likely started out with a different problem motivating them: avoiding webpack configs so you can include packages and their contained CSS without client apps being required to setup something like CSS loaders in Webpack. Having your CSS completely contained in true JS has its use cases, but at the application level--especially when you're already using something like Webpack--we fail to see its benefits. About all they share is a solution to avoiding **flashes of unstyled content** (FOUC), except one can save you a lot more bytes in what you send over the wire and save you from a continual runtime overhead where it's not needed. ***Honorable Mention:*** *StyleTron's concept of \"atomic declaration-level deduplication\" where it will make a class out of, say, `color: blue` so you don't need to send redundant styles certainly is a novel innovation, but again if the code still exists in your JS and you're building an application using Webpack (instead of a package), what's the point. In fact, it just makes editing the stylesheets in your browser developer tools more complicated. One benefit of critical render path solutions is the browser can spend less time matching the smaller number of styles to new DOM nodes as they appear, but then again it also has to spend the time injecting and parsing the new styles constantly, which is likely costlier.*\n\nAs an aside, so many apps share code between web and React Native--so the answer to the styles problem must be one that is identical for both. From that perspective importing a styles object **still** makes a lot of sense. **You're not missing out on the fundamental aspect of CSS-in-JSS:** ***isolated component-level styles and the ability to import them just like any other javascript code.*** Put them in other files, and use tools like `extract-css-chunks-webpack-plugin` and your pre-processors of choice that innately get styles right for the browser. As long as you're using **CSS Modules**, you're still at the cutting edge of CSS-in-JSS. Let's just say the other tools took one wrong turn and took it too far, when we already were at our destination. \n</details>\n\n\n#### SUMMARY OF BENEFITS COMPARED TO \"CRITICAL-RENDER-PATH\" SOLUTIONS:\n\n- no continual runtime overhead during `render` using HoCs that inject styles\n- smaller JS bundles without CSS injection\n- **You DO NOT need to clutter your component code with a specialized way of applying CSS (HoCs, styled elements)!** \n- The way you import module-based styles is exactly how you would import styles in React Native that exist in a separate file, which allows for extremely interchangeable code between React Native and regular React. Hurray! \n- pretty much already does everything covered by [@vjeux's 2014 css-in-js talk](https://speakerdeck.com/vjeux/react-css-in-js), besides dead code elimination. Dead code elimination is only solved for the other tools--as per the explanation above how the CSS is in the JS anyway--so much as Webpack and Uglify can remove **JS** that is not used. Either way, it's not a stretch to eventually add this feature to `extract-text-webpack-plugin` as well as this plugin. Hey, maybe it already has it??\n\n## Emotion!\n\n[Emotion](https://github.com/tkh44/emotion) is different. They allow for the extraction of static styles via their *extract mode*. We're very much looking forward to this being the perfect companion to the css chunks approach. \n<details>\n<summary>\n    Read more on the topic ^^\n</summary>\n\nCurrently however *extract mode* does not support IE11. So that means it's a no go, but we have hopes that in the future they'll solve that problem.\n\nThe reason Emotion doesn't work in IE11+ is because they currently try to preserve any dynamic aspects of your CSS-in-JS by converting it CSS vars, which isn't supported in IE11. That was a very smart approach, but unfortunately not good enough. \n\nThe vision we'd like to see for that package is where dynamic css stays inline, and where only static CSS is extracted into stylesheets, in which case CSS vars aren't needed. I've heard from them they have some \"hidden flags\" that allow for something close to this. When, and if, they take this feature all the way, look forward to us pushing it as our recommended approach. *Go Emotion!*\n</details>\n\n## Linaria\n\nLinaria is another modern CSS-in-JSS library. It's focused around static styles, which may make it a perfect fit for usage with this plugin. Check it out:\n\nhttps://github.com/callstack/linaria\n\n## What if I don't use SSR and use html-webpack-plugin?\n\nFor that case you can use [css-chunks-html-webpack-plugin](https://github.com/teamable-software/css-chunks-html-webpack-plugin) which will extract CSS chunks paths into your HTML file.\n\n## Conclusion:\n**We love CSS modules; no less, no more.**\n\n**Long live the dream of Code Splitting Everywhere!**\n\n\n## Contributing\nWe use [commitizen](https://github.com/commitizen/cz-cli), so run `npm run cm` to make commits. A command-line form will appear, requiring you answer a few questions to automatically produce a nicely formatted commit. Releases, semantic version numbers, tags and changelogs will automatically be generated based on these commits thanks to [semantic-release](https://github.com/semantic-release/semantic-release). Be good.\n\n## More from FaceySpacey in Reactlandia\n- [redux-first-router](https://github.com/faceyspacey/redux-first-router). It's made to work perfectly with *Universal*. Together they comprise our *\"frameworkless\"* Redux-based approach to what Next.js does (splitting, SSR, prefetching, and routing). *People are lovin it by the way* 😎\n","readmeFilename":"README.md","gitHead":"642c77cb187a0a0be68f72f78dc276b7dfc37e0f","bugs":{"url":"https://github.com/faceyspacey/extract-css-chunks-webpack-plugin/issues"},"_id":"extract-css-chunks-webpack-plugin@3.1.2-beta.1","_npmVersion":"5.6.0","_nodeVersion":"9.10.0","_npmUser":{"name":"zackljackson","email":"zackary.l.jackson@gmail.com"},"dist":{"integrity":"sha512-PshPCKavEb7VghgCxahv89lM+ZME36rGWaZzfSwGccwPsevswSASIz5Tk42PXOGyi5Tj1BzhlKszPhZlm4pU0g==","shasum":"70a97d94f80a3e3a4844df38cf1f229f6611407a","tarball":"https://registry.npmjs.org/extract-css-chunks-webpack-plugin/-/extract-css-chunks-webpack-plugin-3.1.2-beta.1.tgz","fileCount":9,"unpackedSize":53320,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbkhp9CRA9TVsSAnZWagAAOz8P/3jPSW+V2q+nmLb7c/N/\nsFN8aqEBFJsCqYI0xOEnbjAM1kDDGGhEK2sF42H+d6AFps2ickgpcZi0bNtA\nhdjjobDuyIGjHVY/+1Mh3T8oJuDggbyg+zps0nPxUWX/QA+0H255I60thrFJ\nf5V53Z47yjBvg4ws8d8d3GWd1lpLzZI4hHFc7R4ECb0jEWazr0m5uL2xk3h8\nKUFau9PUkdd7r+v/x9Nu9qVVKVXSVbtMPMezUs7ecaGM8NG8q3OonG+Mk4af\ngKW0rzHEE5qXfcz9JwJdIh3YjNcF5LMRQxHG9jN1Iddjau0lyjX4YmQ8RBzw\ncdnu7khEGcy3Zlw9tGwBl3uaJ+5wwTAE71UDbBFVIdZgGsr5nkzJBy+HF7lF\nstnHncBGRCd9pVtCCHm8Pzn8i4v4gUbbrEx7mb7RoDIMttP7HudoSOUyF83M\ng+cZI32jGf5+bZvid6Qm6BYybyprS42/3n8PoET5KEd5kwursMQrLNGL7n+J\nb5lkZU8CKq9kPvzZKNvPN4ZF1K9FOkR2BfFN41Z8A18C/z3e2OO74HeQ+V5W\n5G/Qz5kix7l+xA5S5nydOn2ua9c+1DgzFX/lALToHHvkVM1c4nzUbdJSFrHO\npNeiPFUyNALB/uxPNqLoU50Wnf+PtHbF9Hc62sE0nW64EGwSVsvfj2nOXzut\nC0Qi\r\n=LDCn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDkZeetCGtQOxGvAUF8IRNVmdyDA/SJ635Dk8PG2KRTjQIhALSuJLLlRdDzHX2nid+jx/dMntnPtcrivbsV01mmRcJE"}]},"maintainers":[{"email":"james@faceyspacey.com","name":"faceyspacey"},{"email":"zackary.l.jackson@gmail.com","name":"zackljackson"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/extract-css-chunks-webpack-plugin_3.1.2-beta.1_1536301692223_0.025658807915605486"},"_hasShrinkwrap":false},"3.1.2-beta.2":{"name":"extract-css-chunks-webpack-plugin","version":"3.1.2-beta.2","author":{"name":"James Gillmore","email":"james@faceyspacey.com"},"contributors":[{"name":"Zack Jackson","email":"zack@ScriptedAlchemy.com","url":"https://github.com/ScriptedAlchemy"}],"description":"Extract CSS from chunks into stylesheets + HMR. Supports Webpack 4","engines":{"node":">= 6.9.0 <7.0.0 || >= 8.9.0"},"main":"dist/cjs.js","types":"index.d.ts","keywords":["css","chunks","code splitting","mini-css","hot","hmr","universal","webpack","webpack 4"],"license":"MIT","scripts":{"start":"npm run build -- -w","build":"cross-env NODE_ENV=production babel src -d dist --ignore 'src/**/*.test.js' --copy-files","clean":"del-cli dist","lint":"eslint --cache --fix src","prebuild":"npm run clean","prepublish":"npm run build","security":"nsp check","test":"jest","test:watch":"jest --watch","test:coverage":"jest --collectCoverageFrom='src/**/*.js' --coverage","test:example":"npm run build && webpack-dev-server test/manual/src/index.js --config test/manual/webpack.config.js","ci:lint":"npm run lint && npm run security","ci:test":"npm run test -- --runInBand","ci:coverage":"npm run test:coverage -- --runInBand","build:example":"npm run build && webpack-dev-server test/manual/src/index.js --open --config test/manual/webpack.config.js","cm":"git-cz","release":"standard-version","semantic-release":"semantic-release pre && npm publish && semantic-release post","travis":"npm run ci:coverage"},"peerDependencies":{"webpack":"^4.8.3"},"dependencies":{"loader-utils":"^1.1.0","lodash":"^4.17.5","normalize-url":"^1.9.1","webpack-sources":"^1.1.0"},"devDependencies":{"@webpack-contrib/eslint-config-webpack":"^2.0.4","babel-cli":"^6.26.0","babel-eslint":"^7.2.3","babel-jest":"^22.2.2","babel-loader":"^7.1.4","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-polyfill":"^6.26.0","babel-preset-env":"^1.6.1","commitizen":"^2.10.1","conventional-github-releaser":"^2.0.2","cross-env":"^5.1.3","css-loader":"^0.28.10","cz-conventional-changelog":"^2.1.0","del":"^3.0.0","del-cli":"^1.1.0","eslint":"^3.19.0","eslint-config-airbnb":"^15.0.1","eslint-plugin-flowtype":"^2.32.1","eslint-plugin-import":"^2.8.0","eslint-plugin-jsx-a11y":"^5.0.3","eslint-plugin-prettier":"^2.6.0","eslint-plugin-react":"^7.0.1","husky":"^0.14.3","jest":"^22.2.2","memory-fs":"^0.4.1","nsp":"^3.1.0","pre-commit":"^1.2.2","prettier":"^1.11.1","standard-version":"^4.3.0","webpack":"4.8.3","webpack-cli":"^2.0.13","webpack-dev-server":"^3.1.1"},"homepage":"http://github.com/faceyspacey/extract-css-chunks-webpack-plugin","repository":{"type":"git","url":"git+https://github.com/faceyspacey/extract-css-chunks-webpack-plugin.git"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"readme":"<a href=\"https://gitter.im/Reactlandia/Lobby\" target=\"_blank\">\n  <img alt=\"Edit Redux-First Router Demo\" src=\"http://cdn.reactlandia.com/chat-badge-reactlandia.png\">\n</a>\n\n\n# extract-css-chunks-webpack-plugin\n\n<p align=\"center\">\n  <a href=\"https://www.npmjs.com/package/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://img.shields.io/npm/v/extract-css-chunks-webpack-plugin.svg\" alt=\"Version\" />\n  </a>\n\n  <a href=\"https://travis-ci.org/faceyspacey/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://travis-ci.org/faceyspacey/extract-css-chunks-webpack-plugin.svg?branch=master\" alt=\"Build Status\" />\n  </a>\n\n  <a href=\"https://www.npmjs.com/package/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://img.shields.io/npm/dt/extract-css-chunks-webpack-plugin.svg\" alt=\"Downloads\" />\n  </a>\n\n  <a href=\"https://www.npmjs.com/package/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://img.shields.io/npm/dm/extract-css-chunks-webpack-plugin.svg\" alt=\"License\" />\n  </a>\n  \n  <a href=\"https://www.npmjs.com/package/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://img.shields.io/npm/l/extract-css-chunks-webpack-plugin.svg\" alt=\"License\" />\n  </a>\n</p>\n\n<h2 align=\"center\">🍾🍾🍾It's our absolute pleasure to announce Webpack 4 Support 🚀🚀🚀</h2>\n\n> **HEADLINES (May 2018): Now Independently supports Webpack 4:** \nYep that's right. The universal family is now fully Webpack 4. Thank you to all our users for your loyalty and patience! If you love Universal, then you are gonna fall head over heels when we bring out the main course! \n\nSo... why did we rebuild `extract-css-chunks`? What does it offer? \n\nIt's got all the goodness of `mini-css-extract-plugin` but with 2 gleaming, sought after benefits. \n\nCompared to the existing loaders, we are offering a single solution as opposed to needing to depend on multiple loaders to cater for different features:\n\n## Perks\n* **HMR:** It also has first-class support for **Hot Module Replacement** across ALL those css files/chunks!!!\n* cacheable stylesheets \n* smallest total bytes sent compared to \"render-path\" css-in-js solutions that include your CSS definitions in JS\n* Faster than the V2!\n* Async loading\n* No duplicate compilation (performance)\n* Easier to use\n* Specific to CSS\n* SSR Friendly development build, focused on frontend DX\n* Works seamlessly with the Universal family\n* Works fantastically as a standalone style loader (You can use it for any webpack project! with no extra dependencies!)\n\nAdditionally, if you are already a user of the universal family -- we will be waving goodbye to the mandatory ```window.__CSS_CHUNKS__```.\n\nThe functionality is still available to you via chunk flushing, and it can come in super handy when needing to easily resolve style assets as urls that might need to be passed to a third party.\n\n## Webpack 4 Standalone Installation:\n\nIf you are just looking for something that works like `mini-css-extract-plugin` but with HMR, then look no further.\n\nNOTE: We have aligned out loader implementation to be the same as `mini-css-extract-plugin` \n\n**If you already use `mini-css-extract-plugin`, then you can just change the `require` statement - it's that easy**\n\n```\nyarn add --dev extract-css-chunks-webpack-plugin\n```\n\n*webpack.config.js:*\n```js\nconst ExtractCssChunks = require(\"extract-css-chunks-webpack-plugin\")\n\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [\n           ExtractCssChunks.loader,\n           \"css-loader\"\n         ]\n      }\n    ]\n  },\n  plugins: [\n    new ExtractCssChunks(\n        {\n          // Options similar to the same options in webpackOptions.output\n          // both options are optional\n          filename: \"[name].css\",\n          chunkFilename: \"[id].css\",\n          hot: true // optional as the plugin cannot automatically detect if you are using HOT, not for production use\n        }\n    ),\n  ]\n}\n```\n\n*webpack.server.config.js*\n\nThe server needs to be handled differently, we still want one chunk. Luckily webpack 4 supports **LimitChunkCountPlugin**\n\n```js\nnew webpack.optimize.LimitChunkCountPlugin({\n    maxChunks: 1\n})\n```\n\n\n### What about Webpack 3?\nThis is a breaking change. The entire loader has been fundamentally rewritten specifically for Webpack 4. Aiming to support our existing user base, allowing them to upgrade their infrastructure to support Webpack 4 based universally code-split server-side rendered react applications. \n\nThere have been some challenges along the way since the release of webpack 4. Ultimately the only remaining hurdle is code split, async style loading. \n\nIf you do need Webpack 3, make sure to stick with the latest `v2.x.x` release. `v3.x.x` is only intended for users with Webpack 4\n\n\n\n\n*Note: this is a companion package to:*\n- [webpack-flush-chunks](https://github.com/faceyspacey/webpack-flush-chunks) \n- [react-universal-component](https://github.com/faceyspacey/react-universal-component)\n- [babel-plugin-universal-import](https://github.com/faceyspacey/babel-plugin-universal-import) ***or*** [babel-plugin-dual-import](https://github.com/faceyspacey/babel-plugin-dual-import)\n\n\n## Recommended Installation For Universal\n```\nyarn add react-universal-component webpack-flush-chunks\nyarn add --dev extract-css-chunks-webpack-plugin babel-plugin-universal-import\n```\n\n*.babelrc:*\n```js\n{\n  \"plugins\": [\"universal-import\"]\n}\n```\nThe main thing is you need to cater to the new chunking system of webpack!\nWith **webpack.optimize.CommonsChunkPlugin** plugin no longer part of Webpack 4, we need another way to define the code-splitting. Luckily we have `optimization` configs built into webpack now\n\n> There are more aggressive ways to code split, thanks to webpack 4. Check out the RUC Readme if you are looking for a more aggressive code split optimization configuration. These are just examples, you should be able to configure them as you see fit\n\n*webpack.config.js:*\n```js\nconst ExtractCssChunks = require(\"extract-css-chunks-webpack-plugin\")\n\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [\n          ExtractCssChunks.loader,\n          {\n            loader: 'css-loader',\n            options: {\n              modules: true,\n              localIdentName: '[name]__[local]--[hash:base64:5]',\n            },\n          },\n        ],\n      },\n    ],\n  },\n  optimization: {\n      // FOR PRODUCTION\n      minimizer: [\n          new UglifyJSPlugin({\n              uglifyOptions: {\n                  output: {\n                      comments: false,\n                      ascii_only: true\n                  },\n                  compress: {\n                      comparisons: false\n                  }\n              }\n          })\n      ],\n      // END\n      // NEEDED BOTH IN PROD AND DEV BUILDS\n      runtimeChunk: {\n          name: 'bootstrap'\n      },\n      splitChunks: {\n          chunks: 'initial',\n          cacheGroups: {\n              vendors: {\n                  test: /[\\\\/]node_modules[\\\\/]/,\n                  name: 'vendor'\n              }\n          }\n      }\n  },\n  plugins: [\n    new ExtractCssChunks({hot:true}), //if you want HMR - we try to automatically inject hot reloading but if it's not working, add it to the config\n  ]\n};\n```\n\n## Desired Output\nHere's the sort of CSS you can expect to serve:\n\n```\n<head>\n\t<link rel='stylesheet' href='/static/main.css' />\n\t<link rel='stylesheet' href='/static/0.css' />\n\t<link rel='stylesheet' href='/static/7.css' />\n</head> \n\n<body>\n\t<div id=\"react-root\"></div>\n\t\n\t<script type='text/javascript' src='/static/vendor.js'></script>\n\t<script type='text/javascript' src='/static/0.js'></script>\n\t<script type='text/javascript' src='/static/7.js'></script>\n\t<script type='text/javascript' src='/static/main.js'></script>\n</body>\n```\n\nIf you need to resolve your stylesheets on the client side, for whatever reason. \n\n[webpack-flush-chunks](https://github.com/faceyspacey/webpack-flush-chunks) will scoop up the exact stylesheets to embed in your response. It will give you an object which can be embedded on page\n\nHere's how you do it:\n\n\n*src/components/App.js:*\n```js\nconst UniversalComponent = universal(props => import(`./${props.page}`))\n\n<UniversalComponent page='Foo' />\n```\n\n*server/render.js:*\n```js\nimport { flushChunkNames } from 'react-universal-component/server'\nimport flushChunks from 'webpack-flush-chunks'\n\nconst app = ReactDOMServer.renderToString(<App />)\nconst { js, styles, cssHash } = flushChunks(webpackStats, {\n  chunkNames: flushChunkNames()\n})\n\nres.send(`\n  <!doctype html>\n  <html>\n    <head>\n      ${styles}\n    </head>\n    <body>\n      <div id=\"root\">${app}</div>\n      <!-- not needed unless you want to access css chunks urls manually  -->\n      ${cssHash}\n      <!-- extract-css-chunks takes care of loading the css assets automatically -->\n      ${js}\n    </body>\n  </html>\n`)\n```\n\n***As for asynchronous calls to `import()` on user navigation,*** [babel-plugin-universal-import](https://github.com/faceyspacey/babel-plugin-universal-import) is required if you're using [react-universal-component](https://github.com/faceyspacey/react-universal-component). And if you aren't, you must use: [babel-plugin-dual-import](https://github.com/faceyspacey/babel-plugin-dual-import). \n\n\nThese babel plugins request both your js + your css. *Very Nice!* This is the new feature of the 2.0. Read *Sokra's* (author of webpack) article on how [on how this is the future of CSS for webpack](https://medium.com/webpack/the-new-css-workflow-step-1-79583bd107d7). Use this and be in the future today.\n\n\n## API \nYou can pass the same options as `mini-css-extract` to `new ExtractCssChunks`, such as:\n\n```javascript\nnew ExtractCssChunk({\n      filename: devMode ? '[name].css' : '[name].[hash].css',\n      chunkFilename: devMode ? '[id].css' : '[id].[hash].css',\n})\n```\n\n>Keep in mind, by default `[name].css` is used when `process.env.NODE_ENV === 'development'` and `[name].[contenthash].css` during production, so you can likely forget about having to pass anything.\n\n### HMR Pitfall\n\nThe most common workflow when working with webpack is to write a \"development\" / \"production\" value in to the\n'process.env.NODE_ENV' namespace, typically, using webpack's built-in \"DefinePlugin\" plugin. e.g:\n\n```javascript\nnew webpack.DefinePlugin( {\n     'process.env': {\n        NODE_ENV: `\"${config.devMode ? 'development' : 'production'}\"`,\n      },\n} )\n```\nThe value set by the aforementioned plugin will only be available in the runtime ( when webpack's javascript output is executed ).\nIn order for this plugin to work with hot module reloading, The npm script / gulp task / grunt task etc, should be invoked with the same environment variable as shown above.\n\nFor example, when running the build using some form of npm script:\n\n```json\n{\n  \"scripts\": {\n     \"build\": \"cross-env NODE_ENV=production babel src -d dist --ignore 'src/**/*.test.js' --copy-files\"\n  }\n}\n```\n[cross-env](https://www.npmjs.com/package/cross-env) is optional but recommended. \n\n### What about Glamorous, Styled Components, Styled-Jsx, Aphrodite, etc?\n\nIf you effectively use code-splitting, **Extract Css Chunks** can be a far better option than using emerging solutions like *Glamorous*, *Styled Components*, and slightly older tools like *Aphrodite*, *Glamor*, etc. We aren't fans of either rounds of tools because of several issues, but particularly because they all have a runtime overhead. Every time your React component is rendered with those, CSS is generated and updated within the DOM. On the server, you're going to also see unnecessary cycles for flushing the CSS along the critical render path. *Next.js's* `styled-jsx`, by the way, doesn't even work on the server--*not so good when it comes to flash of unstyled content (FOUC).*\n\nThe reason **Extract CSS Chunk** can be a better option is because **we also generate multiple sets of CSS based on what is actually \"used\",** ***but without the runtime overhead***. The difference is our definition of \"used\" is modules determined *statically* (which may not in fact be rendered) vs. what is in the \"critical render path\" (as is the case with the other tools). \n\nSo yes, our CSS may be mildly larger and include unnecessary css, but our `no_css.js` bundles will be a lot smaller as they don't need to inject any styles. See, even though those solutions have the smallest possible CSS file size, their javascript bundles, **in order to continue to render your components styled properly on the client,** must contain the necessary CSS for all possibilities! Those solutions serve both your entire bundle's CSS (in your javascript) **and** the CSS flushed from the critical render path. \n\nOn top of that, those are extra packages all with a huge number of issues in their Github repos corresponding to various limitations in the CSS they generate--something that is prevented when your definition for \"CSS-in-JS\" is simply importing CSS files compiled as normal by powerful proven CSS-specific processors.\n\nLastly, those solutions don't provide cacheable stylesheets. They do a lot of work--but they will **continue** doing it for you when you could have been done in one go long ago. Cloudflare is free--serve them through their CDN and you're winning. I love true javascript in css--don't get me wrong--but first I'd have to see they generate cacheable stylesheets. In my opinion, for now, it's best for environments that natively support it such as React Native.\n\n\n### Next:\n\nNow with that out of the way, for completeness let's compare what bytes of just the CSS are sent over the wire. The difference basically is minimal. Whereas solutions that flush from the critical render path will capture no more than the precise bits of CSS from the `if/else` branches followed, **Extract Css Chunks** is all about you effectively using code-splitting to insure, for example, you don't serve your Administration Panel's CSS in your public-facing site, etc. *In other words, it's all about avoiding serving large swaths of CSS from completely different sections of your app.* ***I.e. the biggest gains available to you.*** \n\n<details>\n<summary>\n    Read more on the topic ^^\n</summary>\n\nThis is where the real problem lies--where the real amount of unnecessary CSS comes from. If you effectively code-split your app, you may end up with 10 chunks. Now you can serve just the corresponding CSS for that chunk. If you try to go even farther and remove the css not used in the render path, you're likely achieving somewhere between 1-20% of the gains you achieved by thorough code-splitting. In other words, code splitting fulfills the 80/20 rule and attains the simple sweetspot of 80% optimization you--*as a balanced, level-headed, non-neurotic and professional developer*--are looking to achieve.\n\n*In short, by putting code splitting in appropriate places you have a lot of control over the CSS files that are created and can send a sensible* ***minimal*** *amount of associated bytes over the wire for the first request, perhaps even the smallest amount of all options.* \n\nIt's our perspective that you have achieved 80-99% of the performance gains (i.e. the creation of small relevant css files) at this ***static stage***. Offloading this work to the runtime stage is ultimately nit-picking and results in diminishing returns. When you factor that your JS bundle has to contain that JS anyway, those solutions make less and less sense from the perspective of reducing bytes delivered in the initial request. \n\nThere may be other reasons to use those tools (e.g. you don't like setting up webpack configs, or somehow you're really fond of pre-creating many `<div />` elements with their styles), but we prefer a simple standards-based way (without HoCs or specialized style components) to import styles just as you would in React Native. However to give the other tools credit, many of them likely started out with a different problem motivating them: avoiding webpack configs so you can include packages and their contained CSS without client apps being required to setup something like CSS loaders in Webpack. Having your CSS completely contained in true JS has its use cases, but at the application level--especially when you're already using something like Webpack--we fail to see its benefits. About all they share is a solution to avoiding **flashes of unstyled content** (FOUC), except one can save you a lot more bytes in what you send over the wire and save you from a continual runtime overhead where it's not needed. ***Honorable Mention:*** *StyleTron's concept of \"atomic declaration-level deduplication\" where it will make a class out of, say, `color: blue` so you don't need to send redundant styles certainly is a novel innovation, but again if the code still exists in your JS and you're building an application using Webpack (instead of a package), what's the point. In fact, it just makes editing the stylesheets in your browser developer tools more complicated. One benefit of critical render path solutions is the browser can spend less time matching the smaller number of styles to new DOM nodes as they appear, but then again it also has to spend the time injecting and parsing the new styles constantly, which is likely costlier.*\n\nAs an aside, so many apps share code between web and React Native--so the answer to the styles problem must be one that is identical for both. From that perspective importing a styles object **still** makes a lot of sense. **You're not missing out on the fundamental aspect of CSS-in-JSS:** ***isolated component-level styles and the ability to import them just like any other javascript code.*** Put them in other files, and use tools like `extract-css-chunks-webpack-plugin` and your pre-processors of choice that innately get styles right for the browser. As long as you're using **CSS Modules**, you're still at the cutting edge of CSS-in-JSS. Let's just say the other tools took one wrong turn and took it too far, when we already were at our destination. \n</details>\n\n\n#### SUMMARY OF BENEFITS COMPARED TO \"CRITICAL-RENDER-PATH\" SOLUTIONS:\n\n- no continual runtime overhead during `render` using HoCs that inject styles\n- smaller JS bundles without CSS injection\n- **You DO NOT need to clutter your component code with a specialized way of applying CSS (HoCs, styled elements)!** \n- The way you import module-based styles is exactly how you would import styles in React Native that exist in a separate file, which allows for extremely interchangeable code between React Native and regular React. Hurray! \n- pretty much already does everything covered by [@vjeux's 2014 css-in-js talk](https://speakerdeck.com/vjeux/react-css-in-js), besides dead code elimination. Dead code elimination is only solved for the other tools--as per the explanation above how the CSS is in the JS anyway--so much as Webpack and Uglify can remove **JS** that is not used. Either way, it's not a stretch to eventually add this feature to `extract-text-webpack-plugin` as well as this plugin. Hey, maybe it already has it??\n\n## Emotion!\n\n[Emotion](https://github.com/tkh44/emotion) is different. They allow for the extraction of static styles via their *extract mode*. We're very much looking forward to this being the perfect companion to the css chunks approach. \n<details>\n<summary>\n    Read more on the topic ^^\n</summary>\n\nCurrently however *extract mode* does not support IE11. So that means it's a no go, but we have hopes that in the future they'll solve that problem.\n\nThe reason Emotion doesn't work in IE11+ is because they currently try to preserve any dynamic aspects of your CSS-in-JS by converting it CSS vars, which isn't supported in IE11. That was a very smart approach, but unfortunately not good enough. \n\nThe vision we'd like to see for that package is where dynamic css stays inline, and where only static CSS is extracted into stylesheets, in which case CSS vars aren't needed. I've heard from them they have some \"hidden flags\" that allow for something close to this. When, and if, they take this feature all the way, look forward to us pushing it as our recommended approach. *Go Emotion!*\n</details>\n\n## Linaria\n\nLinaria is another modern CSS-in-JSS library. It's focused around static styles, which may make it a perfect fit for usage with this plugin. Check it out:\n\nhttps://github.com/callstack/linaria\n\n## What if I don't use SSR and use html-webpack-plugin?\n\nFor that case you can use [css-chunks-html-webpack-plugin](https://github.com/teamable-software/css-chunks-html-webpack-plugin) which will extract CSS chunks paths into your HTML file.\n\n## Conclusion:\n**We love CSS modules; no less, no more.**\n\n**Long live the dream of Code Splitting Everywhere!**\n\n\n## Contributing\nWe use [commitizen](https://github.com/commitizen/cz-cli), so run `npm run cm` to make commits. A command-line form will appear, requiring you answer a few questions to automatically produce a nicely formatted commit. Releases, semantic version numbers, tags and changelogs will automatically be generated based on these commits thanks to [semantic-release](https://github.com/semantic-release/semantic-release). Be good.\n\n## More from FaceySpacey in Reactlandia\n- [redux-first-router](https://github.com/faceyspacey/redux-first-router). It's made to work perfectly with *Universal*. Together they comprise our *\"frameworkless\"* Redux-based approach to what Next.js does (splitting, SSR, prefetching, and routing). *People are lovin it by the way* 😎\n","readmeFilename":"README.md","gitHead":"642c77cb187a0a0be68f72f78dc276b7dfc37e0f","bugs":{"url":"https://github.com/faceyspacey/extract-css-chunks-webpack-plugin/issues"},"_id":"extract-css-chunks-webpack-plugin@3.1.2-beta.2","_npmVersion":"5.6.0","_nodeVersion":"9.10.0","_npmUser":{"name":"zackljackson","email":"zackary.l.jackson@gmail.com"},"dist":{"integrity":"sha512-DOD5wbMQN3wATnO4j8aKybrDw0inLuGl/vmFN7KhdrooZwgBwaijXGHkXGENpfgrOsrdxR2qZRATqUlCHr7aiQ==","shasum":"15238594dbcea0f4aa0f52c15935d30fb2145ae6","tarball":"https://registry.npmjs.org/extract-css-chunks-webpack-plugin/-/extract-css-chunks-webpack-plugin-3.1.2-beta.2.tgz","fileCount":9,"unpackedSize":52979,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbkiDUCRA9TVsSAnZWagAA6qAP/1C7Z90kodLST2csHM1Z\nGkrTDmHbTgzmsLR8o6tOp7h0JON+AhuiDKRXRf/DRhLSEthRdPmh+IXYsDxs\n1EOyUlEr7LjfArmw4AHSaTqriv9P1FvFkAxeRJypE5fut89k++RwGXPWONNf\nbzCq3phMdOpEKNugU/QwirvfMR3GaPQk/nDnBWAB3KXA6RJXIObtDMaObDVF\nCJlvqYGMUTcXcZhv3gzgI+SThxeNVVQPjIRaQszopjFJUcSe8lcBT1qAWaeP\nO2fPKNx0BuavUAO6ydQUTck9b/X8yG+k5xXTPSa+kLarj9USjOf3CZPIFj4+\npuziQNfymGq+SyvDl9JTAVRus+oNvD4fMAoksZyybSwCSN797wMmL7w5zTyy\nxeATFrKmyfezyZUNgZublh26o6MYvlPPjOSEtIjpPTcID8zybIYUCO9skC03\njwPx71SCwC6OaTihr76NOI2j6qgf9S/hyAZ5B1YBO5ufS7hAoTPmh6y5kGi4\nuKXgS1qgc5jP1e1V7HWycI4ZgLfrGj3TEgnNqHr5hRV9LHd49BTJWxHeN/QY\n+etE47ZXFNCwxNbeum+qipxtKKFlfviAJJKpWMTziARK1r73lr02AlcN/M+s\nMquy0CHUqOpKokfAdkSyHNqI6Uwdg2ebPqwsLCAxxicIP9aCVZ5h5X/QAJnZ\noFd8\r\n=+T54\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD0yEdmXVUY31atr/Jq8lh8Zpp/J3EiG5PwJ48ytC8MhQIgF6jt8vkwhLZqY+Ad4mgk7aQqDUJXL4ZuTi3TkspHZNw="}]},"maintainers":[{"email":"james@faceyspacey.com","name":"faceyspacey"},{"email":"zackary.l.jackson@gmail.com","name":"zackljackson"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/extract-css-chunks-webpack-plugin_3.1.2-beta.2_1536303315647_0.1193676999521649"},"_hasShrinkwrap":false},"3.1.2-beta.3":{"name":"extract-css-chunks-webpack-plugin","version":"3.1.2-beta.3","author":{"name":"James Gillmore","email":"james@faceyspacey.com"},"contributors":[{"name":"Zack Jackson","email":"zack@ScriptedAlchemy.com","url":"https://github.com/ScriptedAlchemy"}],"description":"Extract CSS from chunks into stylesheets + HMR. Supports Webpack 4","engines":{"node":">= 6.9.0 <7.0.0 || >= 8.9.0"},"main":"dist/cjs.js","types":"index.d.ts","keywords":["css","chunks","code splitting","mini-css","hot","hmr","universal","webpack","webpack 4"],"license":"MIT","scripts":{"start":"npm run build -- -w","build":"cross-env NODE_ENV=production babel src -d dist --ignore 'src/**/*.test.js' --copy-files","clean":"del-cli dist","lint":"eslint --cache --fix src","prebuild":"npm run clean","prepublish":"npm run build","security":"nsp check","test":"jest","test:watch":"jest --watch","test:coverage":"jest --collectCoverageFrom='src/**/*.js' --coverage","test:example":"npm run build && webpack-dev-server test/manual/src/index.js --config test/manual/webpack.config.js","ci:lint":"npm run lint && npm run security","ci:test":"npm run test -- --runInBand","ci:coverage":"npm run test:coverage -- --runInBand","build:example":"npm run build && webpack-dev-server test/manual/src/index.js --open --config test/manual/webpack.config.js","cm":"git-cz","release":"standard-version","semantic-release":"semantic-release pre && npm publish && semantic-release post","travis":"npm run ci:coverage"},"peerDependencies":{"webpack":"^4.8.3"},"dependencies":{"loader-utils":"^1.1.0","lodash":"^4.17.5","normalize-url":"^1.9.1","webpack-sources":"^1.1.0"},"devDependencies":{"@webpack-contrib/eslint-config-webpack":"^2.0.4","babel-cli":"^6.26.0","babel-eslint":"^7.2.3","babel-jest":"^22.2.2","babel-loader":"^7.1.4","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-polyfill":"^6.26.0","babel-preset-env":"^1.6.1","commitizen":"^2.10.1","conventional-github-releaser":"^2.0.2","cross-env":"^5.1.3","css-loader":"^0.28.10","cz-conventional-changelog":"^2.1.0","del":"^3.0.0","del-cli":"^1.1.0","eslint":"^3.19.0","eslint-config-airbnb":"^15.0.1","eslint-plugin-flowtype":"^2.32.1","eslint-plugin-import":"^2.8.0","eslint-plugin-jsx-a11y":"^5.0.3","eslint-plugin-prettier":"^2.6.0","eslint-plugin-react":"^7.0.1","husky":"^0.14.3","jest":"^22.2.2","memory-fs":"^0.4.1","nsp":"^3.1.0","pre-commit":"^1.2.2","prettier":"^1.11.1","standard-version":"^4.3.0","webpack":"4.8.3","webpack-cli":"^2.0.13","webpack-dev-server":"^3.1.1"},"homepage":"http://github.com/faceyspacey/extract-css-chunks-webpack-plugin","repository":{"type":"git","url":"git+https://github.com/faceyspacey/extract-css-chunks-webpack-plugin.git"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"readme":"<a href=\"https://gitter.im/Reactlandia/Lobby\" target=\"_blank\">\n  <img alt=\"Edit Redux-First Router Demo\" src=\"http://cdn.reactlandia.com/chat-badge-reactlandia.png\">\n</a>\n\n\n# extract-css-chunks-webpack-plugin\n\n<p align=\"center\">\n  <a href=\"https://www.npmjs.com/package/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://img.shields.io/npm/v/extract-css-chunks-webpack-plugin.svg\" alt=\"Version\" />\n  </a>\n\n  <a href=\"https://travis-ci.org/faceyspacey/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://travis-ci.org/faceyspacey/extract-css-chunks-webpack-plugin.svg?branch=master\" alt=\"Build Status\" />\n  </a>\n\n  <a href=\"https://www.npmjs.com/package/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://img.shields.io/npm/dt/extract-css-chunks-webpack-plugin.svg\" alt=\"Downloads\" />\n  </a>\n\n  <a href=\"https://www.npmjs.com/package/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://img.shields.io/npm/dm/extract-css-chunks-webpack-plugin.svg\" alt=\"License\" />\n  </a>\n  \n  <a href=\"https://www.npmjs.com/package/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://img.shields.io/npm/l/extract-css-chunks-webpack-plugin.svg\" alt=\"License\" />\n  </a>\n</p>\n\n<h2 align=\"center\">🍾🍾🍾It's our absolute pleasure to announce Webpack 4 Support 🚀🚀🚀</h2>\n\n> **HEADLINES (May 2018): Now Independently supports Webpack 4:** \nYep that's right. The universal family is now fully Webpack 4. Thank you to all our users for your loyalty and patience! If you love Universal, then you are gonna fall head over heels when we bring out the main course! \n\nSo... why did we rebuild `extract-css-chunks`? What does it offer? \n\nIt's got all the goodness of `mini-css-extract-plugin` but with 2 gleaming, sought after benefits. \n\nCompared to the existing loaders, we are offering a single solution as opposed to needing to depend on multiple loaders to cater for different features:\n\n## Perks\n* **HMR:** It also has first-class support for **Hot Module Replacement** across ALL those css files/chunks!!!\n* cacheable stylesheets \n* smallest total bytes sent compared to \"render-path\" css-in-js solutions that include your CSS definitions in JS\n* Faster than the V2!\n* Async loading\n* No duplicate compilation (performance)\n* Easier to use\n* Specific to CSS\n* SSR Friendly development build, focused on frontend DX\n* Works seamlessly with the Universal family\n* Works fantastically as a standalone style loader (You can use it for any webpack project! with no extra dependencies!)\n\nAdditionally, if you are already a user of the universal family -- we will be waving goodbye to the mandatory ```window.__CSS_CHUNKS__```.\n\nThe functionality is still available to you via chunk flushing, and it can come in super handy when needing to easily resolve style assets as urls that might need to be passed to a third party.\n\n## Webpack 4 Standalone Installation:\n\nIf you are just looking for something that works like `mini-css-extract-plugin` but with HMR, then look no further.\n\nNOTE: We have aligned out loader implementation to be the same as `mini-css-extract-plugin` \n\n**If you already use `mini-css-extract-plugin`, then you can just change the `require` statement - it's that easy**\n\n```\nyarn add --dev extract-css-chunks-webpack-plugin\n```\n\n*webpack.config.js:*\n```js\nconst ExtractCssChunks = require(\"extract-css-chunks-webpack-plugin\")\n\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [\n           ExtractCssChunks.loader,\n           \"css-loader\"\n         ]\n      }\n    ]\n  },\n  plugins: [\n    new ExtractCssChunks(\n        {\n          // Options similar to the same options in webpackOptions.output\n          // both options are optional\n          filename: \"[name].css\",\n          chunkFilename: \"[id].css\",\n          hot: true // optional as the plugin cannot automatically detect if you are using HOT, not for production use\n        }\n    ),\n  ]\n}\n```\n\n*webpack.server.config.js*\n\nThe server needs to be handled differently, we still want one chunk. Luckily webpack 4 supports **LimitChunkCountPlugin**\n\n```js\nnew webpack.optimize.LimitChunkCountPlugin({\n    maxChunks: 1\n})\n```\n\n\n### What about Webpack 3?\nThis is a breaking change. The entire loader has been fundamentally rewritten specifically for Webpack 4. Aiming to support our existing user base, allowing them to upgrade their infrastructure to support Webpack 4 based universally code-split server-side rendered react applications. \n\nThere have been some challenges along the way since the release of webpack 4. Ultimately the only remaining hurdle is code split, async style loading. \n\nIf you do need Webpack 3, make sure to stick with the latest `v2.x.x` release. `v3.x.x` is only intended for users with Webpack 4\n\n\n\n\n*Note: this is a companion package to:*\n- [webpack-flush-chunks](https://github.com/faceyspacey/webpack-flush-chunks) \n- [react-universal-component](https://github.com/faceyspacey/react-universal-component)\n- [babel-plugin-universal-import](https://github.com/faceyspacey/babel-plugin-universal-import) ***or*** [babel-plugin-dual-import](https://github.com/faceyspacey/babel-plugin-dual-import)\n\n\n## Recommended Installation For Universal\n```\nyarn add react-universal-component webpack-flush-chunks\nyarn add --dev extract-css-chunks-webpack-plugin babel-plugin-universal-import\n```\n\n*.babelrc:*\n```js\n{\n  \"plugins\": [\"universal-import\"]\n}\n```\nThe main thing is you need to cater to the new chunking system of webpack!\nWith **webpack.optimize.CommonsChunkPlugin** plugin no longer part of Webpack 4, we need another way to define the code-splitting. Luckily we have `optimization` configs built into webpack now\n\n> There are more aggressive ways to code split, thanks to webpack 4. Check out the RUC Readme if you are looking for a more aggressive code split optimization configuration. These are just examples, you should be able to configure them as you see fit\n\n*webpack.config.js:*\n```js\nconst ExtractCssChunks = require(\"extract-css-chunks-webpack-plugin\")\n\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [\n          ExtractCssChunks.loader,\n          {\n            loader: 'css-loader',\n            options: {\n              modules: true,\n              localIdentName: '[name]__[local]--[hash:base64:5]',\n            },\n          },\n        ],\n      },\n    ],\n  },\n  optimization: {\n      // FOR PRODUCTION\n      minimizer: [\n          new UglifyJSPlugin({\n              uglifyOptions: {\n                  output: {\n                      comments: false,\n                      ascii_only: true\n                  },\n                  compress: {\n                      comparisons: false\n                  }\n              }\n          })\n      ],\n      // END\n      // NEEDED BOTH IN PROD AND DEV BUILDS\n      runtimeChunk: {\n          name: 'bootstrap'\n      },\n      splitChunks: {\n          chunks: 'initial',\n          cacheGroups: {\n              vendors: {\n                  test: /[\\\\/]node_modules[\\\\/]/,\n                  name: 'vendor'\n              }\n          }\n      }\n  },\n  plugins: [\n    new ExtractCssChunks({hot:true}), //if you want HMR - we try to automatically inject hot reloading but if it's not working, add it to the config\n  ]\n};\n```\n\n## Desired Output\nHere's the sort of CSS you can expect to serve:\n\n```\n<head>\n\t<link rel='stylesheet' href='/static/main.css' />\n\t<link rel='stylesheet' href='/static/0.css' />\n\t<link rel='stylesheet' href='/static/7.css' />\n</head> \n\n<body>\n\t<div id=\"react-root\"></div>\n\t\n\t<script type='text/javascript' src='/static/vendor.js'></script>\n\t<script type='text/javascript' src='/static/0.js'></script>\n\t<script type='text/javascript' src='/static/7.js'></script>\n\t<script type='text/javascript' src='/static/main.js'></script>\n</body>\n```\n\nIf you need to resolve your stylesheets on the client side, for whatever reason. \n\n[webpack-flush-chunks](https://github.com/faceyspacey/webpack-flush-chunks) will scoop up the exact stylesheets to embed in your response. It will give you an object which can be embedded on page\n\nHere's how you do it:\n\n\n*src/components/App.js:*\n```js\nconst UniversalComponent = universal(props => import(`./${props.page}`))\n\n<UniversalComponent page='Foo' />\n```\n\n*server/render.js:*\n```js\nimport { flushChunkNames } from 'react-universal-component/server'\nimport flushChunks from 'webpack-flush-chunks'\n\nconst app = ReactDOMServer.renderToString(<App />)\nconst { js, styles, cssHash } = flushChunks(webpackStats, {\n  chunkNames: flushChunkNames()\n})\n\nres.send(`\n  <!doctype html>\n  <html>\n    <head>\n      ${styles}\n    </head>\n    <body>\n      <div id=\"root\">${app}</div>\n      <!-- not needed unless you want to access css chunks urls manually  -->\n      ${cssHash}\n      <!-- extract-css-chunks takes care of loading the css assets automatically -->\n      ${js}\n    </body>\n  </html>\n`)\n```\n\n***As for asynchronous calls to `import()` on user navigation,*** [babel-plugin-universal-import](https://github.com/faceyspacey/babel-plugin-universal-import) is required if you're using [react-universal-component](https://github.com/faceyspacey/react-universal-component). And if you aren't, you must use: [babel-plugin-dual-import](https://github.com/faceyspacey/babel-plugin-dual-import). \n\n\nThese babel plugins request both your js + your css. *Very Nice!* This is the new feature of the 2.0. Read *Sokra's* (author of webpack) article on how [on how this is the future of CSS for webpack](https://medium.com/webpack/the-new-css-workflow-step-1-79583bd107d7). Use this and be in the future today.\n\n\n## API \nYou can pass the same options as `mini-css-extract` to `new ExtractCssChunks`, such as:\n\n```javascript\nnew ExtractCssChunk({\n      filename: devMode ? '[name].css' : '[name].[hash].css',\n      chunkFilename: devMode ? '[id].css' : '[id].[hash].css',\n})\n```\n\n>Keep in mind, by default `[name].css` is used when `process.env.NODE_ENV === 'development'` and `[name].[contenthash].css` during production, so you can likely forget about having to pass anything.\n\n### HMR Pitfall\n\nThe most common workflow when working with webpack is to write a \"development\" / \"production\" value in to the\n'process.env.NODE_ENV' namespace, typically, using webpack's built-in \"DefinePlugin\" plugin. e.g:\n\n```javascript\nnew webpack.DefinePlugin( {\n     'process.env': {\n        NODE_ENV: `\"${config.devMode ? 'development' : 'production'}\"`,\n      },\n} )\n```\nThe value set by the aforementioned plugin will only be available in the runtime ( when webpack's javascript output is executed ).\nIn order for this plugin to work with hot module reloading, The npm script / gulp task / grunt task etc, should be invoked with the same environment variable as shown above.\n\nFor example, when running the build using some form of npm script:\n\n```json\n{\n  \"scripts\": {\n     \"build\": \"cross-env NODE_ENV=production babel src -d dist --ignore 'src/**/*.test.js' --copy-files\"\n  }\n}\n```\n[cross-env](https://www.npmjs.com/package/cross-env) is optional but recommended. \n\n### What about Glamorous, Styled Components, Styled-Jsx, Aphrodite, etc?\n\nIf you effectively use code-splitting, **Extract Css Chunks** can be a far better option than using emerging solutions like *Glamorous*, *Styled Components*, and slightly older tools like *Aphrodite*, *Glamor*, etc. We aren't fans of either rounds of tools because of several issues, but particularly because they all have a runtime overhead. Every time your React component is rendered with those, CSS is generated and updated within the DOM. On the server, you're going to also see unnecessary cycles for flushing the CSS along the critical render path. *Next.js's* `styled-jsx`, by the way, doesn't even work on the server--*not so good when it comes to flash of unstyled content (FOUC).*\n\nThe reason **Extract CSS Chunk** can be a better option is because **we also generate multiple sets of CSS based on what is actually \"used\",** ***but without the runtime overhead***. The difference is our definition of \"used\" is modules determined *statically* (which may not in fact be rendered) vs. what is in the \"critical render path\" (as is the case with the other tools). \n\nSo yes, our CSS may be mildly larger and include unnecessary css, but our `no_css.js` bundles will be a lot smaller as they don't need to inject any styles. See, even though those solutions have the smallest possible CSS file size, their javascript bundles, **in order to continue to render your components styled properly on the client,** must contain the necessary CSS for all possibilities! Those solutions serve both your entire bundle's CSS (in your javascript) **and** the CSS flushed from the critical render path. \n\nOn top of that, those are extra packages all with a huge number of issues in their Github repos corresponding to various limitations in the CSS they generate--something that is prevented when your definition for \"CSS-in-JS\" is simply importing CSS files compiled as normal by powerful proven CSS-specific processors.\n\nLastly, those solutions don't provide cacheable stylesheets. They do a lot of work--but they will **continue** doing it for you when you could have been done in one go long ago. Cloudflare is free--serve them through their CDN and you're winning. I love true javascript in css--don't get me wrong--but first I'd have to see they generate cacheable stylesheets. In my opinion, for now, it's best for environments that natively support it such as React Native.\n\n\n### Next:\n\nNow with that out of the way, for completeness let's compare what bytes of just the CSS are sent over the wire. The difference basically is minimal. Whereas solutions that flush from the critical render path will capture no more than the precise bits of CSS from the `if/else` branches followed, **Extract Css Chunks** is all about you effectively using code-splitting to insure, for example, you don't serve your Administration Panel's CSS in your public-facing site, etc. *In other words, it's all about avoiding serving large swaths of CSS from completely different sections of your app.* ***I.e. the biggest gains available to you.*** \n\n<details>\n<summary>\n    Read more on the topic ^^\n</summary>\n\nThis is where the real problem lies--where the real amount of unnecessary CSS comes from. If you effectively code-split your app, you may end up with 10 chunks. Now you can serve just the corresponding CSS for that chunk. If you try to go even farther and remove the css not used in the render path, you're likely achieving somewhere between 1-20% of the gains you achieved by thorough code-splitting. In other words, code splitting fulfills the 80/20 rule and attains the simple sweetspot of 80% optimization you--*as a balanced, level-headed, non-neurotic and professional developer*--are looking to achieve.\n\n*In short, by putting code splitting in appropriate places you have a lot of control over the CSS files that are created and can send a sensible* ***minimal*** *amount of associated bytes over the wire for the first request, perhaps even the smallest amount of all options.* \n\nIt's our perspective that you have achieved 80-99% of the performance gains (i.e. the creation of small relevant css files) at this ***static stage***. Offloading this work to the runtime stage is ultimately nit-picking and results in diminishing returns. When you factor that your JS bundle has to contain that JS anyway, those solutions make less and less sense from the perspective of reducing bytes delivered in the initial request. \n\nThere may be other reasons to use those tools (e.g. you don't like setting up webpack configs, or somehow you're really fond of pre-creating many `<div />` elements with their styles), but we prefer a simple standards-based way (without HoCs or specialized style components) to import styles just as you would in React Native. However to give the other tools credit, many of them likely started out with a different problem motivating them: avoiding webpack configs so you can include packages and their contained CSS without client apps being required to setup something like CSS loaders in Webpack. Having your CSS completely contained in true JS has its use cases, but at the application level--especially when you're already using something like Webpack--we fail to see its benefits. About all they share is a solution to avoiding **flashes of unstyled content** (FOUC), except one can save you a lot more bytes in what you send over the wire and save you from a continual runtime overhead where it's not needed. ***Honorable Mention:*** *StyleTron's concept of \"atomic declaration-level deduplication\" where it will make a class out of, say, `color: blue` so you don't need to send redundant styles certainly is a novel innovation, but again if the code still exists in your JS and you're building an application using Webpack (instead of a package), what's the point. In fact, it just makes editing the stylesheets in your browser developer tools more complicated. One benefit of critical render path solutions is the browser can spend less time matching the smaller number of styles to new DOM nodes as they appear, but then again it also has to spend the time injecting and parsing the new styles constantly, which is likely costlier.*\n\nAs an aside, so many apps share code between web and React Native--so the answer to the styles problem must be one that is identical for both. From that perspective importing a styles object **still** makes a lot of sense. **You're not missing out on the fundamental aspect of CSS-in-JSS:** ***isolated component-level styles and the ability to import them just like any other javascript code.*** Put them in other files, and use tools like `extract-css-chunks-webpack-plugin` and your pre-processors of choice that innately get styles right for the browser. As long as you're using **CSS Modules**, you're still at the cutting edge of CSS-in-JSS. Let's just say the other tools took one wrong turn and took it too far, when we already were at our destination. \n</details>\n\n\n#### SUMMARY OF BENEFITS COMPARED TO \"CRITICAL-RENDER-PATH\" SOLUTIONS:\n\n- no continual runtime overhead during `render` using HoCs that inject styles\n- smaller JS bundles without CSS injection\n- **You DO NOT need to clutter your component code with a specialized way of applying CSS (HoCs, styled elements)!** \n- The way you import module-based styles is exactly how you would import styles in React Native that exist in a separate file, which allows for extremely interchangeable code between React Native and regular React. Hurray! \n- pretty much already does everything covered by [@vjeux's 2014 css-in-js talk](https://speakerdeck.com/vjeux/react-css-in-js), besides dead code elimination. Dead code elimination is only solved for the other tools--as per the explanation above how the CSS is in the JS anyway--so much as Webpack and Uglify can remove **JS** that is not used. Either way, it's not a stretch to eventually add this feature to `extract-text-webpack-plugin` as well as this plugin. Hey, maybe it already has it??\n\n## Emotion!\n\n[Emotion](https://github.com/tkh44/emotion) is different. They allow for the extraction of static styles via their *extract mode*. We're very much looking forward to this being the perfect companion to the css chunks approach. \n<details>\n<summary>\n    Read more on the topic ^^\n</summary>\n\nCurrently however *extract mode* does not support IE11. So that means it's a no go, but we have hopes that in the future they'll solve that problem.\n\nThe reason Emotion doesn't work in IE11+ is because they currently try to preserve any dynamic aspects of your CSS-in-JS by converting it CSS vars, which isn't supported in IE11. That was a very smart approach, but unfortunately not good enough. \n\nThe vision we'd like to see for that package is where dynamic css stays inline, and where only static CSS is extracted into stylesheets, in which case CSS vars aren't needed. I've heard from them they have some \"hidden flags\" that allow for something close to this. When, and if, they take this feature all the way, look forward to us pushing it as our recommended approach. *Go Emotion!*\n</details>\n\n## Linaria\n\nLinaria is another modern CSS-in-JSS library. It's focused around static styles, which may make it a perfect fit for usage with this plugin. Check it out:\n\nhttps://github.com/callstack/linaria\n\n## What if I don't use SSR and use html-webpack-plugin?\n\nFor that case you can use [css-chunks-html-webpack-plugin](https://github.com/teamable-software/css-chunks-html-webpack-plugin) which will extract CSS chunks paths into your HTML file.\n\n## Conclusion:\n**We love CSS modules; no less, no more.**\n\n**Long live the dream of Code Splitting Everywhere!**\n\n\n## Contributing\nWe use [commitizen](https://github.com/commitizen/cz-cli), so run `npm run cm` to make commits. A command-line form will appear, requiring you answer a few questions to automatically produce a nicely formatted commit. Releases, semantic version numbers, tags and changelogs will automatically be generated based on these commits thanks to [semantic-release](https://github.com/semantic-release/semantic-release). Be good.\n\n## More from FaceySpacey in Reactlandia\n- [redux-first-router](https://github.com/faceyspacey/redux-first-router). It's made to work perfectly with *Universal*. Together they comprise our *\"frameworkless\"* Redux-based approach to what Next.js does (splitting, SSR, prefetching, and routing). *People are lovin it by the way* 😎\n","readmeFilename":"README.md","gitHead":"4dc6e76f82e772e6fc98c3d9c48cde25c026874b","bugs":{"url":"https://github.com/faceyspacey/extract-css-chunks-webpack-plugin/issues"},"_id":"extract-css-chunks-webpack-plugin@3.1.2-beta.3","_npmVersion":"5.6.0","_nodeVersion":"9.10.0","_npmUser":{"name":"zackljackson","email":"zackary.l.jackson@gmail.com"},"dist":{"integrity":"sha512-lxd1CeHxfJnxrAsytUrS0jl18kLNS34Yny2qWdt956trc+ltSjY2J4Czin2fEnHJFgA16Vw8HWn4taAffTs4gg==","shasum":"c08e0d622ba26e8b43a8af344a2cf2da23fdb141","tarball":"https://registry.npmjs.org/extract-css-chunks-webpack-plugin/-/extract-css-chunks-webpack-plugin-3.1.2-beta.3.tgz","fileCount":9,"unpackedSize":53547,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJblrPPCRA9TVsSAnZWagAAHwcQAIN8NTBqp/YFSfUe0aEJ\nSe4prH2gTgcw2NY4fW+/kPEq0y8QwTbQvMMZAQm+7G+QteAXTAIuSjko7lK7\nEVXbTCV1N68lLWfBnenXsA5PHzaILefFsHU0PAZ7iWKZp9xgzaDONVJ2FCXx\n/A4ikUoz3RLv6wn+vKlCzOnqNirz4w8jNNdLsTb4nAG4XYw9zsTUz2mBs66Z\ndHHE5CLfw1G4bh3R8oU1VN/Y0s81+8WYPBrrn/KLSfdS8pmmnSqNl7mVVm98\nmKBAadrIjMh0jth2tI5JRjnMrefUb40IB2a2n6M2BTOTLtnVmkqWM3CPI5Lf\nVZavGOKCc/4LSN6GntX2OGsfodDOQT3pZ6fAr7tp7UzU2DYh9zFYRF4xBcF/\nRKOIMYpv2oSk4RuC72lWo7h95HQRma1tA1BzvSJN0weH301J1qdqu8Cj9Yhn\n12TTSkUQyPxH72D33zVZjoZEwCB13giRUWZMugcar6cdH+xtw6LFHDL/eaCM\nBWexLnqHllz45WJcgmt3coY39sLW0JcO4Gbkt2V65MmWSfghVRkAwKggvKij\nAmfv8hpBW43IVAVH/9GP9n/9Jxi5SBp8aRauCF/yOifyNM/QIt5TBwTMUIqQ\nx1ZENM1Lbz0mMligZVxD/b54y0Vu20nOFFKPBljQtNURvscz4dnMky9E0wKZ\n3prx\r\n=tkDZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDGFwypUmQmQ3ziGukk08hrgybqVaTiND9McHFptJufsgIhAIDv17k49diXeOylacywtMXiZ5I/3dG/7vY08FKWgWCj"}]},"maintainers":[{"email":"james@faceyspacey.com","name":"faceyspacey"},{"email":"zackary.l.jackson@gmail.com","name":"zackljackson"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/extract-css-chunks-webpack-plugin_3.1.2-beta.3_1536603086447_0.581220232059596"},"_hasShrinkwrap":false},"3.1.2-beta.4":{"name":"extract-css-chunks-webpack-plugin","version":"3.1.2-beta.4","author":{"name":"James Gillmore","email":"james@faceyspacey.com"},"contributors":[{"name":"Zack Jackson","email":"zack@ScriptedAlchemy.com","url":"https://github.com/ScriptedAlchemy"}],"description":"Extract CSS from chunks into stylesheets + HMR. Supports Webpack 4","engines":{"node":">= 6.9.0 <7.0.0 || >= 8.9.0"},"main":"dist/cjs.js","types":"index.d.ts","keywords":["css","chunks","code splitting","mini-css","hot","hmr","universal","webpack","webpack 4"],"license":"MIT","scripts":{"start":"npm run build -- -w","build":"cross-env NODE_ENV=production babel src -d dist --ignore 'src/**/*.test.js' --copy-files","clean":"del-cli dist","lint":"eslint --cache --fix src","prebuild":"npm run clean","prepublish":"npm run build","security":"nsp check","test":"jest","test:watch":"jest --watch","test:coverage":"jest --collectCoverageFrom='src/**/*.js' --coverage","test:example":"npm run build && webpack-dev-server test/manual/src/index.js --config test/manual/webpack.config.js","ci:lint":"npm run lint && npm run security","ci:test":"npm run test -- --runInBand","ci:coverage":"npm run test:coverage -- --runInBand","build:example":"npm run build && webpack-dev-server test/manual/src/index.js --open --config test/manual/webpack.config.js","cm":"git-cz","release":"standard-version","semantic-release":"semantic-release pre && npm publish && semantic-release post","travis":"npm run ci:coverage"},"peerDependencies":{"webpack":"^4.8.3"},"dependencies":{"loader-utils":"^1.1.0","lodash":"^4.17.5","normalize-url":"^1.9.1","webpack-sources":"^1.1.0"},"devDependencies":{"@webpack-contrib/eslint-config-webpack":"^2.0.4","babel-cli":"^6.26.0","babel-eslint":"^7.2.3","babel-jest":"^22.2.2","babel-loader":"^7.1.4","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-polyfill":"^6.26.0","babel-preset-env":"^1.6.1","commitizen":"^2.10.1","conventional-github-releaser":"^2.0.2","cross-env":"^5.1.3","css-loader":"^0.28.10","cz-conventional-changelog":"^2.1.0","del":"^3.0.0","del-cli":"^1.1.0","eslint":"^3.19.0","eslint-config-airbnb":"^15.0.1","eslint-plugin-flowtype":"^2.32.1","eslint-plugin-import":"^2.8.0","eslint-plugin-jsx-a11y":"^5.0.3","eslint-plugin-prettier":"^2.6.0","eslint-plugin-react":"^7.0.1","husky":"^0.14.3","jest":"^22.2.2","memory-fs":"^0.4.1","nsp":"^3.1.0","pre-commit":"^1.2.2","prettier":"^1.11.1","standard-version":"^4.3.0","webpack":"4.8.3","webpack-cli":"^2.0.13","webpack-dev-server":"^3.1.1"},"homepage":"http://github.com/faceyspacey/extract-css-chunks-webpack-plugin","repository":{"type":"git","url":"git+https://github.com/faceyspacey/extract-css-chunks-webpack-plugin.git"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"readme":"<a href=\"https://gitter.im/Reactlandia/Lobby\" target=\"_blank\">\n  <img alt=\"Edit Redux-First Router Demo\" src=\"http://cdn.reactlandia.com/chat-badge-reactlandia.png\">\n</a>\n\n\n# extract-css-chunks-webpack-plugin\n\n<p align=\"center\">\n  <a href=\"https://www.npmjs.com/package/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://img.shields.io/npm/v/extract-css-chunks-webpack-plugin.svg\" alt=\"Version\" />\n  </a>\n\n  <a href=\"https://travis-ci.org/faceyspacey/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://travis-ci.org/faceyspacey/extract-css-chunks-webpack-plugin.svg?branch=master\" alt=\"Build Status\" />\n  </a>\n\n  <a href=\"https://www.npmjs.com/package/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://img.shields.io/npm/dt/extract-css-chunks-webpack-plugin.svg\" alt=\"Downloads\" />\n  </a>\n\n  <a href=\"https://www.npmjs.com/package/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://img.shields.io/npm/dm/extract-css-chunks-webpack-plugin.svg\" alt=\"License\" />\n  </a>\n  \n  <a href=\"https://www.npmjs.com/package/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://img.shields.io/npm/l/extract-css-chunks-webpack-plugin.svg\" alt=\"License\" />\n  </a>\n</p>\n\n<h2 align=\"center\">🍾🍾🍾It's our absolute pleasure to announce Webpack 4 Support 🚀🚀🚀</h2>\n\n> **HEADLINES (May 2018): Now Independently supports Webpack 4:** \nYep that's right. The universal family is now fully Webpack 4. Thank you to all our users for your loyalty and patience! If you love Universal, then you are gonna fall head over heels when we bring out the main course! \n\nSo... why did we rebuild `extract-css-chunks`? What does it offer? \n\nIt's got all the goodness of `mini-css-extract-plugin` but with 2 gleaming, sought after benefits. \n\nCompared to the existing loaders, we are offering a single solution as opposed to needing to depend on multiple loaders to cater for different features:\n\n## Perks\n* **HMR:** It also has first-class support for **Hot Module Replacement** across ALL those css files/chunks!!!\n* cacheable stylesheets \n* smallest total bytes sent compared to \"render-path\" css-in-js solutions that include your CSS definitions in JS\n* Faster than the V2!\n* Async loading\n* No duplicate compilation (performance)\n* Easier to use\n* Specific to CSS\n* SSR Friendly development build, focused on frontend DX\n* Works seamlessly with the Universal family\n* Works fantastically as a standalone style loader (You can use it for any webpack project! with no extra dependencies!)\n\nAdditionally, if you are already a user of the universal family -- we will be waving goodbye to the mandatory ```window.__CSS_CHUNKS__```.\n\nThe functionality is still available to you via chunk flushing, and it can come in super handy when needing to easily resolve style assets as urls that might need to be passed to a third party.\n\n## Webpack 4 Standalone Installation:\n\nIf you are just looking for something that works like `mini-css-extract-plugin` but with HMR, then look no further.\n\nNOTE: We have aligned out loader implementation to be the same as `mini-css-extract-plugin` \n\n**If you already use `mini-css-extract-plugin`, then you can just change the `require` statement - it's that easy**\n\n```\nyarn add --dev extract-css-chunks-webpack-plugin\n```\n\n*webpack.config.js:*\n```js\nconst ExtractCssChunks = require(\"extract-css-chunks-webpack-plugin\")\n\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [\n           ExtractCssChunks.loader,\n           \"css-loader\"\n         ]\n      }\n    ]\n  },\n  plugins: [\n    new ExtractCssChunks(\n        {\n          // Options similar to the same options in webpackOptions.output\n          // both options are optional\n          filename: \"[name].css\",\n          chunkFilename: \"[id].css\",\n          hot: true // optional as the plugin cannot automatically detect if you are using HOT, not for production use\n        }\n    ),\n  ]\n}\n```\n\n*webpack.server.config.js*\n\nThe server needs to be handled differently, we still want one chunk. Luckily webpack 4 supports **LimitChunkCountPlugin**\n\n```js\nnew webpack.optimize.LimitChunkCountPlugin({\n    maxChunks: 1\n})\n```\n\n\n### What about Webpack 3?\nThis is a breaking change. The entire loader has been fundamentally rewritten specifically for Webpack 4. Aiming to support our existing user base, allowing them to upgrade their infrastructure to support Webpack 4 based universally code-split server-side rendered react applications. \n\nThere have been some challenges along the way since the release of webpack 4. Ultimately the only remaining hurdle is code split, async style loading. \n\nIf you do need Webpack 3, make sure to stick with the latest `v2.x.x` release. `v3.x.x` is only intended for users with Webpack 4\n\n\n\n\n*Note: this is a companion package to:*\n- [webpack-flush-chunks](https://github.com/faceyspacey/webpack-flush-chunks) \n- [react-universal-component](https://github.com/faceyspacey/react-universal-component)\n- [babel-plugin-universal-import](https://github.com/faceyspacey/babel-plugin-universal-import) ***or*** [babel-plugin-dual-import](https://github.com/faceyspacey/babel-plugin-dual-import)\n\n\n## Recommended Installation For Universal\n```\nyarn add react-universal-component webpack-flush-chunks\nyarn add --dev extract-css-chunks-webpack-plugin babel-plugin-universal-import\n```\n\n*.babelrc:*\n```js\n{\n  \"plugins\": [\"universal-import\"]\n}\n```\nThe main thing is you need to cater to the new chunking system of webpack!\nWith **webpack.optimize.CommonsChunkPlugin** plugin no longer part of Webpack 4, we need another way to define the code-splitting. Luckily we have `optimization` configs built into webpack now\n\n> There are more aggressive ways to code split, thanks to webpack 4. Check out the RUC Readme if you are looking for a more aggressive code split optimization configuration. These are just examples, you should be able to configure them as you see fit\n\n*webpack.config.js:*\n```js\nconst ExtractCssChunks = require(\"extract-css-chunks-webpack-plugin\")\n\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [\n          ExtractCssChunks.loader,\n          {\n            loader: 'css-loader',\n            options: {\n              modules: true,\n              localIdentName: '[name]__[local]--[hash:base64:5]',\n            },\n          },\n        ],\n      },\n    ],\n  },\n  optimization: {\n      // FOR PRODUCTION\n      minimizer: [\n          new UglifyJSPlugin({\n              uglifyOptions: {\n                  output: {\n                      comments: false,\n                      ascii_only: true\n                  },\n                  compress: {\n                      comparisons: false\n                  }\n              }\n          })\n      ],\n      // END\n      // NEEDED BOTH IN PROD AND DEV BUILDS\n      runtimeChunk: {\n          name: 'bootstrap'\n      },\n      splitChunks: {\n          chunks: 'initial',\n          cacheGroups: {\n              vendors: {\n                  test: /[\\\\/]node_modules[\\\\/]/,\n                  name: 'vendor'\n              }\n          }\n      }\n  },\n  plugins: [\n    new ExtractCssChunks({hot:true}), //if you want HMR - we try to automatically inject hot reloading but if it's not working, add it to the config\n  ]\n};\n```\n\n## Desired Output\nHere's the sort of CSS you can expect to serve:\n\n```\n<head>\n\t<link rel='stylesheet' href='/static/main.css' />\n\t<link rel='stylesheet' href='/static/0.css' />\n\t<link rel='stylesheet' href='/static/7.css' />\n</head> \n\n<body>\n\t<div id=\"react-root\"></div>\n\t\n\t<script type='text/javascript' src='/static/vendor.js'></script>\n\t<script type='text/javascript' src='/static/0.js'></script>\n\t<script type='text/javascript' src='/static/7.js'></script>\n\t<script type='text/javascript' src='/static/main.js'></script>\n</body>\n```\n\nIf you need to resolve your stylesheets on the client side, for whatever reason. \n\n[webpack-flush-chunks](https://github.com/faceyspacey/webpack-flush-chunks) will scoop up the exact stylesheets to embed in your response. It will give you an object which can be embedded on page\n\nHere's how you do it:\n\n\n*src/components/App.js:*\n```js\nconst UniversalComponent = universal(props => import(`./${props.page}`))\n\n<UniversalComponent page='Foo' />\n```\n\n*server/render.js:*\n```js\nimport { flushChunkNames } from 'react-universal-component/server'\nimport flushChunks from 'webpack-flush-chunks'\n\nconst app = ReactDOMServer.renderToString(<App />)\nconst { js, styles, cssHash } = flushChunks(webpackStats, {\n  chunkNames: flushChunkNames()\n})\n\nres.send(`\n  <!doctype html>\n  <html>\n    <head>\n      ${styles}\n    </head>\n    <body>\n      <div id=\"root\">${app}</div>\n      <!-- not needed unless you want to access css chunks urls manually  -->\n      ${cssHash}\n      <!-- extract-css-chunks takes care of loading the css assets automatically -->\n      ${js}\n    </body>\n  </html>\n`)\n```\n\n***As for asynchronous calls to `import()` on user navigation,*** [babel-plugin-universal-import](https://github.com/faceyspacey/babel-plugin-universal-import) is required if you're using [react-universal-component](https://github.com/faceyspacey/react-universal-component). And if you aren't, you must use: [babel-plugin-dual-import](https://github.com/faceyspacey/babel-plugin-dual-import). \n\n\nThese babel plugins request both your js + your css. *Very Nice!* This is the new feature of the 2.0. Read *Sokra's* (author of webpack) article on how [on how this is the future of CSS for webpack](https://medium.com/webpack/the-new-css-workflow-step-1-79583bd107d7). Use this and be in the future today.\n\n\n## API \nYou can pass the same options as `mini-css-extract` to `new ExtractCssChunks`, such as:\n\n```javascript\nnew ExtractCssChunk({\n      filename: devMode ? '[name].css' : '[name].[hash].css',\n      chunkFilename: devMode ? '[id].css' : '[id].[hash].css',\n})\n```\n\n>Keep in mind, by default `[name].css` is used when `process.env.NODE_ENV === 'development'` and `[name].[contenthash].css` during production, so you can likely forget about having to pass anything.\n\n### HMR Pitfall\n\nThe most common workflow when working with webpack is to write a \"development\" / \"production\" value in to the\n'process.env.NODE_ENV' namespace, typically, using webpack's built-in \"DefinePlugin\" plugin. e.g:\n\n```javascript\nnew webpack.DefinePlugin( {\n     'process.env': {\n        NODE_ENV: `\"${config.devMode ? 'development' : 'production'}\"`,\n      },\n} )\n```\nThe value set by the aforementioned plugin will only be available in the runtime ( when webpack's javascript output is executed ).\nIn order for this plugin to work with hot module reloading, The npm script / gulp task / grunt task etc, should be invoked with the same environment variable as shown above.\n\nFor example, when running the build using some form of npm script:\n\n```json\n{\n  \"scripts\": {\n     \"build\": \"cross-env NODE_ENV=production babel src -d dist --ignore 'src/**/*.test.js' --copy-files\"\n  }\n}\n```\n[cross-env](https://www.npmjs.com/package/cross-env) is optional but recommended. \n\n### What about Glamorous, Styled Components, Styled-Jsx, Aphrodite, etc?\n\nIf you effectively use code-splitting, **Extract Css Chunks** can be a far better option than using emerging solutions like *Glamorous*, *Styled Components*, and slightly older tools like *Aphrodite*, *Glamor*, etc. We aren't fans of either rounds of tools because of several issues, but particularly because they all have a runtime overhead. Every time your React component is rendered with those, CSS is generated and updated within the DOM. On the server, you're going to also see unnecessary cycles for flushing the CSS along the critical render path. *Next.js's* `styled-jsx`, by the way, doesn't even work on the server--*not so good when it comes to flash of unstyled content (FOUC).*\n\nThe reason **Extract CSS Chunk** can be a better option is because **we also generate multiple sets of CSS based on what is actually \"used\",** ***but without the runtime overhead***. The difference is our definition of \"used\" is modules determined *statically* (which may not in fact be rendered) vs. what is in the \"critical render path\" (as is the case with the other tools). \n\nSo yes, our CSS may be mildly larger and include unnecessary css, but our `no_css.js` bundles will be a lot smaller as they don't need to inject any styles. See, even though those solutions have the smallest possible CSS file size, their javascript bundles, **in order to continue to render your components styled properly on the client,** must contain the necessary CSS for all possibilities! Those solutions serve both your entire bundle's CSS (in your javascript) **and** the CSS flushed from the critical render path. \n\nOn top of that, those are extra packages all with a huge number of issues in their Github repos corresponding to various limitations in the CSS they generate--something that is prevented when your definition for \"CSS-in-JS\" is simply importing CSS files compiled as normal by powerful proven CSS-specific processors.\n\nLastly, those solutions don't provide cacheable stylesheets. They do a lot of work--but they will **continue** doing it for you when you could have been done in one go long ago. Cloudflare is free--serve them through their CDN and you're winning. I love true javascript in css--don't get me wrong--but first I'd have to see they generate cacheable stylesheets. In my opinion, for now, it's best for environments that natively support it such as React Native.\n\n\n### Next:\n\nNow with that out of the way, for completeness let's compare what bytes of just the CSS are sent over the wire. The difference basically is minimal. Whereas solutions that flush from the critical render path will capture no more than the precise bits of CSS from the `if/else` branches followed, **Extract Css Chunks** is all about you effectively using code-splitting to insure, for example, you don't serve your Administration Panel's CSS in your public-facing site, etc. *In other words, it's all about avoiding serving large swaths of CSS from completely different sections of your app.* ***I.e. the biggest gains available to you.*** \n\n<details>\n<summary>\n    Read more on the topic ^^\n</summary>\n\nThis is where the real problem lies--where the real amount of unnecessary CSS comes from. If you effectively code-split your app, you may end up with 10 chunks. Now you can serve just the corresponding CSS for that chunk. If you try to go even farther and remove the css not used in the render path, you're likely achieving somewhere between 1-20% of the gains you achieved by thorough code-splitting. In other words, code splitting fulfills the 80/20 rule and attains the simple sweetspot of 80% optimization you--*as a balanced, level-headed, non-neurotic and professional developer*--are looking to achieve.\n\n*In short, by putting code splitting in appropriate places you have a lot of control over the CSS files that are created and can send a sensible* ***minimal*** *amount of associated bytes over the wire for the first request, perhaps even the smallest amount of all options.* \n\nIt's our perspective that you have achieved 80-99% of the performance gains (i.e. the creation of small relevant css files) at this ***static stage***. Offloading this work to the runtime stage is ultimately nit-picking and results in diminishing returns. When you factor that your JS bundle has to contain that JS anyway, those solutions make less and less sense from the perspective of reducing bytes delivered in the initial request. \n\nThere may be other reasons to use those tools (e.g. you don't like setting up webpack configs, or somehow you're really fond of pre-creating many `<div />` elements with their styles), but we prefer a simple standards-based way (without HoCs or specialized style components) to import styles just as you would in React Native. However to give the other tools credit, many of them likely started out with a different problem motivating them: avoiding webpack configs so you can include packages and their contained CSS without client apps being required to setup something like CSS loaders in Webpack. Having your CSS completely contained in true JS has its use cases, but at the application level--especially when you're already using something like Webpack--we fail to see its benefits. About all they share is a solution to avoiding **flashes of unstyled content** (FOUC), except one can save you a lot more bytes in what you send over the wire and save you from a continual runtime overhead where it's not needed. ***Honorable Mention:*** *StyleTron's concept of \"atomic declaration-level deduplication\" where it will make a class out of, say, `color: blue` so you don't need to send redundant styles certainly is a novel innovation, but again if the code still exists in your JS and you're building an application using Webpack (instead of a package), what's the point. In fact, it just makes editing the stylesheets in your browser developer tools more complicated. One benefit of critical render path solutions is the browser can spend less time matching the smaller number of styles to new DOM nodes as they appear, but then again it also has to spend the time injecting and parsing the new styles constantly, which is likely costlier.*\n\nAs an aside, so many apps share code between web and React Native--so the answer to the styles problem must be one that is identical for both. From that perspective importing a styles object **still** makes a lot of sense. **You're not missing out on the fundamental aspect of CSS-in-JSS:** ***isolated component-level styles and the ability to import them just like any other javascript code.*** Put them in other files, and use tools like `extract-css-chunks-webpack-plugin` and your pre-processors of choice that innately get styles right for the browser. As long as you're using **CSS Modules**, you're still at the cutting edge of CSS-in-JSS. Let's just say the other tools took one wrong turn and took it too far, when we already were at our destination. \n</details>\n\n\n#### SUMMARY OF BENEFITS COMPARED TO \"CRITICAL-RENDER-PATH\" SOLUTIONS:\n\n- no continual runtime overhead during `render` using HoCs that inject styles\n- smaller JS bundles without CSS injection\n- **You DO NOT need to clutter your component code with a specialized way of applying CSS (HoCs, styled elements)!** \n- The way you import module-based styles is exactly how you would import styles in React Native that exist in a separate file, which allows for extremely interchangeable code between React Native and regular React. Hurray! \n- pretty much already does everything covered by [@vjeux's 2014 css-in-js talk](https://speakerdeck.com/vjeux/react-css-in-js), besides dead code elimination. Dead code elimination is only solved for the other tools--as per the explanation above how the CSS is in the JS anyway--so much as Webpack and Uglify can remove **JS** that is not used. Either way, it's not a stretch to eventually add this feature to `extract-text-webpack-plugin` as well as this plugin. Hey, maybe it already has it??\n\n## Emotion!\n\n[Emotion](https://github.com/tkh44/emotion) is different. They allow for the extraction of static styles via their *extract mode*. We're very much looking forward to this being the perfect companion to the css chunks approach. \n<details>\n<summary>\n    Read more on the topic ^^\n</summary>\n\nCurrently however *extract mode* does not support IE11. So that means it's a no go, but we have hopes that in the future they'll solve that problem.\n\nThe reason Emotion doesn't work in IE11+ is because they currently try to preserve any dynamic aspects of your CSS-in-JS by converting it CSS vars, which isn't supported in IE11. That was a very smart approach, but unfortunately not good enough. \n\nThe vision we'd like to see for that package is where dynamic css stays inline, and where only static CSS is extracted into stylesheets, in which case CSS vars aren't needed. I've heard from them they have some \"hidden flags\" that allow for something close to this. When, and if, they take this feature all the way, look forward to us pushing it as our recommended approach. *Go Emotion!*\n</details>\n\n## Linaria\n\nLinaria is another modern CSS-in-JSS library. It's focused around static styles, which may make it a perfect fit for usage with this plugin. Check it out:\n\nhttps://github.com/callstack/linaria\n\n## What if I don't use SSR and use html-webpack-plugin?\n\nFor that case you can use [css-chunks-html-webpack-plugin](https://github.com/teamable-software/css-chunks-html-webpack-plugin) which will extract CSS chunks paths into your HTML file.\n\n## Conclusion:\n**We love CSS modules; no less, no more.**\n\n**Long live the dream of Code Splitting Everywhere!**\n\n\n## Contributing\nWe use [commitizen](https://github.com/commitizen/cz-cli), so run `npm run cm` to make commits. A command-line form will appear, requiring you answer a few questions to automatically produce a nicely formatted commit. Releases, semantic version numbers, tags and changelogs will automatically be generated based on these commits thanks to [semantic-release](https://github.com/semantic-release/semantic-release). Be good.\n\n## More from FaceySpacey in Reactlandia\n- [redux-first-router](https://github.com/faceyspacey/redux-first-router). It's made to work perfectly with *Universal*. Together they comprise our *\"frameworkless\"* Redux-based approach to what Next.js does (splitting, SSR, prefetching, and routing). *People are lovin it by the way* 😎\n","readmeFilename":"README.md","gitHead":"0bce92e7acf064bd88b8a59a708195b99ad0a6ff","bugs":{"url":"https://github.com/faceyspacey/extract-css-chunks-webpack-plugin/issues"},"_id":"extract-css-chunks-webpack-plugin@3.1.2-beta.4","_npmVersion":"5.6.0","_nodeVersion":"9.10.0","_npmUser":{"name":"zackljackson","email":"zackary.l.jackson@gmail.com"},"dist":{"integrity":"sha512-u7UFXdt9S1YcVKzxM2VoaFBazZ5n7b9GR485jmhbXfGgslsghedimgYaW0z2p02YO7KS/wXvPVH+26bkqEb3hA==","shasum":"f5d1e72068a67c5b28995cf45d16526dd36bab4b","tarball":"https://registry.npmjs.org/extract-css-chunks-webpack-plugin/-/extract-css-chunks-webpack-plugin-3.1.2-beta.4.tgz","fileCount":9,"unpackedSize":53381,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbltJJCRA9TVsSAnZWagAAb8cQAKL8d30qLhiRi52mEgF9\n3y8/Lvyh4QhQl9nXMr/vTHrRNREZredeJ7h1fT+r5wWfB5yhAVBxV4d4DF+W\n6VUk9IoAN4NL517P6k0p4kBdG4zI0wcFQht1ug3tIEozwJJKM592eIT+68nJ\nVto3+JKo8YLh5xM2+BBbv0+z5JUbLaVV/B/E7YNPBILndTSxRjqQ4vzdoE6R\nJLyvgPX5gkv/JlAHH8p8Lkqebg0SoWC3W1GM4XuRMbtG7ADDCkNeWLyJQVLV\nupYTd3gpSRKimDudzTx1VibWcGBRQanutnjH6JL268l/vCtG7HUr0VOH4iFA\nWOYAYSmVnBwrMvlIZtB6hnkcO4RtHCjO89cNltF3WNOuyJMqjNN5dFqGiNCr\niuqjAnsOsCM0MZkiF9I5ZnGyBdirvz2Fcc2T4r2THP5PP9WNvoxlPkBC8Z63\n5aaJRXiIf3+dwM988ZjiYtruO+MawbucRCNzXYG3S1LvYz2suKtdsULpiD6C\nu5N57dSpLlKwUBmVwGMDUjfstB7Ckb3xpvah+mII5CuEuTmVdLxcaEG3nmh7\n3DGIF9dgz1kHe0jBtRP51mZlDNsSIoCqyEy87h2o3oScJ1FJCUiBo1z9IF8s\n7t1k5j8jp+imdmhcNCAkzwi/zlkouZihoe7e+B0lO+/bl4dAswvO6p/lShM5\nsFjF\r\n=Jc5N\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCMz68qL3ZaxmRqhhvPCyLb8Rk41jbIMwI0WhLqJwqlAwIgDwnjVP0ZhPMJNlK0YMgEBwXW8/6hwqRqf3i277HHrAw="}]},"maintainers":[{"email":"james@faceyspacey.com","name":"faceyspacey"},{"email":"zackary.l.jackson@gmail.com","name":"zackljackson"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/extract-css-chunks-webpack-plugin_3.1.2-beta.4_1536610889018_0.7859756497384442"},"_hasShrinkwrap":false},"3.1.2-beta.5":{"name":"extract-css-chunks-webpack-plugin","version":"3.1.2-beta.5","author":{"name":"James Gillmore","email":"james@faceyspacey.com"},"contributors":[{"name":"Zack Jackson","email":"zack@ScriptedAlchemy.com","url":"https://github.com/ScriptedAlchemy"}],"description":"Extract CSS from chunks into stylesheets + HMR. Supports Webpack 4","engines":{"node":">= 6.9.0 <7.0.0 || >= 8.9.0"},"main":"dist/cjs.js","types":"index.d.ts","keywords":["css","chunks","code splitting","mini-css","hot","hmr","universal","webpack","webpack 4","css-hot-loader","extract-css-chunks-webpack-plugin"],"license":"MIT","scripts":{"start":"npm run build -- -w","build":"cross-env NODE_ENV=production babel src -d dist --ignore 'src/**/*.test.js' --copy-files","clean":"del-cli dist","lint":"eslint --cache --fix src","prebuild":"npm run clean","prepublish":"npm run build","security":"nsp check","test":"jest","test:watch":"jest --watch","test:coverage":"jest --collectCoverageFrom='src/**/*.js' --coverage","test:example":"npm run build && webpack-dev-server test/manual/src/index.js --config test/manual/webpack.config.js","ci:lint":"npm run lint && npm run security","ci:test":"npm run test -- --runInBand","ci:coverage":"npm run test:coverage -- --runInBand","build:example":"npm run build && webpack-dev-server test/manual/src/index.js --open --config test/manual/webpack.config.js","cm":"git-cz","release":"standard-version","semantic-release":"semantic-release pre && npm publish && semantic-release post","travis":"npm run ci:coverage"},"peerDependencies":{"webpack":"^4.8.3"},"dependencies":{"loader-utils":"^1.1.0","lodash":"^4.17.5","normalize-url":"^1.9.1","webpack-sources":"^1.1.0"},"devDependencies":{"@webpack-contrib/eslint-config-webpack":"^2.0.4","babel-cli":"^6.26.0","babel-eslint":"^7.2.3","babel-jest":"^22.2.2","babel-loader":"^7.1.4","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-polyfill":"^6.26.0","babel-preset-env":"^1.6.1","commitizen":"^2.10.1","conventional-github-releaser":"^2.0.2","cross-env":"^5.1.3","css-loader":"^0.28.10","cz-conventional-changelog":"^2.1.0","del":"^3.0.0","del-cli":"^1.1.0","eslint":"^3.19.0","eslint-config-airbnb":"^15.0.1","eslint-plugin-flowtype":"^2.32.1","eslint-plugin-import":"^2.8.0","eslint-plugin-jsx-a11y":"^5.0.3","eslint-plugin-prettier":"^2.6.0","eslint-plugin-react":"^7.0.1","husky":"^0.14.3","jest":"^22.2.2","memory-fs":"^0.4.1","nsp":"^3.1.0","pre-commit":"^1.2.2","prettier":"^1.11.1","standard-version":"^4.3.0","webpack":"4.8.3","webpack-cli":"^2.0.13","webpack-dev-server":"^3.1.1"},"homepage":"http://github.com/faceyspacey/extract-css-chunks-webpack-plugin","repository":{"type":"git","url":"git+https://github.com/faceyspacey/extract-css-chunks-webpack-plugin.git"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"readme":"<a href=\"https://gitter.im/Reactlandia/Lobby\" target=\"_blank\">\n  <img alt=\"Edit Redux-First Router Demo\" src=\"http://cdn.reactlandia.com/chat-badge-reactlandia.png\">\n</a>\n\n\n# extract-css-chunks-webpack-plugin\n\n<p align=\"center\">\n  <a href=\"https://www.npmjs.com/package/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://img.shields.io/npm/v/extract-css-chunks-webpack-plugin.svg\" alt=\"Version\" />\n  </a>\n\n  <a href=\"https://travis-ci.org/faceyspacey/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://travis-ci.org/faceyspacey/extract-css-chunks-webpack-plugin.svg?branch=master\" alt=\"Build Status\" />\n  </a>\n\n  <a href=\"https://www.npmjs.com/package/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://img.shields.io/npm/dt/extract-css-chunks-webpack-plugin.svg\" alt=\"Downloads\" />\n  </a>\n\n  <a href=\"https://www.npmjs.com/package/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://img.shields.io/npm/dm/extract-css-chunks-webpack-plugin.svg\" alt=\"License\" />\n  </a>\n  \n  <a href=\"https://www.npmjs.com/package/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://img.shields.io/npm/l/extract-css-chunks-webpack-plugin.svg\" alt=\"License\" />\n  </a>\n</p>\n\n<h2 align=\"center\">🍾🍾🍾It's our absolute pleasure to announce Webpack 4 Support 🚀🚀🚀</h2>\n\n> **HEADLINES (May 2018): Now Independently supports Webpack 4:** \nYep that's right. The universal family is now fully Webpack 4. Thank you to all our users for your loyalty and patience! If you love Universal, then you are gonna fall head over heels when we bring out the main course! \n\nSo... why did we rebuild `extract-css-chunks`? What does it offer? \n\nIt's got all the goodness of `mini-css-extract-plugin` but with 2 gleaming, sought after benefits. \n\nCompared to the existing loaders, we are offering a single solution as opposed to needing to depend on multiple loaders to cater for different features:\n\n## Perks\n* **HMR:** It also has first-class support for **Hot Module Replacement** across ALL those css files/chunks!!!\n* cacheable stylesheets \n* smallest total bytes sent compared to \"render-path\" css-in-js solutions that include your CSS definitions in JS\n* Faster than the V2!\n* Async loading\n* No duplicate compilation (performance)\n* Easier to use\n* Specific to CSS\n* SSR Friendly development build, focused on frontend DX\n* Works seamlessly with the Universal family\n* Works fantastically as a standalone style loader (You can use it for any webpack project! with no extra dependencies!)\n\nAdditionally, if you are already a user of the universal family -- we will be waving goodbye to the mandatory ```window.__CSS_CHUNKS__```.\n\nThe functionality is still available to you via chunk flushing, and it can come in super handy when needing to easily resolve style assets as urls that might need to be passed to a third party.\n\n## Webpack 4 Standalone Installation:\n\nIf you are just looking for something that works like `mini-css-extract-plugin` but with HMR, then look no further.\n\nNOTE: We have aligned out loader implementation to be the same as `mini-css-extract-plugin` \n\n**If you already use `mini-css-extract-plugin`, then you can just change the `require` statement - it's that easy**\n\n```\nyarn add --dev extract-css-chunks-webpack-plugin\n```\n\n*webpack.config.js:*\n```js\nconst ExtractCssChunks = require(\"extract-css-chunks-webpack-plugin\")\n\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [\n           ExtractCssChunks.loader,\n           \"css-loader\"\n         ]\n      }\n    ]\n  },\n  plugins: [\n    new ExtractCssChunks(\n        {\n          // Options similar to the same options in webpackOptions.output\n          // both options are optional\n          filename: \"[name].css\",\n          chunkFilename: \"[id].css\",\n          hot: true // optional as the plugin cannot automatically detect if you are using HOT, not for production use\n        }\n    ),\n  ]\n}\n```\n\n*webpack.server.config.js*\n\nThe server needs to be handled differently, we still want one chunk. Luckily webpack 4 supports **LimitChunkCountPlugin**\n\n```js\nnew webpack.optimize.LimitChunkCountPlugin({\n    maxChunks: 1\n})\n```\n\n\n### What about Webpack 3?\nThis is a breaking change. The entire loader has been fundamentally rewritten specifically for Webpack 4. Aiming to support our existing user base, allowing them to upgrade their infrastructure to support Webpack 4 based universally code-split server-side rendered react applications. \n\nThere have been some challenges along the way since the release of webpack 4. Ultimately the only remaining hurdle is code split, async style loading. \n\nIf you do need Webpack 3, make sure to stick with the latest `v2.x.x` release. `v3.x.x` is only intended for users with Webpack 4\n\n\n\n\n*Note: this is a companion package to:*\n- [webpack-flush-chunks](https://github.com/faceyspacey/webpack-flush-chunks) \n- [react-universal-component](https://github.com/faceyspacey/react-universal-component)\n- [babel-plugin-universal-import](https://github.com/faceyspacey/babel-plugin-universal-import) ***or*** [babel-plugin-dual-import](https://github.com/faceyspacey/babel-plugin-dual-import)\n\n\n## Recommended Installation For Universal\n```\nyarn add react-universal-component webpack-flush-chunks\nyarn add --dev extract-css-chunks-webpack-plugin babel-plugin-universal-import\n```\n\n*.babelrc:*\n```js\n{\n  \"plugins\": [\"universal-import\"]\n}\n```\nThe main thing is you need to cater to the new chunking system of webpack!\nWith **webpack.optimize.CommonsChunkPlugin** plugin no longer part of Webpack 4, we need another way to define the code-splitting. Luckily we have `optimization` configs built into webpack now\n\n> There are more aggressive ways to code split, thanks to webpack 4. Check out the RUC Readme if you are looking for a more aggressive code split optimization configuration. These are just examples, you should be able to configure them as you see fit\n\n*webpack.config.js:*\n```js\nconst ExtractCssChunks = require(\"extract-css-chunks-webpack-plugin\")\n\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [\n          ExtractCssChunks.loader,\n          {\n            loader: 'css-loader',\n            options: {\n              modules: true,\n              localIdentName: '[name]__[local]--[hash:base64:5]',\n            },\n          },\n        ],\n      },\n    ],\n  },\n  optimization: {\n      // FOR PRODUCTION\n      minimizer: [\n          new UglifyJSPlugin({\n              uglifyOptions: {\n                  output: {\n                      comments: false,\n                      ascii_only: true\n                  },\n                  compress: {\n                      comparisons: false\n                  }\n              }\n          })\n      ],\n      // END\n      // NEEDED BOTH IN PROD AND DEV BUILDS\n      runtimeChunk: {\n          name: 'bootstrap'\n      },\n      splitChunks: {\n          chunks: 'initial',\n          cacheGroups: {\n              vendors: {\n                  test: /[\\\\/]node_modules[\\\\/]/,\n                  name: 'vendor'\n              }\n          }\n      }\n  },\n  plugins: [\n    new ExtractCssChunks({hot:true}), //if you want HMR - we try to automatically inject hot reloading but if it's not working, add it to the config\n  ]\n};\n```\n\n## Desired Output\nHere's the sort of CSS you can expect to serve:\n\n```\n<head>\n\t<link rel='stylesheet' href='/static/main.css' />\n\t<link rel='stylesheet' href='/static/0.css' />\n\t<link rel='stylesheet' href='/static/7.css' />\n</head> \n\n<body>\n\t<div id=\"react-root\"></div>\n\t\n\t<script type='text/javascript' src='/static/vendor.js'></script>\n\t<script type='text/javascript' src='/static/0.js'></script>\n\t<script type='text/javascript' src='/static/7.js'></script>\n\t<script type='text/javascript' src='/static/main.js'></script>\n</body>\n```\n\nIf you need to resolve your stylesheets on the client side, for whatever reason. \n\n[webpack-flush-chunks](https://github.com/faceyspacey/webpack-flush-chunks) will scoop up the exact stylesheets to embed in your response. It will give you an object which can be embedded on page\n\nHere's how you do it:\n\n\n*src/components/App.js:*\n```js\nconst UniversalComponent = universal(props => import(`./${props.page}`))\n\n<UniversalComponent page='Foo' />\n```\n\n*server/render.js:*\n```js\nimport { flushChunkNames } from 'react-universal-component/server'\nimport flushChunks from 'webpack-flush-chunks'\n\nconst app = ReactDOMServer.renderToString(<App />)\nconst { js, styles, cssHash } = flushChunks(webpackStats, {\n  chunkNames: flushChunkNames()\n})\n\nres.send(`\n  <!doctype html>\n  <html>\n    <head>\n      ${styles}\n    </head>\n    <body>\n      <div id=\"root\">${app}</div>\n      <!-- not needed unless you want to access css chunks urls manually  -->\n      ${cssHash}\n      <!-- extract-css-chunks takes care of loading the css assets automatically -->\n      ${js}\n    </body>\n  </html>\n`)\n```\n\n***As for asynchronous calls to `import()` on user navigation,*** [babel-plugin-universal-import](https://github.com/faceyspacey/babel-plugin-universal-import) is required if you're using [react-universal-component](https://github.com/faceyspacey/react-universal-component). And if you aren't, you must use: [babel-plugin-dual-import](https://github.com/faceyspacey/babel-plugin-dual-import). \n\n\nThese babel plugins request both your js + your css. *Very Nice!* This is the new feature of the 2.0. Read *Sokra's* (author of webpack) article on how [on how this is the future of CSS for webpack](https://medium.com/webpack/the-new-css-workflow-step-1-79583bd107d7). Use this and be in the future today.\n\n\n## API \nYou can pass the same options as `mini-css-extract` to `new ExtractCssChunks`, such as:\n\n```javascript\nnew ExtractCssChunk({\n      filename: devMode ? '[name].css' : '[name].[hash].css',\n      chunkFilename: devMode ? '[id].css' : '[id].[hash].css',\n})\n```\n\n>Keep in mind, by default `[name].css` is used when `process.env.NODE_ENV === 'development'` and `[name].[contenthash].css` during production, so you can likely forget about having to pass anything.\n\n### HMR Pitfall\n\nThe most common workflow when working with webpack is to write a \"development\" / \"production\" value in to the\n'process.env.NODE_ENV' namespace, typically, using webpack's built-in \"DefinePlugin\" plugin. e.g:\n\n```javascript\nnew webpack.DefinePlugin( {\n     'process.env': {\n        NODE_ENV: `\"${config.devMode ? 'development' : 'production'}\"`,\n      },\n} )\n```\nThe value set by the aforementioned plugin will only be available in the runtime ( when webpack's javascript output is executed ).\nIn order for this plugin to work with hot module reloading, The npm script / gulp task / grunt task etc, should be invoked with the same environment variable as shown above.\n\nFor example, when running the build using some form of npm script:\n\n```json\n{\n  \"scripts\": {\n     \"build\": \"cross-env NODE_ENV=production babel src -d dist --ignore 'src/**/*.test.js' --copy-files\"\n  }\n}\n```\n[cross-env](https://www.npmjs.com/package/cross-env) is optional but recommended. \n\n### What about Glamorous, Styled Components, Styled-Jsx, Aphrodite, etc?\n\nIf you effectively use code-splitting, **Extract Css Chunks** can be a far better option than using emerging solutions like *Glamorous*, *Styled Components*, and slightly older tools like *Aphrodite*, *Glamor*, etc. We aren't fans of either rounds of tools because of several issues, but particularly because they all have a runtime overhead. Every time your React component is rendered with those, CSS is generated and updated within the DOM. On the server, you're going to also see unnecessary cycles for flushing the CSS along the critical render path. *Next.js's* `styled-jsx`, by the way, doesn't even work on the server--*not so good when it comes to flash of unstyled content (FOUC).*\n\nThe reason **Extract CSS Chunk** can be a better option is because **we also generate multiple sets of CSS based on what is actually \"used\",** ***but without the runtime overhead***. The difference is our definition of \"used\" is modules determined *statically* (which may not in fact be rendered) vs. what is in the \"critical render path\" (as is the case with the other tools). \n\nSo yes, our CSS may be mildly larger and include unnecessary css, but our `no_css.js` bundles will be a lot smaller as they don't need to inject any styles. See, even though those solutions have the smallest possible CSS file size, their javascript bundles, **in order to continue to render your components styled properly on the client,** must contain the necessary CSS for all possibilities! Those solutions serve both your entire bundle's CSS (in your javascript) **and** the CSS flushed from the critical render path. \n\nOn top of that, those are extra packages all with a huge number of issues in their Github repos corresponding to various limitations in the CSS they generate--something that is prevented when your definition for \"CSS-in-JS\" is simply importing CSS files compiled as normal by powerful proven CSS-specific processors.\n\nLastly, those solutions don't provide cacheable stylesheets. They do a lot of work--but they will **continue** doing it for you when you could have been done in one go long ago. Cloudflare is free--serve them through their CDN and you're winning. I love true javascript in css--don't get me wrong--but first I'd have to see they generate cacheable stylesheets. In my opinion, for now, it's best for environments that natively support it such as React Native.\n\n\n### Next:\n\nNow with that out of the way, for completeness let's compare what bytes of just the CSS are sent over the wire. The difference basically is minimal. Whereas solutions that flush from the critical render path will capture no more than the precise bits of CSS from the `if/else` branches followed, **Extract Css Chunks** is all about you effectively using code-splitting to insure, for example, you don't serve your Administration Panel's CSS in your public-facing site, etc. *In other words, it's all about avoiding serving large swaths of CSS from completely different sections of your app.* ***I.e. the biggest gains available to you.*** \n\n<details>\n<summary>\n    Read more on the topic ^^\n</summary>\n\nThis is where the real problem lies--where the real amount of unnecessary CSS comes from. If you effectively code-split your app, you may end up with 10 chunks. Now you can serve just the corresponding CSS for that chunk. If you try to go even farther and remove the css not used in the render path, you're likely achieving somewhere between 1-20% of the gains you achieved by thorough code-splitting. In other words, code splitting fulfills the 80/20 rule and attains the simple sweetspot of 80% optimization you--*as a balanced, level-headed, non-neurotic and professional developer*--are looking to achieve.\n\n*In short, by putting code splitting in appropriate places you have a lot of control over the CSS files that are created and can send a sensible* ***minimal*** *amount of associated bytes over the wire for the first request, perhaps even the smallest amount of all options.* \n\nIt's our perspective that you have achieved 80-99% of the performance gains (i.e. the creation of small relevant css files) at this ***static stage***. Offloading this work to the runtime stage is ultimately nit-picking and results in diminishing returns. When you factor that your JS bundle has to contain that JS anyway, those solutions make less and less sense from the perspective of reducing bytes delivered in the initial request. \n\nThere may be other reasons to use those tools (e.g. you don't like setting up webpack configs, or somehow you're really fond of pre-creating many `<div />` elements with their styles), but we prefer a simple standards-based way (without HoCs or specialized style components) to import styles just as you would in React Native. However to give the other tools credit, many of them likely started out with a different problem motivating them: avoiding webpack configs so you can include packages and their contained CSS without client apps being required to setup something like CSS loaders in Webpack. Having your CSS completely contained in true JS has its use cases, but at the application level--especially when you're already using something like Webpack--we fail to see its benefits. About all they share is a solution to avoiding **flashes of unstyled content** (FOUC), except one can save you a lot more bytes in what you send over the wire and save you from a continual runtime overhead where it's not needed. ***Honorable Mention:*** *StyleTron's concept of \"atomic declaration-level deduplication\" where it will make a class out of, say, `color: blue` so you don't need to send redundant styles certainly is a novel innovation, but again if the code still exists in your JS and you're building an application using Webpack (instead of a package), what's the point. In fact, it just makes editing the stylesheets in your browser developer tools more complicated. One benefit of critical render path solutions is the browser can spend less time matching the smaller number of styles to new DOM nodes as they appear, but then again it also has to spend the time injecting and parsing the new styles constantly, which is likely costlier.*\n\nAs an aside, so many apps share code between web and React Native--so the answer to the styles problem must be one that is identical for both. From that perspective importing a styles object **still** makes a lot of sense. **You're not missing out on the fundamental aspect of CSS-in-JSS:** ***isolated component-level styles and the ability to import them just like any other javascript code.*** Put them in other files, and use tools like `extract-css-chunks-webpack-plugin` and your pre-processors of choice that innately get styles right for the browser. As long as you're using **CSS Modules**, you're still at the cutting edge of CSS-in-JSS. Let's just say the other tools took one wrong turn and took it too far, when we already were at our destination. \n</details>\n\n\n#### SUMMARY OF BENEFITS COMPARED TO \"CRITICAL-RENDER-PATH\" SOLUTIONS:\n\n- no continual runtime overhead during `render` using HoCs that inject styles\n- smaller JS bundles without CSS injection\n- **You DO NOT need to clutter your component code with a specialized way of applying CSS (HoCs, styled elements)!** \n- The way you import module-based styles is exactly how you would import styles in React Native that exist in a separate file, which allows for extremely interchangeable code between React Native and regular React. Hurray! \n- pretty much already does everything covered by [@vjeux's 2014 css-in-js talk](https://speakerdeck.com/vjeux/react-css-in-js), besides dead code elimination. Dead code elimination is only solved for the other tools--as per the explanation above how the CSS is in the JS anyway--so much as Webpack and Uglify can remove **JS** that is not used. Either way, it's not a stretch to eventually add this feature to `extract-text-webpack-plugin` as well as this plugin. Hey, maybe it already has it??\n\n## Emotion!\n\n[Emotion](https://github.com/tkh44/emotion) is different. They allow for the extraction of static styles via their *extract mode*. We're very much looking forward to this being the perfect companion to the css chunks approach. \n<details>\n<summary>\n    Read more on the topic ^^\n</summary>\n\nCurrently however *extract mode* does not support IE11. So that means it's a no go, but we have hopes that in the future they'll solve that problem.\n\nThe reason Emotion doesn't work in IE11+ is because they currently try to preserve any dynamic aspects of your CSS-in-JS by converting it CSS vars, which isn't supported in IE11. That was a very smart approach, but unfortunately not good enough. \n\nThe vision we'd like to see for that package is where dynamic css stays inline, and where only static CSS is extracted into stylesheets, in which case CSS vars aren't needed. I've heard from them they have some \"hidden flags\" that allow for something close to this. When, and if, they take this feature all the way, look forward to us pushing it as our recommended approach. *Go Emotion!*\n</details>\n\n## Linaria\n\nLinaria is another modern CSS-in-JSS library. It's focused around static styles, which may make it a perfect fit for usage with this plugin. Check it out:\n\nhttps://github.com/callstack/linaria\n\n## What if I don't use SSR and use html-webpack-plugin?\n\nFor that case you can use [css-chunks-html-webpack-plugin](https://github.com/teamable-software/css-chunks-html-webpack-plugin) which will extract CSS chunks paths into your HTML file.\n\n## Conclusion:\n**We love CSS modules; no less, no more.**\n\n**Long live the dream of Code Splitting Everywhere!**\n\n\n## Contributing\nWe use [commitizen](https://github.com/commitizen/cz-cli), so run `npm run cm` to make commits. A command-line form will appear, requiring you answer a few questions to automatically produce a nicely formatted commit. Releases, semantic version numbers, tags and changelogs will automatically be generated based on these commits thanks to [semantic-release](https://github.com/semantic-release/semantic-release). Be good.\n\n## More from FaceySpacey in Reactlandia\n- [redux-first-router](https://github.com/faceyspacey/redux-first-router). It's made to work perfectly with *Universal*. Together they comprise our *\"frameworkless\"* Redux-based approach to what Next.js does (splitting, SSR, prefetching, and routing). *People are lovin it by the way* 😎\n","readmeFilename":"README.md","gitHead":"f4a20990e34a95b21e350eb931427fcb6bf2fb41","bugs":{"url":"https://github.com/faceyspacey/extract-css-chunks-webpack-plugin/issues"},"_id":"extract-css-chunks-webpack-plugin@3.1.2-beta.5","_npmVersion":"5.6.0","_nodeVersion":"9.10.0","_npmUser":{"name":"zackljackson","email":"zackary.l.jackson@gmail.com"},"dist":{"integrity":"sha512-1QkpC1q36Jle6bkdLCTiq/oqr3tNKveR8D6iyvr9bvghu0cM8GJoOZBxiiIJkMAC/e5aHS7AVnY9L3+x8N+KWA==","shasum":"aa6d5c62cc14054f0ac61997bf8dbdc991c8bf11","tarball":"https://registry.npmjs.org/extract-css-chunks-webpack-plugin/-/extract-css-chunks-webpack-plugin-3.1.2-beta.5.tgz","fileCount":9,"unpackedSize":53575,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbltWZCRA9TVsSAnZWagAA4okP/1NAmrmP00AJqyGpPJ0z\nLq/lTNe1ht+MRvQGPy9MJ+7g9LjhOVk/d3JPPd37VM9dIf9ZJHouaQ7cphLj\ngI6cp9b6m3y0K9zT5OE1/xyTSxo7lQnzgb6JJuZMDYa66Ozsc/IFjvfcZPaZ\nmZlG0BtwfHSW050bXzdZkgjjRoooLzi7zkFBYYy2X0OzMnq7c8UgCCL+qvak\n0u7n+pTLwaq/yXml2OSoXbCYUW+PvTJs45NoHQk70HzfMDOUDFc2Slpx5+32\nXm1Fz2uGZ9hXhhmNGh5jdJR2VdC953WDKRA4Wq+Dy8JLLwu7mj4Mk+fFzfRY\nA97txSHzFCIeb+AZmdD24q+uXkMgMg9ajtm77MzePIg9jwilqHBoaNWKMimI\n0YUkrGQpwtETMV54v/mtZ6XoZcnJROi2rew+SRw+SpsKgV4iPAdqRCqmgY2K\nNHhkWOlIDGGKqfNGvs8YUpwIhKsYplHfYSVcGk01IUipkVKsBR7lrFSI3koj\nCAkxpSxYB+P6/uTGEw/rT0dR/dM/ydMq78DCpfINOigsLrcDz76fj7WqjE1h\nb9G4aBCI62ZAv1xVIikY3jtzHzs3ypcb1tV1PDdTciAT444IF5HL+wYmY5ax\nX6WyCUKdAD62s191Mhe6neqPMS/tbWQ+mEPbL06J2BN614Y2QsYFvRyXtuRx\na5L5\r\n=x3qn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEYSJ3fSQNFbUKRVgtM/jNeUXmtTLx9eWo6eKi7Z/dOwAiEApBUcc/24P3Fh4nfR6HMmCIgV9N9dGe1y2AuQkqLAxvU="}]},"maintainers":[{"email":"james@faceyspacey.com","name":"faceyspacey"},{"email":"zackary.l.jackson@gmail.com","name":"zackljackson"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/extract-css-chunks-webpack-plugin_3.1.2-beta.5_1536611736297_0.6981234881612581"},"_hasShrinkwrap":false},"3.1.2-beta.6":{"name":"extract-css-chunks-webpack-plugin","version":"3.1.2-beta.6","author":{"name":"James Gillmore","email":"james@faceyspacey.com"},"contributors":[{"name":"Zack Jackson","email":"zack@ScriptedAlchemy.com","url":"https://github.com/ScriptedAlchemy"}],"description":"Extract CSS from chunks into stylesheets + HMR. Supports Webpack 4","engines":{"node":">= 6.9.0 <7.0.0 || >= 8.9.0"},"main":"dist/cjs.js","types":"index.d.ts","keywords":["css","chunks","code splitting","mini-css","hot","hmr","universal","webpack","webpack 4","css-hot-loader","extract-css-chunks-webpack-plugin"],"license":"MIT","scripts":{"start":"npm run build -- -w","build":"cross-env NODE_ENV=production babel src -d dist --ignore 'src/**/*.test.js' --copy-files","clean":"del-cli dist","lint":"eslint --cache --fix src","prebuild":"npm run clean","prepublish":"npm run build","security":"nsp check","test":"jest","test:watch":"jest --watch","test:coverage":"jest --collectCoverageFrom='src/**/*.js' --coverage","test:example":"npm run build && webpack-dev-server test/manual/src/index.js --config test/manual/webpack.config.js","ci:lint":"npm run lint && npm run security","ci:test":"npm run test -- --runInBand","ci:coverage":"npm run test:coverage -- --runInBand","build:example":"npm run build && webpack-dev-server test/manual/src/index.js --open --config test/manual/webpack.config.js","cm":"git-cz","release":"standard-version","semantic-release":"semantic-release pre && npm publish && semantic-release post","travis":"npm run ci:coverage"},"peerDependencies":{"webpack":"^4.8.3"},"dependencies":{"loader-utils":"^1.1.0","lodash":"^4.17.5","normalize-url":"^1.9.1","webpack-sources":"^1.1.0"},"devDependencies":{"@webpack-contrib/eslint-config-webpack":"^2.0.4","babel-cli":"^6.26.0","babel-eslint":"^7.2.3","babel-jest":"^22.2.2","babel-loader":"^7.1.4","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-polyfill":"^6.26.0","babel-preset-env":"^1.6.1","commitizen":"^2.10.1","conventional-github-releaser":"^2.0.2","cross-env":"^5.1.3","css-loader":"^0.28.10","cz-conventional-changelog":"^2.1.0","del":"^3.0.0","del-cli":"^1.1.0","eslint":"^3.19.0","eslint-config-airbnb":"^15.0.1","eslint-plugin-flowtype":"^2.32.1","eslint-plugin-import":"^2.8.0","eslint-plugin-jsx-a11y":"^5.0.3","eslint-plugin-prettier":"^2.6.0","eslint-plugin-react":"^7.0.1","husky":"^0.14.3","jest":"^22.2.2","memory-fs":"^0.4.1","nsp":"^3.1.0","pre-commit":"^1.2.2","prettier":"^1.11.1","standard-version":"^4.3.0","webpack":"4.8.3","webpack-cli":"^2.0.13","webpack-dev-server":"^3.1.1"},"homepage":"http://github.com/faceyspacey/extract-css-chunks-webpack-plugin","repository":{"type":"git","url":"git+https://github.com/faceyspacey/extract-css-chunks-webpack-plugin.git"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"readme":"<a href=\"https://gitter.im/Reactlandia/Lobby\" target=\"_blank\">\n  <img alt=\"Edit Redux-First Router Demo\" src=\"http://cdn.reactlandia.com/chat-badge-reactlandia.png\">\n</a>\n\n\n# extract-css-chunks-webpack-plugin\n\n<p align=\"center\">\n  <a href=\"https://www.npmjs.com/package/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://img.shields.io/npm/v/extract-css-chunks-webpack-plugin.svg\" alt=\"Version\" />\n  </a>\n\n  <a href=\"https://travis-ci.org/faceyspacey/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://travis-ci.org/faceyspacey/extract-css-chunks-webpack-plugin.svg?branch=master\" alt=\"Build Status\" />\n  </a>\n\n  <a href=\"https://www.npmjs.com/package/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://img.shields.io/npm/dt/extract-css-chunks-webpack-plugin.svg\" alt=\"Downloads\" />\n  </a>\n\n  <a href=\"https://www.npmjs.com/package/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://img.shields.io/npm/dm/extract-css-chunks-webpack-plugin.svg\" alt=\"License\" />\n  </a>\n  \n  <a href=\"https://www.npmjs.com/package/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://img.shields.io/npm/l/extract-css-chunks-webpack-plugin.svg\" alt=\"License\" />\n  </a>\n</p>\n\n<h2 align=\"center\">🍾🍾🍾It's our absolute pleasure to announce Webpack 4 Support 🚀🚀🚀</h2>\n\n> **HEADLINES (May 2018): Now Independently supports Webpack 4:** \nYep that's right. The universal family is now fully Webpack 4. Thank you to all our users for your loyalty and patience! If you love Universal, then you are gonna fall head over heels when we bring out the main course! \n\nSo... why did we rebuild `extract-css-chunks`? What does it offer? \n\nIt's got all the goodness of `mini-css-extract-plugin` but with 2 gleaming, sought after benefits. \n\nCompared to the existing loaders, we are offering a single solution as opposed to needing to depend on multiple loaders to cater for different features:\n\n## Perks\n* **HMR:** It also has first-class support for **Hot Module Replacement** across ALL those css files/chunks!!!\n* cacheable stylesheets \n* smallest total bytes sent compared to \"render-path\" css-in-js solutions that include your CSS definitions in JS\n* Faster than the V2!\n* Async loading\n* No duplicate compilation (performance)\n* Easier to use\n* Specific to CSS\n* SSR Friendly development build, focused on frontend DX\n* Works seamlessly with the Universal family\n* Works fantastically as a standalone style loader (You can use it for any webpack project! with no extra dependencies!)\n\nAdditionally, if you are already a user of the universal family -- we will be waving goodbye to the mandatory ```window.__CSS_CHUNKS__```.\n\nThe functionality is still available to you via chunk flushing, and it can come in super handy when needing to easily resolve style assets as urls that might need to be passed to a third party.\n\n## Webpack 4 Standalone Installation:\n\nIf you are just looking for something that works like `mini-css-extract-plugin` but with HMR, then look no further.\n\nNOTE: We have aligned out loader implementation to be the same as `mini-css-extract-plugin` \n\n**If you already use `mini-css-extract-plugin`, then you can just change the `require` statement - it's that easy**\n\n```\nyarn add --dev extract-css-chunks-webpack-plugin\n```\n\n*webpack.config.js:*\n```js\nconst ExtractCssChunks = require(\"extract-css-chunks-webpack-plugin\")\n\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [\n           ExtractCssChunks.loader,\n           \"css-loader\"\n         ]\n      }\n    ]\n  },\n  plugins: [\n    new ExtractCssChunks(\n        {\n          // Options similar to the same options in webpackOptions.output\n          // both options are optional\n          filename: \"[name].css\",\n          chunkFilename: \"[id].css\",\n          hot: true // optional as the plugin cannot automatically detect if you are using HOT, not for production use\n        }\n    ),\n  ]\n}\n```\n\n*webpack.server.config.js*\n\nThe server needs to be handled differently, we still want one chunk. Luckily webpack 4 supports **LimitChunkCountPlugin**\n\n```js\nnew webpack.optimize.LimitChunkCountPlugin({\n    maxChunks: 1\n})\n```\n\n\n### What about Webpack 3?\nThis is a breaking change. The entire loader has been fundamentally rewritten specifically for Webpack 4. Aiming to support our existing user base, allowing them to upgrade their infrastructure to support Webpack 4 based universally code-split server-side rendered react applications. \n\nThere have been some challenges along the way since the release of webpack 4. Ultimately the only remaining hurdle is code split, async style loading. \n\nIf you do need Webpack 3, make sure to stick with the latest `v2.x.x` release. `v3.x.x` is only intended for users with Webpack 4\n\n\n\n\n*Note: this is a companion package to:*\n- [webpack-flush-chunks](https://github.com/faceyspacey/webpack-flush-chunks) \n- [react-universal-component](https://github.com/faceyspacey/react-universal-component)\n- [babel-plugin-universal-import](https://github.com/faceyspacey/babel-plugin-universal-import) ***or*** [babel-plugin-dual-import](https://github.com/faceyspacey/babel-plugin-dual-import)\n\n\n## Recommended Installation For Universal\n```\nyarn add react-universal-component webpack-flush-chunks\nyarn add --dev extract-css-chunks-webpack-plugin babel-plugin-universal-import\n```\n\n*.babelrc:*\n```js\n{\n  \"plugins\": [\"universal-import\"]\n}\n```\nThe main thing is you need to cater to the new chunking system of webpack!\nWith **webpack.optimize.CommonsChunkPlugin** plugin no longer part of Webpack 4, we need another way to define the code-splitting. Luckily we have `optimization` configs built into webpack now\n\n> There are more aggressive ways to code split, thanks to webpack 4. Check out the RUC Readme if you are looking for a more aggressive code split optimization configuration. These are just examples, you should be able to configure them as you see fit\n\n*webpack.config.js:*\n```js\nconst ExtractCssChunks = require(\"extract-css-chunks-webpack-plugin\")\n\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [\n          ExtractCssChunks.loader,\n          {\n            loader: 'css-loader',\n            options: {\n              modules: true,\n              localIdentName: '[name]__[local]--[hash:base64:5]',\n            },\n          },\n        ],\n      },\n    ],\n  },\n  optimization: {\n      // FOR PRODUCTION\n      minimizer: [\n          new UglifyJSPlugin({\n              uglifyOptions: {\n                  output: {\n                      comments: false,\n                      ascii_only: true\n                  },\n                  compress: {\n                      comparisons: false\n                  }\n              }\n          })\n      ],\n      // END\n      // NEEDED BOTH IN PROD AND DEV BUILDS\n      runtimeChunk: {\n          name: 'bootstrap'\n      },\n      splitChunks: {\n          chunks: 'initial',\n          cacheGroups: {\n              vendors: {\n                  test: /[\\\\/]node_modules[\\\\/]/,\n                  name: 'vendor'\n              }\n          }\n      }\n  },\n  plugins: [\n    new ExtractCssChunks({hot:true}), //if you want HMR - we try to automatically inject hot reloading but if it's not working, add it to the config\n  ]\n};\n```\n\n## Desired Output\nHere's the sort of CSS you can expect to serve:\n\n```\n<head>\n\t<link rel='stylesheet' href='/static/main.css' />\n\t<link rel='stylesheet' href='/static/0.css' />\n\t<link rel='stylesheet' href='/static/7.css' />\n</head> \n\n<body>\n\t<div id=\"react-root\"></div>\n\t\n\t<script type='text/javascript' src='/static/vendor.js'></script>\n\t<script type='text/javascript' src='/static/0.js'></script>\n\t<script type='text/javascript' src='/static/7.js'></script>\n\t<script type='text/javascript' src='/static/main.js'></script>\n</body>\n```\n\nIf you need to resolve your stylesheets on the client side, for whatever reason. \n\n[webpack-flush-chunks](https://github.com/faceyspacey/webpack-flush-chunks) will scoop up the exact stylesheets to embed in your response. It will give you an object which can be embedded on page\n\nHere's how you do it:\n\n\n*src/components/App.js:*\n```js\nconst UniversalComponent = universal(props => import(`./${props.page}`))\n\n<UniversalComponent page='Foo' />\n```\n\n*server/render.js:*\n```js\nimport { flushChunkNames } from 'react-universal-component/server'\nimport flushChunks from 'webpack-flush-chunks'\n\nconst app = ReactDOMServer.renderToString(<App />)\nconst { js, styles, cssHash } = flushChunks(webpackStats, {\n  chunkNames: flushChunkNames()\n})\n\nres.send(`\n  <!doctype html>\n  <html>\n    <head>\n      ${styles}\n    </head>\n    <body>\n      <div id=\"root\">${app}</div>\n      <!-- not needed unless you want to access css chunks urls manually  -->\n      ${cssHash}\n      <!-- extract-css-chunks takes care of loading the css assets automatically -->\n      ${js}\n    </body>\n  </html>\n`)\n```\n\n***As for asynchronous calls to `import()` on user navigation,*** [babel-plugin-universal-import](https://github.com/faceyspacey/babel-plugin-universal-import) is required if you're using [react-universal-component](https://github.com/faceyspacey/react-universal-component). And if you aren't, you must use: [babel-plugin-dual-import](https://github.com/faceyspacey/babel-plugin-dual-import). \n\n\nThese babel plugins request both your js + your css. *Very Nice!* This is the new feature of the 2.0. Read *Sokra's* (author of webpack) article on how [on how this is the future of CSS for webpack](https://medium.com/webpack/the-new-css-workflow-step-1-79583bd107d7). Use this and be in the future today.\n\n\n## API \nYou can pass the same options as `mini-css-extract` to `new ExtractCssChunks`, such as:\n\n```javascript\nnew ExtractCssChunk({\n      filename: devMode ? '[name].css' : '[name].[hash].css',\n      chunkFilename: devMode ? '[id].css' : '[id].[hash].css',\n})\n```\n\n>Keep in mind, by default `[name].css` is used when `process.env.NODE_ENV === 'development'` and `[name].[contenthash].css` during production, so you can likely forget about having to pass anything.\n\n### HMR Pitfall\n\nThe most common workflow when working with webpack is to write a \"development\" / \"production\" value in to the\n'process.env.NODE_ENV' namespace, typically, using webpack's built-in \"DefinePlugin\" plugin. e.g:\n\n```javascript\nnew webpack.DefinePlugin( {\n     'process.env': {\n        NODE_ENV: `\"${config.devMode ? 'development' : 'production'}\"`,\n      },\n} )\n```\nThe value set by the aforementioned plugin will only be available in the runtime ( when webpack's javascript output is executed ).\nIn order for this plugin to work with hot module reloading, The npm script / gulp task / grunt task etc, should be invoked with the same environment variable as shown above.\n\nFor example, when running the build using some form of npm script:\n\n```json\n{\n  \"scripts\": {\n     \"build\": \"cross-env NODE_ENV=production babel src -d dist --ignore 'src/**/*.test.js' --copy-files\"\n  }\n}\n```\n[cross-env](https://www.npmjs.com/package/cross-env) is optional but recommended. \n\n### What about Glamorous, Styled Components, Styled-Jsx, Aphrodite, etc?\n\nIf you effectively use code-splitting, **Extract Css Chunks** can be a far better option than using emerging solutions like *Glamorous*, *Styled Components*, and slightly older tools like *Aphrodite*, *Glamor*, etc. We aren't fans of either rounds of tools because of several issues, but particularly because they all have a runtime overhead. Every time your React component is rendered with those, CSS is generated and updated within the DOM. On the server, you're going to also see unnecessary cycles for flushing the CSS along the critical render path. *Next.js's* `styled-jsx`, by the way, doesn't even work on the server--*not so good when it comes to flash of unstyled content (FOUC).*\n\nThe reason **Extract CSS Chunk** can be a better option is because **we also generate multiple sets of CSS based on what is actually \"used\",** ***but without the runtime overhead***. The difference is our definition of \"used\" is modules determined *statically* (which may not in fact be rendered) vs. what is in the \"critical render path\" (as is the case with the other tools). \n\nSo yes, our CSS may be mildly larger and include unnecessary css, but our `no_css.js` bundles will be a lot smaller as they don't need to inject any styles. See, even though those solutions have the smallest possible CSS file size, their javascript bundles, **in order to continue to render your components styled properly on the client,** must contain the necessary CSS for all possibilities! Those solutions serve both your entire bundle's CSS (in your javascript) **and** the CSS flushed from the critical render path. \n\nOn top of that, those are extra packages all with a huge number of issues in their Github repos corresponding to various limitations in the CSS they generate--something that is prevented when your definition for \"CSS-in-JS\" is simply importing CSS files compiled as normal by powerful proven CSS-specific processors.\n\nLastly, those solutions don't provide cacheable stylesheets. They do a lot of work--but they will **continue** doing it for you when you could have been done in one go long ago. Cloudflare is free--serve them through their CDN and you're winning. I love true javascript in css--don't get me wrong--but first I'd have to see they generate cacheable stylesheets. In my opinion, for now, it's best for environments that natively support it such as React Native.\n\n\n### Next:\n\nNow with that out of the way, for completeness let's compare what bytes of just the CSS are sent over the wire. The difference basically is minimal. Whereas solutions that flush from the critical render path will capture no more than the precise bits of CSS from the `if/else` branches followed, **Extract Css Chunks** is all about you effectively using code-splitting to insure, for example, you don't serve your Administration Panel's CSS in your public-facing site, etc. *In other words, it's all about avoiding serving large swaths of CSS from completely different sections of your app.* ***I.e. the biggest gains available to you.*** \n\n<details>\n<summary>\n    Read more on the topic ^^\n</summary>\n\nThis is where the real problem lies--where the real amount of unnecessary CSS comes from. If you effectively code-split your app, you may end up with 10 chunks. Now you can serve just the corresponding CSS for that chunk. If you try to go even farther and remove the css not used in the render path, you're likely achieving somewhere between 1-20% of the gains you achieved by thorough code-splitting. In other words, code splitting fulfills the 80/20 rule and attains the simple sweetspot of 80% optimization you--*as a balanced, level-headed, non-neurotic and professional developer*--are looking to achieve.\n\n*In short, by putting code splitting in appropriate places you have a lot of control over the CSS files that are created and can send a sensible* ***minimal*** *amount of associated bytes over the wire for the first request, perhaps even the smallest amount of all options.* \n\nIt's our perspective that you have achieved 80-99% of the performance gains (i.e. the creation of small relevant css files) at this ***static stage***. Offloading this work to the runtime stage is ultimately nit-picking and results in diminishing returns. When you factor that your JS bundle has to contain that JS anyway, those solutions make less and less sense from the perspective of reducing bytes delivered in the initial request. \n\nThere may be other reasons to use those tools (e.g. you don't like setting up webpack configs, or somehow you're really fond of pre-creating many `<div />` elements with their styles), but we prefer a simple standards-based way (without HoCs or specialized style components) to import styles just as you would in React Native. However to give the other tools credit, many of them likely started out with a different problem motivating them: avoiding webpack configs so you can include packages and their contained CSS without client apps being required to setup something like CSS loaders in Webpack. Having your CSS completely contained in true JS has its use cases, but at the application level--especially when you're already using something like Webpack--we fail to see its benefits. About all they share is a solution to avoiding **flashes of unstyled content** (FOUC), except one can save you a lot more bytes in what you send over the wire and save you from a continual runtime overhead where it's not needed. ***Honorable Mention:*** *StyleTron's concept of \"atomic declaration-level deduplication\" where it will make a class out of, say, `color: blue` so you don't need to send redundant styles certainly is a novel innovation, but again if the code still exists in your JS and you're building an application using Webpack (instead of a package), what's the point. In fact, it just makes editing the stylesheets in your browser developer tools more complicated. One benefit of critical render path solutions is the browser can spend less time matching the smaller number of styles to new DOM nodes as they appear, but then again it also has to spend the time injecting and parsing the new styles constantly, which is likely costlier.*\n\nAs an aside, so many apps share code between web and React Native--so the answer to the styles problem must be one that is identical for both. From that perspective importing a styles object **still** makes a lot of sense. **You're not missing out on the fundamental aspect of CSS-in-JSS:** ***isolated component-level styles and the ability to import them just like any other javascript code.*** Put them in other files, and use tools like `extract-css-chunks-webpack-plugin` and your pre-processors of choice that innately get styles right for the browser. As long as you're using **CSS Modules**, you're still at the cutting edge of CSS-in-JSS. Let's just say the other tools took one wrong turn and took it too far, when we already were at our destination. \n</details>\n\n\n#### SUMMARY OF BENEFITS COMPARED TO \"CRITICAL-RENDER-PATH\" SOLUTIONS:\n\n- no continual runtime overhead during `render` using HoCs that inject styles\n- smaller JS bundles without CSS injection\n- **You DO NOT need to clutter your component code with a specialized way of applying CSS (HoCs, styled elements)!** \n- The way you import module-based styles is exactly how you would import styles in React Native that exist in a separate file, which allows for extremely interchangeable code between React Native and regular React. Hurray! \n- pretty much already does everything covered by [@vjeux's 2014 css-in-js talk](https://speakerdeck.com/vjeux/react-css-in-js), besides dead code elimination. Dead code elimination is only solved for the other tools--as per the explanation above how the CSS is in the JS anyway--so much as Webpack and Uglify can remove **JS** that is not used. Either way, it's not a stretch to eventually add this feature to `extract-text-webpack-plugin` as well as this plugin. Hey, maybe it already has it??\n\n## Emotion!\n\n[Emotion](https://github.com/tkh44/emotion) is different. They allow for the extraction of static styles via their *extract mode*. We're very much looking forward to this being the perfect companion to the css chunks approach. \n<details>\n<summary>\n    Read more on the topic ^^\n</summary>\n\nCurrently however *extract mode* does not support IE11. So that means it's a no go, but we have hopes that in the future they'll solve that problem.\n\nThe reason Emotion doesn't work in IE11+ is because they currently try to preserve any dynamic aspects of your CSS-in-JS by converting it CSS vars, which isn't supported in IE11. That was a very smart approach, but unfortunately not good enough. \n\nThe vision we'd like to see for that package is where dynamic css stays inline, and where only static CSS is extracted into stylesheets, in which case CSS vars aren't needed. I've heard from them they have some \"hidden flags\" that allow for something close to this. When, and if, they take this feature all the way, look forward to us pushing it as our recommended approach. *Go Emotion!*\n</details>\n\n## Linaria\n\nLinaria is another modern CSS-in-JSS library. It's focused around static styles, which may make it a perfect fit for usage with this plugin. Check it out:\n\nhttps://github.com/callstack/linaria\n\n## What if I don't use SSR and use html-webpack-plugin?\n\nFor that case you can use [css-chunks-html-webpack-plugin](https://github.com/teamable-software/css-chunks-html-webpack-plugin) which will extract CSS chunks paths into your HTML file.\n\n## Conclusion:\n**We love CSS modules; no less, no more.**\n\n**Long live the dream of Code Splitting Everywhere!**\n\n\n## Contributing\nWe use [commitizen](https://github.com/commitizen/cz-cli), so run `npm run cm` to make commits. A command-line form will appear, requiring you answer a few questions to automatically produce a nicely formatted commit. Releases, semantic version numbers, tags and changelogs will automatically be generated based on these commits thanks to [semantic-release](https://github.com/semantic-release/semantic-release). Be good.\n\n## More from FaceySpacey in Reactlandia\n- [redux-first-router](https://github.com/faceyspacey/redux-first-router). It's made to work perfectly with *Universal*. Together they comprise our *\"frameworkless\"* Redux-based approach to what Next.js does (splitting, SSR, prefetching, and routing). *People are lovin it by the way* 😎\n","readmeFilename":"README.md","gitHead":"dc2d33f6aa8f52fc26b4e8b3990f2cb103437ae1","bugs":{"url":"https://github.com/faceyspacey/extract-css-chunks-webpack-plugin/issues"},"_id":"extract-css-chunks-webpack-plugin@3.1.2-beta.6","_npmVersion":"5.6.0","_nodeVersion":"9.10.0","_npmUser":{"name":"zackljackson","email":"zackary.l.jackson@gmail.com"},"dist":{"integrity":"sha512-dXE/uOiZDSo+zCo3Xi4kfFFMLPOD25DbqvW9SuNGfh0PYGJ/JxeU/TP2ciLHrkqV/aSE5lcNc5dpK/26835yNw==","shasum":"e01ac37a7b1ed875d94cc1248a968156f13be8cb","tarball":"https://registry.npmjs.org/extract-css-chunks-webpack-plugin/-/extract-css-chunks-webpack-plugin-3.1.2-beta.6.tgz","fileCount":9,"unpackedSize":53580,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbnFSACRA9TVsSAnZWagAAIz0P/210mKbHg3CVPJRG9j2f\nvD0CmjvEGYRdgdbLdIXWYT1MNwuOCio4HGEh64qkkxeDx1plQBCaluIQ/gOx\nmMyhJFV3wlH4bVvSzVBqNboOCLyAL84y83lPLqs++N83ndOyfj853hufmlBA\n/Tzijluv5lJmYs4fcOjGni6GmhdbhHf0nWXdhthvWhhXrQO2h7ObCBMNrW97\nWSqmN5gH6PbzV7J9+rinrYXsBtaqgmPFnsQResDWpiikA2FwVpo0cYMuS7LC\neIh/sX4tb3W/KhPwer1K7XXYXco+uR2kDCr8KXhiioBbOM8MBN1WelBLYZZE\njQOfZUKRMrgIhiLuPR1TnQGfmyIKyiB4fCaS7CqOgy6cHJKXKC4vpRK6EfbK\n8ONL4YkfyTuulQOIEHFqSM5QORnvA6Zx+mK04ogF8ysMOVbZmA9GWiNkEx1+\nztB7hVr8gZFfICG32fpw1sr8otYCAfMbq8OHohSWcW2kZxnC+9+UqfQGW3d2\nSQdS6FYB8DwQdqTipkRr8FY0EFU70mL5IIdC3Okcsqo/1xPSy2m1wyPMrys5\n8+6SfhkoBZNbjo48gDhz2aslanJRI3w7ftS9LWEb6Bme8tkD4cOPjNg+VIPT\n29RT9AIGN1TglR6zfgM6PRXMqBHbZNbORg4x+YVl/3s84Bm2JU1GR8ziVsfF\naUi3\r\n=rKhK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB4BgxCVPStZlCP/mA6nlepXnbF5DMp/v6IelOw9GClDAiEAnwqpZ0E933puXQJu2187dX++VH3DGnXQg9lJThwdgbQ="}]},"maintainers":[{"email":"james@faceyspacey.com","name":"faceyspacey"},{"email":"zackary.l.jackson@gmail.com","name":"zackljackson"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/extract-css-chunks-webpack-plugin_3.1.2-beta.6_1536971903752_0.40006503181433595"},"_hasShrinkwrap":false},"3.1.2-beta.7":{"name":"extract-css-chunks-webpack-plugin","version":"3.1.2-beta.7","author":{"name":"James Gillmore","email":"james@faceyspacey.com"},"contributors":[{"name":"Zack Jackson","email":"zack@ScriptedAlchemy.com","url":"https://github.com/ScriptedAlchemy"}],"description":"Extract CSS from chunks into stylesheets + HMR. Supports Webpack 4","engines":{"node":">= 6.9.0 <7.0.0 || >= 8.9.0"},"main":"dist/cjs.js","types":"index.d.ts","keywords":["css","chunks","code splitting","mini-css","hot","hmr","universal","webpack","webpack 4","css-hot-loader","extract-css-chunks-webpack-plugin"],"license":"MIT","scripts":{"start":"npm run build -- -w","build":"cross-env NODE_ENV=production babel src -d dist --ignore 'src/**/*.test.js' --copy-files","clean":"del-cli dist","lint":"eslint --cache --fix src","prebuild":"npm run clean","prepublish":"npm run build","security":"nsp check","test":"jest","test:watch":"jest --watch","test:coverage":"jest --collectCoverageFrom='src/**/*.js' --coverage","test:example":"npm run build && webpack-dev-server test/manual/src/index.js --config test/manual/webpack.config.js","ci:lint":"npm run lint && npm run security","ci:test":"npm run test -- --runInBand","ci:coverage":"npm run test:coverage -- --runInBand","build:example":"npm run build && webpack-dev-server test/manual/src/index.js --open --config test/manual/webpack.config.js","cm":"git-cz","release":"standard-version","semantic-release":"semantic-release pre && npm publish && semantic-release post","travis":"npm run ci:coverage"},"peerDependencies":{"webpack":"^4.8.3"},"dependencies":{"loader-utils":"^1.1.0","lodash":"^4.17.5","normalize-url":"^1.9.1","webpack-sources":"^1.1.0"},"devDependencies":{"@webpack-contrib/eslint-config-webpack":"^2.0.4","babel-cli":"^6.26.0","babel-eslint":"^7.2.3","babel-jest":"^22.2.2","babel-loader":"^7.1.4","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-polyfill":"^6.26.0","babel-preset-env":"^1.6.1","commitizen":"^2.10.1","conventional-github-releaser":"^2.0.2","cross-env":"^5.1.3","css-loader":"^0.28.10","cz-conventional-changelog":"^2.1.0","del":"^3.0.0","del-cli":"^1.1.0","eslint":"^3.19.0","eslint-config-airbnb":"^15.0.1","eslint-plugin-flowtype":"^2.32.1","eslint-plugin-import":"^2.8.0","eslint-plugin-jsx-a11y":"^5.0.3","eslint-plugin-prettier":"^2.6.0","eslint-plugin-react":"^7.0.1","husky":"^0.14.3","jest":"^22.2.2","memory-fs":"^0.4.1","nsp":"^3.1.0","pre-commit":"^1.2.2","prettier":"^1.11.1","standard-version":"^4.3.0","webpack":"4.8.3","webpack-cli":"^2.0.13","webpack-dev-server":"^3.1.1"},"homepage":"http://github.com/faceyspacey/extract-css-chunks-webpack-plugin","repository":{"type":"git","url":"git+https://github.com/faceyspacey/extract-css-chunks-webpack-plugin.git"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"readme":"<a href=\"https://gitter.im/Reactlandia/Lobby\" target=\"_blank\">\n  <img alt=\"Edit Redux-First Router Demo\" src=\"http://cdn.reactlandia.com/chat-badge-reactlandia.png\">\n</a>\n\n\n# extract-css-chunks-webpack-plugin\n\n<p align=\"center\">\n  <a href=\"https://www.npmjs.com/package/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://img.shields.io/npm/v/extract-css-chunks-webpack-plugin.svg\" alt=\"Version\" />\n  </a>\n\n  <a href=\"https://travis-ci.org/faceyspacey/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://travis-ci.org/faceyspacey/extract-css-chunks-webpack-plugin.svg?branch=master\" alt=\"Build Status\" />\n  </a>\n\n  <a href=\"https://www.npmjs.com/package/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://img.shields.io/npm/dt/extract-css-chunks-webpack-plugin.svg\" alt=\"Downloads\" />\n  </a>\n\n  <a href=\"https://www.npmjs.com/package/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://img.shields.io/npm/dm/extract-css-chunks-webpack-plugin.svg\" alt=\"License\" />\n  </a>\n  \n  <a href=\"https://www.npmjs.com/package/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://img.shields.io/npm/l/extract-css-chunks-webpack-plugin.svg\" alt=\"License\" />\n  </a>\n</p>\n\n<h2 align=\"center\">🍾🍾🍾It's our absolute pleasure to announce Webpack 4 Support 🚀🚀🚀</h2>\n\n> **HEADLINES (May 2018): Now Independently supports Webpack 4:** \nYep that's right. The universal family is now fully Webpack 4. Thank you to all our users for your loyalty and patience! If you love Universal, then you are gonna fall head over heels when we bring out the main course! \n\nSo... why did we rebuild `extract-css-chunks`? What does it offer? \n\nIt's got all the goodness of `mini-css-extract-plugin` but with 2 gleaming, sought after benefits. \n\nCompared to the existing loaders, we are offering a single solution as opposed to needing to depend on multiple loaders to cater for different features:\n\n## Perks\n* **HMR:** It also has first-class support for **Hot Module Replacement** across ALL those css files/chunks!!!\n* cacheable stylesheets \n* smallest total bytes sent compared to \"render-path\" css-in-js solutions that include your CSS definitions in JS\n* Faster than the V2!\n* Async loading\n* No duplicate compilation (performance)\n* Easier to use\n* Specific to CSS\n* SSR Friendly development build, focused on frontend DX\n* Works seamlessly with the Universal family\n* Works fantastically as a standalone style loader (You can use it for any webpack project! with no extra dependencies!)\n\nAdditionally, if you are already a user of the universal family -- we will be waving goodbye to the mandatory ```window.__CSS_CHUNKS__```.\n\nThe functionality is still available to you via chunk flushing, and it can come in super handy when needing to easily resolve style assets as urls that might need to be passed to a third party.\n\n## Webpack 4 Standalone Installation:\n\nIf you are just looking for something that works like `mini-css-extract-plugin` but with HMR, then look no further.\n\nNOTE: We have aligned out loader implementation to be the same as `mini-css-extract-plugin` \n\n**If you already use `mini-css-extract-plugin`, then you can just change the `require` statement - it's that easy**\n\n```\nyarn add --dev extract-css-chunks-webpack-plugin\n```\n\n*webpack.config.js:*\n```js\nconst ExtractCssChunks = require(\"extract-css-chunks-webpack-plugin\")\n\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [\n           ExtractCssChunks.loader,\n           \"css-loader\"\n         ]\n      }\n    ]\n  },\n  plugins: [\n    new ExtractCssChunks(\n        {\n          // Options similar to the same options in webpackOptions.output\n          // both options are optional\n          filename: \"[name].css\",\n          chunkFilename: \"[id].css\",\n          hot: true // optional as the plugin cannot automatically detect if you are using HOT, not for production use\n        }\n    ),\n  ]\n}\n```\n\n*webpack.server.config.js*\n\nThe server needs to be handled differently, we still want one chunk. Luckily webpack 4 supports **LimitChunkCountPlugin**\n\n```js\nnew webpack.optimize.LimitChunkCountPlugin({\n    maxChunks: 1\n})\n```\n\n\n### What about Webpack 3?\nThis is a breaking change. The entire loader has been fundamentally rewritten specifically for Webpack 4. Aiming to support our existing user base, allowing them to upgrade their infrastructure to support Webpack 4 based universally code-split server-side rendered react applications. \n\nThere have been some challenges along the way since the release of webpack 4. Ultimately the only remaining hurdle is code split, async style loading. \n\nIf you do need Webpack 3, make sure to stick with the latest `v2.x.x` release. `v3.x.x` is only intended for users with Webpack 4\n\n\n\n\n*Note: this is a companion package to:*\n- [webpack-flush-chunks](https://github.com/faceyspacey/webpack-flush-chunks) \n- [react-universal-component](https://github.com/faceyspacey/react-universal-component)\n- [babel-plugin-universal-import](https://github.com/faceyspacey/babel-plugin-universal-import) ***or*** [babel-plugin-dual-import](https://github.com/faceyspacey/babel-plugin-dual-import)\n\n\n## Recommended Installation For Universal\n```\nyarn add react-universal-component webpack-flush-chunks\nyarn add --dev extract-css-chunks-webpack-plugin babel-plugin-universal-import\n```\n\n*.babelrc:*\n```js\n{\n  \"plugins\": [\"universal-import\"]\n}\n```\nThe main thing is you need to cater to the new chunking system of webpack!\nWith **webpack.optimize.CommonsChunkPlugin** plugin no longer part of Webpack 4, we need another way to define the code-splitting. Luckily we have `optimization` configs built into webpack now\n\n> There are more aggressive ways to code split, thanks to webpack 4. Check out the RUC Readme if you are looking for a more aggressive code split optimization configuration. These are just examples, you should be able to configure them as you see fit\n\n*webpack.config.js:*\n```js\nconst ExtractCssChunks = require(\"extract-css-chunks-webpack-plugin\")\n\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [\n          ExtractCssChunks.loader,\n          {\n            loader: 'css-loader',\n            options: {\n              modules: true,\n              localIdentName: '[name]__[local]--[hash:base64:5]',\n            },\n          },\n        ],\n      },\n    ],\n  },\n  optimization: {\n      // FOR PRODUCTION\n      minimizer: [\n          new UglifyJSPlugin({\n              uglifyOptions: {\n                  output: {\n                      comments: false,\n                      ascii_only: true\n                  },\n                  compress: {\n                      comparisons: false\n                  }\n              }\n          })\n      ],\n      // END\n      // NEEDED BOTH IN PROD AND DEV BUILDS\n      runtimeChunk: {\n          name: 'bootstrap'\n      },\n      splitChunks: {\n          chunks: 'initial',\n          cacheGroups: {\n              vendors: {\n                  test: /[\\\\/]node_modules[\\\\/]/,\n                  name: 'vendor'\n              }\n          }\n      }\n  },\n  plugins: [\n    new ExtractCssChunks({hot:true}), //if you want HMR - we try to automatically inject hot reloading but if it's not working, add it to the config\n  ]\n};\n```\n\n## Desired Output\nHere's the sort of CSS you can expect to serve:\n\n```\n<head>\n\t<link rel='stylesheet' href='/static/main.css' />\n\t<link rel='stylesheet' href='/static/0.css' />\n\t<link rel='stylesheet' href='/static/7.css' />\n</head> \n\n<body>\n\t<div id=\"react-root\"></div>\n\t\n\t<script type='text/javascript' src='/static/vendor.js'></script>\n\t<script type='text/javascript' src='/static/0.js'></script>\n\t<script type='text/javascript' src='/static/7.js'></script>\n\t<script type='text/javascript' src='/static/main.js'></script>\n</body>\n```\n\nIf you need to resolve your stylesheets on the client side, for whatever reason. \n\n[webpack-flush-chunks](https://github.com/faceyspacey/webpack-flush-chunks) will scoop up the exact stylesheets to embed in your response. It will give you an object which can be embedded on page\n\nHere's how you do it:\n\n\n*src/components/App.js:*\n```js\nconst UniversalComponent = universal(props => import(`./${props.page}`))\n\n<UniversalComponent page='Foo' />\n```\n\n*server/render.js:*\n```js\nimport { flushChunkNames } from 'react-universal-component/server'\nimport flushChunks from 'webpack-flush-chunks'\n\nconst app = ReactDOMServer.renderToString(<App />)\nconst { js, styles, cssHash } = flushChunks(webpackStats, {\n  chunkNames: flushChunkNames()\n})\n\nres.send(`\n  <!doctype html>\n  <html>\n    <head>\n      ${styles}\n    </head>\n    <body>\n      <div id=\"root\">${app}</div>\n      <!-- not needed unless you want to access css chunks urls manually  -->\n      ${cssHash}\n      <!-- extract-css-chunks takes care of loading the css assets automatically -->\n      ${js}\n    </body>\n  </html>\n`)\n```\n\n***As for asynchronous calls to `import()` on user navigation,*** [babel-plugin-universal-import](https://github.com/faceyspacey/babel-plugin-universal-import) is required if you're using [react-universal-component](https://github.com/faceyspacey/react-universal-component). And if you aren't, you must use: [babel-plugin-dual-import](https://github.com/faceyspacey/babel-plugin-dual-import). \n\n\nThese babel plugins request both your js + your css. *Very Nice!* This is the new feature of the 2.0. Read *Sokra's* (author of webpack) article on how [on how this is the future of CSS for webpack](https://medium.com/webpack/the-new-css-workflow-step-1-79583bd107d7). Use this and be in the future today.\n\n\n## API \nYou can pass the same options as `mini-css-extract` to `new ExtractCssChunks`, such as:\n\n```javascript\nnew ExtractCssChunk({\n      filename: devMode ? '[name].css' : '[name].[hash].css',\n      chunkFilename: devMode ? '[id].css' : '[id].[hash].css',\n})\n```\n\n>Keep in mind, by default `[name].css` is used when `process.env.NODE_ENV === 'development'` and `[name].[contenthash].css` during production, so you can likely forget about having to pass anything.\n\n### HMR Pitfall\n\nThe most common workflow when working with webpack is to write a \"development\" / \"production\" value in to the\n'process.env.NODE_ENV' namespace, typically, using webpack's built-in \"DefinePlugin\" plugin. e.g:\n\n```javascript\nnew webpack.DefinePlugin( {\n     'process.env': {\n        NODE_ENV: `\"${config.devMode ? 'development' : 'production'}\"`,\n      },\n} )\n```\nThe value set by the aforementioned plugin will only be available in the runtime ( when webpack's javascript output is executed ).\nIn order for this plugin to work with hot module reloading, The npm script / gulp task / grunt task etc, should be invoked with the same environment variable as shown above.\n\nFor example, when running the build using some form of npm script:\n\n```json\n{\n  \"scripts\": {\n     \"build\": \"cross-env NODE_ENV=production babel src -d dist --ignore 'src/**/*.test.js' --copy-files\"\n  }\n}\n```\n[cross-env](https://www.npmjs.com/package/cross-env) is optional but recommended. \n\n### What about Glamorous, Styled Components, Styled-Jsx, Aphrodite, etc?\n\nIf you effectively use code-splitting, **Extract Css Chunks** can be a far better option than using emerging solutions like *Glamorous*, *Styled Components*, and slightly older tools like *Aphrodite*, *Glamor*, etc. We aren't fans of either rounds of tools because of several issues, but particularly because they all have a runtime overhead. Every time your React component is rendered with those, CSS is generated and updated within the DOM. On the server, you're going to also see unnecessary cycles for flushing the CSS along the critical render path. *Next.js's* `styled-jsx`, by the way, doesn't even work on the server--*not so good when it comes to flash of unstyled content (FOUC).*\n\nThe reason **Extract CSS Chunk** can be a better option is because **we also generate multiple sets of CSS based on what is actually \"used\",** ***but without the runtime overhead***. The difference is our definition of \"used\" is modules determined *statically* (which may not in fact be rendered) vs. what is in the \"critical render path\" (as is the case with the other tools). \n\nSo yes, our CSS may be mildly larger and include unnecessary css, but our `no_css.js` bundles will be a lot smaller as they don't need to inject any styles. See, even though those solutions have the smallest possible CSS file size, their javascript bundles, **in order to continue to render your components styled properly on the client,** must contain the necessary CSS for all possibilities! Those solutions serve both your entire bundle's CSS (in your javascript) **and** the CSS flushed from the critical render path. \n\nOn top of that, those are extra packages all with a huge number of issues in their Github repos corresponding to various limitations in the CSS they generate--something that is prevented when your definition for \"CSS-in-JS\" is simply importing CSS files compiled as normal by powerful proven CSS-specific processors.\n\nLastly, those solutions don't provide cacheable stylesheets. They do a lot of work--but they will **continue** doing it for you when you could have been done in one go long ago. Cloudflare is free--serve them through their CDN and you're winning. I love true javascript in css--don't get me wrong--but first I'd have to see they generate cacheable stylesheets. In my opinion, for now, it's best for environments that natively support it such as React Native.\n\n\n### Next:\n\nNow with that out of the way, for completeness let's compare what bytes of just the CSS are sent over the wire. The difference basically is minimal. Whereas solutions that flush from the critical render path will capture no more than the precise bits of CSS from the `if/else` branches followed, **Extract Css Chunks** is all about you effectively using code-splitting to insure, for example, you don't serve your Administration Panel's CSS in your public-facing site, etc. *In other words, it's all about avoiding serving large swaths of CSS from completely different sections of your app.* ***I.e. the biggest gains available to you.*** \n\n<details>\n<summary>\n    Read more on the topic ^^\n</summary>\n\nThis is where the real problem lies--where the real amount of unnecessary CSS comes from. If you effectively code-split your app, you may end up with 10 chunks. Now you can serve just the corresponding CSS for that chunk. If you try to go even farther and remove the css not used in the render path, you're likely achieving somewhere between 1-20% of the gains you achieved by thorough code-splitting. In other words, code splitting fulfills the 80/20 rule and attains the simple sweetspot of 80% optimization you--*as a balanced, level-headed, non-neurotic and professional developer*--are looking to achieve.\n\n*In short, by putting code splitting in appropriate places you have a lot of control over the CSS files that are created and can send a sensible* ***minimal*** *amount of associated bytes over the wire for the first request, perhaps even the smallest amount of all options.* \n\nIt's our perspective that you have achieved 80-99% of the performance gains (i.e. the creation of small relevant css files) at this ***static stage***. Offloading this work to the runtime stage is ultimately nit-picking and results in diminishing returns. When you factor that your JS bundle has to contain that JS anyway, those solutions make less and less sense from the perspective of reducing bytes delivered in the initial request. \n\nThere may be other reasons to use those tools (e.g. you don't like setting up webpack configs, or somehow you're really fond of pre-creating many `<div />` elements with their styles), but we prefer a simple standards-based way (without HoCs or specialized style components) to import styles just as you would in React Native. However to give the other tools credit, many of them likely started out with a different problem motivating them: avoiding webpack configs so you can include packages and their contained CSS without client apps being required to setup something like CSS loaders in Webpack. Having your CSS completely contained in true JS has its use cases, but at the application level--especially when you're already using something like Webpack--we fail to see its benefits. About all they share is a solution to avoiding **flashes of unstyled content** (FOUC), except one can save you a lot more bytes in what you send over the wire and save you from a continual runtime overhead where it's not needed. ***Honorable Mention:*** *StyleTron's concept of \"atomic declaration-level deduplication\" where it will make a class out of, say, `color: blue` so you don't need to send redundant styles certainly is a novel innovation, but again if the code still exists in your JS and you're building an application using Webpack (instead of a package), what's the point. In fact, it just makes editing the stylesheets in your browser developer tools more complicated. One benefit of critical render path solutions is the browser can spend less time matching the smaller number of styles to new DOM nodes as they appear, but then again it also has to spend the time injecting and parsing the new styles constantly, which is likely costlier.*\n\nAs an aside, so many apps share code between web and React Native--so the answer to the styles problem must be one that is identical for both. From that perspective importing a styles object **still** makes a lot of sense. **You're not missing out on the fundamental aspect of CSS-in-JSS:** ***isolated component-level styles and the ability to import them just like any other javascript code.*** Put them in other files, and use tools like `extract-css-chunks-webpack-plugin` and your pre-processors of choice that innately get styles right for the browser. As long as you're using **CSS Modules**, you're still at the cutting edge of CSS-in-JSS. Let's just say the other tools took one wrong turn and took it too far, when we already were at our destination. \n</details>\n\n\n#### SUMMARY OF BENEFITS COMPARED TO \"CRITICAL-RENDER-PATH\" SOLUTIONS:\n\n- no continual runtime overhead during `render` using HoCs that inject styles\n- smaller JS bundles without CSS injection\n- **You DO NOT need to clutter your component code with a specialized way of applying CSS (HoCs, styled elements)!** \n- The way you import module-based styles is exactly how you would import styles in React Native that exist in a separate file, which allows for extremely interchangeable code between React Native and regular React. Hurray! \n- pretty much already does everything covered by [@vjeux's 2014 css-in-js talk](https://speakerdeck.com/vjeux/react-css-in-js), besides dead code elimination. Dead code elimination is only solved for the other tools--as per the explanation above how the CSS is in the JS anyway--so much as Webpack and Uglify can remove **JS** that is not used. Either way, it's not a stretch to eventually add this feature to `extract-text-webpack-plugin` as well as this plugin. Hey, maybe it already has it??\n\n## Emotion!\n\n[Emotion](https://github.com/tkh44/emotion) is different. They allow for the extraction of static styles via their *extract mode*. We're very much looking forward to this being the perfect companion to the css chunks approach. \n<details>\n<summary>\n    Read more on the topic ^^\n</summary>\n\nCurrently however *extract mode* does not support IE11. So that means it's a no go, but we have hopes that in the future they'll solve that problem.\n\nThe reason Emotion doesn't work in IE11+ is because they currently try to preserve any dynamic aspects of your CSS-in-JS by converting it CSS vars, which isn't supported in IE11. That was a very smart approach, but unfortunately not good enough. \n\nThe vision we'd like to see for that package is where dynamic css stays inline, and where only static CSS is extracted into stylesheets, in which case CSS vars aren't needed. I've heard from them they have some \"hidden flags\" that allow for something close to this. When, and if, they take this feature all the way, look forward to us pushing it as our recommended approach. *Go Emotion!*\n</details>\n\n## Linaria\n\nLinaria is another modern CSS-in-JSS library. It's focused around static styles, which may make it a perfect fit for usage with this plugin. Check it out:\n\nhttps://github.com/callstack/linaria\n\n## What if I don't use SSR and use html-webpack-plugin?\n\nFor that case you can use [css-chunks-html-webpack-plugin](https://github.com/teamable-software/css-chunks-html-webpack-plugin) which will extract CSS chunks paths into your HTML file.\n\n## Conclusion:\n**We love CSS modules; no less, no more.**\n\n**Long live the dream of Code Splitting Everywhere!**\n\n\n## Contributing\nWe use [commitizen](https://github.com/commitizen/cz-cli), so run `npm run cm` to make commits. A command-line form will appear, requiring you answer a few questions to automatically produce a nicely formatted commit. Releases, semantic version numbers, tags and changelogs will automatically be generated based on these commits thanks to [semantic-release](https://github.com/semantic-release/semantic-release). Be good.\n\n## More from FaceySpacey in Reactlandia\n- [redux-first-router](https://github.com/faceyspacey/redux-first-router). It's made to work perfectly with *Universal*. Together they comprise our *\"frameworkless\"* Redux-based approach to what Next.js does (splitting, SSR, prefetching, and routing). *People are lovin it by the way* 😎\n","readmeFilename":"README.md","gitHead":"01c4782bf55e9802d7ab26d10fc73d2b3af55f6c","bugs":{"url":"https://github.com/faceyspacey/extract-css-chunks-webpack-plugin/issues"},"_id":"extract-css-chunks-webpack-plugin@3.1.2-beta.7","_npmVersion":"5.6.0","_nodeVersion":"9.10.0","_npmUser":{"name":"zackljackson","email":"zackary.l.jackson@gmail.com"},"dist":{"integrity":"sha512-j+RgWpc6bM7jp+MN96XR6sP5GwanoPOvhoWS3LMzgbDy5vFxa7/TZSyBznXLmI5d/GAhNrme00O0WtOOpkfHow==","shasum":"7d24edeb401df50593f862973dec668e17d76a4c","tarball":"https://registry.npmjs.org/extract-css-chunks-webpack-plugin/-/extract-css-chunks-webpack-plugin-3.1.2-beta.7.tgz","fileCount":9,"unpackedSize":53689,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbsjzcCRA9TVsSAnZWagAAizcP/jUbe7/lBDdPIsJpjg+C\n3bdSpBBh3Hicd15E/KCCE9nLB+sLKloU+q//mHCcZMBS6hD/VdutWpOV1MT6\nF9OffMg7vSK/9hbdblv/A/gNZtF2tbaEdSH7wy0Q6MOCO/j2y1gd9v6S/yp3\nE9OalNX81KaPlxB6Xpg/mrciOxkQ79/bQK7cAa/K6ecZ5KAdXDlP3v/hWwbf\njk9dNYy9ZKGkqjUPkodJak70itZ7zbm4t2AAH6vMCoX6kXRFLkt6USD/+sv3\nNcPu+K5sxJEZBlRjbu3sLpQm66RPsIHqJvy7wvd2iX5tQaNaE7LZoulP7FH6\n80mP+jU7LxAYL3+jQt+0sZpLXHHjl73nnHTDZrjBtRdn59OuJDFE9MMiGDfu\nUWt7brpdy6DBYtoM0woL1XkhrJtGcET5zHrqQlNg5+U5YcBfsMw6EZrFU79v\nF6cQhuN4JvewrtVCwfdPjmbXaF6nZ06ddosvAeKIE9x5jrnPnTfIHf/9krAY\nr7w51WG5boAZWKJXBNa3GxlvJTthGHqMcAiukvaFpzMa+sBiczpi+QSszcRn\n7XNg+Bk4SIq7SBvoaT5dPvI3F31hnWdLY/7vSF6XaM0AMNDUL59KixuBzT3z\ngcNX5blvrlWEwecHlCsbSipC09WSUmtrIZ+zTsEAWSHNja0VRto5EClMcabT\nxW5A\r\n=LajZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDt5o7EtOqKY+24+WM1PMRPmk0vNwhSCu3cn2fiE8jnXQIhAPewNEAtUESkH6E0mknWFcfJONSKEZEj0LtCuoCJMGJB"}]},"maintainers":[{"email":"james@faceyspacey.com","name":"faceyspacey"},{"email":"zackary.l.jackson@gmail.com","name":"zackljackson"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/extract-css-chunks-webpack-plugin_3.1.2-beta.7_1538407643751_0.7427869539869518"},"_hasShrinkwrap":false},"3.1.2":{"name":"extract-css-chunks-webpack-plugin","version":"3.1.2","author":{"name":"James Gillmore","email":"james@faceyspacey.com"},"contributors":[{"name":"Zack Jackson","email":"zack@ScriptedAlchemy.com","url":"https://github.com/ScriptedAlchemy"}],"description":"Extract CSS from chunks into stylesheets + HMR. Supports Webpack 4 + SSR","engines":{"node":">= 6.9.0 <7.0.0 || >= 8.9.0"},"main":"dist/cjs.js","types":"index.d.ts","keywords":["css","chunks","code splitting","mini-css","hot","hmr","universal","webpack","webpack 4","css-hot-loader","extract-css-chunks-webpack-plugin"],"license":"MIT","scripts":{"start":"npm run build -- -w","build":"cross-env NODE_ENV=production babel src -d dist --ignore 'src/**/*.test.js' --copy-files","clean":"del-cli dist","lint":"eslint --cache --fix src","prebuild":"npm run clean","prepublish":"npm run build","security":"nsp check","test":"jest","test:watch":"jest --watch","test:coverage":"jest --collectCoverageFrom='src/**/*.js' --coverage","test:example":"npm run build && webpack-dev-server test/manual/src/index.js --config test/manual/webpack.config.js","ci:lint":"npm run lint && npm run security","ci:test":"npm run test -- --runInBand","ci:coverage":"npm run test:coverage -- --runInBand","build:example":"npm run build && webpack-dev-server test/manual/src/index.js --open --config test/manual/webpack.config.js","cm":"git-cz","release":"standard-version","semantic-release":"semantic-release pre && npm publish && semantic-release post","travis":"npm run ci:coverage"},"peerDependencies":{"webpack":"^4.8.3"},"dependencies":{"loader-utils":"^1.1.0","lodash":"^4.17.5","normalize-url":"^1.9.1","webpack-sources":"^1.1.0"},"devDependencies":{"@webpack-contrib/eslint-config-webpack":"^2.0.4","babel-cli":"^6.26.0","babel-eslint":"^7.2.3","babel-jest":"^22.2.2","babel-loader":"^7.1.4","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-polyfill":"^6.26.0","babel-preset-env":"^1.6.1","commitizen":"^2.10.1","conventional-github-releaser":"^2.0.2","cross-env":"^5.1.3","css-loader":"^0.28.10","cz-conventional-changelog":"^2.1.0","del":"^3.0.0","del-cli":"^1.1.0","eslint":"^3.19.0","eslint-config-airbnb":"^15.0.1","eslint-plugin-flowtype":"^2.32.1","eslint-plugin-import":"^2.8.0","eslint-plugin-jsx-a11y":"^5.0.3","eslint-plugin-prettier":"^2.6.0","eslint-plugin-react":"^7.0.1","husky":"^0.14.3","jest":"^22.2.2","memory-fs":"^0.4.1","nsp":"^3.1.0","pre-commit":"^1.2.2","prettier":"^1.11.1","standard-version":"^4.3.0","webpack":"4.8.3","webpack-cli":"^2.0.13","webpack-dev-server":"^3.1.1"},"homepage":"http://github.com/faceyspacey/extract-css-chunks-webpack-plugin","repository":{"type":"git","url":"git+https://github.com/faceyspacey/extract-css-chunks-webpack-plugin.git"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"gitHead":"6caeeca7886f9c6a1d0b59b587b27e7a6ddc696a","bugs":{"url":"https://github.com/faceyspacey/extract-css-chunks-webpack-plugin/issues"},"_id":"extract-css-chunks-webpack-plugin@3.1.2","_npmVersion":"5.6.0","_nodeVersion":"9.10.0","_npmUser":{"name":"zackljackson","email":"zackary.l.jackson@gmail.com"},"dist":{"integrity":"sha512-gPN1Ro+yYkv/nwURq4Pfa31FNbs8tB7vWPq/7ylF+Vq541D1yp9y2ajyQyN/u2rCCdQExNTDhwFL2JgSpfdE3Q==","shasum":"4a4ba1fbdda8ce8cfe5b4336331149ad2f5517c8","tarball":"https://registry.npmjs.org/extract-css-chunks-webpack-plugin/-/extract-css-chunks-webpack-plugin-3.1.2.tgz","fileCount":9,"unpackedSize":53688,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbsv4QCRA9TVsSAnZWagAAMi0P/iyiOOyV9BgCcaW49eTw\ntWsZlEVczz5amhsvRSHOkcFPIFy+OCDdAUjF+/JNuicNU/L9eqmVERJPDbOz\nCh59QE5tU3P3JV4tkN+G/8MRBfeDvGiu9N3ICtBX1c71+beuUgJczQku6t5l\ndxCdBKw3QVhJVDtK7oxkp5zBo6HkBpt+APyn/bHdqzpqXo3etk42zM/GVM4c\nBf1K9rYV7LzZ0kv0uqCZVm+DWYeTCcVOd6G3R15IW+fBr6xKfV09NAKUQuQT\nVGsX2dBkzNYWWZsL/zMSkwS0ozxZrRO3mEHK+ORBWl4fqexe6oqhizPBCnDy\nblw2cTxP3TeRNAbEelzpd9OWBil6mELbDH4XCfH7A6aaE9/EPr1zwjiir/ch\nksfFEU6XFQMviAFCJmomKvFEv+IZwxekbVPsgS1jZVvx/vV6mAMXL1Y5mq05\ndBU+J4uCgHLSHtbjq8i7F9WHSk+f1wysQWn2dwkZGxHv5HJVG8m0bS6Oxt6H\nGx4bZZ9DcgZbn8tR7dAVFRCHLLcImbNzUXlvSREJaHFU3uOhEpPowJb9edfC\ng2AKnSPJzqj1ou5Unw6R/FiISpZHB1iJr6DL4IPydoXNIqYlUbAnwXmplfjG\ncRrCHInJXNpsULBmlY1Cpie/8D7KBNoLbbw9MvMwy6EGqkY4v7NlTbeYsZ+W\nXBGg\r\n=OwfY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDbrx26/Ap94NT+3t9aGjjAtIbEnEPGacbidd6VQmoSYAIgEtYnqDI3WjEgSIGrzGcMuD4mVAPsgbpk18nH1nQGueA="}]},"maintainers":[{"email":"james@faceyspacey.com","name":"faceyspacey"},{"email":"zackary.l.jackson@gmail.com","name":"zackljackson"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/extract-css-chunks-webpack-plugin_3.1.2_1538457103160_0.0035863525472628055"},"_hasShrinkwrap":false},"3.1.3":{"name":"extract-css-chunks-webpack-plugin","version":"3.1.3","author":{"name":"James Gillmore","email":"james@faceyspacey.com"},"contributors":[{"name":"Zack Jackson","email":"zack@ScriptedAlchemy.com","url":"https://github.com/ScriptedAlchemy"}],"description":"Extract CSS from chunks into stylesheets + HMR. Supports Webpack 4 + SSR","engines":{"node":">= 6.9.0 <7.0.0 || >= 8.9.0"},"main":"dist/cjs.js","types":"index.d.ts","keywords":["css","chunks","code splitting","mini-css","hot","hmr","universal","webpack","webpack 4","css-hot-loader","extract-css-chunks-webpack-plugin"],"license":"MIT","scripts":{"start":"npm run build -- -w","build":"cross-env NODE_ENV=production babel src -d dist --ignore 'src/**/*.test.js' --copy-files","clean":"del-cli dist","lint":"eslint --cache --fix src","prebuild":"npm run clean","prepublish":"npm run build","security":"nsp check","test":"jest","test:watch":"jest --watch","test:coverage":"jest --collectCoverageFrom='src/**/*.js' --coverage","test:example":"npm run build && webpack-dev-server test/manual/src/index.js --config test/manual/webpack.config.js","ci:lint":"npm run lint && npm run security","ci:test":"npm run test -- --runInBand","ci:coverage":"npm run test:coverage -- --runInBand","build:example":"npm run build && webpack-dev-server test/manual/src/index.js --open --config test/manual/webpack.config.js","cm":"git-cz","release":"standard-version","semantic-release":"semantic-release pre && npm publish && semantic-release post","travis":"npm run ci:coverage"},"peerDependencies":{"webpack":"^4.8.3"},"dependencies":{"loader-utils":"^1.1.0","lodash":"^4.17.5","normalize-url":"^1.9.1","webpack-sources":"^1.1.0"},"devDependencies":{"@webpack-contrib/eslint-config-webpack":"^2.0.4","babel-cli":"^6.26.0","babel-eslint":"^7.2.3","babel-jest":"^22.2.2","babel-loader":"^7.1.4","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-polyfill":"^6.26.0","babel-preset-env":"^1.6.1","commitizen":"^2.10.1","conventional-github-releaser":"^2.0.2","cross-env":"^5.1.3","css-loader":"^0.28.10","cz-conventional-changelog":"^2.1.0","del":"^3.0.0","del-cli":"^1.1.0","eslint":"^3.19.0","eslint-config-airbnb":"^15.0.1","eslint-plugin-flowtype":"^2.32.1","eslint-plugin-import":"^2.8.0","eslint-plugin-jsx-a11y":"^5.0.3","eslint-plugin-prettier":"^2.6.0","eslint-plugin-react":"^7.0.1","husky":"^0.14.3","jest":"^22.2.2","memory-fs":"^0.4.1","nsp":"^3.1.0","pre-commit":"^1.2.2","prettier":"^1.11.1","standard-version":"^4.3.0","webpack":"4.8.3","webpack-cli":"^2.0.13","webpack-dev-server":"^3.1.1"},"homepage":"http://github.com/faceyspacey/extract-css-chunks-webpack-plugin","repository":{"type":"git","url":"git+https://github.com/faceyspacey/extract-css-chunks-webpack-plugin.git"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"gitHead":"b01c99a15231493b4915204ddb6985bee0dd2f2f","bugs":{"url":"https://github.com/faceyspacey/extract-css-chunks-webpack-plugin/issues"},"_id":"extract-css-chunks-webpack-plugin@3.1.3","_npmVersion":"5.6.0","_nodeVersion":"9.10.0","_npmUser":{"name":"zackljackson","email":"zackary.l.jackson@gmail.com"},"dist":{"integrity":"sha512-6iuYXvAF7azEbbYhO85EmoqhywIE8LzwAALEYdd+u/RuOJFRAN1KqQcNNpvZn9HqjDHAut5EDefKFiaWXwqm3w==","shasum":"6686af8046ba71136b29a242a0c240e63b23661e","tarball":"https://registry.npmjs.org/extract-css-chunks-webpack-plugin/-/extract-css-chunks-webpack-plugin-3.1.3.tgz","fileCount":9,"unpackedSize":53866,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbswl5CRA9TVsSAnZWagAATp4P/2HsEfNySVW98p+BWg8j\n6EF+zwpqor5G2+1noxrCY5amwhln93JpCERQ4WCxuop2Y3QjPSOV1Kqryqz3\n7qBk5CMW/ECcmy4h0jP/Dbv6jB4+Dc57R57En2zTvJrQvsc4axGgvaREc8/U\nTxw+3BUeRBm3fa0U5dgh7As94dozvbkkTZTsTgRGJlZCKnN0wch99tLf1edM\nQHiL9tSFerVmoYcbFRf9vO88Yw2YnrMU4qMjXqrzkMyz3Q30uzBQS+N0obm3\nVFjbIOeU7v8n1IGWoJ1jZf+Ija8L9MovyS36KWSndHR/cBbpSr93yNN1ZL7g\nWisdl+j7dVnu5a2d2IO+NtaJ6T32KzGF2AuxE9Rfrqn5Fij1o6lH4kjPXlAB\nFDY7uNduA1dAZw8P/N7ALsHBvj3eGCRADZnkFPyp32z+oCPFjeLEj89anD2a\nyvh2x7D60qkfRdQAW1IOipXvMY6VS0XYPIfej4iVEeDAVY18wPBzzTId09W9\newYtReDFM0Co5Ke7dKyWJ17vlfkDhr3d0b9Co4fmiSnaiFna7k4+mZxmZ0qt\ni4L/MIjblarwkPXK8kDuYeDoWpxGDx+wezf6E4Q1QlffUTgh0fHJzGLZZPPl\n8I7Q/dkZUKtqV7QPxT9OY71vayRG09aO9GNJAnxMAEsWHbjpcdqG7+Kr/hft\nJqw/\r\n=OOAv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDMuarOtrPz4BNYoOOZH2PyXZPvUTee/CG9oaGdG067ZAiBUnzAfcGAFge+erYx9rbEbuVZSALTWpY9dyQ/WzGUJbg=="}]},"maintainers":[{"email":"james@faceyspacey.com","name":"faceyspacey"},{"email":"zackary.l.jackson@gmail.com","name":"zackljackson"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/extract-css-chunks-webpack-plugin_3.1.3_1538460024463_0.02275525960427527"},"_hasShrinkwrap":false},"3.2.0":{"name":"extract-css-chunks-webpack-plugin","version":"3.2.0","author":{"name":"James Gillmore","email":"james@faceyspacey.com"},"contributors":[{"name":"Zack Jackson","email":"zack@ScriptedAlchemy.com","url":"https://github.com/ScriptedAlchemy"}],"description":"Extract CSS from chunks into stylesheets + HMR. Supports Webpack 4 + SSR","engines":{"node":">= 6.9.0 <7.0.0 || >= 8.9.0"},"main":"dist/cjs.js","types":"index.d.ts","keywords":["css","chunks","code splitting","mini-css","hot","hmr","universal","webpack","webpack 4","css-hot-loader","extract-css-chunks-webpack-plugin"],"license":"MIT","scripts":{"start":"npm run build -- -w","build":"cross-env NODE_ENV=production babel src -d dist --ignore 'src/**/*.test.js' --copy-files","clean":"del-cli dist","lint":"eslint --cache --fix src","prebuild":"npm run clean","prepublish":"npm run build","security":"nsp check","test":"jest","test:watch":"jest --watch","test:coverage":"jest --collectCoverageFrom='src/**/*.js' --coverage","test:example":"npm run build && webpack-dev-server test/manual/src/index.js --config test/manual/webpack.config.js","ci:lint":"npm run lint && npm run security","ci:test":"npm run test -- --runInBand","ci:coverage":"npm run test:coverage -- --runInBand","build:example":"npm run build && webpack-dev-server test/manual/src/index.js --open --config test/manual/webpack.config.js","cm":"git-cz","release":"standard-version","semantic-release":"semantic-release pre && npm publish && semantic-release post","travis":"npm run ci:coverage"},"peerDependencies":{"webpack":"^4.8.3"},"dependencies":{"loader-utils":"^1.1.0","lodash":"^4.17.5","normalize-url":"^1.9.1","webpack-sources":"^1.1.0"},"devDependencies":{"@webpack-contrib/eslint-config-webpack":"^2.0.4","babel-cli":"^6.26.0","babel-eslint":"^7.2.3","babel-jest":"^22.2.2","babel-loader":"^7.1.4","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-polyfill":"^6.26.0","babel-preset-env":"^1.6.1","commitizen":"^2.10.1","conventional-github-releaser":"^2.0.2","cross-env":"^5.1.3","css-loader":"^0.28.10","cz-conventional-changelog":"^2.1.0","del":"^3.0.0","del-cli":"^1.1.0","eslint":"^3.19.0","eslint-config-airbnb":"^15.0.1","eslint-plugin-flowtype":"^2.32.1","eslint-plugin-import":"^2.8.0","eslint-plugin-jsx-a11y":"^5.0.3","eslint-plugin-prettier":"^2.6.0","eslint-plugin-react":"^7.0.1","husky":"^0.14.3","jest":"^22.2.2","memory-fs":"^0.4.1","nsp":"^3.1.0","pre-commit":"^1.2.2","prettier":"^1.11.1","standard-version":"^4.4.0","webpack":"4.8.3","webpack-cli":"^2.0.13","webpack-dev-server":"^3.1.1"},"homepage":"http://github.com/faceyspacey/extract-css-chunks-webpack-plugin","repository":{"type":"git","url":"git+https://github.com/faceyspacey/extract-css-chunks-webpack-plugin.git"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"gitHead":"beadad5ed17f8e4d69730e06a184ac7931e08490","bugs":{"url":"https://github.com/faceyspacey/extract-css-chunks-webpack-plugin/issues"},"_id":"extract-css-chunks-webpack-plugin@3.2.0","_npmVersion":"5.6.0","_nodeVersion":"9.10.0","_npmUser":{"name":"zackljackson","email":"zackary.l.jackson@gmail.com"},"dist":{"integrity":"sha512-d+CcBBfOi1NnAhA9RMG5SxuXNLMZ6/BeDK27jvQ5O9WfV48CersET1RNiLC5VRHCFHH3nA13ybhg9oz+Td9Npg==","shasum":"7200caa68ddc73b9e8c822683b6e7e4968fe9c5e","tarball":"https://registry.npmjs.org/extract-css-chunks-webpack-plugin/-/extract-css-chunks-webpack-plugin-3.2.0.tgz","fileCount":10,"unpackedSize":54619,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbu9LyCRA9TVsSAnZWagAAAH4P/jXsZx0VEu/L9pzWpycd\nOzJDP8Apsk1VDFsTmQKod9TYQz3mMjQhMk81Z3x8jJoLWwLBPDPSp5z4CMTi\nUhr/0Uc5/7X6nCQlEBQnL2LPc2urycNhNhNdC9nT/np0GCdwmNSBq9xboCXv\nu/WNziGkfKBLuL1qBnzxK4XSgBDe4xmYy8AYko+C6mVUgv2e6Bhoa/P7bjLM\nEcHM2F7pxb1aLUJpvl/SBee4WhR74Ejy3P56H8Ib4AMSZkaJbTNJFopIlUtr\n7//UqkXqV+h6mjLaciMyNZnyGKZ/zha/zEgP+o+zq6ke35Vn/DFejxWmcpJz\nb1MMI1+mGI6sz9n8vP0yZTPZZPurnDpMCySHsJ1iRiuG291YMjmR0yY9F5jo\nWx5DFfuTRnY7+ejQNBZJ3JI31sa7BuW/lPDpcNbepvV+d8Lk6QRxlGQ59MC+\n3LKji6Bpenr1Z0GNpudVPBFlIB+rtnz5pCYGSnHkaUGlBtGv9spRONThUTUu\nYKV+DJM+rXwwToPqfgfwkGw2gucB4QKPVTCvSnAgHgNLvbPz//9Vvxc38npc\ntsKoSn19jgADO5xgCrsEM0xds6Oed+fsamDPVM+C9Hluu6VEm21U9ZoyxvLH\ndm3+vdKQ6OtdZ00w7C8tFSIbALZSLMaf08sxjf3mqXee2QVy8M/6bvzo2bJS\nxAjK\r\n=X+Jt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAc+ValGsVxe70xJqRcEA/MxKfrlWlEVSgPCFqnixL+WAiEAzOFwMvbY2QcQkgC209WrzGNHxseUw693y0vpTfS8zfI="}]},"maintainers":[{"email":"james@faceyspacey.com","name":"faceyspacey"},{"email":"zackary.l.jackson@gmail.com","name":"zackljackson"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/extract-css-chunks-webpack-plugin_3.2.0_1539035875974_0.7507468118594176"},"_hasShrinkwrap":false},"3.2.1-alpha.0":{"name":"extract-css-chunks-webpack-plugin","version":"3.2.1-alpha.0","author":{"name":"James Gillmore","email":"james@faceyspacey.com"},"contributors":[{"name":"Zack Jackson","email":"zack@ScriptedAlchemy.com","url":"https://github.com/ScriptedAlchemy"}],"description":"Extract CSS from chunks into stylesheets + HMR. Supports Webpack 4 + SSR","engines":{"node":">= 6.9.0 <7.0.0 || >= 8.9.0"},"main":"dist/cjs.js","types":"index.d.ts","keywords":["css","chunks","code splitting","mini-css","hot","hmr","universal","webpack","webpack 4","css-hot-loader","extract-css-chunks-webpack-plugin"],"license":"MIT","scripts":{"start":"npm run build -- -w","build":"cross-env NODE_ENV=production babel src -d dist --ignore 'src/**/*.test.js' --copy-files","clean":"del-cli dist","lint":"eslint --cache --fix src","prebuild":"npm run clean","prepublish":"npm run build","security":"nsp check","test":"jest","test:watch":"jest --watch","test:coverage":"jest --collectCoverageFrom='src/**/*.js' --coverage","test:example":"npm run build && webpack-dev-server test/manual/src/index.js --config test/manual/webpack.config.js","ci:lint":"npm run lint && npm run security","ci:test":"npm run test -- --runInBand","ci:coverage":"npm run test:coverage -- --runInBand","build:example":"npm run build && webpack-dev-server test/manual/src/index.js --open --config test/manual/webpack.config.js","cm":"git-cz","release":"standard-version","semantic-release":"semantic-release pre && npm publish && semantic-release post","travis":"npm run ci:coverage"},"peerDependencies":{"webpack":"^4.8.3"},"dependencies":{"loader-utils":"^1.1.0","lodash":"^4.17.5","normalize-url":"^1.9.1","webpack-sources":"^1.1.0"},"devDependencies":{"@webpack-contrib/eslint-config-webpack":"^2.0.4","babel-cli":"^6.26.0","babel-eslint":"^7.2.3","babel-jest":"^22.2.2","babel-loader":"^7.1.4","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-polyfill":"^6.26.0","babel-preset-env":"^1.6.1","commitizen":"^2.10.1","conventional-github-releaser":"^2.0.2","cross-env":"^5.1.3","css-loader":"^0.28.10","cz-conventional-changelog":"^2.1.0","del":"^3.0.0","del-cli":"^1.1.0","eslint":"^3.19.0","eslint-config-airbnb":"^15.0.1","eslint-plugin-flowtype":"^2.32.1","eslint-plugin-import":"^2.8.0","eslint-plugin-jsx-a11y":"^5.0.3","eslint-plugin-prettier":"^2.6.0","eslint-plugin-react":"^7.0.1","husky":"^0.14.3","jest":"^22.2.2","memory-fs":"^0.4.1","nsp":"^3.1.0","pre-commit":"^1.2.2","prettier":"^1.11.1","standard-version":"^4.4.0","webpack":"4.8.3","webpack-cli":"^2.0.13","webpack-dev-server":"^3.1.1"},"homepage":"http://github.com/faceyspacey/extract-css-chunks-webpack-plugin","repository":{"type":"git","url":"git+https://github.com/faceyspacey/extract-css-chunks-webpack-plugin.git"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"readme":"<a href=\"https://gitter.im/Reactlandia/Lobby\" target=\"_blank\">\n  <img alt=\"Edit Redux-First Router Demo\" src=\"http://cdn.reactlandia.com/chat-badge-reactlandia.png\">\n</a>\n\n\n# extract-css-chunks-webpack-plugin\n\n<p align=\"center\">\n  <a href=\"https://www.npmjs.com/package/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://img.shields.io/npm/v/extract-css-chunks-webpack-plugin.svg\" alt=\"Version\" />\n  </a>\n\n  <a href=\"https://travis-ci.org/faceyspacey/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://travis-ci.org/faceyspacey/extract-css-chunks-webpack-plugin.svg?branch=master\" alt=\"Build Status\" />\n  </a>\n\n  <a href=\"https://www.npmjs.com/package/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://img.shields.io/npm/dt/extract-css-chunks-webpack-plugin.svg\" alt=\"Downloads\" />\n  </a>\n\n  <a href=\"https://www.npmjs.com/package/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://img.shields.io/npm/dm/extract-css-chunks-webpack-plugin.svg\" alt=\"License\" />\n  </a>\n  \n  <a href=\"https://www.npmjs.com/package/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://img.shields.io/npm/l/extract-css-chunks-webpack-plugin.svg\" alt=\"License\" />\n  </a>\n</p>\n\n<h2 align=\"center\">🍾🍾🍾It's our absolute pleasure to announce Webpack 4 Support 🚀🚀🚀</h2>\n\n> **HEADLINES (May 2018): Now Independently supports Webpack 4:** \nYep that's right. The universal family is now fully Webpack 4. Thank you to all our users for your loyalty and patience! If you love Universal, then you are gonna fall head over heels when we bring out the main course! \n\nSo... why did we rebuild `extract-css-chunks`? What does it offer? \n\nIt's got all the goodness of `mini-css-extract-plugin` but with 2 gleaming, sought after benefits. \n\nCompared to the existing loaders, we are offering a single solution as opposed to needing to depend on multiple loaders to cater for different features:\n\n## Perks\n* **HMR:** It also has first-class support for **Hot Module Replacement** across ALL those css files/chunks!!!\n* cacheable stylesheets \n* smallest total bytes sent compared to \"render-path\" css-in-js solutions that include your CSS definitions in JS\n* Faster than the V2!\n* Async loading\n* No duplicate compilation (performance)\n* Easier to use\n* Specific to CSS\n* SSR Friendly development build, focused on frontend DX\n* Works seamlessly with the Universal family\n* Works fantastically as a standalone style loader (You can use it for any webpack project! with no extra dependencies!)\n\nAdditionally, if you are already a user of the universal family -- we will be waving goodbye to the mandatory ```window.__CSS_CHUNKS__```.\n\nThe functionality is still available to you via chunk flushing, and it can come in super handy when needing to easily resolve style assets as urls that might need to be passed to a third party.\n\n## Webpack 4 Standalone Installation:\n\nIf you are just looking for something that works like `mini-css-extract-plugin` but with HMR, then look no further.\n\nNOTE: We have aligned out loader implementation to be the same as `mini-css-extract-plugin` \n\n**If you already use `mini-css-extract-plugin`, then you can just change the `require` statement - it's that easy**\n\n```\nyarn add --dev extract-css-chunks-webpack-plugin\n```\n\n*webpack.config.js:*\n```js\nconst ExtractCssChunks = require(\"extract-css-chunks-webpack-plugin\")\n\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [\n           ExtractCssChunks.loader,\n           \"css-loader\"\n         ]\n      }\n    ]\n  },\n  plugins: [\n    new ExtractCssChunks(\n        {\n          // Options similar to the same options in webpackOptions.output\n          // both options are optional\n          filename: \"[name].css\",\n          chunkFilename: \"[id].css\",\n          hot: true, // optional as the plugin cannot automatically detect if you are using HOT, not for production use\n          orderWarning: true, // Disable to remove warnings about conflicting order between imports\n          reloadAll: true, // when desperation kicks in - this is a brute force HMR flag\n          cssModules: true // if you use cssModules, this can help.\n        }\n    ),\n  ]\n}\n```\n\n*webpack.server.config.js*\n\nThe server needs to be handled differently, we still want one chunk. Luckily webpack 4 supports **LimitChunkCountPlugin**\n\n```js\nnew webpack.optimize.LimitChunkCountPlugin({\n    maxChunks: 1\n})\n```\n\n\n### What about Webpack 3?\nThis is a breaking change. The entire loader has been fundamentally rewritten specifically for Webpack 4. Aiming to support our existing user base, allowing them to upgrade their infrastructure to support Webpack 4 based universally code-split server-side rendered react applications. \n\nThere have been some challenges along the way since the release of webpack 4. Ultimately the only remaining hurdle is code split, async style loading. \n\nIf you do need Webpack 3, make sure to stick with the latest `v2.x.x` release. `v3.x.x` is only intended for users with Webpack 4\n\n\n\n\n*Note: this is a companion package to:*\n- [webpack-flush-chunks](https://github.com/faceyspacey/webpack-flush-chunks) \n- [react-universal-component](https://github.com/faceyspacey/react-universal-component)\n- [babel-plugin-universal-import](https://github.com/faceyspacey/babel-plugin-universal-import) ***or*** [babel-plugin-dual-import](https://github.com/faceyspacey/babel-plugin-dual-import)\n\n\n## Recommended Installation For Universal\n```\nyarn add react-universal-component webpack-flush-chunks\nyarn add --dev extract-css-chunks-webpack-plugin babel-plugin-universal-import\n```\n\n*.babelrc:*\n```js\n{\n  \"plugins\": [\"universal-import\"]\n}\n```\nThe main thing is you need to cater to the new chunking system of webpack!\nWith **webpack.optimize.CommonsChunkPlugin** plugin no longer part of Webpack 4, we need another way to define the code-splitting. Luckily we have `optimization` configs built into webpack now\n\n> There are more aggressive ways to code split, thanks to webpack 4. Check out the RUC Readme if you are looking for a more aggressive code split optimization configuration. These are just examples, you should be able to configure them as you see fit\n\n*webpack.config.js:*\n```js\nconst ExtractCssChunks = require(\"extract-css-chunks-webpack-plugin\")\n\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [\n          ExtractCssChunks.loader,\n          {\n            loader: 'css-loader',\n            options: {\n              modules: true,\n              localIdentName: '[name]__[local]--[hash:base64:5]',\n            },\n          },\n        ],\n      },\n    ],\n  },\n  optimization: {\n      // FOR PRODUCTION\n      minimizer: [\n          new UglifyJSPlugin({\n              uglifyOptions: {\n                  output: {\n                      comments: false,\n                      ascii_only: true\n                  },\n                  compress: {\n                      comparisons: false\n                  }\n              }\n          })\n      ],\n      // END\n      // NEEDED BOTH IN PROD AND DEV BUILDS\n      runtimeChunk: {\n          name: 'bootstrap'\n      },\n      splitChunks: {\n          chunks: 'initial',\n          cacheGroups: {\n              vendors: {\n                  test: /[\\\\/]node_modules[\\\\/]/,\n                  name: 'vendor'\n              }\n          }\n      }\n  },\n  plugins: [\n    new ExtractCssChunks({hot:true, cssModules: true}), //if you want HMR - we try to automatically inject hot reloading but if it's not working, add it to the config\n  ]\n};\n```\n\n## Desired Output\nHere's the sort of CSS you can expect to serve:\n\n```\n<head>\n\t<link rel='stylesheet' href='/static/main.css' />\n\t<link rel='stylesheet' href='/static/0.css' />\n\t<link rel='stylesheet' href='/static/7.css' />\n</head> \n\n<body>\n\t<div id=\"react-root\"></div>\n\t\n\t<script type='text/javascript' src='/static/vendor.js'></script>\n\t<script type='text/javascript' src='/static/0.js'></script>\n\t<script type='text/javascript' src='/static/7.js'></script>\n\t<script type='text/javascript' src='/static/main.js'></script>\n</body>\n```\n\nIf you need to resolve your stylesheets on the client side, for whatever reason. \n\n[webpack-flush-chunks](https://github.com/faceyspacey/webpack-flush-chunks) will scoop up the exact stylesheets to embed in your response. It will give you an object which can be embedded on page\n\nHere's how you do it:\n\n\n*src/components/App.js:*\n```js\nconst UniversalComponent = universal(props => import(`./${props.page}`))\n\n<UniversalComponent page='Foo' />\n```\n\n*server/render.js:*\n```js\nimport { flushChunkNames } from 'react-universal-component/server'\nimport flushChunks from 'webpack-flush-chunks'\n\nconst app = ReactDOMServer.renderToString(<App />)\nconst { js, styles, cssHash } = flushChunks(webpackStats, {\n  chunkNames: flushChunkNames()\n})\n\nres.send(`\n  <!doctype html>\n  <html>\n    <head>\n      ${styles}\n    </head>\n    <body>\n      <div id=\"root\">${app}</div>\n      <!-- not needed unless you want to access css chunks urls manually  -->\n      ${cssHash}\n      <!-- extract-css-chunks takes care of loading the css assets automatically -->\n      ${js}\n    </body>\n  </html>\n`)\n```\n\n***As for asynchronous calls to `import()` on user navigation,*** [babel-plugin-universal-import](https://github.com/faceyspacey/babel-plugin-universal-import) is required if you're using [react-universal-component](https://github.com/faceyspacey/react-universal-component). And if you aren't, you must use: [babel-plugin-dual-import](https://github.com/faceyspacey/babel-plugin-dual-import). \n\n\nThese babel plugins request both your js + your css. *Very Nice!* This is the new feature of the 2.0. Read *Sokra's* (author of webpack) article on how [on how this is the future of CSS for webpack](https://medium.com/webpack/the-new-css-workflow-step-1-79583bd107d7). Use this and be in the future today.\n\n\n## API \nYou can pass the same options as `mini-css-extract` to `new ExtractCssChunks`, such as:\n\n```javascript\nnew ExtractCssChunk({\n      filename: devMode ? '[name].css' : '[name].[hash].css',\n      chunkFilename: devMode ? '[id].css' : '[id].[hash].css',\n})\n```\n\n>Keep in mind, by default `[name].css` is used when `process.env.NODE_ENV === 'development'` and `[name].[contenthash].css` during production, so you can likely forget about having to pass anything.\n\n### HMR Troubleshooting\n**Blank array in HMR script?**\n\nIf you have issues with HMR, but enabled the loader, plugin, and already tried `hot: true, reloadAll:true`, then your webpack config might be more abstract than my simple lookup functions. In this case, Ive exported out the actual hot loader, you can add this manually and as long as you've got the plugin and loader -- it'll work \n\n```js\n rules: [\n      {\n        test: /\\.css$/,\n        use: [\n          ExtractCssChunks.hotLoader, // for those who want to manually force hotLoading\n          ExtractCssChunks.loader,\n          {\n            loader: 'css-loader',\n            options: {\n              modules: true,\n              localIdentName: '[name]__[local]--[hash:base64:5]',\n            },\n          },\n        ],\n      },\n    ]\n```\n\n### HMR Pitfall\n\nThe most common workflow when working with webpack is to write a \"development\" / \"production\" value in to the\n'process.env.NODE_ENV' namespace, typically, using webpack's built-in \"DefinePlugin\" plugin. e.g:\n\n```javascript\nnew webpack.DefinePlugin( {\n     'process.env': {\n        NODE_ENV: `\"${config.devMode ? 'development' : 'production'}\"`,\n      },\n} )\n```\nThe value set by the aforementioned plugin will only be available in the runtime ( when webpack's javascript output is executed ).\nIn order for this plugin to work with hot module reloading, The npm script / gulp task / grunt task etc, should be invoked with the same environment variable as shown above.\n\nFor example, when running the build using some form of npm script:\n\n```json\n{\n  \"scripts\": {\n     \"build\": \"cross-env NODE_ENV=production babel src -d dist --ignore 'src/**/*.test.js' --copy-files\"\n  }\n}\n```\n[cross-env](https://www.npmjs.com/package/cross-env) is optional but recommended. \n\n### What about Glamorous, Styled Components, Styled-Jsx, Aphrodite, etc?\n\nIf you effectively use code-splitting, **Extract Css Chunks** can be a far better option than using emerging solutions like *Glamorous*, *Styled Components*, and slightly older tools like *Aphrodite*, *Glamor*, etc. We aren't fans of either rounds of tools because of several issues, but particularly because they all have a runtime overhead. Every time your React component is rendered with those, CSS is generated and updated within the DOM. On the server, you're going to also see unnecessary cycles for flushing the CSS along the critical render path. *Next.js's* `styled-jsx`, by the way, doesn't even work on the server--*not so good when it comes to flash of unstyled content (FOUC).*\n\nThe reason **Extract CSS Chunk** can be a better option is because **we also generate multiple sets of CSS based on what is actually \"used\",** ***but without the runtime overhead***. The difference is our definition of \"used\" is modules determined *statically* (which may not in fact be rendered) vs. what is in the \"critical render path\" (as is the case with the other tools). \n\nSo yes, our CSS may be mildly larger and include unnecessary css, but our `no_css.js` bundles will be a lot smaller as they don't need to inject any styles. See, even though those solutions have the smallest possible CSS file size, their javascript bundles, **in order to continue to render your components styled properly on the client,** must contain the necessary CSS for all possibilities! Those solutions serve both your entire bundle's CSS (in your javascript) **and** the CSS flushed from the critical render path. \n\nOn top of that, those are extra packages all with a huge number of issues in their Github repos corresponding to various limitations in the CSS they generate--something that is prevented when your definition for \"CSS-in-JS\" is simply importing CSS files compiled as normal by powerful proven CSS-specific processors.\n\nLastly, those solutions don't provide cacheable stylesheets. They do a lot of work--but they will **continue** doing it for you when you could have been done in one go long ago. Cloudflare is free--serve them through their CDN and you're winning. I love true javascript in css--don't get me wrong--but first I'd have to see they generate cacheable stylesheets. In my opinion, for now, it's best for environments that natively support it such as React Native.\n\n\n### Next:\n\nNow with that out of the way, for completeness let's compare what bytes of just the CSS are sent over the wire. The difference basically is minimal. Whereas solutions that flush from the critical render path will capture no more than the precise bits of CSS from the `if/else` branches followed, **Extract Css Chunks** is all about you effectively using code-splitting to insure, for example, you don't serve your Administration Panel's CSS in your public-facing site, etc. *In other words, it's all about avoiding serving large swaths of CSS from completely different sections of your app.* ***I.e. the biggest gains available to you.*** \n\n<details>\n<summary>\n    Read more on the topic ^^\n</summary>\n\nThis is where the real problem lies--where the real amount of unnecessary CSS comes from. If you effectively code-split your app, you may end up with 10 chunks. Now you can serve just the corresponding CSS for that chunk. If you try to go even farther and remove the css not used in the render path, you're likely achieving somewhere between 1-20% of the gains you achieved by thorough code-splitting. In other words, code splitting fulfills the 80/20 rule and attains the simple sweetspot of 80% optimization you--*as a balanced, level-headed, non-neurotic and professional developer*--are looking to achieve.\n\n*In short, by putting code splitting in appropriate places you have a lot of control over the CSS files that are created and can send a sensible* ***minimal*** *amount of associated bytes over the wire for the first request, perhaps even the smallest amount of all options.* \n\nIt's our perspective that you have achieved 80-99% of the performance gains (i.e. the creation of small relevant css files) at this ***static stage***. Offloading this work to the runtime stage is ultimately nit-picking and results in diminishing returns. When you factor that your JS bundle has to contain that JS anyway, those solutions make less and less sense from the perspective of reducing bytes delivered in the initial request. \n\nThere may be other reasons to use those tools (e.g. you don't like setting up webpack configs, or somehow you're really fond of pre-creating many `<div />` elements with their styles), but we prefer a simple standards-based way (without HoCs or specialized style components) to import styles just as you would in React Native. However to give the other tools credit, many of them likely started out with a different problem motivating them: avoiding webpack configs so you can include packages and their contained CSS without client apps being required to setup something like CSS loaders in Webpack. Having your CSS completely contained in true JS has its use cases, but at the application level--especially when you're already using something like Webpack--we fail to see its benefits. About all they share is a solution to avoiding **flashes of unstyled content** (FOUC), except one can save you a lot more bytes in what you send over the wire and save you from a continual runtime overhead where it's not needed. ***Honorable Mention:*** *StyleTron's concept of \"atomic declaration-level deduplication\" where it will make a class out of, say, `color: blue` so you don't need to send redundant styles certainly is a novel innovation, but again if the code still exists in your JS and you're building an application using Webpack (instead of a package), what's the point. In fact, it just makes editing the stylesheets in your browser developer tools more complicated. One benefit of critical render path solutions is the browser can spend less time matching the smaller number of styles to new DOM nodes as they appear, but then again it also has to spend the time injecting and parsing the new styles constantly, which is likely costlier.*\n\nAs an aside, so many apps share code between web and React Native--so the answer to the styles problem must be one that is identical for both. From that perspective importing a styles object **still** makes a lot of sense. **You're not missing out on the fundamental aspect of CSS-in-JSS:** ***isolated component-level styles and the ability to import them just like any other javascript code.*** Put them in other files, and use tools like `extract-css-chunks-webpack-plugin` and your pre-processors of choice that innately get styles right for the browser. As long as you're using **CSS Modules**, you're still at the cutting edge of CSS-in-JSS. Let's just say the other tools took one wrong turn and took it too far, when we already were at our destination. \n</details>\n\n\n#### SUMMARY OF BENEFITS COMPARED TO \"CRITICAL-RENDER-PATH\" SOLUTIONS:\n\n- no continual runtime overhead during `render` using HoCs that inject styles\n- smaller JS bundles without CSS injection\n- **You DO NOT need to clutter your component code with a specialized way of applying CSS (HoCs, styled elements)!** \n- The way you import module-based styles is exactly how you would import styles in React Native that exist in a separate file, which allows for extremely interchangeable code between React Native and regular React. Hurray! \n- pretty much already does everything covered by [@vjeux's 2014 css-in-js talk](https://speakerdeck.com/vjeux/react-css-in-js), besides dead code elimination. Dead code elimination is only solved for the other tools--as per the explanation above how the CSS is in the JS anyway--so much as Webpack and Uglify can remove **JS** that is not used. Either way, it's not a stretch to eventually add this feature to `extract-text-webpack-plugin` as well as this plugin. Hey, maybe it already has it??\n\n## Emotion!\n\n[Emotion](https://github.com/tkh44/emotion) is different. They allow for the extraction of static styles via their *extract mode*. We're very much looking forward to this being the perfect companion to the css chunks approach. \n<details>\n<summary>\n    Read more on the topic ^^\n</summary>\n\nCurrently however *extract mode* does not support IE11. So that means it's a no go, but we have hopes that in the future they'll solve that problem.\n\nThe reason Emotion doesn't work in IE11+ is because they currently try to preserve any dynamic aspects of your CSS-in-JS by converting it CSS vars, which isn't supported in IE11. That was a very smart approach, but unfortunately not good enough. \n\nThe vision we'd like to see for that package is where dynamic css stays inline, and where only static CSS is extracted into stylesheets, in which case CSS vars aren't needed. I've heard from them they have some \"hidden flags\" that allow for something close to this. When, and if, they take this feature all the way, look forward to us pushing it as our recommended approach. *Go Emotion!*\n</details>\n\n## Linaria\n\nLinaria is another modern CSS-in-JSS library. It's focused around static styles, which may make it a perfect fit for usage with this plugin. Check it out:\n\nhttps://github.com/callstack/linaria\n\n## What if I don't use SSR and use html-webpack-plugin?\n\nFor that case you can use [css-chunks-html-webpack-plugin](https://github.com/teamable-software/css-chunks-html-webpack-plugin) which will extract CSS chunks paths into your HTML file.\n\n## Conclusion:\n**We love CSS modules; no less, no more.**\n\n**Long live the dream of Code Splitting Everywhere!**\n\n\n## Contributing\nWe use [commitizen](https://github.com/commitizen/cz-cli), so run `npm run cm` to make commits. A command-line form will appear, requiring you answer a few questions to automatically produce a nicely formatted commit. Releases, semantic version numbers, tags and changelogs will automatically be generated based on these commits thanks to [semantic-release](https://github.com/semantic-release/semantic-release). Be good.\n\n## More from FaceySpacey in Reactlandia\n- [redux-first-router](https://github.com/faceyspacey/redux-first-router). It's made to work perfectly with *Universal*. Together they comprise our *\"frameworkless\"* Redux-based approach to what Next.js does (splitting, SSR, prefetching, and routing). *People are lovin it by the way* 😎\n","readmeFilename":"README.md","gitHead":"4eac0f6459d9a0b85495a75ca34cf3571e3dd928","bugs":{"url":"https://github.com/faceyspacey/extract-css-chunks-webpack-plugin/issues"},"_id":"extract-css-chunks-webpack-plugin@3.2.1-alpha.0","_npmVersion":"5.6.0","_nodeVersion":"9.10.0","_npmUser":{"name":"zackljackson","email":"zackary.l.jackson@gmail.com"},"dist":{"integrity":"sha512-8lfvJ0IxQJlhqBAIQAt1jDXTCbVHior7k5f5aWc7VSB8uH6R8eNiRoQRmoDMxP3KQHyJeHMTz4GkmlN0oevpeg==","shasum":"a3302b79cd135c698f518c2a02928c649cf09965","tarball":"https://registry.npmjs.org/extract-css-chunks-webpack-plugin/-/extract-css-chunks-webpack-plugin-3.2.1-alpha.0.tgz","fileCount":10,"unpackedSize":55813,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbu/uVCRA9TVsSAnZWagAAkD4P/jzHla7TssMAkMTJnCoi\nVtXXnwFu+TBE8Xemd2vPQA8VYf2DZP/pLBftF7AA62XvgVDxL6hRjAa0t/BO\nr5NaVnc+yOC7CApVQCMQPWyF6Z2o8NIUdNVaXX88kk6OF9xDRtbaA9axIdlJ\nbTCQsYdRLEF4NFEA8/ITr+k3JEWQUsaXN9yMsOAT3jWBp8XKljy+exd/p4s3\nz5GFzMz8Xh2mB0/IdAxbzjYXUCmN5rfWY4F68x3yc+Xb0VfNugxSVgA6Q7p8\ncIxqXZuUa11DY+cdL7jYT4gYdh9T9wNdWkmbsigp0hoMe4nSbLX8o/Zj7qvb\nDhAM1ujNGy/PWB/9XLp06MyBZXdxdJE2WzveAhZ5r3/c3rRxpGeAm/vUo1bx\nNX0/la3RS44nucvGxaChJ324oLVN+rJazxJpOfcD5d0sSwUsSucXBM3iNPoM\njnBSW8PUZmkxXNdnwmYRUVe8MIL0lF5NVMtyhFkMp4U6Z2DAcw1Ra4wIwU3M\nh35Os4eBVensHA2sqNMF+VyqzykcffoTK/d89cG6pscfrQUI0ORlZruf+Or1\nJ1HXmpeFmzTaLGpD/hTueMbCvLl+f5qn855P6O9EuHGpEpNo3jNjMwy9MkEY\nMY6Ll42EDMsW99ybnZxA2glJL/38ncXRmSJ2e7JWxwgQZdeGuwL5ogVjLOfZ\npdNb\r\n=8l7M\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICwu7/lZ+CUqsEqgLGblhgXlkSiqcyQzsTlVzTsrEt38AiAeGHExXxb3iFuFsccDJnw7R4DgkkUCu1vzx2nEkWKuAA=="}]},"maintainers":[{"email":"james@faceyspacey.com","name":"faceyspacey"},{"email":"zackary.l.jackson@gmail.com","name":"zackljackson"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/extract-css-chunks-webpack-plugin_3.2.1-alpha.0_1539046292859_0.43514773500897763"},"_hasShrinkwrap":false},"3.2.1-alpha.1":{"name":"extract-css-chunks-webpack-plugin","version":"3.2.1-alpha.1","author":{"name":"James Gillmore","email":"james@faceyspacey.com"},"contributors":[{"name":"Zack Jackson","email":"zack@ScriptedAlchemy.com","url":"https://github.com/ScriptedAlchemy"}],"description":"Extract CSS from chunks into stylesheets + HMR. Supports Webpack 4 + SSR","engines":{"node":">= 6.9.0 <7.0.0 || >= 8.9.0"},"main":"dist/cjs.js","types":"index.d.ts","keywords":["css","chunks","code splitting","mini-css","hot","hmr","universal","webpack","webpack 4","css-hot-loader","extract-css-chunks-webpack-plugin"],"license":"MIT","scripts":{"start":"npm run build -- -w","build":"cross-env NODE_ENV=production babel src -d dist --ignore 'src/**/*.test.js' --copy-files","clean":"del-cli dist","lint":"eslint --cache --fix src","prebuild":"npm run clean","prepublish":"npm run build","security":"nsp check","test":"jest","test:watch":"jest --watch","test:coverage":"jest --collectCoverageFrom='src/**/*.js' --coverage","test:example":"npm run build && webpack-dev-server test/manual/src/index.js --config test/manual/webpack.config.js","ci:lint":"npm run lint && npm run security","ci:test":"npm run test -- --runInBand","ci:coverage":"npm run test:coverage -- --runInBand","build:example":"npm run build && webpack-dev-server test/manual/src/index.js --open --config test/manual/webpack.config.js","cm":"git-cz","release":"standard-version","semantic-release":"semantic-release pre && npm publish && semantic-release post","travis":"npm run ci:coverage"},"peerDependencies":{"webpack":"^4.8.3"},"dependencies":{"loader-utils":"^1.1.0","lodash":"^4.17.5","normalize-url":"^1.9.1","webpack-sources":"^1.1.0"},"devDependencies":{"@webpack-contrib/eslint-config-webpack":"^2.0.4","babel-cli":"^6.26.0","babel-eslint":"^7.2.3","babel-jest":"^22.2.2","babel-loader":"^7.1.4","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-polyfill":"^6.26.0","babel-preset-env":"^1.6.1","commitizen":"^2.10.1","conventional-github-releaser":"^2.0.2","cross-env":"^5.1.3","css-loader":"^0.28.10","cz-conventional-changelog":"^2.1.0","del":"^3.0.0","del-cli":"^1.1.0","eslint":"^3.19.0","eslint-config-airbnb":"^15.0.1","eslint-plugin-flowtype":"^2.32.1","eslint-plugin-import":"^2.8.0","eslint-plugin-jsx-a11y":"^5.0.3","eslint-plugin-prettier":"^2.6.0","eslint-plugin-react":"^7.0.1","husky":"^0.14.3","jest":"^22.2.2","memory-fs":"^0.4.1","nsp":"^3.1.0","pre-commit":"^1.2.2","prettier":"^1.11.1","standard-version":"^4.4.0","webpack":"4.8.3","webpack-cli":"^2.0.13","webpack-dev-server":"^3.1.1"},"homepage":"http://github.com/faceyspacey/extract-css-chunks-webpack-plugin","repository":{"type":"git","url":"git+https://github.com/faceyspacey/extract-css-chunks-webpack-plugin.git"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"readme":"<a href=\"https://gitter.im/Reactlandia/Lobby\" target=\"_blank\">\n  <img alt=\"Edit Redux-First Router Demo\" src=\"http://cdn.reactlandia.com/chat-badge-reactlandia.png\">\n</a>\n\n\n# extract-css-chunks-webpack-plugin\n\n<p align=\"center\">\n  <a href=\"https://www.npmjs.com/package/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://img.shields.io/npm/v/extract-css-chunks-webpack-plugin.svg\" alt=\"Version\" />\n  </a>\n\n  <a href=\"https://travis-ci.org/faceyspacey/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://travis-ci.org/faceyspacey/extract-css-chunks-webpack-plugin.svg?branch=master\" alt=\"Build Status\" />\n  </a>\n\n  <a href=\"https://www.npmjs.com/package/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://img.shields.io/npm/dt/extract-css-chunks-webpack-plugin.svg\" alt=\"Downloads\" />\n  </a>\n\n  <a href=\"https://www.npmjs.com/package/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://img.shields.io/npm/dm/extract-css-chunks-webpack-plugin.svg\" alt=\"License\" />\n  </a>\n  \n  <a href=\"https://www.npmjs.com/package/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://img.shields.io/npm/l/extract-css-chunks-webpack-plugin.svg\" alt=\"License\" />\n  </a>\n</p>\n\n<h2 align=\"center\">🍾🍾🍾It's our absolute pleasure to announce Webpack 4 Support 🚀🚀🚀</h2>\n\n> **HEADLINES (May 2018): Now Independently supports Webpack 4:** \nYep that's right. The universal family is now fully Webpack 4. Thank you to all our users for your loyalty and patience! If you love Universal, then you are gonna fall head over heels when we bring out the main course! \n\nSo... why did we rebuild `extract-css-chunks`? What does it offer? \n\nIt's got all the goodness of `mini-css-extract-plugin` but with 2 gleaming, sought after benefits. \n\nCompared to the existing loaders, we are offering a single solution as opposed to needing to depend on multiple loaders to cater for different features:\n\n## Perks\n* **HMR:** It also has first-class support for **Hot Module Replacement** across ALL those css files/chunks!!!\n* cacheable stylesheets \n* smallest total bytes sent compared to \"render-path\" css-in-js solutions that include your CSS definitions in JS\n* Faster than the V2!\n* Async loading\n* No duplicate compilation (performance)\n* Easier to use\n* Specific to CSS\n* SSR Friendly development build, focused on frontend DX\n* Works seamlessly with the Universal family\n* Works fantastically as a standalone style loader (You can use it for any webpack project! with no extra dependencies!)\n\nAdditionally, if you are already a user of the universal family -- we will be waving goodbye to the mandatory ```window.__CSS_CHUNKS__```.\n\nThe functionality is still available to you via chunk flushing, and it can come in super handy when needing to easily resolve style assets as urls that might need to be passed to a third party.\n\n## Webpack 4 Standalone Installation:\n\nIf you are just looking for something that works like `mini-css-extract-plugin` but with HMR, then look no further.\n\nNOTE: We have aligned out loader implementation to be the same as `mini-css-extract-plugin` \n\n**If you already use `mini-css-extract-plugin`, then you can just change the `require` statement - it's that easy**\n\n```\nyarn add --dev extract-css-chunks-webpack-plugin\n```\n\n*webpack.config.js:*\n```js\nconst ExtractCssChunks = require(\"extract-css-chunks-webpack-plugin\")\n\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [\n           ExtractCssChunks.loader,\n           \"css-loader\"\n         ]\n      }\n    ]\n  },\n  plugins: [\n    new ExtractCssChunks(\n        {\n          // Options similar to the same options in webpackOptions.output\n          // both options are optional\n          filename: \"[name].css\",\n          chunkFilename: \"[id].css\",\n          hot: true, // optional as the plugin cannot automatically detect if you are using HOT, not for production use\n          orderWarning: true, // Disable to remove warnings about conflicting order between imports\n          reloadAll: true, // when desperation kicks in - this is a brute force HMR flag\n          cssModules: true // if you use cssModules, this can help.\n        }\n    ),\n  ]\n}\n```\n\n*webpack.server.config.js*\n\nThe server needs to be handled differently, we still want one chunk. Luckily webpack 4 supports **LimitChunkCountPlugin**\n\n```js\nnew webpack.optimize.LimitChunkCountPlugin({\n    maxChunks: 1\n})\n```\n\n\n### What about Webpack 3?\nThis is a breaking change. The entire loader has been fundamentally rewritten specifically for Webpack 4. Aiming to support our existing user base, allowing them to upgrade their infrastructure to support Webpack 4 based universally code-split server-side rendered react applications. \n\nThere have been some challenges along the way since the release of webpack 4. Ultimately the only remaining hurdle is code split, async style loading. \n\nIf you do need Webpack 3, make sure to stick with the latest `v2.x.x` release. `v3.x.x` is only intended for users with Webpack 4\n\n\n\n\n*Note: this is a companion package to:*\n- [webpack-flush-chunks](https://github.com/faceyspacey/webpack-flush-chunks) \n- [react-universal-component](https://github.com/faceyspacey/react-universal-component)\n- [babel-plugin-universal-import](https://github.com/faceyspacey/babel-plugin-universal-import) ***or*** [babel-plugin-dual-import](https://github.com/faceyspacey/babel-plugin-dual-import)\n\n\n## Recommended Installation For Universal\n```\nyarn add react-universal-component webpack-flush-chunks\nyarn add --dev extract-css-chunks-webpack-plugin babel-plugin-universal-import\n```\n\n*.babelrc:*\n```js\n{\n  \"plugins\": [\"universal-import\"]\n}\n```\nThe main thing is you need to cater to the new chunking system of webpack!\nWith **webpack.optimize.CommonsChunkPlugin** plugin no longer part of Webpack 4, we need another way to define the code-splitting. Luckily we have `optimization` configs built into webpack now\n\n> There are more aggressive ways to code split, thanks to webpack 4. Check out the RUC Readme if you are looking for a more aggressive code split optimization configuration. These are just examples, you should be able to configure them as you see fit\n\n*webpack.config.js:*\n```js\nconst ExtractCssChunks = require(\"extract-css-chunks-webpack-plugin\")\n\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [\n          ExtractCssChunks.loader,\n          {\n            loader: 'css-loader',\n            options: {\n              modules: true,\n              localIdentName: '[name]__[local]--[hash:base64:5]',\n            },\n          },\n        ],\n      },\n    ],\n  },\n  optimization: {\n      // FOR PRODUCTION\n      minimizer: [\n          new UglifyJSPlugin({\n              uglifyOptions: {\n                  output: {\n                      comments: false,\n                      ascii_only: true\n                  },\n                  compress: {\n                      comparisons: false\n                  }\n              }\n          })\n      ],\n      // END\n      // NEEDED BOTH IN PROD AND DEV BUILDS\n      runtimeChunk: {\n          name: 'bootstrap'\n      },\n      splitChunks: {\n          chunks: 'initial',\n          cacheGroups: {\n              vendors: {\n                  test: /[\\\\/]node_modules[\\\\/]/,\n                  name: 'vendor'\n              }\n          }\n      }\n  },\n  plugins: [\n    new ExtractCssChunks({hot:true, cssModules: true}), //if you want HMR - we try to automatically inject hot reloading but if it's not working, add it to the config\n  ]\n};\n```\n\n## Desired Output\nHere's the sort of CSS you can expect to serve:\n\n```\n<head>\n\t<link rel='stylesheet' href='/static/main.css' />\n\t<link rel='stylesheet' href='/static/0.css' />\n\t<link rel='stylesheet' href='/static/7.css' />\n</head> \n\n<body>\n\t<div id=\"react-root\"></div>\n\t\n\t<script type='text/javascript' src='/static/vendor.js'></script>\n\t<script type='text/javascript' src='/static/0.js'></script>\n\t<script type='text/javascript' src='/static/7.js'></script>\n\t<script type='text/javascript' src='/static/main.js'></script>\n</body>\n```\n\nIf you need to resolve your stylesheets on the client side, for whatever reason. \n\n[webpack-flush-chunks](https://github.com/faceyspacey/webpack-flush-chunks) will scoop up the exact stylesheets to embed in your response. It will give you an object which can be embedded on page\n\nHere's how you do it:\n\n\n*src/components/App.js:*\n```js\nconst UniversalComponent = universal(props => import(`./${props.page}`))\n\n<UniversalComponent page='Foo' />\n```\n\n*server/render.js:*\n```js\nimport { flushChunkNames } from 'react-universal-component/server'\nimport flushChunks from 'webpack-flush-chunks'\n\nconst app = ReactDOMServer.renderToString(<App />)\nconst { js, styles, cssHash } = flushChunks(webpackStats, {\n  chunkNames: flushChunkNames()\n})\n\nres.send(`\n  <!doctype html>\n  <html>\n    <head>\n      ${styles}\n    </head>\n    <body>\n      <div id=\"root\">${app}</div>\n      <!-- not needed unless you want to access css chunks urls manually  -->\n      ${cssHash}\n      <!-- extract-css-chunks takes care of loading the css assets automatically -->\n      ${js}\n    </body>\n  </html>\n`)\n```\n\n***As for asynchronous calls to `import()` on user navigation,*** [babel-plugin-universal-import](https://github.com/faceyspacey/babel-plugin-universal-import) is required if you're using [react-universal-component](https://github.com/faceyspacey/react-universal-component). And if you aren't, you must use: [babel-plugin-dual-import](https://github.com/faceyspacey/babel-plugin-dual-import). \n\n\nThese babel plugins request both your js + your css. *Very Nice!* This is the new feature of the 2.0. Read *Sokra's* (author of webpack) article on how [on how this is the future of CSS for webpack](https://medium.com/webpack/the-new-css-workflow-step-1-79583bd107d7). Use this and be in the future today.\n\n\n## API \nYou can pass the same options as `mini-css-extract` to `new ExtractCssChunks`, such as:\n\n```javascript\nnew ExtractCssChunk({\n      filename: devMode ? '[name].css' : '[name].[hash].css',\n      chunkFilename: devMode ? '[id].css' : '[id].[hash].css',\n})\n```\n\n>Keep in mind, by default `[name].css` is used when `process.env.NODE_ENV === 'development'` and `[name].[contenthash].css` during production, so you can likely forget about having to pass anything.\n\n### HMR Troubleshooting\n**Blank array in HMR script?**\n\nIf you have issues with HMR, but enabled the loader, plugin, and already tried `hot: true, reloadAll:true`, then your webpack config might be more abstract than my simple lookup functions. In this case, Ive exported out the actual hot loader, you can add this manually and as long as you've got the plugin and loader -- it'll work \n\n```js\n rules: [\n      {\n        test: /\\.css$/,\n        use: [\n          ExtractCssChunks.hotLoader, // for those who want to manually force hotLoading\n          ExtractCssChunks.loader,\n          {\n            loader: 'css-loader',\n            options: {\n              modules: true,\n              localIdentName: '[name]__[local]--[hash:base64:5]',\n            },\n          },\n        ],\n      },\n    ]\n```\n\n### HMR Pitfall\n\nThe most common workflow when working with webpack is to write a \"development\" / \"production\" value in to the\n'process.env.NODE_ENV' namespace, typically, using webpack's built-in \"DefinePlugin\" plugin. e.g:\n\n```javascript\nnew webpack.DefinePlugin( {\n     'process.env': {\n        NODE_ENV: `\"${config.devMode ? 'development' : 'production'}\"`,\n      },\n} )\n```\nThe value set by the aforementioned plugin will only be available in the runtime ( when webpack's javascript output is executed ).\nIn order for this plugin to work with hot module reloading, The npm script / gulp task / grunt task etc, should be invoked with the same environment variable as shown above.\n\nFor example, when running the build using some form of npm script:\n\n```json\n{\n  \"scripts\": {\n     \"build\": \"cross-env NODE_ENV=production babel src -d dist --ignore 'src/**/*.test.js' --copy-files\"\n  }\n}\n```\n[cross-env](https://www.npmjs.com/package/cross-env) is optional but recommended. \n\n### What about Glamorous, Styled Components, Styled-Jsx, Aphrodite, etc?\n\nIf you effectively use code-splitting, **Extract Css Chunks** can be a far better option than using emerging solutions like *Glamorous*, *Styled Components*, and slightly older tools like *Aphrodite*, *Glamor*, etc. We aren't fans of either rounds of tools because of several issues, but particularly because they all have a runtime overhead. Every time your React component is rendered with those, CSS is generated and updated within the DOM. On the server, you're going to also see unnecessary cycles for flushing the CSS along the critical render path. *Next.js's* `styled-jsx`, by the way, doesn't even work on the server--*not so good when it comes to flash of unstyled content (FOUC).*\n\nThe reason **Extract CSS Chunk** can be a better option is because **we also generate multiple sets of CSS based on what is actually \"used\",** ***but without the runtime overhead***. The difference is our definition of \"used\" is modules determined *statically* (which may not in fact be rendered) vs. what is in the \"critical render path\" (as is the case with the other tools). \n\nSo yes, our CSS may be mildly larger and include unnecessary css, but our `no_css.js` bundles will be a lot smaller as they don't need to inject any styles. See, even though those solutions have the smallest possible CSS file size, their javascript bundles, **in order to continue to render your components styled properly on the client,** must contain the necessary CSS for all possibilities! Those solutions serve both your entire bundle's CSS (in your javascript) **and** the CSS flushed from the critical render path. \n\nOn top of that, those are extra packages all with a huge number of issues in their Github repos corresponding to various limitations in the CSS they generate--something that is prevented when your definition for \"CSS-in-JS\" is simply importing CSS files compiled as normal by powerful proven CSS-specific processors.\n\nLastly, those solutions don't provide cacheable stylesheets. They do a lot of work--but they will **continue** doing it for you when you could have been done in one go long ago. Cloudflare is free--serve them through their CDN and you're winning. I love true javascript in css--don't get me wrong--but first I'd have to see they generate cacheable stylesheets. In my opinion, for now, it's best for environments that natively support it such as React Native.\n\n\n### Next:\n\nNow with that out of the way, for completeness let's compare what bytes of just the CSS are sent over the wire. The difference basically is minimal. Whereas solutions that flush from the critical render path will capture no more than the precise bits of CSS from the `if/else` branches followed, **Extract Css Chunks** is all about you effectively using code-splitting to insure, for example, you don't serve your Administration Panel's CSS in your public-facing site, etc. *In other words, it's all about avoiding serving large swaths of CSS from completely different sections of your app.* ***I.e. the biggest gains available to you.*** \n\n<details>\n<summary>\n    Read more on the topic ^^\n</summary>\n\nThis is where the real problem lies--where the real amount of unnecessary CSS comes from. If you effectively code-split your app, you may end up with 10 chunks. Now you can serve just the corresponding CSS for that chunk. If you try to go even farther and remove the css not used in the render path, you're likely achieving somewhere between 1-20% of the gains you achieved by thorough code-splitting. In other words, code splitting fulfills the 80/20 rule and attains the simple sweetspot of 80% optimization you--*as a balanced, level-headed, non-neurotic and professional developer*--are looking to achieve.\n\n*In short, by putting code splitting in appropriate places you have a lot of control over the CSS files that are created and can send a sensible* ***minimal*** *amount of associated bytes over the wire for the first request, perhaps even the smallest amount of all options.* \n\nIt's our perspective that you have achieved 80-99% of the performance gains (i.e. the creation of small relevant css files) at this ***static stage***. Offloading this work to the runtime stage is ultimately nit-picking and results in diminishing returns. When you factor that your JS bundle has to contain that JS anyway, those solutions make less and less sense from the perspective of reducing bytes delivered in the initial request. \n\nThere may be other reasons to use those tools (e.g. you don't like setting up webpack configs, or somehow you're really fond of pre-creating many `<div />` elements with their styles), but we prefer a simple standards-based way (without HoCs or specialized style components) to import styles just as you would in React Native. However to give the other tools credit, many of them likely started out with a different problem motivating them: avoiding webpack configs so you can include packages and their contained CSS without client apps being required to setup something like CSS loaders in Webpack. Having your CSS completely contained in true JS has its use cases, but at the application level--especially when you're already using something like Webpack--we fail to see its benefits. About all they share is a solution to avoiding **flashes of unstyled content** (FOUC), except one can save you a lot more bytes in what you send over the wire and save you from a continual runtime overhead where it's not needed. ***Honorable Mention:*** *StyleTron's concept of \"atomic declaration-level deduplication\" where it will make a class out of, say, `color: blue` so you don't need to send redundant styles certainly is a novel innovation, but again if the code still exists in your JS and you're building an application using Webpack (instead of a package), what's the point. In fact, it just makes editing the stylesheets in your browser developer tools more complicated. One benefit of critical render path solutions is the browser can spend less time matching the smaller number of styles to new DOM nodes as they appear, but then again it also has to spend the time injecting and parsing the new styles constantly, which is likely costlier.*\n\nAs an aside, so many apps share code between web and React Native--so the answer to the styles problem must be one that is identical for both. From that perspective importing a styles object **still** makes a lot of sense. **You're not missing out on the fundamental aspect of CSS-in-JSS:** ***isolated component-level styles and the ability to import them just like any other javascript code.*** Put them in other files, and use tools like `extract-css-chunks-webpack-plugin` and your pre-processors of choice that innately get styles right for the browser. As long as you're using **CSS Modules**, you're still at the cutting edge of CSS-in-JSS. Let's just say the other tools took one wrong turn and took it too far, when we already were at our destination. \n</details>\n\n\n#### SUMMARY OF BENEFITS COMPARED TO \"CRITICAL-RENDER-PATH\" SOLUTIONS:\n\n- no continual runtime overhead during `render` using HoCs that inject styles\n- smaller JS bundles without CSS injection\n- **You DO NOT need to clutter your component code with a specialized way of applying CSS (HoCs, styled elements)!** \n- The way you import module-based styles is exactly how you would import styles in React Native that exist in a separate file, which allows for extremely interchangeable code between React Native and regular React. Hurray! \n- pretty much already does everything covered by [@vjeux's 2014 css-in-js talk](https://speakerdeck.com/vjeux/react-css-in-js), besides dead code elimination. Dead code elimination is only solved for the other tools--as per the explanation above how the CSS is in the JS anyway--so much as Webpack and Uglify can remove **JS** that is not used. Either way, it's not a stretch to eventually add this feature to `extract-text-webpack-plugin` as well as this plugin. Hey, maybe it already has it??\n\n## Emotion!\n\n[Emotion](https://github.com/tkh44/emotion) is different. They allow for the extraction of static styles via their *extract mode*. We're very much looking forward to this being the perfect companion to the css chunks approach. \n<details>\n<summary>\n    Read more on the topic ^^\n</summary>\n\nCurrently however *extract mode* does not support IE11. So that means it's a no go, but we have hopes that in the future they'll solve that problem.\n\nThe reason Emotion doesn't work in IE11+ is because they currently try to preserve any dynamic aspects of your CSS-in-JS by converting it CSS vars, which isn't supported in IE11. That was a very smart approach, but unfortunately not good enough. \n\nThe vision we'd like to see for that package is where dynamic css stays inline, and where only static CSS is extracted into stylesheets, in which case CSS vars aren't needed. I've heard from them they have some \"hidden flags\" that allow for something close to this. When, and if, they take this feature all the way, look forward to us pushing it as our recommended approach. *Go Emotion!*\n</details>\n\n## Linaria\n\nLinaria is another modern CSS-in-JSS library. It's focused around static styles, which may make it a perfect fit for usage with this plugin. Check it out:\n\nhttps://github.com/callstack/linaria\n\n## What if I don't use SSR and use html-webpack-plugin?\n\nFor that case you can use [css-chunks-html-webpack-plugin](https://github.com/teamable-software/css-chunks-html-webpack-plugin) which will extract CSS chunks paths into your HTML file.\n\n## Conclusion:\n**We love CSS modules; no less, no more.**\n\n**Long live the dream of Code Splitting Everywhere!**\n\n\n## Contributing\nWe use [commitizen](https://github.com/commitizen/cz-cli), so run `npm run cm` to make commits. A command-line form will appear, requiring you answer a few questions to automatically produce a nicely formatted commit. Releases, semantic version numbers, tags and changelogs will automatically be generated based on these commits thanks to [semantic-release](https://github.com/semantic-release/semantic-release). Be good.\n\n## More from FaceySpacey in Reactlandia\n- [redux-first-router](https://github.com/faceyspacey/redux-first-router). It's made to work perfectly with *Universal*. Together they comprise our *\"frameworkless\"* Redux-based approach to what Next.js does (splitting, SSR, prefetching, and routing). *People are lovin it by the way* 😎\n","readmeFilename":"README.md","gitHead":"9f27f1eef51972fd4ddfe0d634dfc50b9b13fa6f","bugs":{"url":"https://github.com/faceyspacey/extract-css-chunks-webpack-plugin/issues"},"_id":"extract-css-chunks-webpack-plugin@3.2.1-alpha.1","_npmVersion":"5.6.0","_nodeVersion":"9.10.0","_npmUser":{"name":"zackljackson","email":"zackary.l.jackson@gmail.com"},"dist":{"integrity":"sha512-lHrtKG9HKytyos1I61UsRkxEFAqfmPxS3aA8Sdw6/8PX4MgnZJj1cQvE7WHYBgsd7intBily9Po/eFJigAk4PQ==","shasum":"f59148fc6be9f0c05691e2f9aab406933e42cd52","tarball":"https://registry.npmjs.org/extract-css-chunks-webpack-plugin/-/extract-css-chunks-webpack-plugin-3.2.1-alpha.1.tgz","fileCount":10,"unpackedSize":55985,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbvOQBCRA9TVsSAnZWagAAvAAP/A6mIhbcs1SLJcpy3JXp\nqFcdpwbGqN0ZQnkTJ4W8dO+iPqcNtOqHXBzmXRwW0comyXO0pRlouLDg6YVJ\nrLOYABtJzAJWj7FeoRyXRGK89GkVsZLHfW7Hig0D0FiNQvF64eR8mQBA91SI\nFZGi1whznceBUCaxKnL9Ss1fHRCDACjkWZsCAYrJOaKsqIsFclV4FQjsgD9F\nDlEcvccFv/zTWF0Esnqd3fXR23aR4P/sgHyxy7w5OPv1/rAxSfcUs3a/EXV5\nD3Wgf+KCkF5kmKcc870sTZybs3v20fEaAdi7DEbufc4eN97hJ2ggTkapZs0R\nCVzMxPHZvyve+ffhkswb1WEgfLqs2G0SJrCvW/M0UNEiI4/Q8uNPijmNiD13\n+UNnuCNkHTnGY1vsLW5F+p8L4cIVBCOCE8D0m0MZJQLN2pVaFNXjhmCZ5uYg\npzFW0sCA5uuv8Tkd5GXiXCwuTIg+FFgXsLLEKl2fUTm2VwqLpVC/MoV1+8W7\nkw9xGpEFcOv8JOmyBBYapOxdR6HKUqs3R4LIIvKfOVHSCd1bk7pxWtjBOkIv\niGc57A2AlmPuPYZIzDfImZmTK48ccsyChaTa/u+CN5dj2v5Pf9MydgDIkxkR\nwtVqOPEs8lsxziy0QB7P9PtdRpD9HrRWNXRVJNc77CV+Zqzwps086RFX6KzU\nV68S\r\n=3klu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDpwcKjJ08sVh9Ow3rIjTT+E0NKHderpzqgs05M9MSQqQIgH5Xy8L3CqFKqqXq/GYUy4ZAU+aTSbglmCXU5zLcYIi8="}]},"maintainers":[{"email":"james@faceyspacey.com","name":"faceyspacey"},{"email":"zackary.l.jackson@gmail.com","name":"zackljackson"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/extract-css-chunks-webpack-plugin_3.2.1-alpha.1_1539105792956_0.9919007560218289"},"_hasShrinkwrap":false},"3.2.1":{"name":"extract-css-chunks-webpack-plugin","version":"3.2.1","author":{"name":"James Gillmore","email":"james@faceyspacey.com"},"contributors":[{"name":"Zack Jackson","email":"zack@ScriptedAlchemy.com","url":"https://github.com/ScriptedAlchemy"}],"description":"Extract CSS from chunks into stylesheets + HMR. Supports Webpack 4 + SSR","engines":{"node":">= 6.9.0 <7.0.0 || >= 8.9.0"},"main":"dist/cjs.js","types":"index.d.ts","keywords":["css","chunks","code splitting","mini-css","hot","hmr","universal","webpack","webpack 4","css-hot-loader","extract-css-chunks-webpack-plugin"],"license":"MIT","scripts":{"start":"npm run build -- -w","build":"cross-env NODE_ENV=production babel src -d dist --ignore 'src/**/*.test.js' --copy-files","clean":"del-cli dist","lint":"eslint --cache --fix src","prebuild":"npm run clean","prepublish":"npm run build","security":"nsp check","test":"jest","test:watch":"jest --watch","test:coverage":"jest --collectCoverageFrom='src/**/*.js' --coverage","test:example":"npm run build && webpack-dev-server test/manual/src/index.js --config test/manual/webpack.config.js","ci:lint":"npm run lint && npm run security","ci:test":"npm run test -- --runInBand","ci:coverage":"npm run test:coverage -- --runInBand","build:example":"npm run build && webpack-dev-server test/manual/src/index.js --open --config test/manual/webpack.config.js","cm":"git-cz","release":"standard-version","semantic-release":"semantic-release pre && npm publish && semantic-release post","travis":"npm run ci:coverage"},"peerDependencies":{"webpack":"^4.8.3"},"dependencies":{"loader-utils":"^1.1.0","lodash":"^4.17.5","normalize-url":"^1.9.1","webpack-sources":"^1.1.0"},"devDependencies":{"@webpack-contrib/eslint-config-webpack":"^2.0.4","babel-cli":"^6.26.0","babel-eslint":"^7.2.3","babel-jest":"^22.2.2","babel-loader":"^7.1.4","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-polyfill":"^6.26.0","babel-preset-env":"^1.6.1","commitizen":"^2.10.1","conventional-github-releaser":"^2.0.2","cross-env":"^5.1.3","css-loader":"^0.28.10","cz-conventional-changelog":"^2.1.0","del":"^3.0.0","del-cli":"^1.1.0","eslint":"^3.19.0","eslint-config-airbnb":"^15.0.1","eslint-plugin-flowtype":"^2.32.1","eslint-plugin-import":"^2.8.0","eslint-plugin-jsx-a11y":"^5.0.3","eslint-plugin-prettier":"^2.6.0","eslint-plugin-react":"^7.0.1","husky":"^0.14.3","jest":"^22.2.2","memory-fs":"^0.4.1","nsp":"^3.1.0","pre-commit":"^1.2.2","prettier":"^1.11.1","standard-version":"^4.4.0","webpack":"4.8.3","webpack-cli":"^2.0.13","webpack-dev-server":"^3.1.1"},"homepage":"http://github.com/faceyspacey/extract-css-chunks-webpack-plugin","repository":{"type":"git","url":"git+https://github.com/faceyspacey/extract-css-chunks-webpack-plugin.git"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"gitHead":"dd0fd2cb866c8f218df0de6a8cb1e9cfa86c5e1a","bugs":{"url":"https://github.com/faceyspacey/extract-css-chunks-webpack-plugin/issues"},"_id":"extract-css-chunks-webpack-plugin@3.2.1","_npmVersion":"5.6.0","_nodeVersion":"9.10.0","_npmUser":{"name":"zackljackson","email":"zackary.l.jackson@gmail.com"},"dist":{"integrity":"sha512-6ev0KuxCrffDLjycjG46OcVyCGZNfL+M7MySWHW/1M/wRCV/DTZnNAnWa8f7ti/kU4OnkyTfv8geAUWutAjd3w==","shasum":"d8ee9cacbfe6339522fced41efc7976f4f77243a","tarball":"https://registry.npmjs.org/extract-css-chunks-webpack-plugin/-/extract-css-chunks-webpack-plugin-3.2.1.tgz","fileCount":10,"unpackedSize":56912,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbzz6dCRA9TVsSAnZWagAAupkP/2YJ8iIzAj3YuNwNZy5w\nphudR3HMVAm5FEZN9C3Psqvkv+rkZIDn5ibkdwcmOh8pvfQW0L6Mae8h6xvj\nVxpI/Z05XxghrmQsVJW9Rr1N6qCbiWyAqMxDT3mSHYF7mK2Mz3ghPezvjgd+\nSZXf+KSZI+NTBWQIbApT480Ojy8z5SgfSNoVeWJbJX45pkWX8+JgHTDhMWix\nnaBZ00/6IGT4s+hpBo9zbJH8v+484RxKM2tIAguKiqSfGf3/QmAVKxlgTw+P\nEU9xoXbX4PsB8ArX0R7xpcO2GxtqLw1BmcOhZ/sE0nEAWBhcKsZt2yn7HjeH\naUIFFsB2NSgbEk4Rf8ivQMPmgJ1XlDY0cqGZt3goRZm3GdD5VHUFpIEVRCrM\niLg9qtIvNjU5R5MWkMJdhfTHvM8K02yIKoC705XTZXweNXTT70AN0nxPK51a\nRlccrReW5cmyZjkrY0wuK7fo9CGIMX1GjX7nOz79kDywBe4oYkkbOTBjQI9m\nbZ1lHxQMqnB6AH0cPtf3WU5+bVClgL8mJ1bBYPV/dO4LemwDlU8sQrmUVI/5\nipEZgYnIRgMmJ1367aGDCrRSEfFgVh7FeJ2LvJnkJmATTN8KIop3JtsVfmWT\nbYVxZdvgj9h5Z1jCFSg0trVI+UYZrWaVfFhSM2aglbVIjwGSEM6pdqUhc/He\nSPyL\r\n=wImb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHlAX+XUNyN8UvAWB91LbI30c6BVoe4RJHxTdCym9y5EAiEAmASwlGGgwoXdU6b0O2R46KcOaauDxEllvuKDSioLwMA="}]},"maintainers":[{"email":"james@faceyspacey.com","name":"faceyspacey"},{"email":"zackary.l.jackson@gmail.com","name":"zackljackson"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/extract-css-chunks-webpack-plugin_3.2.1_1540308636429_0.3947689739631035"},"_hasShrinkwrap":false},"3.3.0":{"name":"extract-css-chunks-webpack-plugin","version":"3.3.0","author":{"name":"James Gillmore","email":"james@faceyspacey.com"},"contributors":[{"name":"Zack Jackson","email":"zack@ScriptedAlchemy.com","url":"https://github.com/ScriptedAlchemy"}],"description":"Extract CSS from chunks into stylesheets + HMR. Supports Webpack 4 + SSR","engines":{"node":">= 6.9.0 <7.0.0 || >= 8.9.0"},"main":"dist/cjs.js","types":"index.d.ts","keywords":["css","chunks","code splitting","mini-css","hot","hmr","universal","webpack","webpack 4","css-hot-loader","extract-css-chunks-webpack-plugin"],"license":"MIT","scripts":{"start":"npm run build -- -w","build":"cross-env NODE_ENV=production babel src -d dist --ignore 'src/**/*.test.js' --copy-files","clean":"del-cli dist","lint":"eslint --cache --fix src","prebuild":"npm run clean","prepublishOnly":"npm run build","security":"nsp check","test":"jest","test:watch":"jest --watch","test:coverage":"jest --collectCoverageFrom='src/**/*.js' --coverage","test:example":"npm run build && webpack-dev-server test/manual/src/index.js --config test/manual/webpack.config.js","ci:lint":"npm run lint && npm run security","ci:test":"npm run test -- --runInBand","ci:coverage":"npm run test:coverage -- --runInBand","build:example":"npm run build && webpack-dev-server test/manual/src/index.js --open --config test/manual/webpack.config.js","cm":"git-cz","semantic-release":"npx semantic-release","travis":"npm run ci:coverage","defaults":"webpack-defaults"},"peerDependencies":{"webpack":"^4.4.0"},"dependencies":{"loader-utils":"^1.1.0","lodash":"^4.17.11","normalize-url":"^4.1.0","schema-utils":"^1.0.0","webpack-sources":"^1.1.0"},"devDependencies":{"@commitlint/cli":"^6.1.3","@commitlint/config-conventional":"^6.1.3","@webpack-contrib/eslint-config-webpack":"^2.0.4","babel-cli":"^6.26.0","babel-jest":"^22.2.2","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-polyfill":"^6.26.0","babel-preset-env":"^1.6.1","conventional-github-releaser":"^2.0.2","cross-env":"^5.1.3","css-loader":"^0.28.10","del":"^3.0.0","del-cli":"^1.1.0","eslint":"^4.17.0","eslint-plugin-import":"^2.8.0","eslint-plugin-prettier":"^2.6.0","file-loader":"^1.1.11","husky":"^0.14.3","jest":"^22.2.2","lint-staged":"^6.1.0","memory-fs":"^0.4.1","pre-commit":"^1.2.2","prettier":"^1.11.1","semantic-release":"^15.13.1","webpack":"^4.14.0","webpack-cli":"^2.0.13","webpack-defaults":"^2.3.0","webpack-dev-server":"^3.1.1"},"homepage":"http://github.com/faceyspacey/extract-css-chunks-webpack-plugin","repository":{"type":"git","url":"git+https://github.com/faceyspacey/extract-css-chunks-webpack-plugin.git"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"gitHead":"13fb00eded02d2692c013be0854871f7b907d356","bugs":{"url":"https://github.com/faceyspacey/extract-css-chunks-webpack-plugin/issues"},"_id":"extract-css-chunks-webpack-plugin@3.3.0","_npmVersion":"6.5.0","_nodeVersion":"11.6.0","_npmUser":{"name":"zackljackson","email":"zackary.l.jackson@gmail.com"},"dist":{"integrity":"sha512-xwwgpBhSjwn7R0TnUvTCVEsL2jIfr6cS4LSoogtpxlj1SFO5MQNwGbDdxIFeuLGixIBn6g7pGi7gqycxtwoPvQ==","shasum":"1809d576a21a7fe01b176c94b7345df8a25195b5","tarball":"https://registry.npmjs.org/extract-css-chunks-webpack-plugin/-/extract-css-chunks-webpack-plugin-3.3.0.tgz","fileCount":10,"unpackedSize":62335,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcJTupCRA9TVsSAnZWagAA9WAP/1HfRslTA1+Z6JlhRXPH\n6Q0bl1WjM//kQP5QFgHDFpVdjx85bqOuhNI4lQWEEXdtTL07o9YmH1CAvd/u\n4jXKnxOL6Jp0YHi1Q6IcjQRC1vqtvMzWQUajZrrANamWDgOH6OiicD5KQMo3\nouXf2G0omkGY4VwgiZNacL9HYqOUdMjOinZpHcyvcU1Y/tu8z6rNGMG26DAC\nIkNqzzeiEhCSoH4eQfW7p52FTHRY+8f4Ytc6dpe1LI1uBdW36gUit8KiRc0l\n7WdBUd7l7oMi8s7YuU/mjE2sHkfFYWQk9pPJw7iolr8y2VYh2OB0NhYHh5sJ\nBU2YHFEL9mY84GZAy2pFAbDIQnQToCA/QyZ9jJUGmCm6LwGypcD4Bnzn4bzh\nvVDwMk+sG4s1P2oVmySYQ5W38Kbc7+J7FiPk8p1pUzmlVJfnXJ6qImOO5Pjc\nyv8D9ZULJBKtGgU1cRVEMLrvHSBz0kDIYbHHOtiqZgvkaQtzjmyMabvc3P7+\ncjNJDC4ic0Ibz/WdexSjmtVYs/EByAyxLZ6U3+7tInqjiDKbCpTpqibCEYNB\nt2KAOcAoqQ64ZjgYbbX24ATVbRelWJ2oVJ8WeY+AyhE+ErBxsbqtmABqAvgD\n5Eg0L0T6tHG26Yc3gQAuY8lkAbJyiefrHU1l8Cc7koa8XXz+Wf36vSLic75W\nMwVA\r\n=dfUX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICOs6ZX1BHzEHF71i1b9UIQZqWnrpUKP3aenIRH6aJDLAiEA+1jVv8H4DD1ZQKAoBHSV4xWx2uHQmriI3oTVubOgKvw="}]},"maintainers":[{"email":"james@faceyspacey.com","name":"faceyspacey"},{"email":"zackary.l.jackson@gmail.com","name":"zackljackson"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/extract-css-chunks-webpack-plugin_3.3.0_1545943976093_0.6692618172031599"},"_hasShrinkwrap":false},"3.3.1":{"name":"extract-css-chunks-webpack-plugin","version":"3.3.1","author":{"name":"James Gillmore","email":"james@faceyspacey.com"},"contributors":[{"name":"Zack Jackson","email":"zack@ScriptedAlchemy.com","url":"https://github.com/ScriptedAlchemy"}],"description":"Extract CSS from chunks into stylesheets + HMR. Supports Webpack 4 + SSR","engines":{"node":">= 6.9.0 <7.0.0 || >= 8.9.0"},"main":"dist/cjs.js","types":"index.d.ts","keywords":["css","chunks","code splitting","mini-css","hot","hmr","universal","webpack","webpack 4","css-hot-loader","extract-css-chunks-webpack-plugin"],"license":"MIT","scripts":{"start":"npm run build -- -w","build":"cross-env NODE_ENV=production babel src -d dist --ignore 'src/**/*.test.js' --copy-files","clean":"del-cli dist","lint":"eslint --cache --fix src","prebuild":"npm run clean","prepublishOnly":"npm run build","security":"nsp check","test":"jest","test:watch":"jest --watch","test:coverage":"jest --collectCoverageFrom='src/**/*.js' --coverage","test:example":"npm run build && webpack-dev-server test/manual/src/index.js --config test/manual/webpack.config.js","ci:lint":"npm run lint && npm run security","ci:test":"npm run test -- --runInBand","ci:coverage":"npm run test:coverage -- --runInBand","build:example":"npm run build && webpack-dev-server test/manual/src/index.js --open --config test/manual/webpack.config.js","cm":"git-cz","semantic-release":"npx semantic-release","travis":"npm run ci:coverage","defaults":"webpack-defaults"},"peerDependencies":{"webpack":"^4.4.0"},"dependencies":{"loader-utils":"^1.1.0","lodash":"^4.17.11","normalize-url":"^4.1.0","schema-utils":"^1.0.0","webpack-sources":"^1.1.0"},"devDependencies":{"@commitlint/cli":"^6.1.3","@commitlint/config-conventional":"^6.1.3","@webpack-contrib/eslint-config-webpack":"^2.0.4","babel-cli":"^6.26.0","babel-jest":"^22.2.2","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-polyfill":"^6.26.0","babel-preset-env":"^1.6.1","conventional-github-releaser":"^2.0.2","cross-env":"^5.1.3","css-loader":"^0.28.10","del":"^3.0.0","del-cli":"^1.1.0","eslint":"^4.17.0","eslint-plugin-import":"^2.8.0","eslint-plugin-prettier":"^2.6.0","file-loader":"^1.1.11","husky":"^0.14.3","jest":"^22.2.2","lint-staged":"^6.1.0","memory-fs":"^0.4.1","pre-commit":"^1.2.2","prettier":"^1.11.1","semantic-release":"^15.13.1","webpack":"^4.14.0","webpack-cli":"^2.0.13","webpack-defaults":"^2.3.0","webpack-dev-server":"^3.1.1"},"homepage":"http://github.com/faceyspacey/extract-css-chunks-webpack-plugin","repository":{"type":"git","url":"git+https://github.com/faceyspacey/extract-css-chunks-webpack-plugin.git"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"gitHead":"3df96a6b54161cdf8de44fae35626170425e75c9","bugs":{"url":"https://github.com/faceyspacey/extract-css-chunks-webpack-plugin/issues"},"_id":"extract-css-chunks-webpack-plugin@3.3.1","_npmVersion":"6.5.0","_nodeVersion":"11.6.0","_npmUser":{"name":"zackljackson","email":"zackary.l.jackson@gmail.com"},"dist":{"integrity":"sha512-/eyjr3P3sHaqr8sYXoY2Y5b4S9Z2KaPOwXYZ0KDrvrly0gRIR+UFbBR3zA8XIystwmqDtE5Yi9XiG/RkWop54A==","shasum":"c91f4b593a379a8c85f23cb9e17c895261f1c5df","tarball":"https://registry.npmjs.org/extract-css-chunks-webpack-plugin/-/extract-css-chunks-webpack-plugin-3.3.1.tgz","fileCount":10,"unpackedSize":80179,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcKV8yCRA9TVsSAnZWagAAo/gP/3vsonQ5WtWS/qPs/5+7\n5y0YocBmFIuSdtb+nQatRLduM9TJXViiDGvs6x/0lGHIxmSbHXWInwsU/e8n\n08OpiB+ucW7lVDPsmtLdfoRR048iGxj0B2u7wPhpUWM/7aNID+mmoj8VlPTx\n62Z+ob2BGPMg7FN6pitumUN6W9hoTdDg4abQQq86rMbrCa2fvFTTl74o0RZk\nk/0ZDBtq8f9GNP964umD0732yZMhbkYVO+GtoDnwAKlB4iiB8YnLQxxXhGyE\nT1449vNkgMdgWxNq+YxbmtADqYZwX3ukYczX5ZSfzxP61dPHh0628arqBBTq\nOvvDyBIBb/jm9zf8NbI4nPqFX24chpPAkZt/zsBgo1wCW1VH0I8dDZCns0FD\ndrOvJC93EaJ86QSoHLx43VcChxUaeOo6EYL+toCmEZK+h/OWvvHiV1kokRcF\n2b7+z7pZXQEM9hCnwyxsSQJAo+GjyeOhxgTujkh+bdpolU0aDeoULK9bmu+q\nyGRJequ4eZeyWOSNFo0gXnt4egt+AlBlVHJlko+TFghY1FiIGthsJBxxjh5w\n3obsUne8YdAbd/pLGqNqD4wYXB080Drc9AjJ+ncf1HnCFyJ8mDEXSVwSL4O4\n4aUffxUqsXbGoXTdwq6R2hXLGsHgKubuZsIcfWNKBQoPP+pIla6O9Oqr95tM\nAEHZ\r\n=RSjF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDaopwfwMhPQ8tlgYiWc1RTFj2+YRk3PEsu6Zm/ganL3wIhAPLnrnNzyevVwk9oWgYtpRR9YdEGJpWcU33Pkz9PEY3Q"}]},"maintainers":[{"email":"james@faceyspacey.com","name":"faceyspacey"},{"email":"zackary.l.jackson@gmail.com","name":"zackljackson"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/extract-css-chunks-webpack-plugin_3.3.1_1546215217203_0.5361775162023743"},"_hasShrinkwrap":false},"3.3.2":{"name":"extract-css-chunks-webpack-plugin","version":"3.3.2","author":{"name":"James Gillmore","email":"james@faceyspacey.com"},"contributors":[{"name":"Zack Jackson","email":"zack@ScriptedAlchemy.com","url":"https://github.com/ScriptedAlchemy"}],"description":"Extract CSS from chunks into stylesheets + HMR. Supports Webpack 4 + SSR","engines":{"node":">= 6.9.0 <7.0.0 || >= 8.9.0"},"main":"dist/cjs.js","types":"index.d.ts","keywords":["css","chunks","code splitting","mini-css","hot","hmr","universal","webpack","webpack 4","css-hot-loader","extract-css-chunks-webpack-plugin"],"license":"MIT","scripts":{"start":"npm run build -- -w","build":"cross-env NODE_ENV=production babel src -d dist --ignore 'src/**/*.test.js' --copy-files","clean":"del-cli dist","lint":"eslint --cache --fix src","prebuild":"npm run clean","prepublishOnly":"npm run build","security":"nsp check","test":"jest","test:watch":"jest --watch","test:coverage":"jest --collectCoverageFrom='src/**/*.js' --coverage","test:example":"npm run build && webpack-dev-server test/manual/src/index.js --config test/manual/webpack.config.js","ci:lint":"npm run lint && npm run security","ci:test":"npm run test -- --runInBand","ci:coverage":"npm run test:coverage -- --runInBand","build:example":"npm run build && webpack-dev-server test/manual/src/index.js --open --config test/manual/webpack.config.js","cm":"git-cz","semantic-release":"npx semantic-release","travis":"npm run ci:coverage","defaults":"webpack-defaults"},"peerDependencies":{"webpack":"^4.4.0"},"dependencies":{"loader-utils":"^1.1.0","lodash":"^4.17.11","normalize-url":"^4.1.0","schema-utils":"^1.0.0","webpack-sources":"^1.1.0"},"devDependencies":{"@commitlint/cli":"^6.1.3","@commitlint/config-conventional":"^6.1.3","@webpack-contrib/eslint-config-webpack":"^2.0.4","babel-cli":"^6.26.0","babel-jest":"^22.2.2","babel-plugin-transform-es2015-arrow-functions":"^6.22.0","babel-plugin-transform-es2015-block-scoping":"^6.26.0","babel-plugin-transform-es2015-template-literals":"^6.22.0","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-polyfill":"^6.26.0","babel-preset-env":"^1.6.1","conventional-github-releaser":"^2.0.2","cross-env":"^5.1.3","css-loader":"^0.28.10","del":"^3.0.0","del-cli":"^1.1.0","eslint":"^4.17.0","eslint-plugin-import":"^2.8.0","eslint-plugin-prettier":"^2.6.0","file-loader":"^1.1.11","husky":"^0.14.3","jest":"^22.2.2","lint-staged":"^6.1.0","memory-fs":"^0.4.1","pre-commit":"^1.2.2","prettier":"^1.11.1","semantic-release":"^15.13.1","webpack":"^4.14.0","webpack-cli":"^2.0.13","webpack-defaults":"^2.3.0","webpack-dev-server":"^3.1.1"},"homepage":"http://github.com/faceyspacey/extract-css-chunks-webpack-plugin","repository":{"type":"git","url":"git+https://github.com/faceyspacey/extract-css-chunks-webpack-plugin.git"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"gitHead":"43e1672cd231301581df929a4159c7b716e64065","bugs":{"url":"https://github.com/faceyspacey/extract-css-chunks-webpack-plugin/issues"},"_id":"extract-css-chunks-webpack-plugin@3.3.2","_npmVersion":"6.5.0","_nodeVersion":"11.6.0","_npmUser":{"name":"zackljackson","email":"zackary.l.jackson@gmail.com"},"dist":{"integrity":"sha512-7XNEW3AiFiWqOCxJyjNDMqk+PMwqSQhrAr/NobhlI1fxb0a4AqlgCn3+dxlcqTlD+MhRz0jI4u3bXmw3jyoBVQ==","shasum":"c99ba78be7c670e1bbd1dcffe3e272ab5e88026d","tarball":"https://registry.npmjs.org/extract-css-chunks-webpack-plugin/-/extract-css-chunks-webpack-plugin-3.3.2.tgz","fileCount":10,"unpackedSize":63626,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcKkxLCRA9TVsSAnZWagAAmScP/1aGx2LyAcQ00AUlBZGk\nrwTlD0sBA9QicXkbBK1btjPcHGbBdMIp8GINGkrHcN449Dtk02tiu9WrQJ8w\ntOZ49GEJhBUrZw0CayeMLtsehuuqHPnP8vQ2wgY/GGtMrAFi2tVaPPz2vtCh\nhbSWAT/lOwLDNy7aYdiE3bmZm2v/Qo2/lkBRK53pPxKDu2PPxwmM4yECxmvI\nIB1SOQH13bUcBqAj9Sm2ZlwuhlRXbKkQEMXyuFePr60gdZQq62/250ujRH0n\n78JW1emI7DhLLiM3TA9XWSCfmtFi4eCLmoNoFPmMgcy6vGr1t/fQS53onf1f\n/1qjW+ja4m+3HZH0tixH7QH+7KDcHLzpuz7zV4VoQPf2krIHfV1SjJ3VQ4wN\nfY5txLT5/eoFURPd8hA+wDiuB3cA6EgJVpoBrkzBZLFsuNj4NUhDZKxq4jpl\nio6i9IcGlW8f7zbSjQQmZgnjV+UXZx7nEEeGCIywyQ+JN6gIGXjmYuAxSn/o\nCt8k2EIADm75YkfK1V44QHWMOs5GLzo/omZrJ89wzlq4CdOFxW+29N4o0tUG\n3+EGK9mu0MO3zeA+I7H4XDqY6xELxYmgFW7olU71wgB5csLqmwA/h2BCU4fg\nY4BD61NjwWEAA26pdoWReLLslED+cjcEQ6KwF4wxfzrXGLVnaHxoIN1c0Rfh\nAi4S\r\n=t3zS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIALL3Kaqq1WNs+xNeVKXG5H2wDIL47vaTP0NMOcTPekbAiBI4b+CXXxGo4+rBEs2BtB7GovSEVu6bJXTyvUbrFosCQ=="}]},"maintainers":[{"email":"james@faceyspacey.com","name":"faceyspacey"},{"email":"zackary.l.jackson@gmail.com","name":"zackljackson"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/extract-css-chunks-webpack-plugin_3.3.2_1546275914428_0.40121428253340796"},"_hasShrinkwrap":false},"4.0.0-beta.1":{"name":"extract-css-chunks-webpack-plugin","version":"4.0.0-beta.1","description":"Extract CSS from chunks into stylesheets + HMR. Supports Webpack 4 + SSR","license":"MIT","author":{"name":"James Gillmore","email":"james@faceyspacey.com"},"contributors":[{"name":"Zack Jackson","email":"zack@ScriptedAlchemy.com","url":"https://github.com/ScriptedAlchemy"}],"homepage":"http://github.com/faceyspacey/extract-css-chunks-webpack-plugin","repository":{"type":"git","url":"git+https://github.com/faceyspacey/extract-css-chunks-webpack-plugin.git"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"keywords":["css","chunks","code splitting","mini-css","hot","hmr","universal","webpack","webpack 4","css-hot-loader","extract-css-chunks-webpack-plugin"],"main":"dist/cjs.js","engines":{"node":">= 6.9.0 <7.0.0 || >= 8.9.0"},"scripts":{"start":"npm run build -- -w","build":"cross-env NODE_ENV=production babel src -d dist --ignore 'src/**/*.test.js' --copy-files","clean":"del-cli dist","commitlint":"commitlint","commitmsg":"commitlint -e $GIT_PARAMS","lint":"eslint --cache src test","ci:lint:commits":"commitlint --from=${CIRCLE_BRANCH} --to=${CIRCLE_SHA1}","lint-staged":"lint-staged","prebuild":"npm run clean","prepublish":"npm run build","release":"standard-version","release:ci":"conventional-github-releaser -p angular","release:validate":"commitlint --from=$(git describe --tags --abbrev=0) --to=$(git rev-parse HEAD)","security":"npm audit","test":"jest","test:watch":"jest --watch","test:coverage":"jest --collectCoverageFrom='src/**/*.js' --coverage","test:manual":"webpack-dev-server test/manual/src/index.js --open --config test/manual/webpack.config.js","ci:lint":"npm run lint && npm run security","ci:test":"npm run test -- --runInBand","ci:coverage":"npm run test:coverage -- --runInBand","defaults":"webpack-defaults"},"peerDependencies":{"webpack":"^4.4.0"},"dependencies":{"loader-utils":"^1.1.0","normalize-url":"^3.0.0","schema-utils":"^1.0.0","webpack-sources":"^1.1.0"},"devDependencies":{"@commitlint/cli":"^6.1.3","@commitlint/config-conventional":"^6.1.3","@webpack-contrib/eslint-config-webpack":"^2.0.4","babel-cli":"^6.26.0","babel-jest":"^22.2.2","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-polyfill":"^6.26.0","babel-preset-env":"^1.6.1","conventional-github-releaser":"^2.0.2","cross-env":"^5.1.3","css-loader":"^0.28.10","del":"^3.0.0","del-cli":"^1.1.0","es-check":"^5.0.0","eslint":"^4.17.0","eslint-plugin-import":"^2.8.0","eslint-plugin-prettier":"^2.6.0","file-loader":"^1.1.11","husky":"^0.14.3","jest":"^22.2.2","lint-staged":"^6.1.0","memory-fs":"^0.4.1","pre-commit":"^1.2.2","prettier":"^1.11.1","semantic-release":"^15.13.1","webpack":"^4.28.0","webpack-cli":"^2.0.13","webpack-defaults":"^2.3.0","webpack-dev-server":"^3.1.14"},"pre-commit":"lint-staged","lint-staged":{"*.js":["eslint --fix","git add"]},"readme":"<a href=\"https://gitter.im/Reactlandia/Lobby\" target=\"_blank\">\n  <img alt=\"Edit Redux-First Router Demo\" src=\"http://cdn.reactlandia.com/chat-badge-reactlandia.png\">\n</a>\n\n\n# extract-css-chunks-webpack-plugin\n\n<p align=\"center\">\n  <a href=\"https://www.npmjs.com/package/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://img.shields.io/npm/v/extract-css-chunks-webpack-plugin.svg\" alt=\"Version\" />\n  </a>\n\n  <a href=\"https://travis-ci.org/faceyspacey/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://travis-ci.org/faceyspacey/extract-css-chunks-webpack-plugin.svg?branch=master\" alt=\"Build Status\" />\n  </a>\n\n  <a href=\"https://www.npmjs.com/package/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://img.shields.io/npm/dt/extract-css-chunks-webpack-plugin.svg\" alt=\"Downloads\" />\n  </a>\n\n  <a href=\"https://www.npmjs.com/package/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://img.shields.io/npm/dm/extract-css-chunks-webpack-plugin.svg\" alt=\"License\" />\n  </a>\n  \n  <a href=\"https://www.npmjs.com/package/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://img.shields.io/npm/l/extract-css-chunks-webpack-plugin.svg\" alt=\"License\" />\n  </a>\n</p>\n\n<h2 align=\"center\">🍾🍾🍾It's our absolute pleasure to announce Webpack 4 Support 🚀🚀🚀</h2>\n\n> **HEADLINES (May 2018): Now Independently supports Webpack 4:** \nYep that's right. The universal family is now fully Webpack 4. Thank you to all our users for your loyalty and patience! If you love Universal, then you are gonna fall head over heels when we bring out the main course! \n\nSo... why did we rebuild `extract-css-chunks`? What does it offer? \n\nIt's got all the goodness of `mini-css-extract-plugin` but with 2 gleaming, sought after benefits. \n\nCompared to the existing loaders, we are offering a single solution as opposed to needing to depend on multiple loaders to cater for different features:\n\n## Perks\n* **HMR:** It also has first-class support for **Hot Module Replacement** across ALL those css files/chunks!!!\n* cacheable stylesheets \n* smallest total bytes sent compared to \"render-path\" css-in-js solutions that include your CSS definitions in JS\n* Faster than the V2!\n* Async loading\n* No duplicate compilation (performance)\n* Easier to use\n* Specific to CSS\n* SSR Friendly development build, focused on frontend DX\n* Works seamlessly with the Universal family\n* Works fantastically as a standalone style loader (You can use it for any webpack project! with no extra dependencies!)\n\nAdditionally, if you are already a user of the universal family -- we will be waving goodbye to the mandatory ```window.__CSS_CHUNKS__```.\n\nThe functionality is still available to you via chunk flushing, and it can come in super handy when needing to easily resolve style assets as urls that might need to be passed to a third party.\n\n## Webpack 4 Standalone Installation:\n\nIf you are just looking for something that works like `mini-css-extract-plugin` but with HMR, then look no further.\n\nNOTE: We have aligned out loader implementation to be the same as `mini-css-extract-plugin` \n\n**If you already use `mini-css-extract-plugin`, then you can just change the `require` statement - it's that easy**\n\n```\nyarn add --dev extract-css-chunks-webpack-plugin\n```\n\n*webpack.config.js:*\n```js\nconst ExtractCssChunks = require(\"extract-css-chunks-webpack-plugin\")\n\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [\n           ExtractCssChunks.loader,\n           \"css-loader\"\n         ]\n      }\n    ]\n  },\n  plugins: [\n    new ExtractCssChunks(\n        {\n          // Options similar to the same options in webpackOptions.output\n          // both options are optional\n          filename: \"[name].css\",\n          chunkFilename: \"[id].css\",\n          hot: true, // if you want HMR - we try to automatically inject hot reloading but if it's not working, add it to the config\n          orderWarning: true, // Disable to remove warnings about conflicting order between imports\n          reloadAll: true, // when desperation kicks in - this is a brute force HMR flag\n          cssModules: true // if you use cssModules, this can help.\n        }\n    ),\n  ]\n}\n```\n\n*webpack.server.config.js*\n\nThe server needs to be handled differently, we still want one chunk. Luckily webpack 4 supports **LimitChunkCountPlugin**\n\n```js\nnew webpack.optimize.LimitChunkCountPlugin({\n    maxChunks: 1\n})\n```\n\n\n### What about Webpack 3?\nThis is a breaking change. The entire loader has been fundamentally rewritten specifically for Webpack 4. Aiming to support our existing user base, allowing them to upgrade their infrastructure to support Webpack 4 based universally code-split server-side rendered react applications. \n\nThere have been some challenges along the way since the release of webpack 4. Ultimately the only remaining hurdle is code split, async style loading. \n\nIf you do need Webpack 3, make sure to stick with the latest `v2.x.x` release. `v3.x.x` is only intended for users with Webpack 4\n\n\n\n\n*Note: this is a companion package to:*\n- [webpack-flush-chunks](https://github.com/faceyspacey/webpack-flush-chunks) \n- [react-universal-component](https://github.com/faceyspacey/react-universal-component)\n- [babel-plugin-universal-import](https://github.com/faceyspacey/babel-plugin-universal-import) ***or*** [babel-plugin-dual-import](https://github.com/faceyspacey/babel-plugin-dual-import)\n\n\n## Recommended Installation For Universal\n```\nyarn add react-universal-component webpack-flush-chunks\nyarn add --dev extract-css-chunks-webpack-plugin babel-plugin-universal-import\n```\n\n*.babelrc:*\n```js\n{\n  \"plugins\": [\"universal-import\"]\n}\n```\nThe main thing is you need to cater to the new chunking system of webpack!\nWith **webpack.optimize.CommonsChunkPlugin** plugin no longer part of Webpack 4, we need another way to define the code-splitting. Luckily we have `optimization` configs built into webpack now\n\n> There are more aggressive ways to code split, thanks to webpack 4. Check out the RUC Readme if you are looking for a more aggressive code split optimization configuration. These are just examples, you should be able to configure them as you see fit\n\n- `splitChunks`: Adding this to your `dev-webpack` will help with HMR when changing file names (or moving the files) which are dynamically imported. If you dont add this to your dev-webpack you might get this error: `Runtime TypeError: Cannot read property 'call' of undefined at __webpack_require__`. Could be related to this webpack issue: https://github.com/webpack/webpack/issues/6094. Adding it to your `prod-webpack` could unfortunately increase your total file size about 15% (in my test project), this is because you are changing webpacks defualt `chunks: async` to `chunks: 'initial'`\n- `runtimeChunk`: removed a hmr warning in chrome dev console, which got printed when starting the dev server. What it does and why it is needed together with `bootstrap` would be nice if someone else could make a PR for.\n- `minimizer: { UglifyJSPlugin`: Override the default UglifyjsWebpackPlugin minimizer with custom settings. These settings are probably default by now. They didnt do anything to the bundle size in my test project. Install instructions: https://webpack.js.org/plugins/uglifyjs-webpack-plugin/\n\n*webpack.config.js:*\n```js\nconst ExtractCssChunks = require(\"extract-css-chunks-webpack-plugin\")\nconst UglifyJsPlugin = require('uglifyjs-webpack-plugin');\n\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [\n          ExtractCssChunks.loader,\n          {\n            loader: 'css-loader',\n            options: {\n              modules: true,\n              localIdentName: '[name]__[local]--[hash:base64:5]',\n            },\n          },\n        ],\n      },\n    ],\n  },\n  optimization: {\n      // FOR PRODUCTION\n      minimizer: [\n          new UglifyJsPlugin({\n              uglifyOptions: {\n                  output: {\n                      comments: false,\n                      ascii_only: true\n                  },\n                  compress: {\n                      comparisons: false\n                  }\n              }\n          })\n      ],\n      // END\n      // NEEDED BOTH IN PROD AND DEV BUILDS\n      runtimeChunk: {\n          name: 'bootstrap'\n      },\n      splitChunks: {\n          chunks: 'initial',\n          cacheGroups: {\n              vendors: {\n                  test: /[\\\\/]node_modules[\\\\/]/,\n                  name: 'vendor'\n              }\n          }\n      }\n  },\n  plugins: [\n    new ExtractCssChunks({hot:true, cssModules: true}), //if you want HMR - we try to automatically inject hot reloading but if it's not working, add it to the config\n  ]\n};\n```\n\n## Desired Output\nHere's the sort of CSS you can expect to serve:\n\n```\n<head>\n\t<link rel='stylesheet' href='/static/main.css' />\n\t<link rel='stylesheet' href='/static/0.css' />\n\t<link rel='stylesheet' href='/static/7.css' />\n</head> \n\n<body>\n\t<div id=\"react-root\"></div>\n\t\n\t<script type='text/javascript' src='/static/vendor.js'></script>\n\t<script type='text/javascript' src='/static/0.js'></script>\n\t<script type='text/javascript' src='/static/7.js'></script>\n\t<script type='text/javascript' src='/static/main.js'></script>\n</body>\n```\n\nIf you need to resolve your stylesheets on the client side, for whatever reason. \n\n[webpack-flush-chunks](https://github.com/faceyspacey/webpack-flush-chunks) will scoop up the exact stylesheets to embed in your response. It will give you an object which can be embedded on page\n\nHere's how you do it:\n\n\n*src/components/App.js:*\n```js\nconst UniversalComponent = universal(props => import(`./${props.page}`))\n\n<UniversalComponent page='Foo' />\n```\n\n*server/render.js:*\n```js\nimport { flushChunkNames } from 'react-universal-component/server'\nimport flushChunks from 'webpack-flush-chunks'\n\nconst app = ReactDOMServer.renderToString(<App />)\nconst { js, styles, cssHash } = flushChunks(webpackStats, {\n  chunkNames: flushChunkNames()\n})\n\nres.send(`\n  <!doctype html>\n  <html>\n    <head>\n      ${styles}\n    </head>\n    <body>\n      <div id=\"root\">${app}</div>\n      <!-- not needed unless you want to access css chunks urls manually  -->\n      ${cssHash}\n      <!-- extract-css-chunks takes care of loading the css assets automatically -->\n      ${js}\n    </body>\n  </html>\n`)\n```\n\n***As for asynchronous calls to `import()` on user navigation,*** [babel-plugin-universal-import](https://github.com/faceyspacey/babel-plugin-universal-import) is required if you're using [react-universal-component](https://github.com/faceyspacey/react-universal-component). And if you aren't, you must use: [babel-plugin-dual-import](https://github.com/faceyspacey/babel-plugin-dual-import). \n\n\nThese babel plugins request both your js + your css. *Very Nice!* This is the new feature of the 2.0. Read *Sokra's* (author of webpack) article on how [on how this is the future of CSS for webpack](https://medium.com/webpack/the-new-css-workflow-step-1-79583bd107d7). Use this and be in the future today.\n\n\n## API \nYou can pass the same options as `mini-css-extract` to `new ExtractCssChunks`, such as:\n\n```javascript\nnew ExtractCssChunk({\n      filename: devMode ? '[name].css' : '[name].[hash].css',\n      chunkFilename: devMode ? '[id].css' : '[id].[hash].css',\n})\n```\n\n>Keep in mind, by default `[name].css` is used when `process.env.NODE_ENV === 'development'` and `[name].[contenthash].css` during production, so you can likely forget about having to pass anything.\n\n### HMR Troubleshooting\n**Blank array in HMR script?**\n\nIf you have issues with HMR, but enabled the loader, plugin, and already tried `hot: true, reloadAll:true`, then your webpack config might be more abstract than my simple lookup functions. In this case, Ive exported out the actual hot loader, you can add this manually and as long as you've got the plugin and loader -- it'll work \n\n```js\n rules: [\n      {\n        test: /\\.css$/,\n        use: [\n          ExtractCssChunks.hotLoader, // for those who want to manually force hotLoading\n          ExtractCssChunks.loader,\n          {\n            loader: 'css-loader',\n            options: {\n              modules: true,\n              localIdentName: '[name]__[local]--[hash:base64:5]',\n            },\n          },\n        ],\n      },\n    ]\n```\n\n### HMR Pitfall\n\nThe most common workflow when working with webpack is to write a \"development\" / \"production\" value in to the\n'process.env.NODE_ENV' namespace, typically, using webpack's built-in \"DefinePlugin\" plugin. e.g:\n\n```javascript\nnew webpack.DefinePlugin( {\n     'process.env': {\n        NODE_ENV: `\"${config.devMode ? 'development' : 'production'}\"`,\n      },\n} )\n```\nThe value set by the aforementioned plugin will only be available in the runtime ( when webpack's javascript output is executed ).\nIn order for this plugin to work with hot module reloading, The npm script / gulp task / grunt task etc, should be invoked with the same environment variable as shown above.\n\nFor example, when running the build using some form of npm script:\n\n```json\n{\n  \"scripts\": {\n     \"build\": \"cross-env NODE_ENV=production babel src -d dist --ignore 'src/**/*.test.js' --copy-files\"\n  }\n}\n```\n[cross-env](https://www.npmjs.com/package/cross-env) is optional but recommended. \n\n### What about Glamorous, Styled Components, Styled-Jsx, Aphrodite, etc?\n\nIf you effectively use code-splitting, **Extract Css Chunks** can be a far better option than using emerging solutions like *Glamorous*, *Styled Components*, and slightly older tools like *Aphrodite*, *Glamor*, etc. We aren't fans of either rounds of tools because of several issues, but particularly because they all have a runtime overhead. Every time your React component is rendered with those, CSS is generated and updated within the DOM. On the server, you're going to also see unnecessary cycles for flushing the CSS along the critical render path. *Next.js's* `styled-jsx`, by the way, doesn't even work on the server--*not so good when it comes to flash of unstyled content (FOUC).*\n\nThe reason **Extract CSS Chunk** can be a better option is because **we also generate multiple sets of CSS based on what is actually \"used\",** ***but without the runtime overhead***. The difference is our definition of \"used\" is modules determined *statically* (which may not in fact be rendered) vs. what is in the \"critical render path\" (as is the case with the other tools). \n\nSo yes, our CSS may be mildly larger and include unnecessary css, but our `no_css.js` bundles will be a lot smaller as they don't need to inject any styles. See, even though those solutions have the smallest possible CSS file size, their javascript bundles, **in order to continue to render your components styled properly on the client,** must contain the necessary CSS for all possibilities! Those solutions serve both your entire bundle's CSS (in your javascript) **and** the CSS flushed from the critical render path. \n\nOn top of that, those are extra packages all with a huge number of issues in their Github repos corresponding to various limitations in the CSS they generate--something that is prevented when your definition for \"CSS-in-JS\" is simply importing CSS files compiled as normal by powerful proven CSS-specific processors.\n\nLastly, those solutions don't provide cacheable stylesheets. They do a lot of work--but they will **continue** doing it for you when you could have been done in one go long ago. Cloudflare is free--serve them through their CDN and you're winning. I love true javascript in css--don't get me wrong--but first I'd have to see they generate cacheable stylesheets. In my opinion, for now, it's best for environments that natively support it such as React Native.\n\n\n### Next:\n\nNow with that out of the way, for completeness let's compare what bytes of just the CSS are sent over the wire. The difference basically is minimal. Whereas solutions that flush from the critical render path will capture no more than the precise bits of CSS from the `if/else` branches followed, **Extract Css Chunks** is all about you effectively using code-splitting to insure, for example, you don't serve your Administration Panel's CSS in your public-facing site, etc. *In other words, it's all about avoiding serving large swaths of CSS from completely different sections of your app.* ***I.e. the biggest gains available to you.*** \n\n<details>\n<summary>\n    Read more on the topic ^^\n</summary>\n\nThis is where the real problem lies--where the real amount of unnecessary CSS comes from. If you effectively code-split your app, you may end up with 10 chunks. Now you can serve just the corresponding CSS for that chunk. If you try to go even farther and remove the css not used in the render path, you're likely achieving somewhere between 1-20% of the gains you achieved by thorough code-splitting. In other words, code splitting fulfills the 80/20 rule and attains the simple sweetspot of 80% optimization you--*as a balanced, level-headed, non-neurotic and professional developer*--are looking to achieve.\n\n*In short, by putting code splitting in appropriate places you have a lot of control over the CSS files that are created and can send a sensible* ***minimal*** *amount of associated bytes over the wire for the first request, perhaps even the smallest amount of all options.* \n\nIt's our perspective that you have achieved 80-99% of the performance gains (i.e. the creation of small relevant css files) at this ***static stage***. Offloading this work to the runtime stage is ultimately nit-picking and results in diminishing returns. When you factor that your JS bundle has to contain that JS anyway, those solutions make less and less sense from the perspective of reducing bytes delivered in the initial request. \n\nThere may be other reasons to use those tools (e.g. you don't like setting up webpack configs, or somehow you're really fond of pre-creating many `<div />` elements with their styles), but we prefer a simple standards-based way (without HoCs or specialized style components) to import styles just as you would in React Native. However to give the other tools credit, many of them likely started out with a different problem motivating them: avoiding webpack configs so you can include packages and their contained CSS without client apps being required to setup something like CSS loaders in Webpack. Having your CSS completely contained in true JS has its use cases, but at the application level--especially when you're already using something like Webpack--we fail to see its benefits. About all they share is a solution to avoiding **flashes of unstyled content** (FOUC), except one can save you a lot more bytes in what you send over the wire and save you from a continual runtime overhead where it's not needed. ***Honorable Mention:*** *StyleTron's concept of \"atomic declaration-level deduplication\" where it will make a class out of, say, `color: blue` so you don't need to send redundant styles certainly is a novel innovation, but again if the code still exists in your JS and you're building an application using Webpack (instead of a package), what's the point. In fact, it just makes editing the stylesheets in your browser developer tools more complicated. One benefit of critical render path solutions is the browser can spend less time matching the smaller number of styles to new DOM nodes as they appear, but then again it also has to spend the time injecting and parsing the new styles constantly, which is likely costlier.*\n\nAs an aside, so many apps share code between web and React Native--so the answer to the styles problem must be one that is identical for both. From that perspective importing a styles object **still** makes a lot of sense. **You're not missing out on the fundamental aspect of CSS-in-JSS:** ***isolated component-level styles and the ability to import them just like any other javascript code.*** Put them in other files, and use tools like `extract-css-chunks-webpack-plugin` and your pre-processors of choice that innately get styles right for the browser. As long as you're using **CSS Modules**, you're still at the cutting edge of CSS-in-JSS. Let's just say the other tools took one wrong turn and took it too far, when we already were at our destination. \n</details>\n\n\n#### SUMMARY OF BENEFITS COMPARED TO \"CRITICAL-RENDER-PATH\" SOLUTIONS:\n\n- no continual runtime overhead during `render` using HoCs that inject styles\n- smaller JS bundles without CSS injection\n- **You DO NOT need to clutter your component code with a specialized way of applying CSS (HoCs, styled elements)!** \n- The way you import module-based styles is exactly how you would import styles in React Native that exist in a separate file, which allows for extremely interchangeable code between React Native and regular React. Hurray! \n- pretty much already does everything covered by [@vjeux's 2014 css-in-js talk](https://speakerdeck.com/vjeux/react-css-in-js), besides dead code elimination. Dead code elimination is only solved for the other tools--as per the explanation above how the CSS is in the JS anyway--so much as Webpack and Uglify can remove **JS** that is not used. Either way, it's not a stretch to eventually add this feature to `extract-text-webpack-plugin` as well as this plugin. Hey, maybe it already has it??\n\n## Emotion!\n\n[Emotion](https://github.com/tkh44/emotion) is different. They allow for the extraction of static styles via their *extract mode*. We're very much looking forward to this being the perfect companion to the css chunks approach. \n<details>\n<summary>\n    Read more on the topic ^^\n</summary>\n\nCurrently however *extract mode* does not support IE11. So that means it's a no go, but we have hopes that in the future they'll solve that problem.\n\nThe reason Emotion doesn't work in IE11+ is because they currently try to preserve any dynamic aspects of your CSS-in-JS by converting it CSS vars, which isn't supported in IE11. That was a very smart approach, but unfortunately not good enough. \n\nThe vision we'd like to see for that package is where dynamic css stays inline, and where only static CSS is extracted into stylesheets, in which case CSS vars aren't needed. I've heard from them they have some \"hidden flags\" that allow for something close to this. When, and if, they take this feature all the way, look forward to us pushing it as our recommended approach. *Go Emotion!*\n</details>\n\n## Linaria\n\nLinaria is another modern CSS-in-JSS library. It's focused around static styles, which may make it a perfect fit for usage with this plugin. Check it out:\n\nhttps://github.com/callstack/linaria\n\n## What if I don't use SSR and use html-webpack-plugin?\n\nFor that case you can use [css-chunks-html-webpack-plugin](https://github.com/teamable-software/css-chunks-html-webpack-plugin) which will extract CSS chunks paths into your HTML file.\n\n## Conclusion:\n**We love CSS modules; no less, no more.**\n\n**Long live the dream of Code Splitting Everywhere!**\n\n\n## Contributing\nWe use [commitizen](https://github.com/commitizen/cz-cli), so run `npm run cm` to make commits. A command-line form will appear, requiring you answer a few questions to automatically produce a nicely formatted commit. Releases, semantic version numbers, tags and changelogs will automatically be generated based on these commits thanks to [semantic-release](https://github.com/semantic-release/semantic-release). Be good.\n\n## More from FaceySpacey in Reactlandia\n- [redux-first-router](https://github.com/faceyspacey/redux-first-router). It's made to work perfectly with *Universal*. Together they comprise our *\"frameworkless\"* Redux-based approach to what Next.js does (splitting, SSR, prefetching, and routing). *People are lovin it by the way* 😎\n","readmeFilename":"README.md","gitHead":"56984d421f796038cfa6b4904e99c8b7d0c5a5c6","bugs":{"url":"https://github.com/faceyspacey/extract-css-chunks-webpack-plugin/issues"},"_id":"extract-css-chunks-webpack-plugin@4.0.0-beta.1","_npmVersion":"5.6.0","_nodeVersion":"9.10.0","_npmUser":{"name":"zackljackson","email":"zackary.l.jackson@gmail.com"},"dist":{"integrity":"sha512-FvqNMDYnikExNo1H1ZID/4f+vGAXPb7CTBmWYvxX6TQs/g0+OhhhbM8kbaVRHMUwJB5ZDSfXlvA4OEjQj6F0HA==","shasum":"48dbd10e7fafbe939d5dd179f8c7bc609dce2cd6","tarball":"https://registry.npmjs.org/extract-css-chunks-webpack-plugin/-/extract-css-chunks-webpack-plugin-4.0.0-beta.1.tgz","fileCount":7,"unpackedSize":54811,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJceyMCCRA9TVsSAnZWagAAts8QAJecPsgSARGy9B4SWPDA\ni5Ahj2r5THo0yzfXFdiiUT+fSc5wesE3+Hb4RlhI+jgmHrV7hhoANEPjHKAx\nARBu32UWrF03U2Bn2Y2iX1yaZzqU/fLKYf3TotHxYYoQBz9bX05hHWET1MKj\njlJ6RboVeDr9D/jtgGipcSB5pqSR+3CA1+pAe1SUPDN+rh0wL5uUfcg260P7\nuNzfHo+rdNOhMZLoiwbl8H1W4/qh0Sfg/GZp/CW4vG6MiVIhRyvraSui369A\ngc2uK0kxM94x0aBvCKbY5vEBvkCpRNVev8J+f3Huk6KMWLIPH4cuksC+YQfe\nTASJ7olVRfrtV6FZlq3Pj+4vRuy0WG4BRxYvQwr9v/aiJNQZPrAr2NWufrFi\n9HgR3ghdyfwi3p7tQHBsPNslV5FvpMnvLw4geYdk0xuw3ld7J9CJ+2SUN/iK\n7f9v0I3IIGQk2ooZZ33UPXYUktOiyicmNmqw4t/te4zg/12B0TUg0/aABH9J\nzT/sD+Ld6UPfROMnGctdmN8ByePAGOF15I3B5bjfX70gJ234A3lCkfqwkoAt\nhtep6QMFFq2TXop5KZLzyK0xEKppS1HdbeQf0Gw1+Nj/xuP1lKf02W3Jpbf8\nDDOBB2JiV07yV4M324cFuPnKYYl9rZDQTXMgfyx2aStR0wpPSYZLztdfXcZK\nR55e\r\n=yUNF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGs4SqNJsHtuW+BcbuMFizcpMRBbZtXP4rkveH69dj0xAiEAntaQPE30//eHFW9saWCbjd/zunqKpzYK+nq9YgUhJNI="}]},"maintainers":[{"email":"james@faceyspacey.com","name":"faceyspacey"},{"email":"zackary.l.jackson@gmail.com","name":"zackljackson"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/extract-css-chunks-webpack-plugin_4.0.0-beta.1_1551573761802_0.3335564832201814"},"_hasShrinkwrap":false},"4.0.0-beta.2":{"name":"extract-css-chunks-webpack-plugin","version":"4.0.0-beta.2","description":"Extract CSS from chunks into stylesheets + HMR. Supports Webpack 4 + SSR","license":"MIT","author":{"name":"James Gillmore","email":"james@faceyspacey.com"},"contributors":[{"name":"Zack Jackson","email":"zack@ScriptedAlchemy.com","url":"https://github.com/ScriptedAlchemy"}],"homepage":"http://github.com/faceyspacey/extract-css-chunks-webpack-plugin","repository":{"type":"git","url":"git+https://github.com/faceyspacey/extract-css-chunks-webpack-plugin.git"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"keywords":["css","chunks","code splitting","mini-css","hot","hmr","universal","webpack","webpack 4","css-hot-loader","extract-css-chunks-webpack-plugin"],"main":"dist/cjs.js","engines":{"node":">= 6.9.0 <7.0.0 || >= 8.9.0"},"scripts":{"start":"npm run build -- -w","build":"cross-env NODE_ENV=production babel src -d dist --ignore 'src/**/*.test.js' --copy-files","clean":"del-cli dist","commitlint":"commitlint","commitmsg":"commitlint -e $GIT_PARAMS","lint":"eslint --cache src test","ci:lint:commits":"commitlint --from=${CIRCLE_BRANCH} --to=${CIRCLE_SHA1}","lint-staged":"lint-staged","prebuild":"npm run clean","prepublish":"npm run build","release":"standard-version","release:ci":"conventional-github-releaser -p angular","release:validate":"commitlint --from=$(git describe --tags --abbrev=0) --to=$(git rev-parse HEAD)","security":"npm audit","test":"jest","test:watch":"jest --watch","test:coverage":"jest --collectCoverageFrom='src/**/*.js' --coverage","test:manual":"webpack-dev-server test/manual/src/index.js --open --config test/manual/webpack.config.js","ci:lint":"npm run lint && npm run security","ci:test":"npm run test -- --runInBand","ci:coverage":"npm run test:coverage -- --runInBand","defaults":"webpack-defaults"},"peerDependencies":{"webpack":"^4.4.0"},"dependencies":{"loader-utils":"^1.1.0","normalize-url":"^3.0.0","schema-utils":"^1.0.0","webpack-sources":"^1.1.0"},"devDependencies":{"@commitlint/cli":"^6.1.3","@commitlint/config-conventional":"^6.1.3","@webpack-contrib/eslint-config-webpack":"^2.0.4","babel-cli":"^6.26.0","babel-jest":"^22.2.2","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-polyfill":"^6.26.0","babel-preset-env":"^1.6.1","conventional-github-releaser":"^2.0.2","cross-env":"^5.1.3","css-loader":"^0.28.10","del":"^3.0.0","del-cli":"^1.1.0","es-check":"^5.0.0","eslint":"^4.17.0","eslint-plugin-import":"^2.8.0","eslint-plugin-prettier":"^2.6.0","file-loader":"^1.1.11","husky":"^0.14.3","jest":"^22.2.2","lint-staged":"^6.1.0","memory-fs":"^0.4.1","pre-commit":"^1.2.2","prettier":"^1.11.1","semantic-release":"^15.13.1","webpack":"^4.28.0","webpack-cli":"^2.0.13","webpack-defaults":"^2.3.0","webpack-dev-server":"^3.1.14"},"pre-commit":"lint-staged","lint-staged":{"*.js":["eslint --fix","git add"]},"readme":"<a href=\"https://gitter.im/Reactlandia/Lobby\" target=\"_blank\">\n  <img alt=\"Edit Redux-First Router Demo\" src=\"http://cdn.reactlandia.com/chat-badge-reactlandia.png\">\n</a>\n\n\n# extract-css-chunks-webpack-plugin\n\n<p align=\"center\">\n  <a href=\"https://www.npmjs.com/package/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://img.shields.io/npm/v/extract-css-chunks-webpack-plugin.svg\" alt=\"Version\" />\n  </a>\n\n  <a href=\"https://travis-ci.org/faceyspacey/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://travis-ci.org/faceyspacey/extract-css-chunks-webpack-plugin.svg?branch=master\" alt=\"Build Status\" />\n  </a>\n\n  <a href=\"https://www.npmjs.com/package/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://img.shields.io/npm/dt/extract-css-chunks-webpack-plugin.svg\" alt=\"Downloads\" />\n  </a>\n\n  <a href=\"https://www.npmjs.com/package/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://img.shields.io/npm/dm/extract-css-chunks-webpack-plugin.svg\" alt=\"License\" />\n  </a>\n  \n  <a href=\"https://www.npmjs.com/package/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://img.shields.io/npm/l/extract-css-chunks-webpack-plugin.svg\" alt=\"License\" />\n  </a>\n</p>\n\n<h2 align=\"center\">🍾🍾🍾It's our absolute pleasure to announce Webpack 4 Support 🚀🚀🚀</h2>\n\n> **HEADLINES (May 2018): Now Independently supports Webpack 4:** \nYep that's right. The universal family is now fully Webpack 4. Thank you to all our users for your loyalty and patience! If you love Universal, then you are gonna fall head over heels when we bring out the main course! \n\nSo... why did we rebuild `extract-css-chunks`? What does it offer? \n\nIt's got all the goodness of `mini-css-extract-plugin` but with 2 gleaming, sought after benefits. \n\nCompared to the existing loaders, we are offering a single solution as opposed to needing to depend on multiple loaders to cater for different features:\n\n## Perks\n* **HMR:** It also has first-class support for **Hot Module Replacement** across ALL those css files/chunks!!!\n* cacheable stylesheets \n* smallest total bytes sent compared to \"render-path\" css-in-js solutions that include your CSS definitions in JS\n* Faster than the V2!\n* Async loading\n* No duplicate compilation (performance)\n* Easier to use\n* Specific to CSS\n* SSR Friendly development build, focused on frontend DX\n* Works seamlessly with the Universal family\n* Works fantastically as a standalone style loader (You can use it for any webpack project! with no extra dependencies!)\n\nAdditionally, if you are already a user of the universal family -- we will be waving goodbye to the mandatory ```window.__CSS_CHUNKS__```.\n\nThe functionality is still available to you via chunk flushing, and it can come in super handy when needing to easily resolve style assets as urls that might need to be passed to a third party.\n\n## Webpack 4 Standalone Installation:\n\nIf you are just looking for something that works like `mini-css-extract-plugin` but with HMR, then look no further.\n\nNOTE: We have aligned out loader implementation to be the same as `mini-css-extract-plugin` \n\n**If you already use `mini-css-extract-plugin`, then you can just change the `require` statement - it's that easy**\n\n```\nyarn add --dev extract-css-chunks-webpack-plugin\n```\n\n*webpack.config.js:*\n```js\nconst ExtractCssChunks = require(\"extract-css-chunks-webpack-plugin\")\n\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [\n           ExtractCssChunks.loader,\n           \"css-loader\"\n         ]\n      }\n    ]\n  },\n  plugins: [\n    new ExtractCssChunks(\n        {\n          // Options similar to the same options in webpackOptions.output\n          // both options are optional\n          filename: \"[name].css\",\n          chunkFilename: \"[id].css\",\n          hot: true, // if you want HMR - we try to automatically inject hot reloading but if it's not working, add it to the config\n          orderWarning: true, // Disable to remove warnings about conflicting order between imports\n          reloadAll: true, // when desperation kicks in - this is a brute force HMR flag\n          cssModules: true // if you use cssModules, this can help.\n        }\n    ),\n  ]\n}\n```\n\n*webpack.server.config.js*\n\nThe server needs to be handled differently, we still want one chunk. Luckily webpack 4 supports **LimitChunkCountPlugin**\n\n```js\nnew webpack.optimize.LimitChunkCountPlugin({\n    maxChunks: 1\n})\n```\n\n\n### What about Webpack 3?\nThis is a breaking change. The entire loader has been fundamentally rewritten specifically for Webpack 4. Aiming to support our existing user base, allowing them to upgrade their infrastructure to support Webpack 4 based universally code-split server-side rendered react applications. \n\nThere have been some challenges along the way since the release of webpack 4. Ultimately the only remaining hurdle is code split, async style loading. \n\nIf you do need Webpack 3, make sure to stick with the latest `v2.x.x` release. `v3.x.x` is only intended for users with Webpack 4\n\n\n\n\n*Note: this is a companion package to:*\n- [webpack-flush-chunks](https://github.com/faceyspacey/webpack-flush-chunks) \n- [react-universal-component](https://github.com/faceyspacey/react-universal-component)\n- [babel-plugin-universal-import](https://github.com/faceyspacey/babel-plugin-universal-import) ***or*** [babel-plugin-dual-import](https://github.com/faceyspacey/babel-plugin-dual-import)\n\n\n## Recommended Installation For Universal\n```\nyarn add react-universal-component webpack-flush-chunks\nyarn add --dev extract-css-chunks-webpack-plugin babel-plugin-universal-import\n```\n\n*.babelrc:*\n```js\n{\n  \"plugins\": [\"universal-import\"]\n}\n```\nThe main thing is you need to cater to the new chunking system of webpack!\nWith **webpack.optimize.CommonsChunkPlugin** plugin no longer part of Webpack 4, we need another way to define the code-splitting. Luckily we have `optimization` configs built into webpack now\n\n> There are more aggressive ways to code split, thanks to webpack 4. Check out the RUC Readme if you are looking for a more aggressive code split optimization configuration. These are just examples, you should be able to configure them as you see fit\n\n- `splitChunks`: Adding this to your `dev-webpack` will help with HMR when changing file names (or moving the files) which are dynamically imported. If you dont add this to your dev-webpack you might get this error: `Runtime TypeError: Cannot read property 'call' of undefined at __webpack_require__`. Could be related to this webpack issue: https://github.com/webpack/webpack/issues/6094. Adding it to your `prod-webpack` could unfortunately increase your total file size about 15% (in my test project), this is because you are changing webpacks defualt `chunks: async` to `chunks: 'initial'`\n- `runtimeChunk`: removed a hmr warning in chrome dev console, which got printed when starting the dev server. What it does and why it is needed together with `bootstrap` would be nice if someone else could make a PR for.\n- `minimizer: { UglifyJSPlugin`: Override the default UglifyjsWebpackPlugin minimizer with custom settings. These settings are probably default by now. They didnt do anything to the bundle size in my test project. Install instructions: https://webpack.js.org/plugins/uglifyjs-webpack-plugin/\n\n*webpack.config.js:*\n```js\nconst ExtractCssChunks = require(\"extract-css-chunks-webpack-plugin\")\nconst UglifyJsPlugin = require('uglifyjs-webpack-plugin');\n\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [\n          ExtractCssChunks.loader,\n          {\n            loader: 'css-loader',\n            options: {\n              modules: true,\n              localIdentName: '[name]__[local]--[hash:base64:5]',\n            },\n          },\n        ],\n      },\n    ],\n  },\n  optimization: {\n      // FOR PRODUCTION\n      minimizer: [\n          new UglifyJsPlugin({\n              uglifyOptions: {\n                  output: {\n                      comments: false,\n                      ascii_only: true\n                  },\n                  compress: {\n                      comparisons: false\n                  }\n              }\n          })\n      ],\n      // END\n      // NEEDED BOTH IN PROD AND DEV BUILDS\n      runtimeChunk: {\n          name: 'bootstrap'\n      },\n      splitChunks: {\n          chunks: 'initial',\n          cacheGroups: {\n              vendors: {\n                  test: /[\\\\/]node_modules[\\\\/]/,\n                  name: 'vendor'\n              }\n          }\n      }\n  },\n  plugins: [\n    new ExtractCssChunks({hot:true, cssModules: true}), //if you want HMR - we try to automatically inject hot reloading but if it's not working, add it to the config\n  ]\n};\n```\n\n## Desired Output\nHere's the sort of CSS you can expect to serve:\n\n```\n<head>\n\t<link rel='stylesheet' href='/static/main.css' />\n\t<link rel='stylesheet' href='/static/0.css' />\n\t<link rel='stylesheet' href='/static/7.css' />\n</head> \n\n<body>\n\t<div id=\"react-root\"></div>\n\t\n\t<script type='text/javascript' src='/static/vendor.js'></script>\n\t<script type='text/javascript' src='/static/0.js'></script>\n\t<script type='text/javascript' src='/static/7.js'></script>\n\t<script type='text/javascript' src='/static/main.js'></script>\n</body>\n```\n\nIf you need to resolve your stylesheets on the client side, for whatever reason. \n\n[webpack-flush-chunks](https://github.com/faceyspacey/webpack-flush-chunks) will scoop up the exact stylesheets to embed in your response. It will give you an object which can be embedded on page\n\nHere's how you do it:\n\n\n*src/components/App.js:*\n```js\nconst UniversalComponent = universal(props => import(`./${props.page}`))\n\n<UniversalComponent page='Foo' />\n```\n\n*server/render.js:*\n```js\nimport { flushChunkNames } from 'react-universal-component/server'\nimport flushChunks from 'webpack-flush-chunks'\n\nconst app = ReactDOMServer.renderToString(<App />)\nconst { js, styles, cssHash } = flushChunks(webpackStats, {\n  chunkNames: flushChunkNames()\n})\n\nres.send(`\n  <!doctype html>\n  <html>\n    <head>\n      ${styles}\n    </head>\n    <body>\n      <div id=\"root\">${app}</div>\n      <!-- not needed unless you want to access css chunks urls manually  -->\n      ${cssHash}\n      <!-- extract-css-chunks takes care of loading the css assets automatically -->\n      ${js}\n    </body>\n  </html>\n`)\n```\n\n***As for asynchronous calls to `import()` on user navigation,*** [babel-plugin-universal-import](https://github.com/faceyspacey/babel-plugin-universal-import) is required if you're using [react-universal-component](https://github.com/faceyspacey/react-universal-component). And if you aren't, you must use: [babel-plugin-dual-import](https://github.com/faceyspacey/babel-plugin-dual-import). \n\n\nThese babel plugins request both your js + your css. *Very Nice!* This is the new feature of the 2.0. Read *Sokra's* (author of webpack) article on how [on how this is the future of CSS for webpack](https://medium.com/webpack/the-new-css-workflow-step-1-79583bd107d7). Use this and be in the future today.\n\n\n## API \nYou can pass the same options as `mini-css-extract` to `new ExtractCssChunks`, such as:\n\n```javascript\nnew ExtractCssChunk({\n      filename: devMode ? '[name].css' : '[name].[hash].css',\n      chunkFilename: devMode ? '[id].css' : '[id].[hash].css',\n})\n```\n\n>Keep in mind, by default `[name].css` is used when `process.env.NODE_ENV === 'development'` and `[name].[contenthash].css` during production, so you can likely forget about having to pass anything.\n\n### HMR Troubleshooting\n**Blank array in HMR script?**\n\nIf you have issues with HMR, but enabled the loader, plugin, and already tried `hot: true, reloadAll:true`, then your webpack config might be more abstract than my simple lookup functions. In this case, Ive exported out the actual hot loader, you can add this manually and as long as you've got the plugin and loader -- it'll work \n\n```js\n rules: [\n      {\n        test: /\\.css$/,\n        use: [\n          ExtractCssChunks.hotLoader, // for those who want to manually force hotLoading\n          ExtractCssChunks.loader,\n          {\n            loader: 'css-loader',\n            options: {\n              modules: true,\n              localIdentName: '[name]__[local]--[hash:base64:5]',\n            },\n          },\n        ],\n      },\n    ]\n```\n\n### HMR Pitfall\n\nThe most common workflow when working with webpack is to write a \"development\" / \"production\" value in to the\n'process.env.NODE_ENV' namespace, typically, using webpack's built-in \"DefinePlugin\" plugin. e.g:\n\n```javascript\nnew webpack.DefinePlugin( {\n     'process.env': {\n        NODE_ENV: `\"${config.devMode ? 'development' : 'production'}\"`,\n      },\n} )\n```\nThe value set by the aforementioned plugin will only be available in the runtime ( when webpack's javascript output is executed ).\nIn order for this plugin to work with hot module reloading, The npm script / gulp task / grunt task etc, should be invoked with the same environment variable as shown above.\n\nFor example, when running the build using some form of npm script:\n\n```json\n{\n  \"scripts\": {\n     \"build\": \"cross-env NODE_ENV=production babel src -d dist --ignore 'src/**/*.test.js' --copy-files\"\n  }\n}\n```\n[cross-env](https://www.npmjs.com/package/cross-env) is optional but recommended. \n\n### What about Glamorous, Styled Components, Styled-Jsx, Aphrodite, etc?\n\nIf you effectively use code-splitting, **Extract Css Chunks** can be a far better option than using emerging solutions like *Glamorous*, *Styled Components*, and slightly older tools like *Aphrodite*, *Glamor*, etc. We aren't fans of either rounds of tools because of several issues, but particularly because they all have a runtime overhead. Every time your React component is rendered with those, CSS is generated and updated within the DOM. On the server, you're going to also see unnecessary cycles for flushing the CSS along the critical render path. *Next.js's* `styled-jsx`, by the way, doesn't even work on the server--*not so good when it comes to flash of unstyled content (FOUC).*\n\nThe reason **Extract CSS Chunk** can be a better option is because **we also generate multiple sets of CSS based on what is actually \"used\",** ***but without the runtime overhead***. The difference is our definition of \"used\" is modules determined *statically* (which may not in fact be rendered) vs. what is in the \"critical render path\" (as is the case with the other tools). \n\nSo yes, our CSS may be mildly larger and include unnecessary css, but our `no_css.js` bundles will be a lot smaller as they don't need to inject any styles. See, even though those solutions have the smallest possible CSS file size, their javascript bundles, **in order to continue to render your components styled properly on the client,** must contain the necessary CSS for all possibilities! Those solutions serve both your entire bundle's CSS (in your javascript) **and** the CSS flushed from the critical render path. \n\nOn top of that, those are extra packages all with a huge number of issues in their Github repos corresponding to various limitations in the CSS they generate--something that is prevented when your definition for \"CSS-in-JS\" is simply importing CSS files compiled as normal by powerful proven CSS-specific processors.\n\nLastly, those solutions don't provide cacheable stylesheets. They do a lot of work--but they will **continue** doing it for you when you could have been done in one go long ago. Cloudflare is free--serve them through their CDN and you're winning. I love true javascript in css--don't get me wrong--but first I'd have to see they generate cacheable stylesheets. In my opinion, for now, it's best for environments that natively support it such as React Native.\n\n\n### Next:\n\nNow with that out of the way, for completeness let's compare what bytes of just the CSS are sent over the wire. The difference basically is minimal. Whereas solutions that flush from the critical render path will capture no more than the precise bits of CSS from the `if/else` branches followed, **Extract Css Chunks** is all about you effectively using code-splitting to insure, for example, you don't serve your Administration Panel's CSS in your public-facing site, etc. *In other words, it's all about avoiding serving large swaths of CSS from completely different sections of your app.* ***I.e. the biggest gains available to you.*** \n\n<details>\n<summary>\n    Read more on the topic ^^\n</summary>\n\nThis is where the real problem lies--where the real amount of unnecessary CSS comes from. If you effectively code-split your app, you may end up with 10 chunks. Now you can serve just the corresponding CSS for that chunk. If you try to go even farther and remove the css not used in the render path, you're likely achieving somewhere between 1-20% of the gains you achieved by thorough code-splitting. In other words, code splitting fulfills the 80/20 rule and attains the simple sweetspot of 80% optimization you--*as a balanced, level-headed, non-neurotic and professional developer*--are looking to achieve.\n\n*In short, by putting code splitting in appropriate places you have a lot of control over the CSS files that are created and can send a sensible* ***minimal*** *amount of associated bytes over the wire for the first request, perhaps even the smallest amount of all options.* \n\nIt's our perspective that you have achieved 80-99% of the performance gains (i.e. the creation of small relevant css files) at this ***static stage***. Offloading this work to the runtime stage is ultimately nit-picking and results in diminishing returns. When you factor that your JS bundle has to contain that JS anyway, those solutions make less and less sense from the perspective of reducing bytes delivered in the initial request. \n\nThere may be other reasons to use those tools (e.g. you don't like setting up webpack configs, or somehow you're really fond of pre-creating many `<div />` elements with their styles), but we prefer a simple standards-based way (without HoCs or specialized style components) to import styles just as you would in React Native. However to give the other tools credit, many of them likely started out with a different problem motivating them: avoiding webpack configs so you can include packages and their contained CSS without client apps being required to setup something like CSS loaders in Webpack. Having your CSS completely contained in true JS has its use cases, but at the application level--especially when you're already using something like Webpack--we fail to see its benefits. About all they share is a solution to avoiding **flashes of unstyled content** (FOUC), except one can save you a lot more bytes in what you send over the wire and save you from a continual runtime overhead where it's not needed. ***Honorable Mention:*** *StyleTron's concept of \"atomic declaration-level deduplication\" where it will make a class out of, say, `color: blue` so you don't need to send redundant styles certainly is a novel innovation, but again if the code still exists in your JS and you're building an application using Webpack (instead of a package), what's the point. In fact, it just makes editing the stylesheets in your browser developer tools more complicated. One benefit of critical render path solutions is the browser can spend less time matching the smaller number of styles to new DOM nodes as they appear, but then again it also has to spend the time injecting and parsing the new styles constantly, which is likely costlier.*\n\nAs an aside, so many apps share code between web and React Native--so the answer to the styles problem must be one that is identical for both. From that perspective importing a styles object **still** makes a lot of sense. **You're not missing out on the fundamental aspect of CSS-in-JSS:** ***isolated component-level styles and the ability to import them just like any other javascript code.*** Put them in other files, and use tools like `extract-css-chunks-webpack-plugin` and your pre-processors of choice that innately get styles right for the browser. As long as you're using **CSS Modules**, you're still at the cutting edge of CSS-in-JSS. Let's just say the other tools took one wrong turn and took it too far, when we already were at our destination. \n</details>\n\n\n#### SUMMARY OF BENEFITS COMPARED TO \"CRITICAL-RENDER-PATH\" SOLUTIONS:\n\n- no continual runtime overhead during `render` using HoCs that inject styles\n- smaller JS bundles without CSS injection\n- **You DO NOT need to clutter your component code with a specialized way of applying CSS (HoCs, styled elements)!** \n- The way you import module-based styles is exactly how you would import styles in React Native that exist in a separate file, which allows for extremely interchangeable code between React Native and regular React. Hurray! \n- pretty much already does everything covered by [@vjeux's 2014 css-in-js talk](https://speakerdeck.com/vjeux/react-css-in-js), besides dead code elimination. Dead code elimination is only solved for the other tools--as per the explanation above how the CSS is in the JS anyway--so much as Webpack and Uglify can remove **JS** that is not used. Either way, it's not a stretch to eventually add this feature to `extract-text-webpack-plugin` as well as this plugin. Hey, maybe it already has it??\n\n## Emotion!\n\n[Emotion](https://github.com/tkh44/emotion) is different. They allow for the extraction of static styles via their *extract mode*. We're very much looking forward to this being the perfect companion to the css chunks approach. \n<details>\n<summary>\n    Read more on the topic ^^\n</summary>\n\nCurrently however *extract mode* does not support IE11. So that means it's a no go, but we have hopes that in the future they'll solve that problem.\n\nThe reason Emotion doesn't work in IE11+ is because they currently try to preserve any dynamic aspects of your CSS-in-JS by converting it CSS vars, which isn't supported in IE11. That was a very smart approach, but unfortunately not good enough. \n\nThe vision we'd like to see for that package is where dynamic css stays inline, and where only static CSS is extracted into stylesheets, in which case CSS vars aren't needed. I've heard from them they have some \"hidden flags\" that allow for something close to this. When, and if, they take this feature all the way, look forward to us pushing it as our recommended approach. *Go Emotion!*\n</details>\n\n## Linaria\n\nLinaria is another modern CSS-in-JSS library. It's focused around static styles, which may make it a perfect fit for usage with this plugin. Check it out:\n\nhttps://github.com/callstack/linaria\n\n## What if I don't use SSR and use html-webpack-plugin?\n\nFor that case you can use [css-chunks-html-webpack-plugin](https://github.com/teamable-software/css-chunks-html-webpack-plugin) which will extract CSS chunks paths into your HTML file.\n\n## Conclusion:\n**We love CSS modules; no less, no more.**\n\n**Long live the dream of Code Splitting Everywhere!**\n\n\n## Contributing\nWe use [commitizen](https://github.com/commitizen/cz-cli), so run `npm run cm` to make commits. A command-line form will appear, requiring you answer a few questions to automatically produce a nicely formatted commit. Releases, semantic version numbers, tags and changelogs will automatically be generated based on these commits thanks to [semantic-release](https://github.com/semantic-release/semantic-release). Be good.\n\n## More from FaceySpacey in Reactlandia\n- [redux-first-router](https://github.com/faceyspacey/redux-first-router). It's made to work perfectly with *Universal*. Together they comprise our *\"frameworkless\"* Redux-based approach to what Next.js does (splitting, SSR, prefetching, and routing). *People are lovin it by the way* 😎\n","readmeFilename":"README.md","gitHead":"56984d421f796038cfa6b4904e99c8b7d0c5a5c6","bugs":{"url":"https://github.com/faceyspacey/extract-css-chunks-webpack-plugin/issues"},"_id":"extract-css-chunks-webpack-plugin@4.0.0-beta.2","_npmVersion":"5.6.0","_nodeVersion":"9.10.0","_npmUser":{"name":"zackljackson","email":"zackary.l.jackson@gmail.com"},"dist":{"integrity":"sha512-/wJIT1UOLi0cg6A0eWEDLLqi+MFfAlShm9CUVk1eOqpnSrIco4AXi0C6JTXmvz+a9PZxUwyLUMNotS0iJjth1Q==","shasum":"edb79d5217e84d1a58bd0a30bddbea752ee3473a","tarball":"https://registry.npmjs.org/extract-css-chunks-webpack-plugin/-/extract-css-chunks-webpack-plugin-4.0.0-beta.2.tgz","fileCount":7,"unpackedSize":54839,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcey7fCRA9TVsSAnZWagAAaxIP/29HPZRi/sAylWq0zRAQ\n3/C/LAdS1JDWBabp/InklK+fBzYMSknVopnPUjCgTzNFLUT5oGBvrvM3QglB\nhsm48TjCMHrpdiDVhUu97uUL/Rz5FcAzBi7Z4Vwjt5RHFUpgtg3gFV4VJQXp\nxuXX/fbfaQgBhNFUoZhOlu5yLJ1y8/j8IppVZpeMoZ+R25o8XvdRCrjKEQ2r\nuZ5pElrjEbtvFojk/nyOsFoVBZJt5zxEcP3/2AgiC7DQpCnGI3UVX7PHuX3h\n/K6X9EbwqWCoIkhXoqSJKxuAvh4gGr/+WrVn8c93/H0QPRTdXDEoQgo57Pro\n4wYlXoHN66NMu2w5ojgr4N91mrUJmCCz3EdF6VZ5Ap0H6UcLa3Mu15SBjcvk\nJJ0o8jABQCbeE6G7UA5NzjqgVJVrKdyBnWaBpHa3P9NfRxMn2U+ClV98MuTN\nJODKe0sJXbIAalIvJUE1Ges0Lb9fwZuRCH8f4QHKxNm9x6JR6Tggjo8wywzg\nwVKWDRPjxQZFsanCjrQ1bJDZAtD0ZdHXUh+F59LNAd9qIG1j9UFSQ6BJTFBL\nm3khilUVffLeGLRCn5ou0644jsX4IIa42HaBV6+DeOXmJoJWkdsRZGCZl6md\ndOBxdoCL7lup4nFBGv78lkOBuJXrgwgmsOh0bay1uhJGPJAMPcUictzZrm3S\neWJi\r\n=mYpK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBnO12MhsBE5WGk0nBLRMU32ICj0d8NL5mlCdsD5T8b7AiAYb9Xs0lt9X9jyOklBA5H6zXWfOerJ0qtCO11ZEIksvQ=="}]},"maintainers":[{"email":"james@faceyspacey.com","name":"faceyspacey"},{"email":"zackary.l.jackson@gmail.com","name":"zackljackson"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/extract-css-chunks-webpack-plugin_4.0.0-beta.2_1551576798990_0.7814044205347634"},"_hasShrinkwrap":false},"3.3.3":{"name":"extract-css-chunks-webpack-plugin","version":"3.3.3","author":{"name":"James Gillmore","email":"james@faceyspacey.com"},"contributors":[{"name":"Zack Jackson","email":"zack@ScriptedAlchemy.com","url":"https://github.com/ScriptedAlchemy"}],"description":"Extract CSS from chunks into stylesheets + HMR. Supports Webpack 4 + SSR","engines":{"node":">= 6.9.0 <7.0.0 || >= 8.9.0"},"main":"dist/cjs.js","types":"index.d.ts","keywords":["css","chunks","code splitting","mini-css","hot","hmr","universal","webpack","webpack 4","css-hot-loader","extract-css-chunks-webpack-plugin"],"license":"MIT","scripts":{"start":"npm run build -- -w","build":"cross-env NODE_ENV=production babel src -d dist --ignore 'src/**/*.test.js' --copy-files","clean":"del-cli dist","lint":"eslint --cache --fix src","prebuild":"npm run clean","prepublishOnly":"npm run build","security":"nsp check","test":"jest","test:watch":"jest --watch","test:coverage":"jest --collectCoverageFrom='src/**/*.js' --coverage","test:example":"npm run build && webpack-dev-server test/manual/src/index.js --config test/manual/webpack.config.js","ci:lint":"npm run lint && npm run security","ci:test":"npm run test -- --runInBand","ci:coverage":"npm run test:coverage -- --runInBand","build:example":"npm run build && webpack-dev-server test/manual/src/index.js --open --config test/manual/webpack.config.js","cm":"git-cz","semantic-release":"npx semantic-release","travis":"npm run ci:coverage","defaults":"webpack-defaults"},"peerDependencies":{"webpack":"^4.4.0"},"dependencies":{"loader-utils":"^1.1.0","lodash":"^4.17.11","normalize-url":"^3.3.0","schema-utils":"^1.0.0","webpack-sources":"^1.1.0"},"devDependencies":{"@commitlint/cli":"^6.1.3","@commitlint/config-conventional":"^6.1.3","@webpack-contrib/eslint-config-webpack":"^2.0.4","babel-cli":"^6.26.0","babel-jest":"^22.2.2","babel-plugin-transform-es2015-arrow-functions":"^6.22.0","babel-plugin-transform-es2015-block-scoping":"^6.26.0","babel-plugin-transform-es2015-template-literals":"^6.22.0","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-polyfill":"^6.26.0","babel-preset-env":"^1.6.1","conventional-github-releaser":"^2.0.2","cross-env":"^5.1.3","css-loader":"^0.28.10","del":"^3.0.0","del-cli":"^1.1.0","eslint":"^4.17.0","eslint-plugin-import":"^2.8.0","eslint-plugin-prettier":"^2.6.0","file-loader":"^1.1.11","husky":"^0.14.3","jest":"^22.2.2","lint-staged":"^6.1.0","memory-fs":"^0.4.1","pre-commit":"^1.2.2","prettier":"^1.11.1","semantic-release":"^15.13.1","webpack":"^4.14.0","webpack-cli":"^2.0.13","webpack-defaults":"^2.3.0","webpack-dev-server":"^3.1.1"},"homepage":"http://github.com/faceyspacey/extract-css-chunks-webpack-plugin","repository":{"type":"git","url":"git+https://github.com/faceyspacey/extract-css-chunks-webpack-plugin.git"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"gitHead":"048643a5ae21f76f8940cb13af0bbd9c5ead27d3","bugs":{"url":"https://github.com/faceyspacey/extract-css-chunks-webpack-plugin/issues"},"_id":"extract-css-chunks-webpack-plugin@3.3.3","_npmVersion":"6.5.0","_nodeVersion":"11.10.1","_npmUser":{"name":"zackljackson","email":"zackary.l.jackson@gmail.com"},"dist":{"integrity":"sha512-4DYo3jna9ov81rdKtE1U2cirb3ERoWhHldzRxZWx3Q5i5Dm6U+mmfon7PmaKDuh6+xySVOqtlXrZyJY2V4tc+g==","shasum":"d550be32b93dad5d290e9d979d37dd317bdaec9b","tarball":"https://registry.npmjs.org/extract-css-chunks-webpack-plugin/-/extract-css-chunks-webpack-plugin-3.3.3.tgz","fileCount":10,"unpackedSize":63490,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcfW3cCRA9TVsSAnZWagAAkJAQAINEO+TR0am5mTM01bQ5\n/pzrb2zQAeJv+EqBdL3N6y67yAbYg01LeBnQS8kYgOlLhMUslnlmE373bmbr\n5CqZmFsTil/xMPda7ROVuHUipqxHoU8/7CSP+VnpHZrXZwedavZn/Y9Ol1by\nQsyB4JEUksgdDz4LTUbl+2J1F9M+BZbUYExhfI5aIYpslkNB6l4NmsLAbtO+\nns918O1oLfmCCCsrri6slJ2KISIKvwx6nmxBuRI+QJjVeBbXFCHjo1QkUnwv\nlU3MGXOXD+Z71hOCwZAqr1mmMHh/1oQnk4Bh1Qe4ez99xbxhIsMHU7mmTVa8\nR3Gt09D0C0PmbjMkH5iK8JK0hP96SL2jashUcrXfr8v+b0nOwVIiZWx7xdSM\nhva1lduFqEueaOa8IKuqDy+yEVQpK+BGHPOjfFeuMmYu0K4sIg4wbLT9vVxg\n7dk337QCqUGxVsyEeaOO0a+F5YFpXoXr9Ejs+pukdAXnhfa5dDUKXIQ/4D8I\nHnqGXU8CrpgBB6EnkV2hIsl3+mxDXI1VFTbLttidC3iVbM8ZSqIa5hFlmor4\nA0nYnK95pLngf1y+dVcXmZlfSdJ0yPACclDzPuEs8ihDE4mZ2K7agQcI2945\nOtYuu8Wu7d3tpZV4fP2JBeWK8XvEApSC3QZ3iMBcYDQN3lPZQv4Bd91eOrAS\ngz99\r\n=3fpb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDyTnpi0xs/0+nTyJ6NMoMToRWpSkp7NiGIX0fA9iURQAIhANKklfSd+bjhdfksEvnzsql6ihb/aUvcblToGmx9Dlaj"}]},"maintainers":[{"email":"james@faceyspacey.com","name":"faceyspacey"},{"email":"zackary.l.jackson@gmail.com","name":"zackljackson"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/extract-css-chunks-webpack-plugin_3.3.3_1551723996111_0.1175806662286707"},"_hasShrinkwrap":false},"4.0.0":{"name":"extract-css-chunks-webpack-plugin","version":"4.0.0","description":"Extract CSS from chunks into stylesheets + HMR. Supports Webpack 4 + SSR","license":"MIT","author":{"name":"James Gillmore","email":"james@faceyspacey.com"},"contributors":[{"name":"Zack Jackson","email":"zack@ScriptedAlchemy.com","url":"https://github.com/ScriptedAlchemy"}],"homepage":"http://github.com/faceyspacey/extract-css-chunks-webpack-plugin","repository":{"type":"git","url":"git+https://github.com/faceyspacey/extract-css-chunks-webpack-plugin.git"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"keywords":["css","chunks","code splitting","mini-css","hot","hmr","universal","webpack","webpack 4","css-hot-loader","extract-css-chunks-webpack-plugin"],"main":"dist/cjs.js","engines":{"node":">= 6.9.0 <7.0.0 || >= 8.9.0"},"scripts":{"start":"npm run build -- -w","build":"cross-env NODE_ENV=production babel src -d dist --ignore 'src/**/*.test.js' --copy-files","clean":"del-cli dist","commitlint":"commitlint","commitmsg":"commitlint -e $GIT_PARAMS","lint":"eslint --cache src test","ci:lint:commits":"commitlint --from=${CIRCLE_BRANCH} --to=${CIRCLE_SHA1}","lint-staged":"lint-staged","prebuild":"npm run clean","prepublish":"npm run build","release:validate":"commitlint --from=$(git describe --tags --abbrev=0) --to=$(git rev-parse HEAD)","security":"npm audit","test":"jest","test:watch":"jest --watch","test:coverage":"jest --collectCoverageFrom='src/**/*.js' --coverage","test:manual":"webpack-dev-server test/manual/src/index.js --open --config test/manual/webpack.config.js","ci:lint":"npm run lint && npm run security","ci:test":"npm run test -- --runInBand","ci:coverage":"npm run test:coverage -- --runInBand","defaults":"webpack-defaults","semantic-release":"npx semantic-release","travis":"npm run ci:coverage"},"peerDependencies":{"webpack":"^4.4.0"},"dependencies":{"loader-utils":"^1.1.0","normalize-url":"^3.0.0","lodash":"^4.17.11","schema-utils":"^1.0.0","webpack-sources":"^1.1.0"},"devDependencies":{"@commitlint/cli":"^6.1.3","@commitlint/config-conventional":"^6.1.3","@webpack-contrib/eslint-config-webpack":"^2.0.4","babel-cli":"^6.26.0","babel-jest":"^22.2.2","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-polyfill":"^6.26.0","babel-preset-env":"^1.6.1","conventional-github-releaser":"^2.0.2","cross-env":"^5.1.3","css-loader":"^0.28.10","del":"^3.0.0","del-cli":"^1.1.0","es-check":"^5.0.0","eslint":"^4.17.0","eslint-plugin-import":"^2.8.0","eslint-plugin-prettier":"^2.6.0","file-loader":"^1.1.11","husky":"^0.14.3","jest":"^22.2.2","lint-staged":"^6.1.0","memory-fs":"^0.4.1","pre-commit":"^1.2.2","prettier":"^1.11.1","semantic-release":"^15.13.1","webpack":"^4.28.0","webpack-cli":"^2.0.13","webpack-defaults":"^2.3.0","webpack-dev-server":"^3.1.14"},"pre-commit":"lint-staged","lint-staged":{"*.js":["eslint --fix","git add"]},"gitHead":"a522101a4ab8d96d2458485503b1fee2e7435f5c","bugs":{"url":"https://github.com/faceyspacey/extract-css-chunks-webpack-plugin/issues"},"_id":"extract-css-chunks-webpack-plugin@4.0.0","_npmVersion":"6.5.0","_nodeVersion":"11.10.1","_npmUser":{"name":"zackljackson","email":"zackary.l.jackson@gmail.com"},"dist":{"integrity":"sha512-6wddkm9BJtFshHTA/vv7SKzXdyTXnyRxSceoeGDHdTngNoYARDtLcQfJL8gz6WBOtwvYsTEc+AuEgWEb/VaKCw==","shasum":"8a7dcbfa7ae7f399571a4246813d846062b0ed09","tarball":"https://registry.npmjs.org/extract-css-chunks-webpack-plugin/-/extract-css-chunks-webpack-plugin-4.0.0.tgz","fileCount":7,"unpackedSize":54876,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcfhGsCRA9TVsSAnZWagAAB8oP/iBKJSPhAwzX96KFzbgt\nmyL3fo2p5CCw8b9gxuZbVBubPfpsYZLEGovs0MmNiyITXyqbEn8Lvux9x2FV\nEvWqLafS3nOOh/ITqI+n8XDdZw39ts11Y0/gJNrKFoVx2QaxMWaqs6WTA07U\nUCf65R4AKdB4jJ5+ZYS+q95/KILC54F+eEJRkApWKv+QtXQNRX83tot4C8ga\nHK1QxNC0GD58D/lh6SAINRebCq8bUqgPRM4sEQ/HnfoYZLrxEpfQhPIaKffv\neYwTo8JnCc+X6v+DaB/PQUzAA9UO7ewxW+22wTF7cydrqUyeOLOqvonWWssh\nzp+kgbsua89WQM3eiG0zJHNl1+3wm1y4WGB3ZQQUmmr+kIObWujJjXqvN7fd\nwVeOuNmBDRMtYfLYRHZ1nXapnu0Q7qHxvzsmyd/11CLj7YDYZmATMe2+Az7q\nQ47Zm45sjKQtXLPuYccqFpxL4SZPjdEzzY5cNHG9IogiJ3qLeol4LcIgDzXf\nnnVpdmXdPVKt+yyW/EeEXG63cGpB2vl7lFjfkaOiO4QYhztfu1FqvrOilIns\nse6811AXayksCxRugMfx9TpyhSg66zMc5u3pZ6SVKxK9YSIKVVgC1qSXAJQw\nczsKGcA3jzE274YCTBR5+zhWpCYvhD9gTa4e9foNN+D1Fh4RMwmpxfbJsuxI\nF4xc\r\n=I7UA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHnfBES1/Y22o/iRJDrAYacBTSiDolqoMnTXo+Sw24zEAiEAgI4MpmdLCo3BD5+mBQDbcOohGcjb7ojefhFhtv6Kecw="}]},"maintainers":[{"email":"james@faceyspacey.com","name":"faceyspacey"},{"email":"zackary.l.jackson@gmail.com","name":"zackljackson"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/extract-css-chunks-webpack-plugin_4.0.0_1551765931148_0.8992470266646406"},"_hasShrinkwrap":false},"4.0.0-beta.3":{"name":"extract-css-chunks-webpack-plugin","version":"4.0.0-beta.3","description":"Extract CSS from chunks into stylesheets + HMR. Supports Webpack 4 + SSR","license":"MIT","author":{"name":"James Gillmore","email":"james@faceyspacey.com"},"contributors":[{"name":"Zack Jackson","email":"zack@ScriptedAlchemy.com","url":"https://github.com/ScriptedAlchemy"}],"homepage":"http://github.com/faceyspacey/extract-css-chunks-webpack-plugin","repository":{"type":"git","url":"git+https://github.com/faceyspacey/extract-css-chunks-webpack-plugin.git"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"keywords":["css","chunks","code splitting","mini-css","hot","hmr","universal","webpack","webpack 4","css-hot-loader","extract-css-chunks-webpack-plugin"],"main":"dist/cjs.js","engines":{"node":">= 6.9.0 <7.0.0 || >= 8.9.0"},"scripts":{"start":"npm run build -- -w","build":"cross-env NODE_ENV=production babel src -d dist --ignore 'src/**/*.test.js' --copy-files","clean":"del-cli dist","commitlint":"commitlint","commitmsg":"commitlint -e $GIT_PARAMS","lint":"eslint --cache src test","ci:lint:commits":"commitlint --from=${CIRCLE_BRANCH} --to=${CIRCLE_SHA1}","lint-staged":"lint-staged","prebuild":"npm run clean","prepublish":"npm run build","release:validate":"commitlint --from=$(git describe --tags --abbrev=0) --to=$(git rev-parse HEAD)","security":"npm audit","test":"jest","test:watch":"jest --watch","test:coverage":"jest --collectCoverageFrom='src/**/*.js' --coverage","test:manual":"webpack-dev-server test/manual/src/index.js --open --config test/manual/webpack.config.js","ci:lint":"npm run lint && npm run security","ci:test":"npm run test -- --runInBand","ci:coverage":"npm run test:coverage -- --runInBand","defaults":"webpack-defaults","semantic-release":"npx semantic-release","travis":"npm run ci:coverage"},"peerDependencies":{"webpack":"^4.4.0"},"dependencies":{"loader-utils":"^1.1.0","normalize-url":"^3.0.0","lodash":"^4.17.11","schema-utils":"^1.0.0","webpack-sources":"^1.1.0"},"devDependencies":{"@commitlint/cli":"^6.1.3","@commitlint/config-conventional":"^6.1.3","@webpack-contrib/eslint-config-webpack":"^2.0.4","babel-cli":"^6.26.0","babel-jest":"^22.2.2","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-polyfill":"^6.26.0","babel-preset-env":"^1.6.1","conventional-github-releaser":"^2.0.2","cross-env":"^5.1.3","css-loader":"^0.28.10","del":"^3.0.0","del-cli":"^1.1.0","es-check":"^5.0.0","eslint":"^4.17.0","eslint-plugin-import":"^2.8.0","eslint-plugin-prettier":"^2.6.0","file-loader":"^1.1.11","husky":"^0.14.3","jest":"^22.2.2","lint-staged":"^6.1.0","memory-fs":"^0.4.1","pre-commit":"^1.2.2","prettier":"^1.11.1","semantic-release":"^15.13.1","webpack":"^4.28.0","webpack-cli":"^2.0.13","webpack-defaults":"^2.3.0","webpack-dev-server":"^3.1.14"},"pre-commit":"lint-staged","lint-staged":{"*.js":["eslint --fix","git add"]},"readme":"<a href=\"https://gitter.im/Reactlandia/Lobby\" target=\"_blank\">\n  <img alt=\"Edit Redux-First Router Demo\" src=\"http://cdn.reactlandia.com/chat-badge-reactlandia.png\">\n</a>\n\n\n# extract-css-chunks-webpack-plugin\n\n<p align=\"center\">\n  <a href=\"https://www.npmjs.com/package/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://img.shields.io/npm/v/extract-css-chunks-webpack-plugin.svg\" alt=\"Version\" />\n  </a>\n\n  <a href=\"https://travis-ci.org/faceyspacey/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://travis-ci.org/faceyspacey/extract-css-chunks-webpack-plugin.svg?branch=master\" alt=\"Build Status\" />\n  </a>\n\n  <a href=\"https://www.npmjs.com/package/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://img.shields.io/npm/dt/extract-css-chunks-webpack-plugin.svg\" alt=\"Downloads\" />\n  </a>\n\n  <a href=\"https://www.npmjs.com/package/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://img.shields.io/npm/dm/extract-css-chunks-webpack-plugin.svg\" alt=\"License\" />\n  </a>\n  \n  <a href=\"https://www.npmjs.com/package/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://img.shields.io/npm/l/extract-css-chunks-webpack-plugin.svg\" alt=\"License\" />\n  </a>\n</p>\n\n<h2 align=\"center\">🍾🍾🍾It's our absolute pleasure to announce Webpack 4 Support 🚀🚀🚀</h2>\n\n> **HEADLINES (May 2018): Now Independently supports Webpack 4:** \nYep that's right. The universal family is now fully Webpack 4. Thank you to all our users for your loyalty and patience! If you love Universal, then you are gonna fall head over heels when we bring out the main course! \n\nSo... why did we rebuild `extract-css-chunks`? What does it offer? \n\nIt's got all the goodness of `mini-css-extract-plugin` but with 2 gleaming, sought after benefits. \n\nCompared to the existing loaders, we are offering a single solution as opposed to needing to depend on multiple loaders to cater for different features:\n\n## Perks\n* **HMR:** It also has first-class support for **Hot Module Replacement** across ALL those css files/chunks!!!\n* cacheable stylesheets \n* smallest total bytes sent compared to \"render-path\" css-in-js solutions that include your CSS definitions in JS\n* Faster than the V2!\n* Async loading\n* No duplicate compilation (performance)\n* Easier to use\n* Specific to CSS\n* SSR Friendly development build, focused on frontend DX\n* Works seamlessly with the Universal family\n* Works fantastically as a standalone style loader (You can use it for any webpack project! with no extra dependencies!)\n\nAdditionally, if you are already a user of the universal family -- we will be waving goodbye to the mandatory ```window.__CSS_CHUNKS__```.\n\nThe functionality is still available to you via chunk flushing, and it can come in super handy when needing to easily resolve style assets as urls that might need to be passed to a third party.\n\n## Webpack 4 Standalone Installation:\n\nIf you are just looking for something that works like `mini-css-extract-plugin` but with HMR, then look no further.\n\nNOTE: We have aligned out loader implementation to be the same as `mini-css-extract-plugin` \n\n**If you already use `mini-css-extract-plugin`, then you can just change the `require` statement - it's that easy**\n\n```\nyarn add --dev extract-css-chunks-webpack-plugin\n```\n\n*webpack.config.js:*\n```js\nconst ExtractCssChunks = require(\"extract-css-chunks-webpack-plugin\")\n\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [\n           {\n             loader:ExtractCssChunks.loader,\n             options: {\n               hot: true, // if you want HMR - we try to automatically inject hot reloading but if it's not working, add it to the config\n               modules: true, // if you use cssModules, this can help.\n               reloadAll: true, // when desperation kicks in - this is a brute force HMR flag\n\n             }\n           },\n           \"css-loader\"\n         ]\n      }\n    ]\n  },\n  plugins: [\n    new ExtractCssChunks(\n        {\n          // Options similar to the same options in webpackOptions.output\n          // both options are optional\n          filename: \"[name].css\",\n          chunkFilename: \"[id].css\",\n          orderWarning: true, // Disable to remove warnings about conflicting order between imports\n        }\n    ),\n  ]\n}\n```\n\n*webpack.server.config.js*\n\nThe server needs to be handled differently, we still want one chunk. Luckily webpack 4 supports **LimitChunkCountPlugin**\n\n```js\nnew webpack.optimize.LimitChunkCountPlugin({\n    maxChunks: 1\n})\n```\n\n\n### What about Webpack 3?\nThis is a breaking change. The entire loader has been fundamentally rewritten specifically for Webpack 4. Aiming to support our existing user base, allowing them to upgrade their infrastructure to support Webpack 4 based universally code-split server-side rendered react applications. \n\nThere have been some challenges along the way since the release of webpack 4. Ultimately the only remaining hurdle is code split, async style loading. \n\nIf you do need Webpack 3, make sure to stick with the latest `v2.x.x` release. `> v3.x.x` is only intended for users with Webpack 4\n\n\n\n\n*Note: this is a companion package to:*\n- [webpack-flush-chunks](https://github.com/faceyspacey/webpack-flush-chunks) \n- [react-universal-component](https://github.com/faceyspacey/react-universal-component)\n- [babel-plugin-universal-import](https://github.com/faceyspacey/babel-plugin-universal-import) ***or*** [babel-plugin-dual-import](https://github.com/faceyspacey/babel-plugin-dual-import)\n\n\n## Recommended Installation For Universal\n```\nyarn add react-universal-component webpack-flush-chunks\nyarn add --dev extract-css-chunks-webpack-plugin babel-plugin-universal-import\n```\n\n*.babelrc:*\n```js\n{\n  \"plugins\": [\"universal-import\"]\n}\n```\nThe main thing is you need to cater to the new chunking system of webpack!\nWith **webpack.optimize.CommonsChunkPlugin** plugin no longer part of Webpack 4, we need another way to define the code-splitting. Luckily we have `optimization` configs built into webpack now\n\n> There are more aggressive ways to code split, thanks to webpack 4. Check out the RUC Readme if you are looking for a more aggressive code split optimization configuration. These are just examples, you should be able to configure them as you see fit\n\n- `splitChunks`: Adding this to your `dev-webpack` will help with HMR when changing file names (or moving the files) which are dynamically imported. If you dont add this to your dev-webpack you might get this error: `Runtime TypeError: Cannot read property 'call' of undefined at __webpack_require__`. Could be related to this webpack issue: https://github.com/webpack/webpack/issues/6094. Adding it to your `prod-webpack` could unfortunately increase your total file size about 15% (in my test project), this is because you are changing webpacks defualt `chunks: async` to `chunks: 'initial'`\n- `runtimeChunk`: removed a hmr warning in chrome dev console, which got printed when starting the dev server. What it does and why it is needed together with `bootstrap` would be nice if someone else could make a PR for.\n- `minimizer: { UglifyJSPlugin`: Override the default UglifyjsWebpackPlugin minimizer with custom settings. These settings are probably default by now. They didnt do anything to the bundle size in my test project. Install instructions: https://webpack.js.org/plugins/uglifyjs-webpack-plugin/\n\n*webpack.config.js:*\n```js\nconst ExtractCssChunks = require(\"extract-css-chunks-webpack-plugin\")\nconst UglifyJsPlugin = require('uglifyjs-webpack-plugin'); // or Terser plugin\n\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [\n          {\n            loader:ExtractCssChunks.loader,\n            options: {\n              hot: true,\n              modules: true,\n              reloadAll: true\n            },\n          },\n          {\n            loader: 'css-loader',\n            options: {\n              modules: true,\n              localIdentName: '[name]__[local]--[hash:base64:5]',\n            },\n          },\n        ],\n      },\n    ],\n  },\n  optimization: {\n      // FOR PRODUCTION\n      minimizer: [\n          new UglifyJsPlugin({\n              uglifyOptions: {\n                  output: {\n                      comments: false,\n                      ascii_only: true\n                  },\n                  compress: {\n                      comparisons: false\n                  }\n              }\n          })\n      ],\n      // END\n      // NEEDED BOTH IN PROD AND DEV BUILDS\n      runtimeChunk: {\n          name: 'bootstrap'\n      },\n      splitChunks: {\n          chunks: 'initial',\n          cacheGroups: {\n              vendors: {\n                  test: /[\\\\/]node_modules[\\\\/]/,\n                  name: 'vendor'\n              }\n          }\n      }\n  },\n  plugins: [\n    new ExtractCssChunks({\n      filename: '[name].css',\n    }),\n  ]\n};\n```\n\n## Desired Output\nHere's the sort of CSS you can expect to serve:\n\n```\n<head>\n\t<link rel='stylesheet' href='/static/main.css' />\n\t<link rel='stylesheet' href='/static/0.css' />\n\t<link rel='stylesheet' href='/static/7.css' />\n</head> \n\n<body>\n\t<div id=\"react-root\"></div>\n\t\n\t<script type='text/javascript' src='/static/vendor.js'></script>\n\t<script type='text/javascript' src='/static/0.js'></script>\n\t<script type='text/javascript' src='/static/7.js'></script>\n\t<script type='text/javascript' src='/static/main.js'></script>\n</body>\n```\n\nIf you need to resolve your stylesheets on the client side, for whatever reason. \n\n[webpack-flush-chunks](https://github.com/faceyspacey/webpack-flush-chunks) will scoop up the exact stylesheets to embed in your response. It will give you an object which can be embedded on page\n\nHere's how you do it:\n\n\n*src/components/App.js:*\n```js\nconst UniversalComponent = universal(props => import(`./${props.page}`))\n\n<UniversalComponent page='Foo' />\n```\n\n*server/render.js:*\n```js\nimport { flushChunkNames } from 'react-universal-component/server'\nimport flushChunks from 'webpack-flush-chunks'\n\nconst app = ReactDOMServer.renderToString(<App />)\nconst { js, styles, cssHash } = flushChunks(webpackStats, {\n  chunkNames: flushChunkNames()\n})\n\nres.send(`\n  <!doctype html>\n  <html>\n    <head>\n      ${styles}\n    </head>\n    <body>\n      <div id=\"root\">${app}</div>\n      <!-- not needed unless you want to access css chunks urls manually  -->\n      ${cssHash}\n      <!-- extract-css-chunks takes care of loading the css assets automatically -->\n      ${js}\n    </body>\n  </html>\n`)\n```\n\n***As for asynchronous calls to `import()` on user navigation,*** [babel-plugin-universal-import](https://github.com/faceyspacey/babel-plugin-universal-import) is required if you're using [react-universal-component](https://github.com/faceyspacey/react-universal-component). And if you aren't, you must use: [babel-plugin-dual-import](https://github.com/faceyspacey/babel-plugin-dual-import). \n\n\nThese babel plugins request both your js + your css. *Very Nice!* This is the new feature of the 2.0. Read *Sokra's* (author of webpack) article on how [on how this is the future of CSS for webpack](https://medium.com/webpack/the-new-css-workflow-step-1-79583bd107d7). Use this and be in the future today.\n\n\n## API \nYou can pass the same options as `mini-css-extract` to `new ExtractCssChunks`, such as:\n\n```javascript\nnew ExtractCssChunk({\n      filename: devMode ? '[name].css' : '[name].[hash].css',\n      chunkFilename: devMode ? '[id].css' : '[id].[hash].css',\n})\n```\n\n>Keep in mind, by default `[name].css` is used when `process.env.NODE_ENV === 'development'` and `[name].[contenthash].css` during production, so you can likely forget about having to pass anything.\n\n### HMR Troubleshooting\n**Blank array in HMR script?**\n\nIf you have issues with HMR, but enabled the loader, plugin, and already tried `hot: true, reloadAll:true`, then your webpack config might be more abstract than my simple lookup functions. In this case, Ive exported out the actual hot loader, you can add this manually and as long as you've got the plugin and loader -- it'll work \n\n```js\n rules: [\n      {\n        test: /\\.css$/,\n        use: [\n          ExtractCssChunks.hotLoader, // for those who want to manually force hotLoading\n          ExtractCssChunks.loader,\n          {\n            loader: 'css-loader',\n            options: {\n              modules: true,\n              localIdentName: '[name]__[local]--[hash:base64:5]',\n            },\n          },\n        ],\n      },\n    ]\n```\n\n### HMR Pitfall\n\nThe most common workflow when working with webpack is to write a \"development\" / \"production\" value in to the\n'process.env.NODE_ENV' namespace, typically, using webpack's built-in \"DefinePlugin\" plugin. e.g:\n\n```javascript\nnew webpack.DefinePlugin( {\n     'process.env': {\n        NODE_ENV: `\"${config.devMode ? 'development' : 'production'}\"`,\n      },\n} )\n```\nThe value set by the aforementioned plugin will only be available in the runtime ( when webpack's javascript output is executed ).\nIn order for this plugin to work with hot module reloading, The npm script / gulp task / grunt task etc, should be invoked with the same environment variable as shown above.\n\nFor example, when running the build using some form of npm script:\n\n```json\n{\n  \"scripts\": {\n     \"build\": \"cross-env NODE_ENV=production babel src -d dist --ignore 'src/**/*.test.js' --copy-files\"\n  }\n}\n```\n[cross-env](https://www.npmjs.com/package/cross-env) is optional but recommended. \n\n### What about Glamorous, Styled Components, Styled-Jsx, Aphrodite, etc?\n\nIf you effectively use code-splitting, **Extract Css Chunks** can be a far better option than using emerging solutions like *Glamorous*, *Styled Components*, and slightly older tools like *Aphrodite*, *Glamor*, etc. We aren't fans of either rounds of tools because of several issues, but particularly because they all have a runtime overhead. Every time your React component is rendered with those, CSS is generated and updated within the DOM. On the server, you're going to also see unnecessary cycles for flushing the CSS along the critical render path.\n\nThe reason **Extract CSS Chunk** can be a better option is because **we also generate multiple sets of CSS based on what is actually \"used\",** ***but without the runtime overhead***. The difference is our definition of \"used\" is modules determined *statically* (which may not in fact be rendered) vs. what is in the \"critical render path\" (as is the case with the other tools). \n\nSo yes, our CSS may be mildly larger and include unnecessary css, but our `no_css.js` bundles will be a lot smaller as they don't need to inject any styles. See, even though those solutions have the smallest possible CSS file size, their javascript bundles, **in order to continue to render your components styled properly on the client,** must contain the necessary CSS for all possibilities! Those solutions serve both your entire bundle's CSS (in your javascript) **and** the CSS flushed from the critical render path. \n\nOn top of that, those are extra packages all with a huge number of issues in their Github repos corresponding to various limitations in the CSS they generate--something that is prevented when your definition for \"CSS-in-JS\" is simply importing CSS files compiled as normal by powerful proven CSS-specific processors.\n\nLastly, those solutions don't provide cacheable stylesheets. They do a lot of work--but they will **continue** doing it for you when you could have been done in one go long ago. Cloudflare is free--serve them through their CDN and you're winning. I love true javascript in css--don't get me wrong--but first I'd have to see they generate cacheable stylesheets. In my opinion, for now, it's best for environments that natively support it such as React Native.\n\n\n### Next:\n\nNow with that out of the way, for completeness let's compare what bytes of just the CSS are sent over the wire. The difference basically is minimal. Whereas solutions that flush from the critical render path will capture no more than the precise bits of CSS from the `if/else` branches followed, **Extract Css Chunks** is all about you effectively using code-splitting to insure, for example, you don't serve your Administration Panel's CSS in your public-facing site, etc. *In other words, it's all about avoiding serving large swaths of CSS from completely different sections of your app.* ***I.e. the biggest gains available to you.*** \n\n<details>\n<summary>\n    Read more on the topic ^^\n</summary>\n\nThis is where the real problem lies--where the real amount of unnecessary CSS comes from. If you effectively code-split your app, you may end up with 10 chunks. Now you can serve just the corresponding CSS for that chunk. If you try to go even farther and remove the css not used in the render path, you're likely achieving somewhere between 1-20% of the gains you achieved by thorough code-splitting. In other words, code splitting fulfills the 80/20 rule and attains the simple sweetspot of 80% optimization you--*as a balanced, level-headed, non-neurotic and professional developer*--are looking to achieve.\n\n*In short, by putting code splitting in appropriate places you have a lot of control over the CSS files that are created and can send a sensible* ***minimal*** *amount of associated bytes over the wire for the first request, perhaps even the smallest amount of all options.* \n\nIt's our perspective that you have achieved 80-99% of the performance gains (i.e. the creation of small relevant css files) at this ***static stage***. Offloading this work to the runtime stage is ultimately nit-picking and results in diminishing returns. When you factor that your JS bundle has to contain that JS anyway, those solutions make less and less sense from the perspective of reducing bytes delivered in the initial request. \n\nThere may be other reasons to use those tools (e.g. you don't like setting up webpack configs, or somehow you're really fond of pre-creating many `<div />` elements with their styles), but we prefer a simple standards-based way (without HoCs or specialized style components) to import styles just as you would in React Native. However to give the other tools credit, many of them likely started out with a different problem motivating them: avoiding webpack configs so you can include packages and their contained CSS without client apps being required to setup something like CSS loaders in Webpack. Having your CSS completely contained in true JS has its use cases, but at the application level--especially when you're already using something like Webpack--we fail to see its benefits. About all they share is a solution to avoiding **flashes of unstyled content** (FOUC), except one can save you a lot more bytes in what you send over the wire and save you from a continual runtime overhead where it's not needed. ***Honorable Mention:*** *StyleTron's concept of \"atomic declaration-level deduplication\" where it will make a class out of, say, `color: blue` so you don't need to send redundant styles certainly is a novel innovation, but again if the code still exists in your JS and you're building an application using Webpack (instead of a package), what's the point. In fact, it just makes editing the stylesheets in your browser developer tools more complicated. One benefit of critical render path solutions is the browser can spend less time matching the smaller number of styles to new DOM nodes as they appear, but then again it also has to spend the time injecting and parsing the new styles constantly, which is likely costlier.*\n\nAs an aside, so many apps share code between web and React Native--so the answer to the styles problem must be one that is identical for both. From that perspective importing a styles object **still** makes a lot of sense. **You're not missing out on the fundamental aspect of CSS-in-JSS:** ***isolated component-level styles and the ability to import them just like any other javascript code.*** Put them in other files, and use tools like `extract-css-chunks-webpack-plugin` and your pre-processors of choice that innately get styles right for the browser. As long as you're using **CSS Modules**, you're still at the cutting edge of CSS-in-JSS. Let's just say the other tools took one wrong turn and took it too far, when we already were at our destination. \n</details>\n\n\n#### SUMMARY OF BENEFITS COMPARED TO \"CRITICAL-RENDER-PATH\" SOLUTIONS:\n\n- no continual runtime overhead during `render` using HoCs that inject styles\n- smaller JS bundles without CSS injection\n- **You DO NOT need to clutter your component code with a specialized way of applying CSS (HoCs, styled elements)!** \n- The way you import module-based styles is exactly how you would import styles in React Native that exist in a separate file, which allows for extremely interchangeable code between React Native and regular React. Hurray! \n- pretty much already does everything covered by [@vjeux's 2014 css-in-js talk](https://speakerdeck.com/vjeux/react-css-in-js), besides dead code elimination. Dead code elimination is only solved for the other tools--as per the explanation above how the CSS is in the JS anyway--so much as Webpack and Uglify can remove **JS** that is not used. Either way, it's not a stretch to eventually add this feature to `extract-text-webpack-plugin` as well as this plugin. Hey, maybe it already has it??\n\n## Emotion!\n\n[Emotion](https://github.com/tkh44/emotion) is different. They allow for the extraction of static styles via their *extract mode*. We're very much looking forward to this being the perfect companion to the css chunks approach. \n<details>\n<summary>\n    Read more on the topic ^^\n</summary>\n\nCurrently however *extract mode* does not support IE11. So that means it's a no go, but we have hopes that in the future they'll solve that problem.\n\nThe reason Emotion doesn't work in IE11+ is because they currently try to preserve any dynamic aspects of your CSS-in-JS by converting it CSS vars, which isn't supported in IE11. That was a very smart approach, but unfortunately not good enough. \n\nThe vision we'd like to see for that package is where dynamic css stays inline, and where only static CSS is extracted into stylesheets, in which case CSS vars aren't needed. I've heard from them they have some \"hidden flags\" that allow for something close to this. When, and if, they take this feature all the way, look forward to us pushing it as our recommended approach. *Go Emotion!*\n</details>\n\n## Linaria\n\nLinaria is another modern CSS-in-JSS library. It's focused around static styles, which may make it a perfect fit for usage with this plugin. Check it out:\n\nhttps://github.com/callstack/linaria\n\n## What if I don't use SSR and use html-webpack-plugin?\n\nFor that case you can use [css-chunks-html-webpack-plugin](https://github.com/teamable-software/css-chunks-html-webpack-plugin) which will extract CSS chunks paths into your HTML file.\n\n## Conclusion:\n**We love CSS modules; no less, no more.**\n\n**Long live the dream of Code Splitting Everywhere!**\n\n\n## Contributing\nWe use [commitizen](https://github.com/commitizen/cz-cli), so run `npm run cm` to make commits. A command-line form will appear, requiring you answer a few questions to automatically produce a nicely formatted commit. Releases, semantic version numbers, tags and changelogs will automatically be generated based on these commits thanks to [semantic-release](https://github.com/semantic-release/semantic-release). Be good.\n\n## More from FaceySpacey in Reactlandia\n- [redux-first-router](https://github.com/faceyspacey/redux-first-router). It's made to work perfectly with *Universal*. Together they comprise our *\"frameworkless\"* Redux-based approach to what Next.js does (splitting, SSR, prefetching, and routing). *People are lovin it by the way* 😎\n","readmeFilename":"README.md","gitHead":"509803fcde02142b77fc72fc548100a49203e6ac","bugs":{"url":"https://github.com/faceyspacey/extract-css-chunks-webpack-plugin/issues"},"_id":"extract-css-chunks-webpack-plugin@4.0.0-beta.3","_npmVersion":"5.6.0","_nodeVersion":"9.10.0","_npmUser":{"name":"zackljackson","email":"zackary.l.jackson@gmail.com"},"dist":{"integrity":"sha512-W/AzB+nCxkArVfP68oJSYwhVYaDnFeDQywRikcldj7e5icmIABUkcUHCt+MQdMU6jlH+9xKPxUKo22Sg0w/2IA==","shasum":"eae24e9b80a1720a4f1f0f2fcd3681c61ac1995a","tarball":"https://registry.npmjs.org/extract-css-chunks-webpack-plugin/-/extract-css-chunks-webpack-plugin-4.0.0-beta.3.tgz","fileCount":7,"unpackedSize":54831,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJchamaCRA9TVsSAnZWagAAbBsP/0drBmba3JSEqG5q5dVA\nLpmLe9wH/PoSphpL3ceOCgrUXmF+hNAOgYamoyoyF30aENkMBfMQgiAMoGvV\nvMCpMcgqDqFyjzTqyl0HaO9EvaR5ft8/SwugoMr6LSedHot/cTCFXAVFx+uj\nGRjQvzIQWsY5nVSBTvV5n0mpbV3xOGjhOFSiRyMcKqN1OhzMTb23fkA79pyZ\n3JMnhyfVb5prycTrSn0u21T8OBuVJHtP5UvngZrAZ5uyr9q9bARtd2xCD3Cu\no9A44YJagY8N72VXPsry9pjUNbf7tUvtlVbTvH5mYlS8V3P5GHyNxYXsWXrY\nsbY58xK4guhHWB2n1mBt1kfZIXc0GksyuJQ6iDqqnuLfNo4Bl34kssJbrBQn\ndFqM6WTud7icrO+9K0CxmisLN2I0two2QsRoxW4vBL57+2cxQe3jou8DR3hS\na3oQaTKcmyk5CPW7habA4hOXSISfT56ph2czINpBypM52ZHz5r9k4DafetgK\nt0DZ082Dg904PB2jARxwD6fY0Sb0MANuolsgdhriymeqrmxTyaHvVbVJZd3e\nU/lBq/kPnFULkw0lpVAVZwpZeThAnLtbnYlgS+WMx2qVfS7TVghPMrHP1Fg/\nWI4xdk+/gYx5UqNlk1Xo40OvoDsScCeF3fEwZnJObzEPn/eHaU/f9TQNctY/\ninjR\r\n=rkAt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFwxcg9I4lqIIR5wrUoZ0zTjuHPkdIH1AQesrymcUmZ2AiACFe2n/3RjqDSKz1V2nuUn4bOldO3NfsUbL9CRJRCl3w=="}]},"maintainers":[{"email":"james@faceyspacey.com","name":"faceyspacey"},{"email":"zackary.l.jackson@gmail.com","name":"zackljackson"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/extract-css-chunks-webpack-plugin_4.0.0-beta.3_1552263577954_0.8468036926826292"},"_hasShrinkwrap":false},"4.0.1":{"name":"extract-css-chunks-webpack-plugin","version":"4.0.1","description":"Extract CSS from chunks into stylesheets + HMR. Supports Webpack 4 + SSR","license":"MIT","author":{"name":"James Gillmore","email":"james@faceyspacey.com"},"contributors":[{"name":"Zack Jackson","email":"zack@ScriptedAlchemy.com","url":"https://github.com/ScriptedAlchemy"}],"homepage":"http://github.com/faceyspacey/extract-css-chunks-webpack-plugin","repository":{"type":"git","url":"git+https://github.com/faceyspacey/extract-css-chunks-webpack-plugin.git"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"keywords":["css","chunks","code splitting","mini-css","hot","hmr","universal","webpack","webpack 4","css-hot-loader","extract-css-chunks-webpack-plugin"],"main":"dist/cjs.js","engines":{"node":">= 6.9.0 <7.0.0 || >= 8.9.0"},"scripts":{"start":"npm run build -- -w","build":"cross-env NODE_ENV=production babel src -d dist --ignore 'src/**/*.test.js' --copy-files","clean":"del-cli dist","commitlint":"commitlint","commitmsg":"commitlint -e $GIT_PARAMS","lint":"eslint --cache src test","ci:lint:commits":"commitlint --from=${CIRCLE_BRANCH} --to=${CIRCLE_SHA1}","lint-staged":"lint-staged","prebuild":"npm run clean","prepublish":"npm run build","release:validate":"commitlint --from=$(git describe --tags --abbrev=0) --to=$(git rev-parse HEAD)","security":"npm audit","test":"jest","test:watch":"jest --watch","test:coverage":"jest --collectCoverageFrom='src/**/*.js' --coverage","test:manual":"webpack-dev-server test/manual/src/index.js --open --config test/manual/webpack.config.js","ci:lint":"npm run lint && npm run security","ci:test":"npm run test -- --runInBand","ci:coverage":"npm run test:coverage -- --runInBand","defaults":"webpack-defaults","semantic-release":"npx semantic-release","travis":"npm run ci:coverage"},"peerDependencies":{"webpack":"^4.4.0"},"dependencies":{"loader-utils":"^1.1.0","normalize-url":"^3.0.0","lodash":"^4.17.11","schema-utils":"^1.0.0","webpack-sources":"^1.1.0"},"devDependencies":{"@commitlint/cli":"^6.1.3","@commitlint/config-conventional":"^6.1.3","@webpack-contrib/eslint-config-webpack":"^2.0.4","babel-cli":"^6.26.0","babel-jest":"^22.2.2","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-polyfill":"^6.26.0","babel-preset-env":"^1.6.1","conventional-github-releaser":"^2.0.2","cross-env":"^5.1.3","css-loader":"^0.28.10","del":"^3.0.0","del-cli":"^1.1.0","es-check":"^5.0.0","eslint":"^4.17.0","eslint-plugin-import":"^2.8.0","eslint-plugin-prettier":"^2.6.0","file-loader":"^1.1.11","husky":"^0.14.3","jest":"^22.2.2","lint-staged":"^6.1.0","memory-fs":"^0.4.1","pre-commit":"^1.2.2","prettier":"^1.11.1","semantic-release":"^15.13.1","webpack":"^4.28.0","webpack-cli":"^2.0.13","webpack-defaults":"^2.3.0","webpack-dev-server":"^3.1.14"},"pre-commit":"lint-staged","lint-staged":{"*.js":["eslint --fix","git add"]},"gitHead":"7d4b7251b3891c01e1e324b2d9b3e88511cbf8a5","bugs":{"url":"https://github.com/faceyspacey/extract-css-chunks-webpack-plugin/issues"},"_id":"extract-css-chunks-webpack-plugin@4.0.1","_npmVersion":"6.5.0","_nodeVersion":"11.11.0","_npmUser":{"name":"zackljackson","email":"zackary.l.jackson@gmail.com"},"dist":{"integrity":"sha512-axin0Qz65T4ZQl8FEGW1ZN31kwUJOO7CoiWv0aTupYjmmQdtr56qsW061MuLglzTNwDKTcSe7KbtuzMZ5uc3Cw==","shasum":"8a25ecf89e4a31d74351e487e616ecc79e873052","tarball":"https://registry.npmjs.org/extract-css-chunks-webpack-plugin/-/extract-css-chunks-webpack-plugin-4.0.1.tgz","fileCount":7,"unpackedSize":54824,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJchqVXCRA9TVsSAnZWagAA2q4P/Rk+qNgaE9gp8kEj7+Rb\npSb7u/D+pj1nZHeAdXXSc0zkgzdJ/pAvJyq5Xl8hPQck29afqF5dzRPMlDEU\ncUdlrsZc4RH+zWSdnFRdW53EI4GeVXD9RRf3/FqZbPYdt/N6i4cUqSHfu3et\nsuM2nMHMxQd+LhJIEUw4kFsDy2VcUERjdUclfQlRE4VzAncq2tIPrYXGBi1S\no0s0HEVEGcENHs5Rl2qN4kHRUv9yLygfw3Mnvi/ESDqsFaC2jx7A9q+iEAkl\nryDorqUN4r0ChZaGY/MZsC0uVIaqfkYg5KmxXpNOsARAFclSH8qI77DgdBYC\nJQzuJLS4CQGt3x+OLtCrRenx1dxMuiA3bvmwyVnsVkss+tiwhyD1TpdQVfUo\n858qoZGDH3t1X94FeuS6BfyloZoSCTaB4+o6mz/8PGyoo1zKKfQqOTvOG+i+\nL8/ATOUc46dS2eFGp9yk+ecpNDvZ/Hlnovc94EgmnAlgkw6A21soHTEEBOwz\nniqqG67QCBKtWTTcpSSTLNYpjIr04mnnONspGd0RjDgyTuco2RlbMcVswRfI\npvhHLQ3XVoBrHdwm+Xlf2YkL6G2gCrI7yrpt4fQdAavQd2hzKxvED6d+GpIl\n0hXguGvm4vxgY1x3CtcAnpseIUPEgTVNTeREylpMvpVfXGmqmEkmVkhbVgz+\n5oVd\r\n=aOve\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCadQOqkD8+PlRwKRGRz8I5yyUSV8ITmvtaaq+sUdh9UwIhAOwKLHUmi/6b36HmwzvYvO73dvzhvjf5u30UondLU1ev"}]},"maintainers":[{"email":"james@faceyspacey.com","name":"faceyspacey"},{"email":"zackary.l.jackson@gmail.com","name":"zackljackson"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/extract-css-chunks-webpack-plugin_4.0.1_1552328022670_0.15574009703669311"},"_hasShrinkwrap":false},"4.0.2":{"name":"extract-css-chunks-webpack-plugin","version":"4.0.2","description":"Extract CSS from chunks into stylesheets + HMR. Supports Webpack 4 + SSR","license":"MIT","author":{"name":"James Gillmore","email":"james@faceyspacey.com"},"contributors":[{"name":"Zack Jackson","email":"zack@ScriptedAlchemy.com","url":"https://github.com/ScriptedAlchemy"}],"homepage":"http://github.com/faceyspacey/extract-css-chunks-webpack-plugin","repository":{"type":"git","url":"git+https://github.com/faceyspacey/extract-css-chunks-webpack-plugin.git"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"keywords":["css","chunks","code splitting","mini-css","hot","hmr","universal","webpack","webpack 4","css-hot-loader","extract-css-chunks-webpack-plugin"],"main":"dist/cjs.js","engines":{"node":">= 6.9.0 <7.0.0 || >= 8.9.0"},"scripts":{"start":"npm run build -- -w","build":"cross-env NODE_ENV=production babel src -d dist --ignore 'src/**/*.test.js' --copy-files","clean":"del-cli dist","commitlint":"commitlint","commitmsg":"commitlint -e $GIT_PARAMS","lint":"eslint --cache src test","ci:lint:commits":"commitlint --from=${CIRCLE_BRANCH} --to=${CIRCLE_SHA1}","lint-staged":"lint-staged","prebuild":"npm run clean","prepublish":"npm run build","release:validate":"commitlint --from=$(git describe --tags --abbrev=0) --to=$(git rev-parse HEAD)","security":"npm audit","test":"jest","test:watch":"jest --watch","test:coverage":"jest --collectCoverageFrom='src/**/*.js' --coverage","test:manual":"webpack-dev-server test/manual/src/index.js --open --config test/manual/webpack.config.js","ci:lint":"npm run lint && npm run security","ci:test":"npm run test -- --runInBand","ci:coverage":"npm run test:coverage -- --runInBand","defaults":"webpack-defaults","semantic-release":"npx semantic-release","travis":"npm run ci:coverage"},"peerDependencies":{"webpack":"^4.4.0"},"dependencies":{"loader-utils":"^1.1.0","normalize-url":"^3.0.0","lodash":"^4.17.11","schema-utils":"^1.0.0","webpack-sources":"^1.1.0"},"devDependencies":{"@commitlint/cli":"^6.1.3","@commitlint/config-conventional":"^6.1.3","@webpack-contrib/eslint-config-webpack":"^2.0.4","babel-cli":"^6.26.0","babel-jest":"^22.2.2","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-polyfill":"^6.26.0","babel-preset-env":"^1.6.1","conventional-github-releaser":"^2.0.2","cross-env":"^5.1.3","css-loader":"^0.28.10","del":"^3.0.0","del-cli":"^1.1.0","es-check":"^5.0.0","eslint":"^4.17.0","eslint-plugin-import":"^2.8.0","eslint-plugin-prettier":"^2.6.0","file-loader":"^1.1.11","husky":"^0.14.3","jest":"^22.2.2","lint-staged":"^6.1.0","memory-fs":"^0.4.1","pre-commit":"^1.2.2","prettier":"^1.11.1","semantic-release":"^15.13.1","webpack":"^4.28.0","webpack-cli":"^2.0.13","webpack-defaults":"^2.3.0","webpack-dev-server":"^3.1.14"},"pre-commit":"lint-staged","lint-staged":{"*.js":["eslint --fix","git add"]},"gitHead":"1428e113806110725851236977bcf37e08b892d6","bugs":{"url":"https://github.com/faceyspacey/extract-css-chunks-webpack-plugin/issues"},"_id":"extract-css-chunks-webpack-plugin@4.0.2","_npmVersion":"6.5.0","_nodeVersion":"11.12.0","_npmUser":{"name":"zackljackson","email":"zackary.l.jackson@gmail.com"},"dist":{"integrity":"sha512-svwrtf8iENEm5DRhzJp2qpfvapEsVEkrElqUqz8/ZtyfvKA8uT6y4GneOgKBCKK6oh+iVPSHZ+FrI89sxG6EOQ==","shasum":"67c1de090079247b9eb4f9d179cd2717ca43c361","tarball":"https://registry.npmjs.org/extract-css-chunks-webpack-plugin/-/extract-css-chunks-webpack-plugin-4.0.2.tgz","fileCount":7,"unpackedSize":54828,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJclbdgCRA9TVsSAnZWagAAq2cQAJ3iNLo5oguu3OpmuQx+\nWaxXFmhcWLpwdgQ+Lj++6PUD45UgPe0ligYeMvLNMrmUW9LRCguAu1SEFxHb\n1m6DKbNvmP8PcufVNfsA+0evsYUNTg2W/LD4Bt2AhLObPe0+cKOyCE0fbPWG\nDxklwhvpSecr65iUnEupZq+Qn6Eh0iIc7KYrUU2ZhnZdz/nda2X9KkYd6puX\nfqgwmtqy7M2XyU8tGd4Iir519xqoBOhgz+XqVSQ9k9qWURLjEB8mX1OAGN0C\nxc1my2xPzarDfYd48U/yE4nPmZXffCFEh+WWEcCTwwAAgV/ddL7cSAfzUliX\n0UTLvXN4ZnZYoqepmvfTrnK6lj7AfUpZKsMaBm+mLFzlCHau1Q68HciH3ak8\nbvEATNYaq18wuDPyCkSBkF3/Kor31jnJAbGgA5MsvYlh8ANGr1+qDV/rSzjH\n876CLuNjuLFqcPsnFyG/S4dkJhbTHwKnRbKZoPZJ/wuGAEPB8fUXrp0gFED8\n0hWDoXok2/C78SmJTfZk+vlRJGX2RKMZyYqSpnCR6Gj4EpIBLTKyC/GfNtKf\nH8bXhII+EJtKwzi0kHR7ilftAuwYouZGULPYzn60mHJO9sq4+XMmT5h3ZDNv\nr5O0/WepnHN3BDn6jgZ5wIa86rW06g3jrclXyAxeTwqa5e3cTppnvgAHF4mw\n1j5+\r\n=23WB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDVCukHibJONCpiTRFfXpwGWoaOr/avmPlVA4oLUX5z1AIgBF9yysO8Gq1+zHhy7C6urWzkfV2Y0knMSBJuLZ1ftM4="}]},"maintainers":[{"email":"james@faceyspacey.com","name":"faceyspacey"},{"email":"zackary.l.jackson@gmail.com","name":"zackljackson"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/extract-css-chunks-webpack-plugin_4.0.2_1553315679521_0.12476946884798723"},"_hasShrinkwrap":false},"4.1.0":{"name":"extract-css-chunks-webpack-plugin","version":"4.1.0","description":"Extract CSS from chunks into stylesheets + HMR. Supports Webpack 4 + SSR","license":"MIT","author":{"name":"James Gillmore","email":"james@faceyspacey.com"},"contributors":[{"name":"Zack Jackson","email":"zack@ScriptedAlchemy.com","url":"https://github.com/ScriptedAlchemy"}],"homepage":"http://github.com/faceyspacey/extract-css-chunks-webpack-plugin","repository":{"type":"git","url":"git+https://github.com/faceyspacey/extract-css-chunks-webpack-plugin.git"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"keywords":["css","chunks","code splitting","mini-css","hot","hmr","universal","webpack","webpack 4","css-hot-loader","extract-css-chunks-webpack-plugin"],"main":"dist/cjs.js","engines":{"node":">= 6.9.0 <7.0.0 || >= 8.9.0"},"scripts":{"start":"npm run build -- -w","build":"cross-env NODE_ENV=production babel src -d dist --ignore 'src/**/*.test.js' --copy-files","clean":"del-cli dist","commitlint":"commitlint","commitmsg":"commitlint -e $GIT_PARAMS","lint":"eslint --cache src test","ci:lint:commits":"commitlint --from=${CIRCLE_BRANCH} --to=${CIRCLE_SHA1}","lint-staged":"lint-staged","prebuild":"npm run clean","prepublish":"npm run build","release:validate":"commitlint --from=$(git describe --tags --abbrev=0) --to=$(git rev-parse HEAD)","security":"npm audit","test":"jest","test:watch":"jest --watch","test:coverage":"jest --collectCoverageFrom='src/**/*.js' --coverage","test:manual":"webpack-dev-server test/manual/src/index.js --open --config test/manual/webpack.config.js","ci:lint":"npm run lint && npm run security","ci:test":"npm run test -- --runInBand","ci:coverage":"npm run test:coverage -- --runInBand","defaults":"webpack-defaults","semantic-release":"npx semantic-release","travis":"npm run ci:coverage"},"peerDependencies":{"webpack":"^4.4.0"},"dependencies":{"loader-utils":"^1.1.0","normalize-url":"^3.0.0","lodash":"^4.17.11","schema-utils":"^1.0.0","webpack-sources":"^1.1.0"},"devDependencies":{"@commitlint/cli":"^6.1.3","@commitlint/config-conventional":"^6.1.3","@webpack-contrib/eslint-config-webpack":"^2.0.4","babel-cli":"^6.26.0","babel-jest":"^22.2.2","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-polyfill":"^6.26.0","babel-preset-env":"^1.6.1","conventional-github-releaser":"^2.0.2","cross-env":"^5.1.3","css-loader":"^0.28.10","del":"^3.0.0","del-cli":"^1.1.0","es-check":"^5.0.0","eslint":"^4.17.0","eslint-plugin-import":"^2.8.0","eslint-plugin-prettier":"^2.6.0","file-loader":"^1.1.11","husky":"^0.14.3","jest":"^22.2.2","lint-staged":"^6.1.0","memory-fs":"^0.4.1","pre-commit":"^1.2.2","prettier":"^1.11.1","semantic-release":"^15.13.1","webpack":"^4.28.0","webpack-cli":"^2.0.13","webpack-defaults":"^2.3.0","webpack-dev-server":"^3.1.14"},"pre-commit":"lint-staged","lint-staged":{"*.js":["eslint --fix","git add"]},"gitHead":"9c377197d51eb740fa4fad9aad5da526c193ed00","bugs":{"url":"https://github.com/faceyspacey/extract-css-chunks-webpack-plugin/issues"},"_id":"extract-css-chunks-webpack-plugin@4.1.0","_npmVersion":"6.5.0","_nodeVersion":"11.12.0","_npmUser":{"name":"zackljackson","email":"zackary.l.jackson@gmail.com"},"dist":{"integrity":"sha512-tZ3Qvso0DtLKJ9JNZIi4xX/PWcrOapa8gAlEar1G56+qBbcDwL9AU3dJN2k2dZWvUgVeRM3yC0txKv18KkAqXg==","shasum":"cc69c0986f2e9b1ec7bf7db1a8efb7746cbc230d","tarball":"https://registry.npmjs.org/extract-css-chunks-webpack-plugin/-/extract-css-chunks-webpack-plugin-4.1.0.tgz","fileCount":7,"unpackedSize":54913,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcmskDCRA9TVsSAnZWagAA53cP/1CxQmnz7CEzKISmr4Sl\nkTmmWbMgMqJZHJXURHArl9YAK79wuTNPOjY4mRUsKAXnleUAU93D9LT00a7j\nbRR0NWrXa87UZS/P4RhjzsQRqyanDmEeL6B3apww5UpnaHef2k2M77fdUU0l\ntv4mTx6Io4Mu8RnOWbcsq13YFIUhB2dVq922ji7QF97/hmAMuswhJoj+tqTR\nD0M7fKbH2JqjJKwiieMbb0ujMJ3RBbN72NKyBWEnUEX89uWHUeXEMM0KT978\nkIuoG4HGXQ07QpiTVSkRUO0hv75z0aAoHOg9kkMfe36M7r94WPG5w4x+9QSl\n9yD2WTLVMNNPpVw1/Mc1Ef3FHk6uWt64IG+3T0rKgI1THC3pSYX2e9M148Ed\nP2oxDv7RC7W0HZmfhnIcSSjj6U8fPrZV7KrzoBTVcXN3ZSLh7AJ1CZQ28qkl\n53e28MMQ6HUPUfu634+hJW/3+aAiPz7Q32ruejPpXN+OaksAnZeNXryI8S8v\ny1kMCk2+Fd/Wv8uRTO7zhZ3qBTaAStqIkkEdl3/+s2avLnXigu/7IbWGuO+1\n4SSNrRCGeITAZvzYujJGagUIkqtNCRacMfXCXdqCVhmTpVHiP60OD+nEEQms\nS4wq54OVV5XGZD/oJ7xAaCb6lAvjof1xEa8FuYOxyB5iziWsvdZqBvNelVmN\nZ8lX\r\n=QNmL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDXHCGjx1IfHGtcdLmWgtG3iIyPPpiOrAgQC2dIZKMNbwIgLsM2AmJ9GE/3fSQsvMx+6w8a+OovIPJEd2bVpmUtGd4="}]},"maintainers":[{"email":"james@faceyspacey.com","name":"faceyspacey"},{"email":"zackary.l.jackson@gmail.com","name":"zackljackson"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/extract-css-chunks-webpack-plugin_4.1.0_1553647874380_0.8763321150204526"},"_hasShrinkwrap":false},"4.1.1":{"name":"extract-css-chunks-webpack-plugin","version":"4.1.1","description":"Extract CSS from chunks into stylesheets + HMR. Supports Webpack 4 + SSR","license":"MIT","author":{"name":"James Gillmore","email":"james@faceyspacey.com"},"contributors":[{"name":"Zack Jackson","email":"zack@ScriptedAlchemy.com","url":"https://github.com/ScriptedAlchemy"}],"homepage":"http://github.com/faceyspacey/extract-css-chunks-webpack-plugin","repository":{"type":"git","url":"git+https://github.com/faceyspacey/extract-css-chunks-webpack-plugin.git"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"keywords":["css","chunks","code splitting","mini-css","hot","hmr","universal","webpack","webpack 4","css-hot-loader","extract-css-chunks-webpack-plugin"],"main":"dist/cjs.js","engines":{"node":">= 6.9.0 <7.0.0 || >= 8.9.0"},"scripts":{"start":"npm run build -- -w","build":"cross-env NODE_ENV=production babel src -d dist --ignore 'src/**/*.test.js' --copy-files","clean":"del-cli dist","commitlint":"commitlint","commitmsg":"commitlint -e $GIT_PARAMS","lint":"eslint --cache src test","ci:lint:commits":"commitlint --from=${CIRCLE_BRANCH} --to=${CIRCLE_SHA1}","lint-staged":"lint-staged","prebuild":"npm run clean","prepublish":"npm run build","release:validate":"commitlint --from=$(git describe --tags --abbrev=0) --to=$(git rev-parse HEAD)","security":"npm audit","test":"jest","test:watch":"jest --watch","test:coverage":"jest --collectCoverageFrom='src/**/*.js' --coverage","test:manual":"webpack-dev-server test/manual/src/index.js --open --config test/manual/webpack.config.js","ci:lint":"npm run lint && npm run security","ci:test":"npm run test -- --runInBand","ci:coverage":"npm run test:coverage -- --runInBand","defaults":"webpack-defaults","semantic-release":"npx semantic-release","travis":"npm run ci:coverage"},"peerDependencies":{"webpack":"^4.4.0"},"dependencies":{"loader-utils":"^1.1.0","normalize-url":"^3.0.0","lodash":"^4.17.11","schema-utils":"^1.0.0","webpack-sources":"^1.1.0"},"devDependencies":{"@commitlint/cli":"^6.1.3","@commitlint/config-conventional":"^6.1.3","@webpack-contrib/eslint-config-webpack":"^2.0.4","babel-cli":"^6.26.0","babel-jest":"^22.2.2","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-polyfill":"^6.26.0","babel-preset-env":"^1.6.1","conventional-github-releaser":"^2.0.2","cross-env":"^5.1.3","css-loader":"^0.28.10","del":"^3.0.0","del-cli":"^1.1.0","es-check":"^5.0.0","eslint":"^4.17.0","eslint-plugin-import":"^2.8.0","eslint-plugin-prettier":"^2.6.0","file-loader":"^1.1.11","husky":"^0.14.3","jest":"^22.2.2","lint-staged":"^6.1.0","memory-fs":"^0.4.1","pre-commit":"^1.2.2","prettier":"^1.11.1","semantic-release":"^15.13.1","webpack":"^4.28.0","webpack-cli":"^2.0.13","webpack-defaults":"^2.3.0","webpack-dev-server":"^3.1.14"},"pre-commit":"lint-staged","lint-staged":{"*.js":["eslint --fix","git add"]},"gitHead":"0c6ca8e637cd1cafbb96df015e0e39059d61362b","bugs":{"url":"https://github.com/faceyspacey/extract-css-chunks-webpack-plugin/issues"},"_id":"extract-css-chunks-webpack-plugin@4.1.1","_npmVersion":"6.5.0","_nodeVersion":"11.12.0","_npmUser":{"name":"zackljackson","email":"zackary.l.jackson@gmail.com"},"dist":{"integrity":"sha512-z7ComUVr1vg2mteGPlbBjtBYYLfEm3Wu8Sapt+WW1UQJrPYMkjwqBCpb1VJdSGCgscls8VN6RagsCKpPKIDXhQ==","shasum":"f0dd7b513ffefec2d385779814f0c98be6051ddc","tarball":"https://registry.npmjs.org/extract-css-chunks-webpack-plugin/-/extract-css-chunks-webpack-plugin-4.1.1.tgz","fileCount":7,"unpackedSize":54911,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcmvGzCRA9TVsSAnZWagAAGZ0QAJHl5D9cf3eyWuqpEP6o\n/m7r2LouldJLN+I1H9UHY2PnRlo+86hQb2qG1nKFP5iNopo0gizTcqAwilAt\nQApTKs+i1cm5IV5ru9vruRD2XLJbLRspmyjEzMOAZMqlI3HFvPUn3afaCPqS\nlMpzPEuoCKSWMjRXwdFM3JyZ7HmkLXjuyh78JmNf5U8qp8EXYB36bNUtymmC\nlqPNZrtBEyMeYh860W4IFFC+cYjcUBXkpG9lvWnx93TKGLNTk1pOGJCb3CNM\nmqmhYa5WgnQKrmoYfybtdKZr+cJ4WrvZaYAxzxXujhOloinEiEnmmgS9kMzs\nxXdbwaQ0X0Ib7STvJIkT0340Y1vTDj1aDjvF5EkWy/zaGJoUeV1vBhamCNdu\nB9Hbr3A9XOUq9NEE3ldvYmSJez7lpOliUefXclUWTnkAgvY7tdnHp8+yOxdQ\nsJeT1L/1KKYALVfPfgTVxYArvXhHfjadY9YEkgZb1iKDQ8g+R1X+z4en96aZ\nvLtyaRfT5+HpXFNXwchzUfUKCOjAwRgTHf9Zvf/QldaCbXeE5Ok2OtzN6e3y\neF0lz19sJjQJBjOFKO2J2eAs1v4dEZy5wDVw83RLg2JHWik/1xolp3V9krST\nF3BK0NCXn1wQE7JSRLzxa+XDx2tv3ULzv9Z7wt2FsLOVLTvoRvzHXPbSbrwq\n3Fk3\r\n=uM9q\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCi+D2yOvmzy3JPj13FSxAHIkD9xouzZcQoGxBHAFaekQIgDgxegUxCIArV5gASZ3KD88xKxdZntJrjMzwPP1RFVR0="}]},"maintainers":[{"email":"james@faceyspacey.com","name":"faceyspacey"},{"email":"zackary.l.jackson@gmail.com","name":"zackljackson"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/extract-css-chunks-webpack-plugin_4.1.1_1553658291001_0.33877855255452016"},"_hasShrinkwrap":false},"4.2.0":{"name":"extract-css-chunks-webpack-plugin","version":"4.2.0","description":"Extract CSS from chunks into stylesheets + HMR. Supports Webpack 4 + SSR","license":"MIT","author":{"name":"James Gillmore","email":"james@faceyspacey.com"},"contributors":[{"name":"Zack Jackson","email":"zack@ScriptedAlchemy.com","url":"https://github.com/ScriptedAlchemy"}],"homepage":"http://github.com/faceyspacey/extract-css-chunks-webpack-plugin","repository":{"type":"git","url":"git+https://github.com/faceyspacey/extract-css-chunks-webpack-plugin.git"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"keywords":["css","chunks","code splitting","mini-css","hot","hmr","universal","webpack","webpack 4","css-hot-loader","extract-css-chunks-webpack-plugin"],"main":"dist/cjs.js","engines":{"node":">= 6.9.0 <7.0.0 || >= 8.9.0"},"scripts":{"start":"npm run build -- -w","build":"cross-env NODE_ENV=production babel src -d dist --ignore 'src/**/*.test.js' --copy-files","clean":"del-cli dist","commitlint":"commitlint","commitmsg":"commitlint -e $GIT_PARAMS","lint":"eslint --cache src test","ci:lint:commits":"commitlint --from=${CIRCLE_BRANCH} --to=${CIRCLE_SHA1}","lint-staged":"lint-staged","prebuild":"npm run clean","prepublish":"npm run build","release:validate":"commitlint --from=$(git describe --tags --abbrev=0) --to=$(git rev-parse HEAD)","security":"npm audit","test":"jest","test:watch":"jest --watch","test:coverage":"jest --collectCoverageFrom='src/**/*.js' --coverage","test:manual":"webpack-dev-server test/manual/src/index.js --open --config test/manual/webpack.config.js","ci:lint":"npm run lint && npm run security","ci:test":"npm run test -- --runInBand","ci:coverage":"npm run test:coverage -- --runInBand","defaults":"webpack-defaults","semantic-release":"npx semantic-release","travis":"npm run ci:coverage"},"peerDependencies":{"webpack":"^4.4.0"},"dependencies":{"loader-utils":"^1.1.0","lodash":"^4.17.11","normalize-url":"^2.0.1","schema-utils":"^1.0.0","webpack-sources":"^1.1.0"},"devDependencies":{"@commitlint/cli":"^6.1.3","@commitlint/config-conventional":"^6.1.3","@webpack-contrib/eslint-config-webpack":"^2.0.4","babel-cli":"^6.26.0","babel-jest":"^22.2.2","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-polyfill":"^6.26.0","babel-preset-env":"^1.6.1","conventional-github-releaser":"^2.0.2","cross-env":"^5.1.3","css-loader":"^0.28.10","del":"^3.0.0","del-cli":"^1.1.0","es-check":"^5.0.0","eslint":"^4.17.0","eslint-plugin-import":"^2.8.0","eslint-plugin-prettier":"^2.6.0","execa":"^1.0.0","file-loader":"^1.1.11","husky":"^0.14.3","jest":"^22.2.2","lint-staged":"^6.1.0","memory-fs":"^0.4.1","pre-commit":"^1.2.2","prettier":"^1.11.1","semantic-release":"^15.13.1","webpack":"^4.28.0","webpack-cli":"^2.0.13","webpack-defaults":"^2.3.0","webpack-dev-server":"^3.1.14"},"pre-commit":"lint-staged","lint-staged":{"*.js":["eslint --fix","git add"]},"gitHead":"e79875eeffd7a16d56c15d19b191c3f6c76b5fee","bugs":{"url":"https://github.com/faceyspacey/extract-css-chunks-webpack-plugin/issues"},"_id":"extract-css-chunks-webpack-plugin@4.2.0","_npmVersion":"6.5.0","_nodeVersion":"11.12.0","_npmUser":{"name":"zackljackson","email":"zackary.l.jackson@gmail.com"},"dist":{"integrity":"sha512-ws8uIGdkKSa2TyDcdX70eo3uuBSHvp3hbeiqKaBHGIFEVBRWLk9gpLL09QoJN45FfgrXGl6D48NkOnhi2vuuXg==","shasum":"e23bdb40cbfecfabf1affe5798b27be9625a25bc","tarball":"https://registry.npmjs.org/extract-css-chunks-webpack-plugin/-/extract-css-chunks-webpack-plugin-4.2.0.tgz","fileCount":7,"unpackedSize":54526,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcmvetCRA9TVsSAnZWagAA17cQAJuNMrCL3pfzH17mSz4C\nN7ji+Jl4v1fqb1xYj40y189Q8nSj+g7l51mn+68zhrBPy+N3Rdzv9V61cVUj\n6rWQB3R8GLLEGkBzpc/Ly9YJHt78quZ3Nsz+96ay5hKVbEDWDPmFLYW9DoSa\neHQzkdhB0WXgm5a12VqosyIjt+EdCkE1GUce5Jipp7McJYnlsTuFGkDOUUoJ\n8fsbAQ9riXPoO0BxlOX9dlREfZ8ViUvpl2+e5LvmWi/iwAXnHQMSKSzgEF3E\nR/fGOsuwEDDA9YgXZghXQGl5Ke1iXSFsri0Bd11FQBw79TEp0BhLuwI9Xcqd\nV0Yi1YXM+zzcfvXDo5nqzBmfYJhdAfpPtVIZ2uOFx584TVYDGzmVr5HhFFsx\nkX41xLpiyBOm4Y3N6ScyaDsP8Bq86oE+C3hdhn+BaXOeH5a4mkL0wa4rpSph\necKE83eVqZqLKmJp/zj74xY+ysXjo6UV1fVed20rx5FZPDC31uXmQZi/ONMW\nCVteG6JnQJSA6hu3IEbAn3tUIyEZcM8/ModxwESrMTEKphXuzL4d872N/3MC\neMi7duEsmhAxLVxcKMmutJktt2aU03qCn3pKTCd7B1zIrXFbmxRxBpFoTOyo\nr0vPHyR3aDdBLl0xB7zSD+c6YLA3evg7wOyndmTZbdfwWTQXRTaqS9h3GWHP\nzR0F\r\n=kG6C\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIACHbgtLuKvhidq0UeJD22mflY+8fJIiSyjPrD1r4nOcAiEAiSrkDc/PUjsrAlKPwXspZk6CQefcqCSx0q7TXbGq3iw="}]},"maintainers":[{"email":"james@faceyspacey.com","name":"faceyspacey"},{"email":"zackary.l.jackson@gmail.com","name":"zackljackson"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/extract-css-chunks-webpack-plugin_4.2.0_1553659820246_0.22954906932881225"},"_hasShrinkwrap":false},"4.3.0":{"name":"extract-css-chunks-webpack-plugin","version":"4.3.0","description":"Extract CSS from chunks into stylesheets + HMR. Supports Webpack 4 + SSR","license":"MIT","author":{"name":"James Gillmore","email":"james@faceyspacey.com"},"contributors":[{"name":"Zack Jackson","email":"zack@ScriptedAlchemy.com","url":"https://github.com/ScriptedAlchemy"}],"homepage":"http://github.com/faceyspacey/extract-css-chunks-webpack-plugin","repository":{"type":"git","url":"git+https://github.com/faceyspacey/extract-css-chunks-webpack-plugin.git"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"keywords":["css","chunks","code splitting","mini-css","hot","hmr","universal","webpack","webpack 4","css-hot-loader","extract-css-chunks-webpack-plugin"],"main":"dist/cjs.js","engines":{"node":">= 6.9.0 <7.0.0 || >= 8.9.0"},"scripts":{"start":"npm run build -- -w","build":"cross-env NODE_ENV=production babel src -d dist --ignore 'src/**/*.test.js' --copy-files","clean":"del-cli dist","commitlint":"commitlint","commitmsg":"commitlint -e $GIT_PARAMS","lint":"eslint --cache src test","ci:lint:commits":"commitlint --from=${CIRCLE_BRANCH} --to=${CIRCLE_SHA1}","lint-staged":"lint-staged","prebuild":"npm run clean","prepublish":"npm run build","release:validate":"commitlint --from=$(git describe --tags --abbrev=0) --to=$(git rev-parse HEAD)","security":"npm audit","test":"jest","test:watch":"jest --watch","test:coverage":"jest --collectCoverageFrom='src/**/*.js' --coverage","test:manual":"webpack-dev-server test/manual/src/index.js --open --config test/manual/webpack.config.js","ci:lint":"npm run lint && npm run security","ci:test":"npm run test -- --runInBand","ci:coverage":"npm run test:coverage -- --runInBand","defaults":"webpack-defaults","semantic-release":"npx semantic-release","travis":"npm run ci:coverage"},"peerDependencies":{"webpack":"^4.4.0"},"dependencies":{"loader-utils":"^1.1.0","lodash":"^4.17.11","normalize-url":"^2.0.1","schema-utils":"^1.0.0","webpack-sources":"^1.1.0"},"devDependencies":{"@commitlint/cli":"^6.1.3","@commitlint/config-conventional":"^6.1.3","@webpack-contrib/eslint-config-webpack":"^2.0.4","babel-cli":"^6.26.0","babel-jest":"^22.2.2","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-polyfill":"^6.26.0","babel-preset-env":"^1.6.1","conventional-github-releaser":"^2.0.2","cross-env":"^5.1.3","css-loader":"^0.28.10","del":"^3.0.0","del-cli":"^1.1.0","es-check":"^5.0.0","eslint":"^4.17.0","eslint-plugin-import":"^2.8.0","eslint-plugin-prettier":"^2.6.0","execa":"^1.0.0","file-loader":"^1.1.11","husky":"^0.14.3","jest":"^22.2.2","lint-staged":"^6.1.0","memory-fs":"^0.4.1","pre-commit":"^1.2.2","prettier":"^1.11.1","semantic-release":"^15.13.1","webpack":"^4.28.0","webpack-cli":"^2.0.13","webpack-defaults":"^2.3.0","webpack-dev-server":"^3.1.14"},"pre-commit":"lint-staged","lint-staged":{"*.js":["eslint --fix","git add"]},"gitHead":"00e329d049f36e643fbc41138ac5fd5430aa08e1","bugs":{"url":"https://github.com/faceyspacey/extract-css-chunks-webpack-plugin/issues"},"_id":"extract-css-chunks-webpack-plugin@4.3.0","_npmVersion":"6.5.0","_nodeVersion":"11.13.0","_npmUser":{"name":"zackljackson","email":"zackary.l.jackson@gmail.com"},"dist":{"integrity":"sha512-U2mCuqF9JKmyQydQQUy+tsCVCeuysgIZNZHd0eeTgIgq6gSqCnS9eaCpknyLVl3aRr8y2gkvRPzpuHS7AdvK0Q==","shasum":"01fb5ea225a78d5bd51e29b191dc1248ab320957","tarball":"https://registry.npmjs.org/extract-css-chunks-webpack-plugin/-/extract-css-chunks-webpack-plugin-4.3.0.tgz","fileCount":7,"unpackedSize":53900,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcpZWUCRA9TVsSAnZWagAA/tkQAJ3twq+4T61uolqYEyPg\nl94lvlc+o0xFdFEiGFnw4DnBLkFvUXT7ppP6XlCcvPPj9Otp5g0wilSnOg1c\ntSolu+OOHJWuhDFZOnmzvXPOOCYyu3DASVQ8AT8SheyZty5ekwYY+OTa3RMR\nFgGShJFRa+ooXQtTV6e3cSkxK38kdJf3la4Rz7JhYmCZ26X4YCmnTWMPigS3\n5h2h/Vlf2ag2tOmQ41aZj5hz3oJNgW9lR7+RJAOS4c3WDZHb5OliEpPar9Iz\n9GF+j+eWwPjFW14cdeh4qeinKy4ExdQMYgwt431QuTmVamX5SZvVwi86spLQ\nDEZQPrsZes7cKlCHjYxSYlviPxAjuE2K+eZCWTlAPJwb8ZxczIQRRDJMXyvU\njtA3ipJFyZ07Mbcwh0Q4RefcJ17DTppyrQk/0EfzfpvAQAhVCB3gaKGwjwEI\nraPjgiHvTPfM5dRo76/DASP1gDljOZ+e2SSoXJSXZvp84G+7hourX2dkl4SP\nutNzN6vTdwfYaqRzgzdpiY+BmuHrp0cIC5aZz8A3ZMvHdraQ7RoSHzQ3OSrp\nGArYsgJvFwYoz+gZfXOmzQCdxNngs7yL0rpmXD7lI5t8QaKPN4RMYvxttTGo\ndA/LwdkMF77j5UYO/3hHisaQ0jarDvSyqll960O0ADrIOAD13WseiP6dPIw9\n8i3R\r\n=EGtu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCKxAitPhtpE8OGYe9SzEO6UUh3vUTkgn/URqL4DCjiiwIhAK8WGLq0527lw0NW+WKPaS4jNWZWFZYnsV7F08TvXExk"}]},"maintainers":[{"email":"james@faceyspacey.com","name":"faceyspacey"},{"email":"zackary.l.jackson@gmail.com","name":"zackljackson"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/extract-css-chunks-webpack-plugin_4.3.0_1554355603689_0.8511435949257005"},"_hasShrinkwrap":false},"4.3.1":{"name":"extract-css-chunks-webpack-plugin","version":"4.3.1","description":"Extract CSS from chunks into stylesheets + HMR. Supports Webpack 4 + SSR","license":"MIT","author":{"name":"James Gillmore","email":"james@faceyspacey.com"},"contributors":[{"name":"Zack Jackson","email":"zack@ScriptedAlchemy.com","url":"https://github.com/ScriptedAlchemy"}],"homepage":"http://github.com/faceyspacey/extract-css-chunks-webpack-plugin","repository":{"type":"git","url":"git+https://github.com/faceyspacey/extract-css-chunks-webpack-plugin.git"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"keywords":["css","chunks","code splitting","mini-css","hot","hmr","universal","webpack","webpack 4","css-hot-loader","extract-css-chunks-webpack-plugin"],"main":"dist/cjs.js","engines":{"node":">= 6.9.0 <7.0.0 || >= 8.9.0"},"scripts":{"start":"npm run build -- -w","build":"cross-env NODE_ENV=production babel src -d dist --ignore 'src/**/*.test.js' --copy-files","clean":"del-cli dist","commitlint":"commitlint","commitmsg":"commitlint -e $GIT_PARAMS","lint":"eslint --cache src test","ci:lint:commits":"commitlint --from=${CIRCLE_BRANCH} --to=${CIRCLE_SHA1}","lint-staged":"lint-staged","prebuild":"npm run clean","prepublish":"npm run build","release:validate":"commitlint --from=$(git describe --tags --abbrev=0) --to=$(git rev-parse HEAD)","security":"npm audit","test":"jest","test:watch":"jest --watch","test:coverage":"jest --collectCoverageFrom='src/**/*.js' --coverage","test:manual":"webpack-dev-server test/manual/src/index.js --open --config test/manual/webpack.config.js","ci:lint":"npm run lint && npm run security","ci:test":"npm run test -- --runInBand","ci:coverage":"npm run test:coverage -- --runInBand","defaults":"webpack-defaults","semantic-release":"npx semantic-release","travis":"npm run ci:coverage"},"peerDependencies":{"webpack":"^4.4.0"},"dependencies":{"loader-utils":"^1.1.0","lodash":"^4.17.11","normalize-url":"^2.0.1","schema-utils":"^1.0.0","webpack-sources":"^1.1.0"},"devDependencies":{"@commitlint/cli":"^6.1.3","@commitlint/config-conventional":"^6.1.3","@webpack-contrib/eslint-config-webpack":"^2.0.4","babel-cli":"^6.26.0","babel-jest":"^22.2.2","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-polyfill":"^6.26.0","babel-preset-env":"^1.6.1","conventional-github-releaser":"^2.0.2","cross-env":"^5.1.3","css-loader":"^0.28.10","del":"^3.0.0","del-cli":"^1.1.0","es-check":"^5.0.0","eslint":"^4.17.0","eslint-plugin-import":"^2.8.0","eslint-plugin-prettier":"^2.6.0","execa":"^1.0.0","file-loader":"^1.1.11","husky":"^0.14.3","jest":"^22.2.2","lint-staged":"^6.1.0","memory-fs":"^0.4.1","pre-commit":"^1.2.2","prettier":"^1.11.1","semantic-release":"^15.13.1","webpack":"^4.28.0","webpack-cli":"^2.0.13","webpack-defaults":"^2.3.0","webpack-dev-server":"^3.1.14"},"pre-commit":"lint-staged","lint-staged":{"*.js":["eslint --fix","git add"]},"gitHead":"0ce2460007c4d55da1066bffd3d2b2dace7ed69b","bugs":{"url":"https://github.com/faceyspacey/extract-css-chunks-webpack-plugin/issues"},"_id":"extract-css-chunks-webpack-plugin@4.3.1","_npmVersion":"6.5.0","_nodeVersion":"11.14.0","_npmUser":{"name":"zackljackson","email":"zackary.l.jackson@gmail.com"},"dist":{"integrity":"sha512-dSzNLh4UueMcJAA/L2CX+7l3ntpOnpvoDxD2gfHVsf8e1ZwOXI+r4QoFFNwCSblAR1MmK485VMqswpEtzW6wYQ==","shasum":"da947a26062f985aa47aafffce1d3f56f923f9f2","tarball":"https://registry.npmjs.org/extract-css-chunks-webpack-plugin/-/extract-css-chunks-webpack-plugin-4.3.1.tgz","fileCount":7,"unpackedSize":54367,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcsjarCRA9TVsSAnZWagAAa0AP/1NF1L+2w2G5ymEVsnad\nO9hiN+miR3An6gMVFNFynCRdY7IMYKp+AWCEDMPsiljiE0h8NY5CblNLUTZW\nWqprZ6HKAk2wLZN4r7FpmxVepQYiyK5vVuFUQtrA7hnFDznpCMoVjSf6Ixi/\nz0Z3/ETC7OPT0wR+GEtgWpfHnCv+77G5LsNNn8PyB7mX3WcQaHHUbmcyd1mk\ntoPb1z3vuPGRzH9RuCFcrqEVbkDcmW1c7VUU26UfSMaDXSbjTd7WEgKnKMvC\nFOr1YnSJBvoiCTFKdA9sZZs691ob/jfnGo7hx8MJMNLuAYDPsexND1WH2eqb\nkSF6V24vN/JlVm0o8knojThJEu3jNVVIuigoKhh4ZqDuZCy1RyMGO13m9l8H\n2vTU7r63vQMYVDR5RUU0LGdJ0SqA5/Xfc1xcOjd9mpMcogkwrayUgB5rcn+M\nh5QxP5aSqYRm6fuB1x1btJWNjIRwd8FzIbSNPIS26iqR98RMs4w7uYPZXIMV\nqdTTAgftOXHe4Y+dsVaLKHmEuwvInkQMdkCcW43zg3EXsDDtNJ+pYjNwXpz+\nkwgMFZeFtoHeBSqzHB6ZeVHhyUglz6ilfKadG22bt16s2i5BIMH2XKZJTC9d\nBEEb97UF2VuCtgtLYBZiB7+EAnRcUdxSKJOtUdXPncxAicTt9R+FzAeVLmB4\nVuDR\r\n=utX1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFd/R1JajOLdooFlAzWew0Fw19RQ5UtyUcgkHauB0JHgAiA24ayJyEXuXyL5vy7x7bhPdfvxHeUNhLY79JKdXNU9pg=="}]},"maintainers":[{"email":"james@faceyspacey.com","name":"faceyspacey"},{"email":"zackary.l.jackson@gmail.com","name":"zackljackson"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/extract-css-chunks-webpack-plugin_4.3.1_1555183274062_0.7972575967026481"},"_hasShrinkwrap":false},"4.3.2":{"name":"extract-css-chunks-webpack-plugin","version":"4.3.2","description":"Extract CSS from chunks into stylesheets + HMR. Supports Webpack 4 + SSR","license":"MIT","author":{"name":"James Gillmore","email":"james@faceyspacey.com"},"contributors":[{"name":"Zack Jackson","email":"zack@ScriptedAlchemy.com","url":"https://github.com/ScriptedAlchemy"}],"homepage":"http://github.com/faceyspacey/extract-css-chunks-webpack-plugin","repository":{"type":"git","url":"git+https://github.com/faceyspacey/extract-css-chunks-webpack-plugin.git"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"keywords":["css","chunks","code splitting","mini-css","hot","hmr","universal","webpack","webpack 4","css-hot-loader","extract-css-chunks-webpack-plugin"],"main":"dist/cjs.js","engines":{"node":">= 6.9.0 <7.0.0 || >= 8.9.0"},"scripts":{"start":"npm run build -- -w","build":"cross-env NODE_ENV=production babel src -d dist --ignore 'src/**/*.test.js' --copy-files","clean":"del-cli dist","commitlint":"commitlint","commitmsg":"commitlint -e $GIT_PARAMS","lint":"eslint --cache src test","ci:lint:commits":"commitlint --from=${CIRCLE_BRANCH} --to=${CIRCLE_SHA1}","lint-staged":"lint-staged","prebuild":"npm run clean","prepublish":"npm run build","release:validate":"commitlint --from=$(git describe --tags --abbrev=0) --to=$(git rev-parse HEAD)","security":"npm audit","test":"jest","test:watch":"jest --watch","test:coverage":"jest --collectCoverageFrom='src/**/*.js' --coverage","test:manual":"webpack-dev-server test/manual/src/index.js --open --config test/manual/webpack.config.js","ci:lint":"npm run lint && npm run security","ci:test":"npm run test -- --runInBand","ci:coverage":"npm run test:coverage -- --runInBand","defaults":"webpack-defaults","semantic-release":"npx semantic-release","travis":"npm run ci:coverage"},"peerDependencies":{"webpack":"^4.4.0"},"dependencies":{"loader-utils":"^1.1.0","lodash":"^4.17.11","normalize-url":"^2.0.1","schema-utils":"^1.0.0","webpack-sources":"^1.1.0"},"devDependencies":{"@commitlint/cli":"^6.1.3","@commitlint/config-conventional":"^6.1.3","@webpack-contrib/eslint-config-webpack":"^2.0.4","babel-cli":"^6.26.0","babel-jest":"^22.2.2","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-polyfill":"^6.26.0","babel-preset-env":"^1.6.1","conventional-github-releaser":"^2.0.2","cross-env":"^5.1.3","css-loader":"^0.28.10","del":"^3.0.0","del-cli":"^1.1.0","es-check":"^5.0.0","eslint":"^4.17.0","eslint-plugin-import":"^2.8.0","eslint-plugin-prettier":"^2.6.0","execa":"^1.0.0","file-loader":"^1.1.11","husky":"^0.14.3","jest":"^22.2.2","lint-staged":"^6.1.0","memory-fs":"^0.4.1","pre-commit":"^1.2.2","prettier":"^1.11.1","semantic-release":"^15.13.1","webpack":"^4.28.0","webpack-cli":"^2.0.13","webpack-defaults":"^2.3.0","webpack-dev-server":"^3.1.14"},"pre-commit":"lint-staged","lint-staged":{"*.js":["eslint --fix","git add"]},"gitHead":"139c6f48e62d2dc4ac6ecfe91e15c4a1d5b6a002","bugs":{"url":"https://github.com/faceyspacey/extract-css-chunks-webpack-plugin/issues"},"_id":"extract-css-chunks-webpack-plugin@4.3.2","_npmVersion":"6.5.0","_nodeVersion":"11.14.0","_npmUser":{"name":"zackljackson","email":"zackary.l.jackson@gmail.com"},"dist":{"integrity":"sha512-dTL4rwoMIwItq8KRhhgdHPcgFf7DwFRRcQBLj5F3k/WL2pSkYN//rS/dNUuRhbNgTMOV0HT60WjCVd9UGDaSOQ==","shasum":"dab841c62c53b50ce331eb2442f9d6f2fdc19f28","tarball":"https://registry.npmjs.org/extract-css-chunks-webpack-plugin/-/extract-css-chunks-webpack-plugin-4.3.2.tgz","fileCount":7,"unpackedSize":54367,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJctPLBCRA9TVsSAnZWagAAlJIP/2Dz6x453yyApbIF0Vh4\nooQowdkpwAvLtrUe1X44g9+dJ5ntyrFFgtwP1BHaID5wGMhnKZKpPhij8dca\n4M6AXQJddU0Kib3rjUQ/cbwduW/Vp+AsdbVFcC7+RukEY+54HRL6Aw5bQINF\nk4W3y19ZaaU0jko0axMnbbq1wLGWTgzwRsIOuZ33k+SWwSD85DmxsLShlu34\nLIUweWWjEXVCIZq+58SFpWcAYtznt5tU/M0+8y68HDWePO3db4e89Ot8+vY6\n/q7K2wXhsllNQ+PFmx95YY+vakO7/4b+CtnGb66bQ1BQM/tvQivhkco5Diag\nAb6nMQQamUZ551yUo2whTlIudD4e8yEjeKWhqFVOWjVBl1vtoq0Z4xNOSYXb\n5i/d9cqRdAmNc5yypq3P5g9E+jCOCUYJGksJ473I6K8bQAwIimnbwn880ayf\nab7USLLf8kHqe6VfFUy+7KvC1+WqLM5YfvI+oSjsnE0s9zwdEz2+L0Uk0X3K\nReLLx5Yc6k3DsMcVNPLuq9AL6RuL/rVOVydiuO2+FAn9ahS5MA4UEIL0gCZu\n4G2DXLCDSZmtelainm22gTulClN81lUEGKmxNo+xAviK6cxsuEutFpuClIo1\neI/dMumXcqlnq3BT0C5xzAhhKdfWXeGzQ8A23vHqvx7z4syjitCCzRutgbm8\nTsLr\r\n=2lQM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDwqWlljGUvH4c+cM1HeLNQDKIkIpcY30jyU4Az4QZB0wIhALKGwfTfseI4e4+WPnmUi0/DPWAWKUq1iaF9Nq6kYo50"}]},"maintainers":[{"email":"james@faceyspacey.com","name":"faceyspacey"},{"email":"zackary.l.jackson@gmail.com","name":"zackljackson"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/extract-css-chunks-webpack-plugin_4.3.2_1555362496518_0.3693917103694899"},"_hasShrinkwrap":false},"4.4.0":{"name":"extract-css-chunks-webpack-plugin","version":"4.4.0","description":"Extract CSS from chunks into stylesheets + HMR. Supports Webpack 4 + SSR","license":"MIT","author":{"name":"James Gillmore","email":"james@faceyspacey.com"},"contributors":[{"name":"Zack Jackson","email":"zack@ScriptedAlchemy.com","url":"https://github.com/ScriptedAlchemy"}],"homepage":"http://github.com/faceyspacey/extract-css-chunks-webpack-plugin","repository":{"type":"git","url":"git+https://github.com/faceyspacey/extract-css-chunks-webpack-plugin.git"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"keywords":["css","chunks","code splitting","mini-css","hot","hmr","universal","webpack","webpack 4","css-hot-loader","extract-css-chunks-webpack-plugin"],"main":"dist/cjs.js","engines":{"node":">= 6.9.0 <7.0.0 || >= 8.9.0"},"scripts":{"start":"npm run build -- -w","build":"cross-env NODE_ENV=production babel src -d dist --ignore 'src/**/*.test.js' --copy-files","postbuild":"es-check es5 dist/hmr/hotModuleReplacement.js","clean":"del-cli dist","commitlint":"commitlint","lint":"eslint --cache src test","ci:lint:commits":"commitlint --from=${CIRCLE_BRANCH} --to=${CIRCLE_SHA1}","lint-staged":"lint-staged","prebuild":"npm run clean","prepare":"npm run build","release:validate":"commitlint --from=$(git describe --tags --abbrev=0) --to=$(git rev-parse HEAD)","security":"npm audit","test:only":"jest","test:watch":"jest --watch","test:coverage":"jest --collectCoverageFrom='src/**/*.js' --coverage","pretest":"npm run lint","test":"npm run test:coverage","ci:lint":"npm run lint && npm run security","ci:test":"npm run test -- --runInBand","ci:coverage":"npm run test:coverage -- --runInBand","defaults":"webpack-defaults","semantic-release":"npx semantic-release","travis":"npm run ci:coverage"},"peerDependencies":{"webpack":"^4.4.0"},"dependencies":{"loader-utils":"^1.1.0","normalize-url":"^2.0.1","schema-utils":"^1.0.0","webpack-sources":"^1.1.0"},"devDependencies":{"@babel/cli":"^7.4.4","@babel/core":"^7.4.4","@babel/preset-env":"^7.4.4","@commitlint/cli":"^7.6.1","@commitlint/config-conventional":"^7.6.0","@webpack-contrib/defaults":"^4.0.1","@webpack-contrib/eslint-config-webpack":"^3.0.0","acorn":"^6.1.1","babel-eslint":"^10.0.1","babel-jest":"^24.8.0","commitlint-azure-pipelines-cli":"^1.0.1","cross-env":"^5.2.0","css-loader":"^2.1.1","del":"^4.1.1","del-cli":"^1.1.0","es-check":"^5.0.0","eslint":"^5.16.0","eslint-plugin-import":"^2.17.2","eslint-plugin-prettier":"^3.1.0","file-loader":"^3.0.1","husky":"^2.2.0","jest":"^24.8.0","jest-junit":"^6.4.0","lint-staged":"^8.1.6","memory-fs":"^0.4.1","prettier":"^1.17.0","standard-version":"^6.0.1","webpack":"^4.31.0","webpack-cli":"^3.3.2","webpack-dev-server":"^3.3.1"},"pre-commit":"lint-staged","lint-staged":{"*.js":["eslint --fix","git add"]},"gitHead":"1884e55589d0a5cacd483896ef703e4380f01154","bugs":{"url":"https://github.com/faceyspacey/extract-css-chunks-webpack-plugin/issues"},"_id":"extract-css-chunks-webpack-plugin@4.4.0","_nodeVersion":"12.2.0","_npmVersion":"6.9.0","dist":{"integrity":"sha512-Mah/OD3PvXTMMPGwF9nWVcir8b0OtzpqfyPWQhgFippEZZcPhMLFT4dr7fqZrWM1xgaIThoqOXCRxIaLnaEVdw==","shasum":"0ae86c2c904461175569f7e74ed284e39cb355cb","tarball":"https://registry.npmjs.org/extract-css-chunks-webpack-plugin/-/extract-css-chunks-webpack-plugin-4.4.0.tgz","fileCount":8,"unpackedSize":56857,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc3d/MCRA9TVsSAnZWagAAM5oP/3oNlFS0T8eRSiEpXnFr\n9L6Zyq9F0yyLVmPhSuuo4P6F70RQbaiGyQrza3e/BKwgRAUVdF6dBpzH1d8N\nDcej5VYe80QI7atQaCoHVStdM2X+E057KolRpZF0WrR8MOTN0rPp3oWCxILb\n7bXacXUuK5VH7HZmEYK2otWa8B6WuSNfq9Uglxel5fQRZzP6ZNVr5MDYF9aV\njaUAkw6574XgBBB+zT6XNmVdhjiaXJ0Ol+uGRvQlVT2mySomA8ZY58B0U59I\naCgwtmQYSTiSu7FV4u5/pgA3c3ly7/Ng4Zx/pd+xURtLirtJ0PmBImd0+beD\nPvNkLABIrlW1rlW3naF1bY5XoBx1jRqWk+HLPevFJS1CnUXk+TgW5CD1gmbw\nH78VFxLb/NgtTAPbACqGu9mSsqxHivuQZJtnQdAelYdISZBneYk+wq31tCBq\nsZssB4OqeX7Haz2w84jViypYRo8v/JXDkdYr4dnge4jgANwSakRwPHot2mJk\nfw9/4w1SVdo5O+4ASg98zmLAEY9J2Ekap3XIruu9q9HeFM8LoOxCxaaM6rHl\n9/9UZpnpJggFwbA2lY+KbHi8gUzbTryqJh6wCN8KtWrPtUqEe5W5GpHhmyuI\nXNWhclW4pJwZHw6qrrrbC/lE8lQnKXH8X5HJbGQaZIRADGzyv5pW69w4TgGz\nv1QH\r\n=rFu1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCwdN4+QU0egZjf7dV0veXElnQHFHRjEKeDWRXSGk4X0gIgKZZVjZ57DdA/MIqyCGfBqiJXGl8b0a9uVuXHzWiMsro="}]},"maintainers":[{"email":"james@faceyspacey.com","name":"faceyspacey"},{"email":"zackary.l.jackson@gmail.com","name":"zackljackson"}],"_npmUser":{"name":"zackljackson","email":"zackary.l.jackson@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/extract-css-chunks-webpack-plugin_4.4.0_1558044618996_0.2542139883305108"},"_hasShrinkwrap":false},"4.5.0":{"name":"extract-css-chunks-webpack-plugin","version":"4.5.0","description":"Extract CSS from chunks into stylesheets + HMR. Supports Webpack 4 + SSR","license":"MIT","author":{"name":"James Gillmore","email":"james@faceyspacey.com"},"contributors":[{"name":"Zack Jackson","email":"zack@ScriptedAlchemy.com","url":"https://github.com/ScriptedAlchemy"}],"homepage":"http://github.com/faceyspacey/extract-css-chunks-webpack-plugin","repository":{"type":"git","url":"git+https://github.com/faceyspacey/extract-css-chunks-webpack-plugin.git"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"keywords":["css","chunks","code splitting","mini-css","hot","hmr","universal","webpack","webpack 4","css-hot-loader","extract-css-chunks-webpack-plugin"],"main":"dist/cjs.js","engines":{"node":">= 6.9.0 <7.0.0 || >= 8.9.0"},"scripts":{"start":"npm run build -- -w","build":"cross-env NODE_ENV=production babel src -d dist --ignore 'src/**/*.test.js' --copy-files","postbuild":"es-check es5 dist/hmr/hotModuleReplacement.js","clean":"del-cli dist","commitlint":"commitlint","lint":"eslint --cache src test","ci:lint:commits":"commitlint --from=${CIRCLE_BRANCH} --to=${CIRCLE_SHA1}","lint-staged":"lint-staged","prebuild":"npm run clean","prepare":"npm run build","release:validate":"commitlint --from=$(git describe --tags --abbrev=0) --to=$(git rev-parse HEAD)","security":"npm audit","test:only":"jest","test:watch":"jest --watch","test:coverage":"jest --collectCoverageFrom='src/**/*.js' --coverage","pretest":"npm run lint","test":"npm run test:coverage","ci:lint":"npm run lint && npm run security","ci:test":"npm run test -- --runInBand","ci:coverage":"npm run test:coverage -- --runInBand","defaults":"webpack-defaults","semantic-release":"npx semantic-release","travis":"npm run ci:coverage"},"peerDependencies":{"webpack":"^4.4.0"},"dependencies":{"loader-utils":"^1.1.0","normalize-url":"^2.0.1","schema-utils":"^1.0.0","webpack-sources":"^1.1.0"},"devDependencies":{"@babel/cli":"^7.4.4","@babel/core":"^7.4.4","@babel/preset-env":"^7.4.4","@commitlint/cli":"^7.6.1","@commitlint/config-conventional":"^7.6.0","@webpack-contrib/defaults":"^4.0.1","@webpack-contrib/eslint-config-webpack":"^3.0.0","acorn":"^6.1.1","babel-eslint":"^10.0.1","babel-jest":"^24.8.0","commitlint-azure-pipelines-cli":"^1.0.1","cross-env":"^5.2.0","css-loader":"^2.1.1","del":"^4.1.1","del-cli":"^1.1.0","es-check":"^5.0.0","eslint":"^5.16.0","eslint-plugin-import":"^2.17.2","eslint-plugin-prettier":"^3.1.0","file-loader":"^3.0.1","husky":"^2.2.0","jest":"^24.8.0","jest-junit":"^6.4.0","lint-staged":"^8.1.6","memory-fs":"^0.4.1","prettier":"^1.17.0","standard-version":"^6.0.1","webpack":"^4.31.0","webpack-cli":"^3.3.2","webpack-dev-server":"^3.3.1"},"pre-commit":"lint-staged","lint-staged":{"*.js":["eslint --fix","git add"]},"gitHead":"98b3f2c6afd67872674f9f777ed3d22c8e39105e","bugs":{"url":"https://github.com/faceyspacey/extract-css-chunks-webpack-plugin/issues"},"_id":"extract-css-chunks-webpack-plugin@4.5.0","_nodeVersion":"12.2.0","_npmVersion":"6.9.0","dist":{"integrity":"sha512-EkMTg8r7uJ8ORft7oCLX5mzLqL5XhUoDs1PoN4VcJ7tJuY1t4GNagFgDNp/YyXKEwi10iOjz47mMNSPEe1TSxA==","shasum":"8957ece56ea55ddbf85eb6331f36e062a5827b10","tarball":"https://registry.npmjs.org/extract-css-chunks-webpack-plugin/-/extract-css-chunks-webpack-plugin-4.5.0.tgz","fileCount":8,"unpackedSize":56862,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc3wzFCRA9TVsSAnZWagAA3BAP/3o8BRqyjka1o4Hlhy+G\nmhS65tDw8f9gBoGfdWbS0lNhpViedpvIH0pCMUnpk+k7c5DA1Uxc+EPUaVXD\ngYFRSyq3Zv7u1teYgpV77uBbXCqiwxr8mfS3EciaKIxg8g2Uh1duvrYDFNBC\nhzppfO4e384m4EZw5F6rFB6bbtZseKlNDLG55/45ThfyugDiT3Wu+vkzwCf7\nw28mNHAwjwNeLlVUL/2fyaIpbRiLV1lcitLdFCNMdg4LCe10Qoy0iTc3jjJF\nWks+e7n3T91gfFbqO2VnO6WwOJ1fcW140Of3AKmDOS7PpQrgt08lK2blcojw\nCBeWZ/CNB241xsB9E4P0ZFs8b5UkVz5QGNMpa0wHZlszOD/SUEYC40oDVa9o\nQNS8N6kR4EOZHGp32gv2PybcMgMVUEFsqrRzTfmkVL/mE8+AIsXyxYuYv3aP\n4u9Oml5UYttnnIBxTf/jTvsV2BCm2hTEDZ/2JO2vN7F4R7GsWkKsgQWO2R/F\ngypIvSgbO2yxDmmsCJC418G/fdNtOfAXQ9MfQaxu7hg+AnSd7nOcOZLgSwo0\nl7wAnwugip1u70xVkYGC+ukrvEkyz0FbcoX7wAk1pcM46U0LDfJgxF8f8d1L\n0qcXYJHdZwU/aIMzG6ly8nE11xIfIWY4goKMlC4TMUPkBH1QPfaGAV1cm+ba\nRB7H\r\n=xr+L\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCD2gCel/3H37qgsyNx+5+9yOJ9oeZc7NJvYFiB0o+LiwIhAPVrNcBDwreDe79h0Red5n5qIWFsyOSEaDcNAN32301k"}]},"maintainers":[{"email":"james@faceyspacey.com","name":"faceyspacey"},{"email":"zackary.l.jackson@gmail.com","name":"zackljackson"}],"_npmUser":{"name":"zackljackson","email":"zackary.l.jackson@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/extract-css-chunks-webpack-plugin_4.5.0_1558121668463_0.6718538661174374"},"_hasShrinkwrap":false},"4.5.1":{"name":"extract-css-chunks-webpack-plugin","version":"4.5.1","description":"Extract CSS from chunks into stylesheets + HMR. Supports Webpack 4 + SSR","license":"MIT","author":{"name":"James Gillmore","email":"james@faceyspacey.com"},"contributors":[{"name":"Zack Jackson","email":"zack@ScriptedAlchemy.com","url":"https://github.com/ScriptedAlchemy"}],"homepage":"http://github.com/faceyspacey/extract-css-chunks-webpack-plugin","repository":{"type":"git","url":"git+https://github.com/faceyspacey/extract-css-chunks-webpack-plugin.git"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"keywords":["css","chunks","code splitting","mini-css","hot","hmr","universal","webpack","webpack 4","css-hot-loader","extract-css-chunks-webpack-plugin"],"main":"dist/cjs.js","engines":{"node":">= 6.9.0 <7.0.0 || >= 8.9.0"},"scripts":{"start":"npm run build -- -w","build":"cross-env NODE_ENV=production babel src -d dist --ignore 'src/**/*.test.js' --copy-files","postbuild":"es-check es5 dist/hmr/hotModuleReplacement.js","clean":"del-cli dist","commitlint":"commitlint","lint":"eslint --cache src test","ci:lint:commits":"commitlint --from=${CIRCLE_BRANCH} --to=${CIRCLE_SHA1}","lint-staged":"lint-staged","prebuild":"npm run clean","prepare":"npm run build","release:validate":"commitlint --from=$(git describe --tags --abbrev=0) --to=$(git rev-parse HEAD)","security":"npm audit","test:only":"jest","test:watch":"jest --watch","test:coverage":"jest --collectCoverageFrom='src/**/*.js' --coverage","pretest":"npm run lint","test":"npm run test:coverage","ci:lint":"npm run lint && npm run security","ci:test":"npm run test -- --runInBand","ci:coverage":"npm run test:coverage -- --runInBand","defaults":"webpack-defaults","semantic-release":"npx semantic-release","travis":"npm run ci:coverage"},"peerDependencies":{"webpack":"^4.4.0"},"dependencies":{"loader-utils":"^1.1.0","normalize-url":"^2.0.1","schema-utils":"^1.0.0","webpack-sources":"^1.1.0"},"devDependencies":{"@babel/cli":"^7.4.4","@babel/core":"^7.4.4","@babel/preset-env":"^7.4.4","@commitlint/cli":"^7.6.1","@commitlint/config-conventional":"^7.6.0","@webpack-contrib/defaults":"^4.0.1","@webpack-contrib/eslint-config-webpack":"^3.0.0","acorn":"^6.1.1","babel-eslint":"^10.0.1","babel-jest":"^24.8.0","commitlint-azure-pipelines-cli":"^1.0.1","cross-env":"^5.2.0","css-loader":"^2.1.1","del":"^4.1.1","del-cli":"^1.1.0","es-check":"^5.0.0","eslint":"^5.16.0","eslint-plugin-import":"^2.17.2","eslint-plugin-prettier":"^3.1.0","file-loader":"^3.0.1","husky":"^2.2.0","jest":"^24.8.0","jest-junit":"^6.4.0","lint-staged":"^8.1.6","memory-fs":"^0.4.1","prettier":"^1.17.0","standard-version":"^6.0.1","webpack":"^4.31.0","webpack-cli":"^3.3.2","webpack-dev-server":"^3.3.1"},"pre-commit":"lint-staged","lint-staged":{"*.js":["eslint --fix","git add"]},"gitHead":"33ccca315b5b542d3b8fddea3c6566b5ee0087dd","bugs":{"url":"https://github.com/faceyspacey/extract-css-chunks-webpack-plugin/issues"},"_id":"extract-css-chunks-webpack-plugin@4.5.1","_nodeVersion":"12.2.0","_npmVersion":"6.9.0","dist":{"integrity":"sha512-SMTguWPSE3nqLFhf9wVNbGg4LKSOolj2/C/WtWIKNDOh7Cc68leo/270N4HPCwwcnZs7zxw9zS+e5n1gynw1Gw==","shasum":"b69be9d22297502ae55c77b5b8f2edf82fa47130","tarball":"https://registry.npmjs.org/extract-css-chunks-webpack-plugin/-/extract-css-chunks-webpack-plugin-4.5.1.tgz","fileCount":8,"unpackedSize":56769,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc4ZeGCRA9TVsSAnZWagAAikEP/088fWEVqheOsaXsxHR4\nF7evw57TEW5lsii7Swp1W9N86kJLwF6vAPVxwWXVBxPL9ozUWQYpnl2PLSv2\nSdnen2OdTwWxdSe79TpsAu0rvF3pVs8DvvXKRVsmRN7xlzcPp+lput34mdxQ\nCk065kkXadO9vK6nDqtA6biMz/2uhwqd8rikzakqu7ZPrhUIfKvltEZwIZO1\nteFnpeo3pr+KzTvVxPANh/zCF8ZJBFUGdz292D+xgMuRHCM07ue6q9v891lW\nxYUv5ig4AYJ/xQjqO5y+Ia433BaO6rlF2KS3EnA4orAPM7ckacVZdUgrsZGI\ny/da0kOQGK0KZ6vBtIqmVwEUGsqG+LoFBOHKRbjeeGySBqv9LOcFKd3MBIsQ\nRkqSBM0x/NFI7K3GBvfbtQrnNyPg73yWm8qAbby4ooyuqKWObHVQloabZYgg\nC90pm0Zgpx+XOapgJz3ynuRpJpiagXqVwEDs5E3so4PqcbgpQnqcztW816xV\njcm9FpB6lwoMbrSBn7XyDbRdulIvXGtbDswAspDvfSgXFFowrPsmmg3AIDXr\nifV8iYTpafTjZLQIswPQBi1BQMN3S74dgckRkQWUwPdqibhcKTi4kY4xm8i/\nkIZmfZdYjIK3uRdRVd1lTbJzMIounrOsdMB+KbOIiIdAKJpL1YCiY0vUPItD\ng32t\r\n=LUHp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBWYYz16bmSLBjXQZ0MXEtMcs80Lu4EutneaVVhlkAEsAiBhgj0hRjEabyYBdmO/P3YdsfZrwl8hjpPCn7k+tGJFJg=="}]},"maintainers":[{"email":"james@faceyspacey.com","name":"faceyspacey"},{"email":"zackary.l.jackson@gmail.com","name":"zackljackson"}],"_npmUser":{"name":"zackljackson","email":"zackary.l.jackson@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/extract-css-chunks-webpack-plugin_4.5.1_1558288261268_0.08630800248939341"},"_hasShrinkwrap":false},"4.5.2":{"name":"extract-css-chunks-webpack-plugin","version":"4.5.2","description":"Extract CSS from chunks into stylesheets + HMR. Supports Webpack 4 + SSR","license":"MIT","author":{"name":"James Gillmore","email":"james@faceyspacey.com"},"contributors":[{"name":"Zack Jackson","email":"zack@ScriptedAlchemy.com","url":"https://github.com/ScriptedAlchemy"}],"homepage":"http://github.com/faceyspacey/extract-css-chunks-webpack-plugin","repository":{"type":"git","url":"git+https://github.com/faceyspacey/extract-css-chunks-webpack-plugin.git"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"keywords":["css","chunks","code splitting","mini-css","hot","hmr","universal","webpack","webpack 4","css-hot-loader","extract-css-chunks-webpack-plugin"],"main":"dist/cjs.js","engines":{"node":">= 6.9.0 <7.0.0 || >= 8.9.0"},"scripts":{"start":"npm run build -- -w","build":"cross-env NODE_ENV=production babel src -d dist --ignore 'src/**/*.test.js' --copy-files","postbuild":"es-check es5 dist/hmr/hotModuleReplacement.js","clean":"del-cli dist","commitlint":"commitlint","lint":"eslint --cache src test","ci:lint:commits":"commitlint --from=${CIRCLE_BRANCH} --to=${CIRCLE_SHA1}","lint-staged":"lint-staged","prebuild":"npm run clean","prepare":"npm run build","release:validate":"commitlint --from=$(git describe --tags --abbrev=0) --to=$(git rev-parse HEAD)","security":"npm audit","test:only":"jest","test:watch":"jest --watch","test:coverage":"jest --collectCoverageFrom='src/**/*.js' --coverage","pretest":"npm run lint","test":"npm run test:coverage","ci:lint":"npm run lint && npm run security","ci:test":"npm run test -- --runInBand","ci:coverage":"npm run test:coverage -- --runInBand","defaults":"webpack-defaults","semantic-release":"npx semantic-release","travis":"npm run ci:coverage"},"peerDependencies":{"webpack":"^4.4.0"},"dependencies":{"loader-utils":"^1.1.0","normalize-url":"1.9.1","schema-utils":"^1.0.0","webpack-sources":"^1.1.0"},"devDependencies":{"@babel/cli":"^7.4.4","@babel/core":"^7.4.4","@babel/preset-env":"^7.4.4","@commitlint/cli":"^7.6.1","@commitlint/config-conventional":"^7.6.0","@webpack-contrib/defaults":"^4.0.1","@webpack-contrib/eslint-config-webpack":"^3.0.0","acorn":"^6.1.1","babel-eslint":"^10.0.1","babel-jest":"^24.8.0","commitlint-azure-pipelines-cli":"^1.0.1","cross-env":"^5.2.0","css-loader":"^2.1.1","del":"^4.1.1","del-cli":"^1.1.0","es-check":"^5.0.0","eslint":"^5.16.0","eslint-plugin-import":"^2.17.2","eslint-plugin-prettier":"^3.1.0","file-loader":"^3.0.1","husky":"^2.2.0","jest":"^24.8.0","jest-junit":"^6.4.0","lint-staged":"^8.1.6","memory-fs":"^0.4.1","prettier":"^1.17.0","standard-version":"^6.0.1","webpack":"^4.31.0","webpack-cli":"^3.3.2","webpack-dev-server":"^3.3.1"},"pre-commit":"lint-staged","lint-staged":{"*.js":["eslint --fix","git add"]},"gitHead":"da5de61e2f5ccc3a0dbdf55d70937278919c4cf9","bugs":{"url":"https://github.com/faceyspacey/extract-css-chunks-webpack-plugin/issues"},"_id":"extract-css-chunks-webpack-plugin@4.5.2","_nodeVersion":"12.3.1","_npmVersion":"6.9.0","dist":{"integrity":"sha512-UeDq6pUoroOOeY3RyxVb21SNxWTx2MRL9fRs8HCsw2aCLkvKImbybGLXxeBQjT9GlDWfzMH0gnclS786aT+zuA==","shasum":"41e4be8bfb3a2ac9195b9eb9b4bb816d03228b00","tarball":"https://registry.npmjs.org/extract-css-chunks-webpack-plugin/-/extract-css-chunks-webpack-plugin-4.5.2.tgz","fileCount":8,"unpackedSize":56768,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc7tbCCRA9TVsSAnZWagAAL3IQAIYfHXEO4H6tUY+d9t/U\nsFcMkH8QNdf+i5zvxkps6kw0NYVOeiWfRtPYdvjzFLE7Bn/f8Jn93YHGBFLO\naP3LzWoVQZ6tfgNMAXx6bfGiOKaR6ZqZGcK8Zmim4nL/xR/XPgzqNRrMjmGx\nStbCMjWMGVK2y0VY2r7kRyY7lrf91PZOtwwRspJ+QwBe438FMipAvgzyS/Xm\nUvnhH7fdoDIxs49M3uJRyB3PNpQTELfDvd7FCGzpsMrtVFRAEbGKnRE4DS2b\n33RmawHO3FTtSz/tZucombgZMhiXgEh3h9EA4mU4/pDnahuJ+Ymzv3jRiZSN\nhaMFEdI5lZX2YDVZys88PKSkMFhU73E+7Y/URKKvLcbC3Ez9USn4n3hVxE5c\nXGfW8zqiLkI+ahwHqajdnTiGBHe/LmYrjMPRTGhAIMdpONbH1Tm3hFgEkROK\n6uOTV9k6gyMmVkM73ESXMXyZH0z5yEIfel/jZBjVekUkmMwpeKjpgNx8GZrN\ntJqTehcdoh115WLd4m+kIx0TQTqy8o7PuQSVWJuWGcIYkBY1nuY3ATs2cTIk\nR6jp3qzCUp8Aa9B30ZrNm0okbOUqxtrNO8b4KZlKHY1EQrr4mn6oKDOpIttr\nGDwiw6cQOF0cuRHeWzGT/GGG0kGxeeqbpjoVJ6NqPfIMOqDkKDtNoe5bdtRk\nmjNn\r\n=7yhL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFwfhKNEDGHtj+6blKDqFZTRcXK6mrp8nZG+RFhOtbfLAiBuXXP9qW8sVFNWzCXU17jQRJ5BmoHg3lpVRmJ6NnQZmQ=="}]},"maintainers":[{"email":"james@faceyspacey.com","name":"faceyspacey"},{"email":"zackary.l.jackson@gmail.com","name":"zackljackson"}],"_npmUser":{"name":"zackljackson","email":"zackary.l.jackson@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/extract-css-chunks-webpack-plugin_4.5.2_1559156417683_0.7166020734796255"},"_hasShrinkwrap":false},"4.5.3":{"name":"extract-css-chunks-webpack-plugin","version":"4.5.3","description":"Extract CSS from chunks into stylesheets + HMR. Supports Webpack 4 + SSR","license":"MIT","author":{"name":"James Gillmore","email":"james@faceyspacey.com"},"contributors":[{"name":"Zack Jackson","email":"zack@ScriptedAlchemy.com","url":"https://github.com/ScriptedAlchemy"}],"homepage":"http://github.com/faceyspacey/extract-css-chunks-webpack-plugin","repository":{"type":"git","url":"git+https://github.com/faceyspacey/extract-css-chunks-webpack-plugin.git"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"keywords":["css","chunks","code splitting","mini-css","hot","hmr","universal","webpack","webpack 4","css-hot-loader","extract-css-chunks-webpack-plugin"],"main":"dist/cjs.js","engines":{"node":">= 6.9.0 <7.0.0 || >= 8.9.0"},"scripts":{"start":"npm run build -- -w","build":"cross-env NODE_ENV=production babel src -d dist --ignore 'src/**/*.test.js' --copy-files","postbuild":"es-check es5 dist/hmr/hotModuleReplacement.js","clean":"del-cli dist","commitlint":"commitlint","lint":"eslint --cache src test","ci:lint:commits":"commitlint --from=${CIRCLE_BRANCH} --to=${CIRCLE_SHA1}","lint-staged":"lint-staged","prebuild":"npm run clean","prepare":"npm run build","release:validate":"commitlint --from=$(git describe --tags --abbrev=0) --to=$(git rev-parse HEAD)","security":"npm audit","test:only":"jest","test:watch":"jest --watch","test:coverage":"jest --collectCoverageFrom='src/**/*.js' --coverage","pretest":"npm run lint","test":"npm run test:coverage","ci:lint":"npm run lint && npm run security","ci:test":"npm run test -- --runInBand","ci:coverage":"npm run test:coverage -- --runInBand","defaults":"webpack-defaults","semantic-release":"npx semantic-release","travis":"npm run ci:coverage"},"peerDependencies":{"webpack":"^4.4.0"},"dependencies":{"loader-utils":"^1.1.0","normalize-url":"1.9.1","schema-utils":"^1.0.0","webpack-external-import":"^0.0.1-beta.15","webpack-sources":"^1.1.0"},"devDependencies":{"@babel/cli":"^7.4.4","@babel/core":"^7.4.4","@babel/preset-env":"^7.4.4","@commitlint/cli":"^7.6.1","@commitlint/config-conventional":"^7.6.0","@webpack-contrib/defaults":"^4.0.1","@webpack-contrib/eslint-config-webpack":"^3.0.0","acorn":"^6.1.1","babel-eslint":"^10.0.1","babel-jest":"^24.8.0","commitlint-azure-pipelines-cli":"^1.0.1","cross-env":"^5.2.0","css-loader":"^2.1.1","del":"^4.1.1","del-cli":"^1.1.0","es-check":"^5.0.0","eslint":"^5.16.0","eslint-plugin-import":"^2.17.2","eslint-plugin-prettier":"^3.1.0","file-loader":"^3.0.1","husky":"^2.2.0","jest":"^24.8.0","jest-junit":"^6.4.0","lint-staged":"^8.1.6","memory-fs":"^0.4.1","prettier":"^1.17.0","standard-version":"^6.0.1","webpack":"^4.31.0","webpack-cli":"^3.3.2","webpack-dev-server":"^3.3.1"},"pre-commit":"lint-staged","lint-staged":{"*.js":["eslint --fix","git add"]},"gitHead":"9b821fd655395360e3b4df38677a872535647b8d","bugs":{"url":"https://github.com/faceyspacey/extract-css-chunks-webpack-plugin/issues"},"_id":"extract-css-chunks-webpack-plugin@4.5.3","_nodeVersion":"12.5.0","_npmVersion":"6.9.0","dist":{"integrity":"sha512-iepP6Xm4Us67JGmIEjjD7rYCY7ifL273wlwxSlq2RLbXgQrAXO6fJFiWrOfU2YZ7nkKZKAz4FildXzRKTZuDww==","shasum":"fa0b096b9c79089cb92e5b087592d0f49a3d2506","tarball":"https://registry.npmjs.org/extract-css-chunks-webpack-plugin/-/extract-css-chunks-webpack-plugin-4.5.3.tgz","fileCount":8,"unpackedSize":56827,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdFpXxCRA9TVsSAnZWagAACWQP/0bZLEbDZzjeU+nrmf0+\nXeZzg0dy8+BY9gf9r4hm0/o76wO/c3GH+EQsdvzGpXBlsR/akOCWDna46id3\n/bC0btsgIhCdqB59w+t2ZvTzxmlb4w/noIKah01LfkQfAP9C0c1oKS4XlV6b\nVJHy/xgCJU2ex3QRAb+++gp3nBWi+4oSeWQVsAnx5AgeoplrObmWb2b2lSCg\nfHCgWvYbTycd1NvL7cOQOj5JRmir8ko0+psFHOWGaLO9iY/vrKhPh3dn2ilb\nqJMm/kwO4+qbBQX05YRxkT3jf6GrWKft4rz9OuEjr39MTv1C8L0qF6lbmfeT\n0wQXSGf8kgWlQmQJDx4QC8jSqhiZS8vKYygBdkK8tIx9UjFAtjP/L7yXfowr\nrB32Lt+B2nFxF45SC6Y2YjtN3TcthE1j4u6ztergy7qklMTofSi1kvEPE7n5\nQnAIQO/Ac//OJydUoQbL2kAfDItAX8lYeklAZMvnzY9R2BCZuBKh0IhsDo41\nElCKxN5AyBM1Flp5+X5WxNetKt/TyofeFZ65QDsLm6Wq5JL5THAqaX9PZ3EQ\nWItT4X/WaBisd5kyhVPjgqaM81hNyqkVk1OUsQxdWax6REWDGmDMNTBeI5ij\nDtxvzhVq2D8TbEF/mdFPMfIIorWupLc72hVoM28d4isjQJqy7YxNRRk7O9Wt\nIp7W\r\n=snCm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDvrezU3oihbQfakyXwdBSNDvIDu//eqP0JScopUaoTIgIhAPFEoc1Xy3tiMj0saazBWmeYeWvVwcAErNxtKXdTjHVf"}]},"maintainers":[{"email":"james@faceyspacey.com","name":"faceyspacey"},{"email":"zackary.l.jackson@gmail.com","name":"zackljackson"}],"_npmUser":{"name":"zackljackson","email":"zackary.l.jackson@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/extract-css-chunks-webpack-plugin_4.5.3_1561761264487_0.6745069308595559"},"_hasShrinkwrap":false},"4.5.4":{"name":"extract-css-chunks-webpack-plugin","version":"4.5.4","description":"Extract CSS from chunks into stylesheets + HMR. Supports Webpack 4 + SSR","license":"MIT","author":{"name":"James Gillmore","email":"james@faceyspacey.com"},"contributors":[{"name":"Zack Jackson","email":"zack@ScriptedAlchemy.com","url":"https://github.com/ScriptedAlchemy"}],"homepage":"http://github.com/faceyspacey/extract-css-chunks-webpack-plugin","repository":{"type":"git","url":"git+https://github.com/faceyspacey/extract-css-chunks-webpack-plugin.git"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"keywords":["css","chunks","code splitting","mini-css","hot","hmr","universal","webpack","webpack 4","css-hot-loader","extract-css-chunks-webpack-plugin"],"main":"dist/cjs.js","engines":{"node":">= 6.9.0 <7.0.0 || >= 8.9.0"},"scripts":{"start":"npm run build -- -w","build":"cross-env NODE_ENV=production babel src -d dist --ignore 'src/**/*.test.js' --copy-files","postbuild":"es-check es5 dist/hmr/hotModuleReplacement.js","clean":"del-cli dist","commitlint":"commitlint","lint":"eslint --cache src test","ci:lint:commits":"commitlint --from=${CIRCLE_BRANCH} --to=${CIRCLE_SHA1}","lint-staged":"lint-staged","prebuild":"npm run clean","prepare":"npm run build","release:validate":"commitlint --from=$(git describe --tags --abbrev=0) --to=$(git rev-parse HEAD)","security":"npm audit","test:only":"jest","test:watch":"jest --watch","test:coverage":"jest --collectCoverageFrom='src/**/*.js' --coverage","pretest":"npm run lint","test":"npm run test:coverage","ci:lint":"npm run lint && npm run security","ci:test":"npm run test -- --runInBand","ci:coverage":"npm run test:coverage -- --runInBand","defaults":"webpack-defaults","semantic-release":"npx semantic-release","travis":"npm run ci:coverage"},"peerDependencies":{"webpack":"^4.4.0"},"dependencies":{"loader-utils":"^1.1.0","normalize-url":"1.9.1","schema-utils":"^1.0.0","webpack-external-import":"^0.0.1-beta.16","webpack-sources":"^1.1.0"},"devDependencies":{"@babel/cli":"^7.4.4","@babel/core":"^7.4.4","@babel/preset-env":"^7.4.4","@commitlint/cli":"^7.6.1","@commitlint/config-conventional":"^7.6.0","@webpack-contrib/defaults":"^4.0.1","@webpack-contrib/eslint-config-webpack":"^3.0.0","acorn":"^6.1.1","babel-eslint":"^10.0.1","babel-jest":"^24.8.0","commitlint-azure-pipelines-cli":"^1.0.1","cross-env":"^5.2.0","css-loader":"^2.1.1","del":"^4.1.1","del-cli":"^1.1.0","es-check":"^5.0.0","eslint":"^5.16.0","eslint-plugin-import":"^2.17.2","eslint-plugin-prettier":"^3.1.0","file-loader":"^3.0.1","husky":"^2.2.0","jest":"^24.8.0","jest-junit":"^6.4.0","lint-staged":"^8.1.6","memory-fs":"^0.4.1","prettier":"^1.17.0","standard-version":"^6.0.1","webpack":"^4.31.0","webpack-cli":"^3.3.2","webpack-dev-server":"^3.3.1"},"pre-commit":"lint-staged","lint-staged":{"*.js":["eslint --fix","git add"]},"gitHead":"757b11b2a012ffcbe62c8e17ae1edd368ac6b780","bugs":{"url":"https://github.com/faceyspacey/extract-css-chunks-webpack-plugin/issues"},"_id":"extract-css-chunks-webpack-plugin@4.5.4","_nodeVersion":"12.5.0","_npmVersion":"6.9.0","dist":{"integrity":"sha512-d/INFuuwHYad82Xz2g+OFbbiSn9m59HJBuL7oNUBj5v82MBM2nE3PcBsMlw7Ej+k8U1TD/FLO3fgV1I+51FcPQ==","shasum":"8c5bbefd29a2d16cb471e1f863f5926f11f73653","tarball":"https://registry.npmjs.org/extract-css-chunks-webpack-plugin/-/extract-css-chunks-webpack-plugin-4.5.4.tgz","fileCount":8,"unpackedSize":56827,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdGjz/CRA9TVsSAnZWagAAC8UQAILohb5lhLIW3N7bP3en\nu/+AUt6D/XFZevoxg+bVvPh+JlInby9pF0HxmxoWIIn/ov7rLAFkK6FMmRIT\nNrmTwSUbaj1XUD175QpZE7cmCw2FhbTDjiWYV4Vx0vofhPV1Y2btrodb1Lf1\nC8BxkyzantOkRwFnYTpc+87pcROFc4OvrKIHi5mV0Ow1435zsHwcLObiC6Nx\n5PcEYCQKnqvcJNp/56XQqG93o8XROxe02KxvEzWLeHNdcIlZud8CTrzgBVzw\nNfkmRM0O9ez3jvKAdTgiaucPr7c7pLFrmmbrIRHydTqmGfZGZkSlRrOMtvXy\n4N5lyUJ295y/jwnYkNmWf+oilCktF+6NRpM4elp5ZYHqwlkEx9xwMcM72HHg\nJMwh/CHqsufri4M8lkatwdIdhj31O6S4P23J5Tkzj+ZLzHMZa5PuPO2s6zLM\nxxrlkMCFxQ7L1X/ax1bAYUxDbo5rAQusFyZJnnqwzL2zLvSIEswFBJLES+I+\nGQToKKJEMM8IvPCZvKE8V6ci2fnbdszOCjZHWnYIriMG5YZ2/OtOB9/L+743\nh+MEUU+4dTDg6+miutgDB/quF+HvmibchxeQBuCMXF4tMcur+4enpCD0zBO4\n9UO4KF34BlAYUFtq6krg0PWfTC4X0nbCGkm7pzQKi5OJOObF4k09y82x8Zfd\ni+62\r\n=jVWR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDAtgTP3nsY1JW0addTJU0hf2SFjrAZPqReI8hR1CUhogIhAJLxzenHxbLAKPdvriYWb0FakefiM1pVZAdpnlqkJIjy"}]},"maintainers":[{"email":"james@faceyspacey.com","name":"faceyspacey"},{"email":"zackary.l.jackson@gmail.com","name":"zackljackson"}],"_npmUser":{"name":"zackljackson","email":"zackary.l.jackson@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/extract-css-chunks-webpack-plugin_4.5.4_1562000638180_0.4181721490323027"},"_hasShrinkwrap":false},"4.5.5":{"name":"extract-css-chunks-webpack-plugin","version":"4.5.5","description":"Extract CSS from chunks into stylesheets + HMR. Supports Webpack 4 + SSR","license":"MIT","author":{"name":"James Gillmore","email":"james@faceyspacey.com"},"contributors":[{"name":"Zack Jackson","email":"zack@ScriptedAlchemy.com","url":"https://github.com/ScriptedAlchemy"}],"homepage":"http://github.com/faceyspacey/extract-css-chunks-webpack-plugin","repository":{"type":"git","url":"git+https://github.com/faceyspacey/extract-css-chunks-webpack-plugin.git"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"keywords":["css","chunks","code splitting","mini-css","hot","hmr","universal","webpack","webpack 4","css-hot-loader","extract-css-chunks-webpack-plugin"],"main":"dist/cjs.js","engines":{"node":">= 6.9.0 <7.0.0 || >= 8.9.0"},"scripts":{"start":"npm run build -- -w","build":"cross-env NODE_ENV=production babel src -d dist --ignore 'src/**/*.test.js' --copy-files","postbuild":"es-check es5 dist/hmr/hotModuleReplacement.js","clean":"del-cli dist","commitlint":"commitlint","lint":"eslint --cache src test","ci:lint:commits":"commitlint --from=${CIRCLE_BRANCH} --to=${CIRCLE_SHA1}","lint-staged":"lint-staged","prebuild":"npm run clean","prepare":"npm run build","release:validate":"commitlint --from=$(git describe --tags --abbrev=0) --to=$(git rev-parse HEAD)","security":"npm audit","test:only":"jest","test:watch":"jest --watch","test:coverage":"jest --collectCoverageFrom='src/**/*.js' --coverage","pretest":"npm run lint","test":"npm run test:coverage","ci:lint":"npm run lint && npm run security","ci:test":"npm run test -- --runInBand","ci:coverage":"npm run test:coverage -- --runInBand","defaults":"webpack-defaults","semantic-release":"npx semantic-release","travis":"npm run ci:coverage","snyk-protect":"snyk protect","prepublish":"npm run snyk-protect"},"peerDependencies":{"webpack":"^4.4.0"},"dependencies":{"loader-utils":"^1.1.0","normalize-url":"1.9.1","schema-utils":"^1.0.0","webpack-external-import":"^0.0.1-beta.16","webpack-sources":"^1.1.0","snyk":"^1.189.0"},"devDependencies":{"@babel/cli":"^7.4.4","@babel/core":"^7.4.4","@babel/preset-env":"^7.4.4","@commitlint/cli":"^7.6.1","@commitlint/config-conventional":"^7.6.0","@webpack-contrib/defaults":"^4.0.1","@webpack-contrib/eslint-config-webpack":"^3.0.0","acorn":"^6.1.1","babel-eslint":"^10.0.1","babel-jest":"^24.8.0","commitlint-azure-pipelines-cli":"^1.0.1","cross-env":"^5.2.0","css-loader":"^2.1.1","del":"^4.1.1","del-cli":"^1.1.0","es-check":"^5.0.0","eslint":"^5.16.0","eslint-plugin-import":"^2.17.2","eslint-plugin-prettier":"^3.1.0","file-loader":"^3.0.1","husky":"^2.2.0","jest":"^24.8.0","jest-junit":"^6.4.0","lint-staged":"^8.1.6","memory-fs":"^0.4.1","prettier":"^1.17.0","standard-version":"^6.0.1","webpack":"^4.31.0","webpack-cli":"^3.3.2","webpack-dev-server":"^3.3.1"},"pre-commit":"lint-staged","lint-staged":{"*.js":["eslint --fix","git add"]},"snyk":true,"gitHead":"f4d5466bd6ac61b604326e2abd394cdef556f3a4","bugs":{"url":"https://github.com/faceyspacey/extract-css-chunks-webpack-plugin/issues"},"_id":"extract-css-chunks-webpack-plugin@4.5.5","_nodeVersion":"12.6.0","_npmVersion":"6.9.0","dist":{"integrity":"sha512-v+eNPOAWEYOoDGV/PU2mDm3PW2UToIBFxrkpNebppiN5TgZBRcFOiHWRKjL/kghXdqkB5Rfj2fMk2JZWueVpsg==","shasum":"d62553210d572fc28e25158d41444634f81f4dc4","tarball":"https://registry.npmjs.org/extract-css-chunks-webpack-plugin/-/extract-css-chunks-webpack-plugin-4.5.5.tgz","fileCount":8,"unpackedSize":56945,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdH8hZCRA9TVsSAnZWagAAI4YP/14N2ccm9SB1r2mHnEL1\nPRxI3LUKOBUBCoVvYTwpitrRqW3J8QTnsE3Y+XPyiDAhhZ6LMvgmvI8qpYGA\nL3zw/i1h+AL7sp+c2MW0K+2rovapXjxRpCA3skMk4aGGJ9VxBKU5hM3g85/j\n0JlkT2XCbzThVwo4xpXNGBkh39xNQac0UnrPWDRfvigvc7BdUjtUVJo4Fw9W\nGQAQHKwDh32odzcKxBj4WtcBAMpHOV280fDHIO86ThWlcYbzy5wLcRPv6NT/\nZY5PUZI3N0foqk1fhbRbxRRk6c3BQezCyQvNVhYgFrU5QcX+k/qpFDnP6uQn\nmR/B69xQU4sLvQastONHw9jETvgtDr1TkCVdaf0MXTLkKgd5K2aK/JmtiyiO\n2R9WjHYop9qkfBEjzbdRcMRD/G1EiHI0vCYk9MUw97G8FveyBJfamiS37qAg\nO6iD64Svq67a/7mJ9j4Kh1XjYoAySy8G88rXlBcUK+jKOCcY2ikuu9m3ty18\nnW3/jQ3aJc479INUgSHvwmA7dmKmmazQnlTP/nqxvyIYQbl4+sEqkxBGsqXJ\nNco75Nk6awjoRDKCd4w3i8MBg9rV8gcyAhGAram+o33W6LThdl4f8OQr3VaO\nHVN9galxiv35hDj9U+rxzvcBTRpnxvkfFq/ZIYfePZe6UsWaNB4wi8rAaezf\nGoWP\r\n=BgqC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH9AChxlRnXlr0buChyY2iZZVCyHn8wT6Ye0T7IqjafTAiAtBW9tUNeGxmz9slOOboYkhBjUIIZUcPcaHx9cjFg0uw=="}]},"maintainers":[{"email":"james@faceyspacey.com","name":"faceyspacey"},{"email":"zackary.l.jackson@gmail.com","name":"zackljackson"}],"_npmUser":{"name":"zackljackson","email":"zackary.l.jackson@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/extract-css-chunks-webpack-plugin_4.5.5_1562363992845_0.6310839544462474"},"_hasShrinkwrap":false},"4.5.6":{"name":"extract-css-chunks-webpack-plugin","version":"4.5.6","description":"Extract CSS from chunks into stylesheets + HMR. Supports Webpack 4 + SSR","license":"MIT","author":{"name":"James Gillmore","email":"james@faceyspacey.com"},"contributors":[{"name":"Zack Jackson","email":"zack@ScriptedAlchemy.com","url":"https://github.com/ScriptedAlchemy"}],"homepage":"http://github.com/faceyspacey/extract-css-chunks-webpack-plugin","repository":{"type":"git","url":"git+https://github.com/faceyspacey/extract-css-chunks-webpack-plugin.git"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"keywords":["css","chunks","code splitting","mini-css","hot","hmr","universal","webpack","webpack 4","css-hot-loader","extract-css-chunks-webpack-plugin"],"main":"dist/cjs.js","engines":{"node":">= 6.9.0 <7.0.0 || >= 8.9.0"},"scripts":{"start":"npm run build -- -w","build":"cross-env NODE_ENV=production babel src -d dist --ignore 'src/**/*.test.js' --copy-files","postbuild":"es-check es5 dist/hmr/hotModuleReplacement.js","clean":"del-cli dist","commitlint":"commitlint","lint":"eslint --cache src test","ci:lint:commits":"commitlint --from=${CIRCLE_BRANCH} --to=${CIRCLE_SHA1}","lint-staged":"lint-staged","prebuild":"npm run clean","prepare":"npm run build","release:validate":"commitlint --from=$(git describe --tags --abbrev=0) --to=$(git rev-parse HEAD)","security":"npm audit","test:only":"jest","test:watch":"jest --watch","test:coverage":"jest --collectCoverageFrom='src/**/*.js' --coverage","pretest":"npm run lint","test":"npm run test:coverage","ci:lint":"npm run lint && npm run security","ci:test":"npm run test -- --runInBand","ci:coverage":"npm run test:coverage -- --runInBand","defaults":"webpack-defaults","semantic-release":"npx semantic-release","travis":"npm run ci:coverage","snyk-protect":"snyk protect","prepublish":"npm run snyk-protect"},"peerDependencies":{"webpack":"^4.4.0"},"dependencies":{"loader-utils":"^1.1.0","normalize-url":"1.9.1","schema-utils":"^1.0.0","webpack-external-import":"^0.0.1-beta.16","webpack-sources":"^1.1.0"},"devDependencies":{"@babel/cli":"^7.4.4","@babel/core":"^7.4.4","@babel/preset-env":"^7.4.4","@commitlint/cli":"^7.6.1","@commitlint/config-conventional":"^7.6.0","@webpack-contrib/defaults":"^4.0.1","@webpack-contrib/eslint-config-webpack":"^3.0.0","acorn":"^6.1.1","babel-eslint":"^10.0.1","babel-jest":"^24.8.0","commitlint-azure-pipelines-cli":"^1.0.1","cross-env":"^5.2.0","css-loader":"^2.1.1","del":"^4.1.1","del-cli":"^1.1.0","es-check":"^5.0.0","eslint":"^5.16.0","eslint-plugin-import":"^2.17.2","eslint-plugin-prettier":"^3.1.0","file-loader":"^3.0.1","husky":"^2.2.0","jest":"^24.8.0","jest-junit":"^6.4.0","lint-staged":"^8.1.6","memory-fs":"^0.4.1","prettier":"^1.17.0","snyk":"^1.189.0","standard-version":"^6.0.1","webpack":"^4.31.0","webpack-cli":"^3.3.2","webpack-dev-server":"^3.3.1"},"pre-commit":"lint-staged","lint-staged":{"*.js":["eslint --fix","git add"]},"snyk":true,"gitHead":"f6b52526f0383fcc2b5e88632a7444ec46454e41","bugs":{"url":"https://github.com/faceyspacey/extract-css-chunks-webpack-plugin/issues"},"_id":"extract-css-chunks-webpack-plugin@4.5.6","_nodeVersion":"12.6.0","_npmVersion":"6.9.0","dist":{"integrity":"sha512-mTkkgXS2VMDbZ9yJD98Fatu8bdr3ZUVD7AIGvmkClCNxHYgeg64Rykb5QE1s/Y2LknAu6a20F26ZjO7AohckVw==","shasum":"7f41118696578a45b2cb3c30bf9b738a38c384df","tarball":"https://registry.npmjs.org/extract-css-chunks-webpack-plugin/-/extract-css-chunks-webpack-plugin-4.5.6.tgz","fileCount":8,"unpackedSize":56945,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdKUsyCRA9TVsSAnZWagAA1FkP/RLwmYpLp9fRXqScNlOo\n3AAc58l0aVs8Qnu/5LII/U0G0q9nbQD+xs3xuIOLDSy+opbSLXuVkUIKDMXu\negMEbbtctsTMSIfdrixroxhrkGiDB3p1Y9Ya85XBeNz6LLUIGEq5sIOCRnvz\nsyShOD3BAUlyzYWHHaQeaF1bq3YvJZTHchu6pWxez4jcBQb8d8vzIpi5rvIB\n2yBN5S8L2IB8OM3cX+xsWqiGbzKMKO1H2gJCRobIMgY0PT0wr2pgPgRrjqPP\nM9HsZdEMh1niYGzXS7nEqKHD/HS9JuFjVgic3JL37Y/92lObxOKdWW6iQ55q\n0FgbrBLdw8gCvuw7CwVypu3rwZ22h4QvIMUpyI9fJfad5wFqitvZgwmW0vpn\nuUBbks13lv5CsX7XmQ0MGWDIbasPsQGFykymkmlQVAG/vNIvSblHM4LmhLw6\nCmh/2gey9PZZyerbWBoUgfVuY8kTmF9vIUZ8yybo+7t6TmBqQNboWuArSdyS\nMM+HKNWaLuNcVKM3QZfvds3hB1LWZIySCUJPeOmOOxdbo2K+CqptYBNkpIw2\no5z1xgP3G7+rh+M3+/JG5+YPcAefGxt+kzUN3oalazj/3aZitqhszBanERwF\n2iO9oaArDDqPHe1iM4y0MVgkWbz+M5czVj5ADaPXKFvDz5mVBHBv2QvvcUmY\ng40V\r\n=4s7x\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIQCVKZ6UGXwFRvrhG60bLmv29NTPQxHuU8Icd3g+r6UzEgIfNPWR8SRues4Mf50eq+qFrTAHS3beOS7LfRm8SpSXlw=="}]},"maintainers":[{"email":"james@faceyspacey.com","name":"faceyspacey"},{"email":"zackary.l.jackson@gmail.com","name":"zackljackson"}],"_npmUser":{"name":"zackljackson","email":"zackary.l.jackson@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/extract-css-chunks-webpack-plugin_4.5.6_1562987313396_0.17190062984617915"},"_hasShrinkwrap":false},"4.5.7":{"name":"extract-css-chunks-webpack-plugin","version":"4.5.7","description":"Extract CSS from chunks into stylesheets + HMR. Supports Webpack 4 + SSR","license":"MIT","author":{"name":"James Gillmore","email":"james@faceyspacey.com"},"contributors":[{"name":"Zack Jackson","email":"zack@ScriptedAlchemy.com","url":"https://github.com/ScriptedAlchemy"}],"homepage":"http://github.com/faceyspacey/extract-css-chunks-webpack-plugin","repository":{"type":"git","url":"git+https://github.com/faceyspacey/extract-css-chunks-webpack-plugin.git"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"keywords":["css","chunks","code splitting","mini-css","hot","hmr","universal","webpack","webpack 4","css-hot-loader","extract-css-chunks-webpack-plugin"],"main":"dist/cjs.js","engines":{"node":">= 6.9.0 <7.0.0 || >= 8.9.0"},"scripts":{"start":"npm run build -- -w","build":"cross-env NODE_ENV=production babel src -d dist --ignore 'src/**/*.test.js' --copy-files","postbuild":"es-check es5 dist/hmr/hotModuleReplacement.js","clean":"del-cli dist","commitlint":"commitlint","lint":"eslint --cache src test","ci:lint:commits":"commitlint --from=${CIRCLE_BRANCH} --to=${CIRCLE_SHA1}","lint-staged":"lint-staged","prebuild":"npm run clean","prepare":"npm run build","release:validate":"commitlint --from=$(git describe --tags --abbrev=0) --to=$(git rev-parse HEAD)","security":"npm audit","test:only":"jest","test:watch":"jest --watch","test:coverage":"jest --collectCoverageFrom='src/**/*.js' --coverage","pretest":"npm run lint","test":"npm run test:coverage","ci:lint":"npm run lint && npm run security","ci:test":"npm run test -- --runInBand","ci:coverage":"npm run test:coverage -- --runInBand","defaults":"webpack-defaults","semantic-release":"npx semantic-release","travis":"npm run ci:coverage","snyk-protect":"snyk protect","prepublish":"npm run snyk-protect"},"peerDependencies":{"webpack":"^4.4.0"},"dependencies":{"loader-utils":"^1.1.0","normalize-url":"1.9.1","schema-utils":"^1.0.0","webpack-external-import":"^0.0.1-beta.16","webpack-sources":"^1.1.0"},"devDependencies":{"@babel/cli":"^7.4.4","@babel/core":"^7.4.4","@babel/preset-env":"^7.4.4","@commitlint/cli":"^7.6.1","@commitlint/config-conventional":"^7.6.0","@webpack-contrib/defaults":"^4.0.1","@webpack-contrib/eslint-config-webpack":"^3.0.0","acorn":"^6.1.1","babel-eslint":"^10.0.1","babel-jest":"^24.8.0","commitlint-azure-pipelines-cli":"^1.0.1","cross-env":"^5.2.0","css-loader":"^2.1.1","del":"^4.1.1","del-cli":"^1.1.0","es-check":"^5.0.0","eslint":"^5.16.0","eslint-plugin-import":"^2.17.2","eslint-plugin-prettier":"^3.1.0","file-loader":"^3.0.1","husky":"^2.2.0","jest":"^24.8.0","jest-junit":"^6.4.0","lint-staged":"^8.1.6","memory-fs":"^0.4.1","prettier":"^1.17.0","snyk":"^1.189.0","standard-version":"^6.0.1","webpack":"^4.31.0","webpack-cli":"^3.3.2","webpack-dev-server":"^3.3.1"},"pre-commit":"lint-staged","lint-staged":{"*.js":["eslint --fix","git add"]},"snyk":true,"gitHead":"b7045c5c1bfa584763e4b858cf3cc47852abdb30","bugs":{"url":"https://github.com/faceyspacey/extract-css-chunks-webpack-plugin/issues"},"_id":"extract-css-chunks-webpack-plugin@4.5.7","_nodeVersion":"12.7.0","_npmVersion":"6.10.0","dist":{"integrity":"sha512-wDrWnFrpkGnE/BY/GVuhAEQzbbkDg4KzF+7X/Bt6ZV4pq+8zCzCzy2aHESPpWzZdKvd5kfQjOSUgivCvP+pplA==","shasum":"d8db567e6ba275532f2d10218b7e8c283c16b507","tarball":"https://registry.npmjs.org/extract-css-chunks-webpack-plugin/-/extract-css-chunks-webpack-plugin-4.5.7.tgz","fileCount":8,"unpackedSize":56950,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdRhXaCRA9TVsSAnZWagAAq4QP/Rs5JjoFvRhq1FWiDqMu\n5XiZyZzJIQ6H5J8ROhuOT3z9VjDwsBzgn9uPNr1KfFTVw8YE/jtjU51O72AE\nLWDuMbKi23bGS5QNH4gxdADZC+9cxFH15uFkl6XNsbQZjeH/ZobXXC0QoTMx\nkPRrRJUldEXTgL3RGwrAMXlmv1RQ7sfomS/kdtc05l8uZt/vxKG/itLW1hk7\nTyQsaUwyJ+yJOOgaPBNmrtR0MJozeH2YKKEkz+9P6jJMCMfaB4etIWZYTCnx\nD4e6eNBLswimJVnlFqO0/tYF61KoWCLrKPr4GKHWUx5sIzU+PCgt3z3aVNSm\nKQbh1EyRfdf1LA2gZxDXyR0XqcpFn6jEKP8P/7FJOKdumVnv3aur3zLFQgVc\n0mhqTzHVyz4cLJbhyVHbu4FwxvitKr/g3RmjDxdF/DgugvYxzL4sNKjTv8wx\nyi+rcGuB4JI32HLTvSUUwVjD8WbiWFpu6xsOevvTgKxYYBvMH+moie2tWLI2\ni+r/zw9kDcyq5PViUP2hrhgbKt9yTLu1mFh0Hk7caMb7U6VxidvRqggoGe79\n365id2FrspR+vKUn6f3IAB+7B/ZgVSnCTnRueewhVcyGd7XJqew3C/R01aYF\n0a3kFK8kf+WarWqUSsFnyyDzh4uHsd9ZZcEccRJJE0nf6v0zb4+Z7hv/Dhtr\n4BDx\r\n=bCMi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC/XSHUhQsHiAk1mcUZGKt+IKHYRYPEJUS2k+iErFNY/QIgXNmFfacuShF2dIm+Nbu3Ig/nrgr1RWovTTWkUqN0Nzk="}]},"maintainers":[{"email":"james@faceyspacey.com","name":"faceyspacey"},{"email":"zackary.l.jackson@gmail.com","name":"zackljackson"}],"_npmUser":{"name":"zackljackson","email":"zackary.l.jackson@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/extract-css-chunks-webpack-plugin_4.5.7_1564874200999_0.7707050635323887"},"_hasShrinkwrap":false},"4.6.0":{"name":"extract-css-chunks-webpack-plugin","version":"4.6.0","description":"Extract CSS from chunks into stylesheets + HMR. Supports Webpack 4 + SSR","license":"MIT","author":{"name":"James Gillmore","email":"james@faceyspacey.com"},"contributors":[{"name":"Zack Jackson","email":"zack@ScriptedAlchemy.com","url":"https://github.com/ScriptedAlchemy"}],"homepage":"http://github.com/faceyspacey/extract-css-chunks-webpack-plugin","repository":{"type":"git","url":"git+https://github.com/faceyspacey/extract-css-chunks-webpack-plugin.git"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"keywords":["css","chunks","code splitting","mini-css","hot","hmr","universal","webpack","webpack 4","css-hot-loader","extract-css-chunks-webpack-plugin"],"main":"dist/cjs.js","engines":{"node":">= 6.9.0"},"scripts":{"start":"npm run build -- -w","build":"cross-env NODE_ENV=production babel src -d dist --ignore 'src/**/*.test.js' --copy-files","postbuild":"es-check es5 dist/hmr/hotModuleReplacement.js","clean":"del-cli dist","commitlint":"commitlint","lint":"eslint --cache src test","ci:lint:commits":"commitlint --from=${CIRCLE_BRANCH} --to=${CIRCLE_SHA1}","lint-staged":"lint-staged","prebuild":"npm run clean","prepare":"npm run build","release:validate":"commitlint --from=$(git describe --tags --abbrev=0) --to=$(git rev-parse HEAD)","security":"npm audit","test:only":"jest","test:watch":"jest --watch","test:coverage":"jest --collectCoverageFrom='src/**/*.js' --coverage","pretest":"npm run lint","test":"npm run test:coverage","ci:lint":"npm run lint && npm run security","ci:test":"npm run test -- --runInBand","ci:coverage":"npm run test:coverage -- --runInBand","defaults":"webpack-defaults","semantic-release":"npx semantic-release","travis":"npm run ci:coverage"},"peerDependencies":{"webpack":"^4.4.0"},"dependencies":{"loader-utils":"^1.1.0","normalize-url":"1.9.1","schema-utils":"^1.0.0","webpack-sources":"^1.1.0","webpack-external-import":"^0.0.1-beta.19"},"devDependencies":{"@babel/cli":"^7.5.0","@babel/core":"^7.5.4","@babel/preset-env":"^7.5.4","@commitlint/cli":"^8.1.0","@commitlint/config-conventional":"^8.1.0","@webpack-contrib/defaults":"^5.0.2","@webpack-contrib/eslint-config-webpack":"^3.0.0","babel-eslint":"^10.0.2","babel-jest":"^24.8.0","commitlint-azure-pipelines-cli":"^1.0.2","cross-env":"^5.2.0","css-loader":"^3.0.0","del":"^4.1.1","del-cli":"^1.1.0","es-check":"^5.0.0","eslint":"^6.0.1","eslint-config-prettier":"^6.0.0","eslint-plugin-import":"^2.18.0","file-loader":"^4.0.0","husky":"^3.0.0","jest":"^24.8.0","jest-junit":"^6.4.0","lint-staged":"^9.2.0","memory-fs":"^0.4.1","npm-run-all":"^4.1.5","prettier":"^1.18.2","standard-version":"^6.0.1","webpack":"^4.35.3","webpack-cli":"^3.3.6","webpack-dev-server":"^3.7.2"},"pre-commit":"lint-staged","lint-staged":{"*.js":["eslint --fix","git add"]},"gitHead":"cf9c3ea1938125a4f31bfc838a1d40ee38221740","bugs":{"url":"https://github.com/faceyspacey/extract-css-chunks-webpack-plugin/issues"},"_id":"extract-css-chunks-webpack-plugin@4.6.0","_nodeVersion":"12.7.0","_npmVersion":"6.10.0","dist":{"integrity":"sha512-HbTh4Yd0JYXbqOgtd/o/BNuLs/fL7h7bM9mCg/WZqKNE65B586Vzs+erzTGuU2xnp5B4gOQbHgC6MrmRVah1Nw==","shasum":"961d02dc5cb7b265c8aa19fdbcc4031a4006ca95","tarball":"https://registry.npmjs.org/extract-css-chunks-webpack-plugin/-/extract-css-chunks-webpack-plugin-4.6.0.tgz","fileCount":8,"unpackedSize":61774,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdRmAuCRA9TVsSAnZWagAA+RUP/2CJrL/l5L+HXFfPJSQm\noHSlq+frUhadNIp/m0VF797th9GbQ+ugDA+uKsHREZSzOf1nJwF1wMoWxVKQ\n3vtjDysK1VZIs8KZTsBE4GdPLKjQPGkfYZQzimOKYZABeC0MMZVvBVXHuKp3\nmSyuXjkngl2JIL/Uq6uJfkF5vp0VzNg2YvnUqrvcEarD/sOEw2XMXeAHZXTF\nutSNCiUv3B++1dk2e6sAGGaL/JTweTz7h0ntZI4e+/+Yr9VUzVPARs0yfN38\n5RBafgFosW2e+xBQZBGk8pDsEKbgzrrYxLCS9Wf/Tcb0vBUqIfD3bmqbzNoc\nuZDl9aCds+buMmBDo6zd3lHmHN5hP55CoB7uIUU1k3yxbubz0YB4pxBfpnvt\n2C2wfp9E8Z+lwhQR+64b63PWUXFIMbxfucZhvbmrn4fWTntS2MUR+cyv3PtF\nn+hIFMHQ1pRqFbA7RJ03gyMFq+jKrXe3fRHDsTY7XEY/VYjxmSkwcTQ3H5s0\nQke495AJ9GS2X1B4rvwX0XUidO23wnJc0mfjEm0erWS7IiHwpgRRy0F8QfmQ\nHbf85kQQiBVaiDvX28vNCgMWehxS/o7DC3pdGc1GbTxtYcUYxQcxSfOKtRrd\nqEX/vPlwnxFYIO/7omjeXnRQQWJ7Zt2qqMW7acHYIE3CaJ2Wq/ow4m+7lH62\nFayH\r\n=5uyx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD+QFZaRHrGfXa8QBCUDYMp9qdu/8spZxyO9N98qfk0XAIhAMAi/sbi6JvOK2/ABjt6lXpt3wHfx21LFJCDX/MK9ByA"}]},"maintainers":[{"email":"james@faceyspacey.com","name":"faceyspacey"},{"email":"zackary.l.jackson@gmail.com","name":"zackljackson"}],"_npmUser":{"name":"zackljackson","email":"zackary.l.jackson@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/extract-css-chunks-webpack-plugin_4.6.0_1564893229554_0.7480222911368037"},"_hasShrinkwrap":false},"4.7.0":{"name":"extract-css-chunks-webpack-plugin","version":"4.7.0","description":"Extract CSS from chunks into stylesheets + HMR. Supports Webpack 4 + SSR","license":"MIT","author":{"name":"James Gillmore","email":"james@faceyspacey.com"},"contributors":[{"name":"Zack Jackson","email":"zack@ScriptedAlchemy.com","url":"https://github.com/ScriptedAlchemy"}],"homepage":"http://github.com/faceyspacey/extract-css-chunks-webpack-plugin","repository":{"type":"git","url":"git+https://github.com/faceyspacey/extract-css-chunks-webpack-plugin.git"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"keywords":["css","chunks","code splitting","mini-css","hot","hmr","universal","webpack","webpack 4","css-hot-loader","extract-css-chunks-webpack-plugin"],"main":"dist/cjs.js","engines":{"node":">= 6.9.0"},"scripts":{"start":"npm run build -- -w","build":"cross-env NODE_ENV=production babel src -d dist --ignore 'src/**/*.test.js' --copy-files","postbuild":"es-check es5 dist/hmr/hotModuleReplacement.js","clean":"del-cli dist","commitlint":"commitlint","lint":"eslint --cache src test","ci:lint:commits":"commitlint --from=${CIRCLE_BRANCH} --to=${CIRCLE_SHA1}","lint-staged":"lint-staged","prebuild":"npm run clean","prepare":"npm run build","release:validate":"commitlint --from=$(git describe --tags --abbrev=0) --to=$(git rev-parse HEAD)","security":"npm audit","test:only":"jest","test:watch":"jest --watch","test:coverage":"jest --collectCoverageFrom='src/**/*.js' --coverage","pretest":"npm run lint","test":"npm run test:coverage","ci:lint":"npm run lint && npm run security","ci:test":"npm run test -- --runInBand","ci:coverage":"npm run test:coverage -- --runInBand","defaults":"webpack-defaults","semantic-release":"npx semantic-release","travis":"npm run ci:coverage"},"peerDependencies":{"webpack":"^4.4.0"},"dependencies":{"loader-utils":"^1.1.0","normalize-url":"1.9.1","schema-utils":"^1.0.0","webpack-sources":"^1.1.0","webpack-external-import":"^0.0.1-beta.19"},"devDependencies":{"@babel/cli":"^7.5.0","@babel/core":"^7.5.4","@babel/preset-env":"^7.5.4","@commitlint/cli":"^8.1.0","@commitlint/config-conventional":"^8.1.0","@webpack-contrib/defaults":"^5.0.2","@webpack-contrib/eslint-config-webpack":"^3.0.0","babel-eslint":"^10.0.2","babel-jest":"^24.8.0","commitlint-azure-pipelines-cli":"^1.0.2","cross-env":"^5.2.0","css-loader":"^3.0.0","del":"^4.1.1","del-cli":"^1.1.0","es-check":"^5.0.0","eslint":"^6.0.1","eslint-config-prettier":"^6.0.0","eslint-plugin-import":"^2.18.0","file-loader":"^4.0.0","husky":"^3.0.0","jest":"^24.8.0","jest-junit":"^6.4.0","lint-staged":"^9.2.0","memory-fs":"^0.4.1","npm-run-all":"^4.1.5","prettier":"^1.18.2","standard-version":"^6.0.1","webpack":"^4.35.3","webpack-cli":"^3.3.6","webpack-dev-server":"^3.7.2"},"pre-commit":"lint-staged","lint-staged":{"*.js":["eslint --fix","git add"]},"gitHead":"567f74e59b6da8ab8c099c0a7d1953c4c9c88227","bugs":{"url":"https://github.com/faceyspacey/extract-css-chunks-webpack-plugin/issues"},"_id":"extract-css-chunks-webpack-plugin@4.7.0","_nodeVersion":"13.2.0","_npmVersion":"6.13.1","dist":{"integrity":"sha512-6ITFBpKN4SkZ+R/JYBF/I+EmdU0nc8VfpkHQgd/aHojVKR5RfK3/ElaZvOUKMZ7ijIa+bpaBxbuCSoIwcXfduA==","shasum":"c6d3bb7d13fbce464f8ff6a4256828248f37c0eb","tarball":"https://registry.npmjs.org/extract-css-chunks-webpack-plugin/-/extract-css-chunks-webpack-plugin-4.7.0.tgz","fileCount":8,"unpackedSize":61944,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd21/JCRA9TVsSAnZWagAAHmAP/0DygUqxHSns4ibhhPgq\nGnN2oFJvY8LwtpzaaZ7WwX02CXBW/d2dd8xcS9Jtq5vKNVurP3J9aWiRY+mO\n5JjDDvnxuzTdPX3UHsWdnCYsSvGYBjMUTCt0MxKPLsLnHm2rU4XHavO6lZRV\n81KdC8i2DPi0kkx9JwJGtIYDWyhvj4d2gVq+muJfUroTgX5MT8r0MMOu5WaC\nsjNp06G8k7Wp1nSVvmh3ZjkVNLR4Q5LsbnsqZ9kR7YiFoRTYSnEFtxnQjVnq\nVcHc6Vq9I9nz0qVMkfP+BEwGICCVuaxyO4imwNZlc9/lhmlnm2NGGDDU5BPw\nkTRuzogYv+m666M4h/dQVtuSPUwORDuwBcpG9zsZ1+niLXEyumAbEGdXIJrK\nD4aZpVcP1QRT22FEq/jx+E0XPfRR4qbD4wGqxprJFoagXMXFGPZpxNSY5154\niSNiWkZ+Y6EjbGrB6dhEZcjgBHk+T+XEeecID1CGUrmJR3ao5J8syK2QGV4z\n0q8pMASwOPG7RrLusuHo8RAK7d9Mi0Ef0w7kqKmVPhQZSeehHcW+ElKZEeR+\nG0ntqTY6se7C5OF54ufR9h4YAxC3ikKuKpRWlpz7UDIqVT4w+iNoE5ddJuSI\n7QjqEN0Hr54tn5RdDniwtDh0ujKyh8bNzvvn8geVPiRXVS+Ea6SM6Am+Rae5\nCN9t\r\n=oUCt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDJJgWUz4Gic3rjRncGj2J0K0SHQKsDECqs5R1nOgQ47wIhANDHp5Ij/Uwmfqow7InJg4sArdFrLKkx1WLiddhRpJgV"}]},"maintainers":[{"email":"james@faceyspacey.com","name":"faceyspacey"},{"email":"zackary.l.jackson@gmail.com","name":"zackljackson"}],"_npmUser":{"name":"zackljackson","email":"zackary.l.jackson@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/extract-css-chunks-webpack-plugin_4.7.0_1574657993425_0.31943478278814164"},"_hasShrinkwrap":false},"4.7.1":{"name":"extract-css-chunks-webpack-plugin","version":"4.7.1","description":"Extract CSS from chunks into stylesheets + HMR. Supports Webpack 4 + SSR","license":"MIT","author":{"name":"James Gillmore","email":"james@faceyspacey.com"},"contributors":[{"name":"Zack Jackson","email":"zack@ScriptedAlchemy.com","url":"https://github.com/ScriptedAlchemy"}],"homepage":"http://github.com/faceyspacey/extract-css-chunks-webpack-plugin","repository":{"type":"git","url":"git+https://github.com/faceyspacey/extract-css-chunks-webpack-plugin.git"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"keywords":["css","chunks","code splitting","mini-css","hot","hmr","universal","webpack","webpack 4","css-hot-loader","extract-css-chunks-webpack-plugin"],"main":"dist/cjs.js","engines":{"node":">= 6.9.0"},"scripts":{"start":"npm run build -- -w","build":"cross-env NODE_ENV=production babel src -d dist --ignore 'src/**/*.test.js' --copy-files","postbuild":"es-check es5 dist/hmr/hotModuleReplacement.js","clean":"del-cli dist","commitlint":"commitlint","lint":"eslint --cache src test","ci:lint:commits":"commitlint --from=${CIRCLE_BRANCH} --to=${CIRCLE_SHA1}","lint-staged":"lint-staged","prebuild":"npm run clean","prepare":"npm run build","release:validate":"commitlint --from=$(git describe --tags --abbrev=0) --to=$(git rev-parse HEAD)","security":"npm audit","test:only":"jest","test:watch":"jest --watch","test:coverage":"jest --collectCoverageFrom='src/**/*.js' --coverage","pretest":"npm run lint","test":"npm run test:coverage","ci:lint":"npm run lint && npm run security","ci:test":"npm run test -- --runInBand","ci:coverage":"npm run test:coverage -- --runInBand","defaults":"webpack-defaults","semantic-release":"npx semantic-release","travis":"npm run ci:coverage"},"peerDependencies":{"webpack":"^4.4.0"},"dependencies":{"loader-utils":"^1.1.0","normalize-url":"1.9.1","schema-utils":"^1.0.0","webpack-external-import":"^0.3.0-beta.0","webpack-sources":"^1.1.0"},"devDependencies":{"@babel/cli":"^7.5.0","@babel/core":"^7.5.4","@babel/preset-env":"^7.5.4","@commitlint/cli":"^8.1.0","@commitlint/config-conventional":"^8.1.0","@webpack-contrib/defaults":"^5.0.2","@webpack-contrib/eslint-config-webpack":"^3.0.0","babel-eslint":"^10.0.2","babel-jest":"^24.8.0","commitlint-azure-pipelines-cli":"^1.0.2","cross-env":"^5.2.0","css-loader":"^3.0.0","del":"^4.1.1","del-cli":"^1.1.0","es-check":"^5.0.0","eslint":"^6.0.1","eslint-config-prettier":"^6.0.0","eslint-plugin-import":"^2.18.0","file-loader":"^4.0.0","husky":"^3.0.0","jest":"^24.8.0","jest-junit":"^6.4.0","lint-staged":"^9.2.0","memory-fs":"^0.4.1","npm-run-all":"^4.1.5","prettier":"^1.18.2","standard-version":"^6.0.1","webpack":"^4.35.3","webpack-cli":"^3.3.6","webpack-dev-server":"^3.7.2"},"pre-commit":"lint-staged","lint-staged":{"*.js":["eslint --fix","git add"]},"gitHead":"832b2c81ef4ab5781f1f39762c23b500fa36ff20","bugs":{"url":"https://github.com/faceyspacey/extract-css-chunks-webpack-plugin/issues"},"_id":"extract-css-chunks-webpack-plugin@4.7.1","_nodeVersion":"13.2.0","_npmVersion":"6.13.1","dist":{"integrity":"sha512-dpcOJA3wQk4rbgbOGRXyK3Gjl+/Ng8miD162/0uol31Ld4PLnQqIMbKV6ju/gi+uwfZIQcBW3KW1pmfU0epmDg==","shasum":"8bfb94463a8d31c80d88b9c419507c472d810657","tarball":"https://registry.npmjs.org/extract-css-chunks-webpack-plugin/-/extract-css-chunks-webpack-plugin-4.7.1.tgz","fileCount":8,"unpackedSize":61943,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3tnICRA9TVsSAnZWagAAYkMP/Rls3sPiKqrPuJjDf4Ww\n/ENd09ESCTt6Wkgc12i1q8dmgu1rxWfKH+HjrwzontbtglcAdF2ddu0mPk2a\n3nC+GnQ57NeOg459I+oxuuObV9sxKjeYpAi2JFHh9V/V0jC6GQijiIpuDmel\nJN98Kfs0LT350GckCpf6lrT//Q8AKa6aFv2M7HUpTCgqLQgpvNXoN6PmtvLt\n13VbHSd9csxVvgsSSVQxU0uoNGgS32LfJG5/VWH9j/3nUxTnTGQ5IIUb4+sw\nSa2see8O+it15ADsguMGSiFGVeCyoQDQ/mqVTU7vCcs+aTfMxeFoo8lZPGgt\nx5lnR9skQojzCMbIUYUzXKqag9WM3B668q/rnya7U9qUn/jNcm94CeNgnMQE\n5znKjll6m4CrOWA3DLojjZejJXkQMCW6nDUkhdF5yz+GSYK4dv0zKsCKl95W\nw2QDrm4oT/W4IQbLVaDy3Fg0+K/iowokkJ96aQ7TENUVuQJ47Sy8UgySkvHp\nlySpCMNbLkbvGtEoyFBb89INzZkXbjo4ize3z9HH4RRVbfwIeAJ/lVqJ74gr\ncVcfBK5DXvoIwW9MgOfufBE64y9WGdOA+LJ2++QZSeUWxKp0GHNJqTykf9t9\nyJD3X6ELWwegmQsG/s2CgRJHONycqM1U/nS0iJZwXE+ww3LUeAZcZzpHGD0E\nScWU\r\n=HsO4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGRvJAx4m4ZYxrTcY5kKgEYZs8dJICBfGIophGixTka8AiEA81gKU7MO4NrDr1ZnqSkcshiXQUmChgAHTonM1B74Aaw="}]},"maintainers":[{"email":"james@faceyspacey.com","name":"faceyspacey"},{"email":"zackary.l.jackson@gmail.com","name":"zackljackson"}],"_npmUser":{"name":"zackljackson","email":"zackary.l.jackson@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/extract-css-chunks-webpack-plugin_4.7.1_1574885832083_0.5595471686484552"},"_hasShrinkwrap":false},"4.7.2":{"name":"extract-css-chunks-webpack-plugin","version":"4.7.2","description":"Extract CSS from chunks into stylesheets + HMR. Supports Webpack 4 + SSR","license":"MIT","author":{"name":"James Gillmore","email":"james@faceyspacey.com"},"contributors":[{"name":"Zack Jackson","email":"zack@ScriptedAlchemy.com","url":"https://github.com/ScriptedAlchemy"}],"homepage":"http://github.com/faceyspacey/extract-css-chunks-webpack-plugin","repository":{"type":"git","url":"git+https://github.com/faceyspacey/extract-css-chunks-webpack-plugin.git"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"keywords":["css","chunks","code splitting","mini-css","hot","hmr","universal","webpack","webpack 4","css-hot-loader","extract-css-chunks-webpack-plugin"],"main":"dist/cjs.js","engines":{"node":">= 6.9.0"},"scripts":{"start":"npm run build -- -w","prebuild":"npm run clean","build":"cross-env NODE_ENV=production babel src -d dist --ignore \"src/**/*.test.js\" --copy-files","postbuild":"es-check es5 dist/hmr/hotModuleReplacement.js","clean":"del-cli dist","commitlint":"commitlint --from=master","lint:prettier":"prettier \"{**/*,*}.{js,json,md,yml,css}\" --list-different","lint:js":"eslint --cache src test","lint":"npm-run-all -l -p \"lint:js\" \"lint:prettier\"","prepare":"npm run build","release":"standard-version","security":"npm audit","test:only":"cross-env NODE_ENV=test jest --updateSnapshot","test:watch":"cross-env NODE_ENV=test jest --watch","test:coverage":"cross-env NODE_ENV=test jest --collectCoverageFrom=\"src/**/*.js\" --coverage","test:manual":"npm run build && webpack-dev-server test/manual/src/index.js --open --config test/manual/webpack.config.js","pretest":"npm run lint","test":"cross-env NODE_ENV=test npm run test:coverage","defaults":"webpack-defaults","semantic-release":"npx semantic-release","travis":"npm run ci:coverage"},"peerDependencies":{"webpack":"^4.4.0 || ^5.0.0"},"dependencies":{"loader-utils":"^1.1.0","normalize-url":"1.9.1","schema-utils":"^1.0.0","webpack-external-import":"^1.1.0-beta.3","webpack-sources":"^1.1.0"},"devDependencies":{"@babel/cli":"^7.7.5","@babel/core":"^7.7.5","@babel/preset-env":"^7.7.6","@commitlint/cli":"^8.1.0","@commitlint/config-conventional":"^8.1.0","@webpack-contrib/defaults":"^5.0.2","@webpack-contrib/eslint-config-webpack":"^3.0.0","babel-eslint":"^10.0.2","babel-jest":"^24.8.0","commitlint-azure-pipelines-cli":"^1.0.2","cross-env":"^5.2.0","css-loader":"^3.3.2","del":"^4.1.1","del-cli":"^1.1.0","es-check":"^5.0.0","eslint":"^6.7.2","eslint-config-prettier":"^6.0.0","eslint-plugin-import":"^2.19.1","eslint-plugin-prettier":"^3.1.2","file-loader":"^4.0.0","husky":"^3.0.0","jest":"^24.8.0","jest-junit":"^10.0.0","lint-staged":"^9.5.0","memfs":"^3.0.2","npm-run-all":"^4.1.5","prerender-loader":"^1.3.0","prettier":"^1.19.1","standard-version":"^7.0.1","webpack":"^4.41.4","webpack-cli":"^3.3.6","webpack-dev-server":"^3.7.2"},"gitHead":"9daf720d11e671353d42d31fd05908ecae22af08","bugs":{"url":"https://github.com/faceyspacey/extract-css-chunks-webpack-plugin/issues"},"_id":"extract-css-chunks-webpack-plugin@4.7.2","_nodeVersion":"13.6.0","_npmVersion":"6.13.4","dist":{"integrity":"sha512-jVk7trbD2TwgwP+1WmzI78CAXcDRrHEsVtrvzMlvBaSz4NuCXS/0yhiisbdqKXYrdzETfXLJ0ZWl3nBBhigDyQ==","shasum":"e49018141136df169d68ef7e6f5d17f726484ffa","tarball":"https://registry.npmjs.org/extract-css-chunks-webpack-plugin/-/extract-css-chunks-webpack-plugin-4.7.2.tgz","fileCount":11,"unpackedSize":60271,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIUIICRA9TVsSAnZWagAACFYP/RI60qem29mC2m3u+cqv\nRPwiQH4IoKM1X4QqPYF3jetFivCS6QjIJIkIr0EZ1M9Ygr8ApU/T0iYQi6zo\nytJqaXRBJNepy5YwPhNub3njaI5C288IMr3kn7J3lsvYQ28/6E5kU7R+L3UW\nWKKTnHacSjYNe4Jj0+m69EzG6B53VwYlmlbS28u8qE0dfzhmEKr1qgUCxjs/\nXhWwMMjjlnVFU2FH/BP0QXxdSFDTEQywtEihexBt3/c7yKiziiUkFKTX9p0F\nPgdBZE65cWgAFF8jH7pmMgjybuJTi6LTUj+YVa+FrBJbAAZhy2E9iiWbAD2x\nrJcVvRGkmxa4mwnRetbrZHd9rXoDN9LyWV7Ia4dso+4PlHPcySYuSbeMLQnJ\nn0EerxdFDaulPqN3Xq3mUeOR3rmJWohqJtyQErFKZ/0Gjgy73jsN2LqQIz9k\niXBLJFnX6ZxMXLK5Q8nnPVbwT4fcEbBv7PY2mV749wTHLRiaH3IIQ8wob1h8\nF/7dBR6o6lKaKizACtRgWqXB3OcFK3WiLAbCRzDW3InA0BOGLULGvyFPMeQT\nCPL5fesZXLaA2G/dhNYFnZUIxQ6cFIZO0yd7JdestbMr4CwwgtMn2ow3mY3K\n7558Ub+wGIiaEJGeGy43ciUrCLUhU+vJG1aBTFDCInbUkFC8hWJuuXdFB9zA\njhNt\r\n=exAD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD/45NWt2KnkiqbfbRQznp0Lei4MZJxpcIvNyZtLhIb9wIgEcNvX8rsOrfLkBiXObpEasTHLiY6ZWsIJ6WfEruhTqQ="}]},"maintainers":[{"email":"james@faceyspacey.com","name":"faceyspacey"},{"email":"zackary.l.jackson@gmail.com","name":"zackljackson"}],"_npmUser":{"name":"zackljackson","email":"zackary.l.jackson@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/extract-css-chunks-webpack-plugin_4.7.2_1579237896394_0.525875404179361"},"_hasShrinkwrap":false},"4.7.3":{"name":"extract-css-chunks-webpack-plugin","version":"4.7.3","description":"Extract CSS from chunks into stylesheets + HMR. Supports Webpack 4 + SSR","license":"MIT","author":{"name":"James Gillmore","email":"james@faceyspacey.com"},"contributors":[{"name":"Zack Jackson","email":"zack@ScriptedAlchemy.com","url":"https://github.com/ScriptedAlchemy"}],"homepage":"http://github.com/faceyspacey/extract-css-chunks-webpack-plugin","repository":{"type":"git","url":"git+https://github.com/faceyspacey/extract-css-chunks-webpack-plugin.git"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"keywords":["css","chunks","code splitting","mini-css","hot","hmr","universal","webpack","webpack 4","css-hot-loader","extract-css-chunks-webpack-plugin"],"main":"dist/cjs.js","engines":{"node":">= 6.9.0"},"scripts":{"start":"npm run build -- -w","prebuild":"npm run clean","build":"cross-env NODE_ENV=production babel src -d dist --ignore \"src/**/*.test.js\" --copy-files","postbuild":"es-check es5 dist/hmr/hotModuleReplacement.js","clean":"del-cli dist","commitlint":"commitlint --from=master","lint:prettier":"prettier \"{**/*,*}.{js,json,md,yml,css}\" --list-different","lint:js":"eslint --cache src test","lint":"npm-run-all -l -p \"lint:js\" \"lint:prettier\"","prepare":"npm run build","release":"standard-version","security":"npm audit","test:only":"cross-env NODE_ENV=test jest --updateSnapshot","test:watch":"cross-env NODE_ENV=test jest --watch","test:coverage":"cross-env NODE_ENV=test jest --collectCoverageFrom=\"src/**/*.js\" --coverage","test:manual":"npm run build && webpack-dev-server test/manual/src/index.js --open --config test/manual/webpack.config.js","pretest":"npm run lint","test":"cross-env NODE_ENV=test npm run test:coverage","defaults":"webpack-defaults","semantic-release":"npx semantic-release","travis":"npm run ci:coverage"},"peerDependencies":{"webpack":"^4.4.0 || ^5.0.0"},"dependencies":{"loader-utils":"^1.1.0","normalize-url":"1.9.1","schema-utils":"^1.0.0","webpack-external-import":"^1.1.0-beta.3","webpack-sources":"^1.1.0"},"devDependencies":{"@babel/cli":"^7.7.5","@babel/core":"^7.7.5","@babel/preset-env":"^7.7.6","@commitlint/cli":"^8.1.0","@commitlint/config-conventional":"^8.1.0","@webpack-contrib/defaults":"^5.0.2","@webpack-contrib/eslint-config-webpack":"^3.0.0","babel-eslint":"^10.0.2","babel-jest":"^24.8.0","commitlint-azure-pipelines-cli":"^1.0.2","cross-env":"^5.2.0","css-loader":"^3.3.2","del":"^4.1.1","del-cli":"^1.1.0","es-check":"^5.0.0","eslint":"^6.7.2","eslint-config-prettier":"^6.0.0","eslint-plugin-import":"^2.19.1","eslint-plugin-prettier":"^3.1.2","file-loader":"^4.0.0","husky":"^3.0.0","jest":"^24.8.0","jest-junit":"^10.0.0","lint-staged":"^9.5.0","memfs":"^3.0.2","npm-run-all":"^4.1.5","prerender-loader":"^1.3.0","prettier":"^1.19.1","standard-version":"^7.0.1","webpack":"^4.41.4","webpack-cli":"^3.3.6","webpack-dev-server":"^3.7.2"},"gitHead":"a0f700920b543208a7b7aa598006fcfb077967a4","bugs":{"url":"https://github.com/faceyspacey/extract-css-chunks-webpack-plugin/issues"},"_id":"extract-css-chunks-webpack-plugin@4.7.3","_nodeVersion":"13.6.0","_npmVersion":"6.13.4","dist":{"integrity":"sha512-jJyBl5YhaDgbM2ZXgQEBVWsDmmXuG/7keGb3rPCFe8xvEwhSZe6/J3fLvzfnJ3TJhZ7SZ/kNGhWJ9RbdqRl8FQ==","shasum":"5e2c9a7f65930b176e3b7646f54dbabd310354f3","tarball":"https://registry.npmjs.org/extract-css-chunks-webpack-plugin/-/extract-css-chunks-webpack-plugin-4.7.3.tgz","fileCount":11,"unpackedSize":61875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIUN/CRA9TVsSAnZWagAAZvYP/AtPfrsAfgi7QX9614kE\nRDYG+Kie5fQpuV+oPLk2/1EQcHco9EyBtsjr2DdZd/ILRlk9Tt6T455Ggo3M\noGKLv5HssyHOndoKL1G1ZFaFF1Ofcrrz6jTdXoUILoDgr0pDMSPSw7lv3zFv\nQ7AxGt1T8tbjtA+aLPjF2cFyFdzjO3ktoiAOsDhNRYFnXwdb5aUUaLIsDHCP\noisRnfXOvfPcf4RREcASYnmRY6kHHCNlPTlYFH86St8ocpinWt1sL41LMOIU\nW55cyTn/9+IC5ONn7PnxoJzlkZ3IwB/maHowIMuhhqR8EtIoD+6O9ybM8Ruh\nfo49eo0Gcdjx2qkI1PnD3CmYMZHBKIz7Feclp1C7RN7x2XTxUN805VbctG4b\nFeanZ2gdW4OmGlw0mITDEPqbYyUXj5kSD5g+gIfNsIsUOn/uwBI2uR6QSocP\n0+7j/Ha+c3lGGlyN5sRIDQaWZo76EWlLtuuZVklb9rNCNrNSzJ1b4IDUVZqJ\nTII1XVoDlf47ijFuF7aFRNEHXz3n/Zf+2mbPteJ8bH9hXEjkbNZl3QbikMk+\nyxRTfFOu/t6jXLUlwm4PEdmgHfc5x7lqO81i7XQPOmGhSlhnh4KNAPWqPBDB\n2RaAyymF9Ik6GcIVaaOspGLZnv5iBpRhIoxGy431HEMzpi6rIfGeftcoAiY5\n3HV/\r\n=/i0k\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDpZBQWiXOmKiufwWlrrrK31yL2BnxXRybRwYWOZ4WGOAIgOSrjze/QNuN4X75BNKkceqfhaLHQpC8DDcgXMU1FfAM="}]},"maintainers":[{"email":"james@faceyspacey.com","name":"faceyspacey"},{"email":"zackary.l.jackson@gmail.com","name":"zackljackson"}],"_npmUser":{"name":"zackljackson","email":"zackary.l.jackson@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/extract-css-chunks-webpack-plugin_4.7.3_1579238271306_0.4474049115688379"},"_hasShrinkwrap":false},"4.7.2-mit":{"name":"extract-css-chunks-webpack-plugin","version":"4.7.2-mit","description":"Extract CSS from chunks into stylesheets + HMR. Supports Webpack 4 + SSR","license":"MIT","author":{"name":"James Gillmore","email":"james@faceyspacey.com"},"contributors":[{"name":"Zack Jackson","email":"zack@ScriptedAlchemy.com","url":"https://github.com/ScriptedAlchemy"}],"homepage":"http://github.com/faceyspacey/extract-css-chunks-webpack-plugin","repository":{"type":"git","url":"git+https://github.com/faceyspacey/extract-css-chunks-webpack-plugin.git"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"keywords":["css","chunks","code splitting","mini-css","hot","hmr","universal","webpack","webpack 4","css-hot-loader","extract-css-chunks-webpack-plugin"],"main":"dist/cjs.js","engines":{"node":">= 6.9.0"},"scripts":{"start":"npm run build -- -w","prebuild":"npm run clean","build":"cross-env NODE_ENV=production babel src -d dist --ignore \"src/**/*.test.js\" --copy-files","postbuild":"es-check es5 dist/hmr/hotModuleReplacement.js","clean":"del-cli dist","commitlint":"commitlint --from=master","lint:prettier":"prettier \"{**/*,*}.{js,json,md,yml,css}\" --list-different","lint:js":"eslint --cache src test","lint":"npm-run-all -l -p \"lint:js\" \"lint:prettier\"","prepare":"npm run build","release":"standard-version","security":"npm audit","test:only":"cross-env NODE_ENV=test jest --updateSnapshot","test:watch":"cross-env NODE_ENV=test jest --watch","test:coverage":"cross-env NODE_ENV=test jest --collectCoverageFrom=\"src/**/*.js\" --coverage","test:manual":"npm run build && webpack-dev-server test/manual/src/index.js --open --config test/manual/webpack.config.js","pretest":"npm run lint","test":"cross-env NODE_ENV=test npm run test:coverage","defaults":"webpack-defaults","semantic-release":"npx semantic-release","travis":"npm run ci:coverage"},"peerDependencies":{"webpack":"^4.4.0 || ^5.0.0"},"dependencies":{"loader-utils":"^1.1.0","normalize-url":"1.9.1","schema-utils":"^1.0.0","webpack-sources":"^1.1.0"},"devDependencies":{"@babel/cli":"^7.7.5","@babel/core":"^7.7.5","@babel/preset-env":"^7.7.6","@commitlint/cli":"^8.1.0","@commitlint/config-conventional":"^8.1.0","@webpack-contrib/defaults":"^5.0.2","@webpack-contrib/eslint-config-webpack":"^3.0.0","babel-eslint":"^10.0.2","babel-jest":"^24.8.0","commitlint-azure-pipelines-cli":"^1.0.2","cross-env":"^5.2.0","css-loader":"^3.3.2","del":"^4.1.1","del-cli":"^1.1.0","es-check":"^5.0.0","eslint":"^6.7.2","eslint-config-prettier":"^6.0.0","eslint-plugin-import":"^2.19.1","eslint-plugin-prettier":"^3.1.2","file-loader":"^4.0.0","husky":"^3.0.0","jest":"^24.8.0","jest-junit":"^10.0.0","lint-staged":"^9.5.0","memfs":"^3.0.2","npm-run-all":"^4.1.5","prerender-loader":"^1.3.0","prettier":"^1.19.1","standard-version":"^7.0.1","webpack":"^4.41.4","webpack-cli":"^3.3.6","webpack-dev-server":"^3.7.2"},"readme":"If you like our work, check out our Redux-based router <a href=\"https://github.com/faceyspacey/redux-first-router\" target=\"_blank\">redux-first-router</a> or its sucessor which, <a href=\"https://github.com/respond-framework/rudy\" target=\"_blank\">Rudy<a>\n\n# extract-css-chunks-webpack-plugin\n\n<p align=\"center\">\n  <a href=\"https://www.npmjs.com/package/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://img.shields.io/npm/v/extract-css-chunks-webpack-plugin.svg\" alt=\"Version\" />\n  </a>\n\n  <a href=\"https://travis-ci.org/faceyspacey/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://travis-ci.org/faceyspacey/extract-css-chunks-webpack-plugin.svg?branch=master\" alt=\"Build Status\" />\n  </a>\n\n  <a href=\"https://www.npmjs.com/package/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://img.shields.io/npm/dt/extract-css-chunks-webpack-plugin.svg\" alt=\"Downloads\" />\n  </a>\n\n  <a href=\"https://www.npmjs.com/package/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://img.shields.io/npm/dm/extract-css-chunks-webpack-plugin.svg\" alt=\"License\" />\n  </a>\n  \n  <a href=\"https://www.npmjs.com/package/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://img.shields.io/npm/l/extract-css-chunks-webpack-plugin.svg\" alt=\"License\" />\n  </a>\n</p>\n\n<h2 align=\"center\">🍾🍾🍾It's our absolute pleasure to announce Webpack 4 Support 🚀🚀🚀</h2>\n\n> **HEADLINES (May 2018): Now Independently supports Webpack 4:**\n> Yep that's right. The universal family is now fully Webpack 4. Thank you to all our users for your loyalty and patience! If you love Universal, then you are gonna fall head over heels when we bring out the main course!\n\nSo... why did we rebuild `extract-css-chunks`? What does it offer?\n\nIt's got all the goodness of `mini-css-extract-plugin` but with 2 gleaming, sought after benefits.\n\nCompared to the existing loaders, we are offering a single solution as opposed to needing to depend on multiple loaders to cater for different features:\n\n## Perks\n\n- **HMR:** It also has first-class support for **Hot Module Replacement** across ALL those css files/chunks!!!\n- cacheable stylesheets\n- smallest total bytes sent compared to \"render-path\" css-in-js solutions that include your CSS definitions in JS\n- Faster than the V2!\n- Async loading\n- No duplicate compilation (performance)\n- Easier to use\n- Specific to CSS\n- SSR Friendly development build, focused on frontend DX\n- Works seamlessly with the Universal family\n- Works fantastically as a standalone style loader (You can use it for any webpack project! with no extra dependencies!)\n- Async styles do not render block webkit browsers, if you use the `insert` option\n\nAdditionally, if you are already a user of the universal family -- we will be waving goodbye to the mandatory `window.__CSS_CHUNKS__`.\n\nThe functionality is still available to you via chunk flushing, and it can come in super handy when needing to easily resolve style assets as urls that might need to be passed to a third party.\n\n**webpack.config.js**\n\n```js\nconst ExtractCssChunks = require('extract-css-chunks-webpack-plugin');\n\nmodule.exports = {\n  plugins: [new ExtractCssChunks()],\n  module: {\n    rules: [\n      {\n        test: /\\.css$/i,\n        test: /\\.css$/i,\n        use: [ExtractCssChunks.loader, 'css-loader'],\n      },\n    ],\n  },\n};\n```\n\n## Options\n\n### `publicPath`\n\nType: `String|Function`\nDefault: the `publicPath` in `webpackOptions.output`\n\nSpecifies a custom public path for the target file(s).\n\n#### `String`\n\n**webpack.config.js**\n\n```js\nconst ExtractCssChunks = require('extract-css-chunks-webpack-plugin');\n\nmodule.exports = {\n  plugins: [\n    new ExtractCssChunks({\n      // Options similar to the same options in webpackOptions.output\n      // both options are optional\n      filename: '[name].css',\n      chunkFilename: '[id].css',\n    }),\n  ],\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [\n          {\n            loader: ExtractCssChunks.loader,\n            options: {\n              publicPath: '/public/path/to/',\n            },\n          },\n          'css-loader',\n        ],\n      },\n    ],\n  },\n};\n```\n\n#### `Function`\n\n**webpack.config.js**\n\n```js\nconst ExtractCssChunks = require('extract-css-chunks-webpack-plugin');\n\nmodule.exports = {\n  plugins: [\n    new ExtractCssChunks({\n      // Options similar to the same options in webpackOptions.output\n      // both options are optional\n      filename: '[name].css',\n      chunkFilename: '[id].css',\n    }),\n  ],\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [\n          {\n            loader: ExtractCssChunks.loader,\n            options: {\n              publicPath: (resourcePath, context) => {\n                return path.relative(path.dirname(resourcePath), context) + '/';\n              },\n            },\n          },\n          'css-loader',\n        ],\n      },\n    ],\n  },\n};\n```\n\n### `esModule`\n\nType: `Boolean`\nDefault: `false`\n\nBy default, `extract-css-chunks-webpack-plugin` generates JS modules that use the CommonJS modules syntax.\nThere are some cases in which using ES modules is beneficial, like in the case of [module concatenation](https://webpack.js.org/plugins/module-concatenation-plugin/) and [tree shaking](https://webpack.js.org/guides/tree-shaking/).\n\nYou can enable a ES module syntax using:\n\n**webpack.config.js**\n\n```js\nconst ExtractCssChunks = require('extract-css-chunks-webpack-plugin');\n\nmodule.exports = {\n  plugins: [new ExtractCssChunks()],\n  module: {\n    rules: [\n      {\n        test: /\\.css$/i,\n        use: [\n          {\n            loader: ExtractCssChunks.loader,\n            options: {\n              esModule: true,\n            },\n          },\n          'css-loader',\n        ],\n      },\n    ],\n  },\n};\n```\n\n## Examples\n\n### Minimal example\n\n**webpack.config.js**\n\n```js\nconst ExtractCssChunks = require('extract-css-chunks-webpack-plugin');\n\nmodule.exports = {\n  plugins: [\n    new ExtractCssChunks({\n      // Options similar to the same options in webpackOptions.output\n      // all options are optional\n      filename: '[name].css',\n      chunkFilename: '[id].css',\n      ignoreOrder: false, // Enable to remove warnings about conflicting order\n    }),\n  ],\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [\n          {\n            loader: ExtractCssChunks.loader,\n            options: {\n              // you can specify a publicPath here\n              // by default it uses publicPath in webpackOptions.output\n              publicPath: '../',\n              hmr: process.env.NODE_ENV === 'development',\n            },\n          },\n          'css-loader',\n        ],\n      },\n    ],\n  },\n};\n```\n\n### The `publicPath` option as function\n\n**webpack.config.js**\n\n```js\nconst ExtractCssChunks = require('extract-css-chunks-webpack-plugin');\n\nmodule.exports = {\n  plugins: [\n    new ExtractCssChunks({\n      // Options similar to the same options in webpackOptions.output\n      // both options are optional\n      filename: '[name].css',\n      chunkFilename: '[id].css',\n    }),\n  ],\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [\n          {\n            loader: ExtractCssChunks.loader,\n            options: {\n              publicPath: (resourcePath, context) => {\n                // publicPath is the relative path of the resource to the context\n                // e.g. for ./css/admin/main.css the publicPath will be ../../\n                // while for ./css/main.css the publicPath will be ../\n                return path.relative(path.dirname(resourcePath), context) + '/';\n              },\n            },\n          },\n          'css-loader',\n        ],\n      },\n    ],\n  },\n};\n```\n\n### Advanced configuration example\n\nThis plugin should be used only on `production` builds without `style-loader` in the loaders chain, especially if you want to have HMR in `development`.\n\nHere is an example to have both HMR in `development` and your styles extracted in a file for `production` builds.\n\n(Loaders options left out for clarity, adapt accordingly to your needs.)\n\n**webpack.config.js**\n\n```js\nconst ExtractCssChunks = require('extract-css-chunks-webpack-plugin');\nconst devMode = process.env.NODE_ENV !== 'production';\n\nmodule.exports = {\n  plugins: [\n    new ExtractCssChunks({\n      // Options similar to the same options in webpackOptions.output\n      // both options are optional\n      filename: devMode ? '[name].css' : '[name].[hash].css',\n      chunkFilename: devMode ? '[id].css' : '[id].[hash].css',\n    }),\n  ],\n  module: {\n    rules: [\n      {\n        test: /\\.(sa|sc|c)ss$/,\n        use: [\n          {\n            loader: ExtractCssChunks.loader,\n            options: {\n              hmr: process.env.NODE_ENV === 'development',\n            },\n          },\n          'css-loader',\n          'postcss-loader',\n          'sass-loader',\n        ],\n      },\n    ],\n  },\n};\n```\n\n### Hot Module Reloading (HMR)\n\nThe `extract-css-chunks-webpack-plugin` supports hot reloading of actual css files in development.\nSome options are provided to enable HMR of both standard stylesheets and locally scoped CSS or CSS modules.\nBelow is an example configuration of `extract-css-chunks` for HMR use with CSS modules.\n\nWhile we attempt to hmr css-modules. It is not easy to perform when code-splitting with custom chunk names.\n`reloadAll` is an option that should only be enabled if HMR isn't working correctly.\nThe core challenge with css-modules is that when code-split, the chunk ids can and do end up different compared to the filename.\n\n**webpack.config.js**\n\n```js\nconst ExtractCssChunks = require('extract-css-chunks-webpack-plugin');\n\nmodule.exports = {\n  plugins: [\n    new ExtractCssChunks({\n      // Options similar to the same options in webpackOptions.output\n      // both options are optional\n      filename: '[name].css',\n      chunkFilename: '[id].css',\n    }),\n  ],\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [\n          {\n            loader: ExtractCssChunks.loader,\n            options: {\n              // only enable hot in development\n              hmr: process.env.NODE_ENV === 'development',\n              // if hmr does not work, this is a forceful method.\n              reloadAll: true,\n            },\n          },\n          'css-loader',\n        ],\n      },\n    ],\n  },\n};\n```\n\n### Minimizing For Production\n\nTo minify the output, use a plugin like [optimize-css-assets-webpack-plugin](https://github.com/NMFR/optimize-css-assets-webpack-plugin).\nSetting `optimization.minimizer` overrides the defaults provided by webpack, so make sure to also specify a JS minimizer:\n\n**webpack.config.js**\n\n```js\nconst TerserJSPlugin = require('terser-webpack-plugin');\nconst ExtractCssChunks = require('extract-css-chunks-webpack-plugin');\nconst OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');\n\nmodule.exports = {\n  optimization: {\n    minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})],\n  },\n  plugins: [\n    new ExtractCssChunks({\n      filename: '[name].css',\n      chunkFilename: '[id].css',\n    }),\n  ],\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [ExtractCssChunks.loader, 'css-loader'],\n      },\n    ],\n  },\n};\n```\n\n### Using preloaded or inlined CSS\n\nThe runtime code detects already added CSS via `<link>` or `<style>` tag.\nThis can be useful when injecting CSS on server-side for Server-Side-Rendering.\nThe `href` of the `<link>` tag has to match the URL that will be used for loading the CSS chunk.\nThe `data-href` attribute can be used for `<link>` and `<style>` too.\nWhen inlining CSS `data-href` must be used.\n\n### Extracting all CSS in a single file\n\nSimilar to what [extract-text-webpack-plugin](https://github.com/webpack-contrib/extract-text-webpack-plugin) does, the CSS can be extracted in one CSS file using `optimization.splitChunks.cacheGroups`.\n\n**webpack.config.js**\n\n```js\nconst ExtractCssChunks = require('extract-css-chunks-webpack-plugin');\n\nmodule.exports = {\n  optimization: {\n    splitChunks: {\n      cacheGroups: {\n        styles: {\n          name: 'styles',\n          test: /\\.css$/,\n          chunks: 'all',\n          enforce: true,\n        },\n      },\n    },\n  },\n  plugins: [\n    new ExtractCssChunks({\n      filename: '[name].css',\n    }),\n  ],\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [ExtractCssChunks.loader, 'css-loader'],\n      },\n    ],\n  },\n};\n```\n\n### Extracting CSS based on entry\n\nYou may also extract the CSS based on the webpack entry name.\nThis is especially useful if you import routes dynamically but want to keep your CSS bundled according to entry.\nThis also prevents the CSS duplication issue one had with the ExtractTextPlugin.\n\n```js\nconst path = require('path');\nconst ExtractCssChunks = require('extract-css-chunks-webpack-plugin');\n\nfunction recursiveIssuer(m) {\n  if (m.issuer) {\n    return recursiveIssuer(m.issuer);\n  } else if (m.name) {\n    return m.name;\n  } else {\n    return false;\n  }\n}\n\nmodule.exports = {\n  entry: {\n    foo: path.resolve(__dirname, 'src/foo'),\n    bar: path.resolve(__dirname, 'src/bar'),\n  },\n  optimization: {\n    splitChunks: {\n      cacheGroups: {\n        fooStyles: {\n          name: 'foo',\n          test: (m, c, entry = 'foo') =>\n            m.constructor.name === 'CssModule' && recursiveIssuer(m) === entry,\n          chunks: 'all',\n          enforce: true,\n        },\n        barStyles: {\n          name: 'bar',\n          test: (m, c, entry = 'bar') =>\n            m.constructor.name === 'CssModule' && recursiveIssuer(m) === entry,\n          chunks: 'all',\n          enforce: true,\n        },\n      },\n    },\n  },\n  plugins: [\n    new ExtractCssChunks({\n      filename: '[name].css',\n    }),\n  ],\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [ExtractCssChunks.loader, 'css-loader'],\n      },\n    ],\n  },\n};\n```\n\n### Module Filename Option\n\nWith the `moduleFilename` option you can use chunk data to customize the filename. This is particularly useful when dealing with multiple entry points and wanting to get more control out of the filename for a given entry point/chunk. In the example below, we'll use `moduleFilename` to output the generated css into a different directory.\n\n**webpack.config.js**\n\n```js\nconst ExtractCssChunks = require('extract-css-chunks-webpack-plugin');\n\nmodule.exports = {\n  plugins: [\n    new ExtractCssChunks({\n      moduleFilename: ({ name }) => `${name.replace('/js/', '/css/')}.css`,\n    }),\n  ],\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [ExtractCssChunks.loader, 'css-loader'],\n      },\n    ],\n  },\n};\n```\n\n### Long Term Caching\n\nFor long term caching use `filename: \"[contenthash].css\"`. Optionally add `[name]`.\n\n**webpack.config.js**\n\n```js\nconst ExtractCssChunks = require('extract-css-chunks-webpack-plugin');\n\nmodule.exports = {\n  plugins: [\n    new ExtractCssChunks({\n      filename: '[name].[contenthash].css',\n      chunkFilename: '[id].[contenthash].css',\n    }),\n  ],\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [ExtractCssChunks.loader, 'css-loader'],\n      },\n    ],\n  },\n};\n```\n\n### Remove Order Warnings\n\nFor projects where css ordering has been mitigated through consistent use of scoping or naming conventions, the css order warnings can be disabled by setting the ignoreOrder flag to true for the plugin.\n\n**webpack.config.js**\n\n```js\nconst ExtractCssChunks = require('extract-css-chunks-webpack-plugin');\n\nmodule.exports = {\n  plugins: [\n    new ExtractCssChunks({\n      ignoreOrder: true,\n    }),\n  ],\n  module: {\n    rules: [\n      {\n        test: /\\.css$/i,\n        use: [ExtractCssChunks.loader, 'css-loader'],\n      },\n    ],\n  },\n};\n```\n\n### insert\n\nType: `String|Function`\nDefault: `head`\n\nBy default, the `extract-css-chunks-plugin` appends styles (`<link>` elements) to `document.head` of the current `window`.\n\nHowever in some circumstances it might be necessary to have finer control over the append target or even delay `link` elements instertion. For example this is the case when you asynchronously load styles for an application that runs inside of an iframe. In such cases `insert` can be configured to be a function or a custom selector.\n\nIf you target an [iframe](https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement) make sure that the parent document has sufficient access rights to reach into the frame document and append elements to it.\n\n#### `insert` as a string\n\nAllows to configure a [CSS selector](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector) that will be used to find the element where to append the styles (`link` elements).\n\n```js\nnew ExtractCssChunksPlugin({\n  insert: '#my-container',\n});\n```\n\nA new `<link>` element will be appended to the `#my-container` element.\n\n#### `insert` as a function\n\nAllows to override default behavior and insert styles at any position.\n\n> ⚠ Do not forget that this code will run in the browser alongside your application. Since not all browsers support latest ECMA features like `let`, `const`, `arrow function expression` and etc we recommend you to use only ECMA 5 features and syntax.\n\n> ⚠ The `insert` function is serialized to string and passed to the plugin. This means that it won't have access to the scope of the webpack configuration module.\n\n```js\nnew ExtractCssChunksPlugin({\n  insert: function insert(linkTag) {\n    const reference = document.querySelector('#some-element');\n    if (reference) {\n      reference.parentNode.insertBefore(linkTag, reference);\n    }\n  },\n});\n```\n\nA new `<link>` element will be inserted before the element with id `some-element`.\n\n### Media Query Plugin\n\nIf you'd like to extract the media queries from the extracted CSS (so mobile users don't need to load desktop or tablet specific CSS anymore) you should use one of the following plugins:\n\n- [Media Query Plugin](https://github.com/SassNinja/media-query-plugin)\n- [Media Query Splitting Plugin](https://github.com/mike-diamond/media-query-splitting-plugin)\n","readmeFilename":"README.md","gitHead":"a0f700920b543208a7b7aa598006fcfb077967a4","bugs":{"url":"https://github.com/faceyspacey/extract-css-chunks-webpack-plugin/issues"},"_id":"extract-css-chunks-webpack-plugin@4.7.2-mit","_npmVersion":"6.4.1","_nodeVersion":"10.15.3","_npmUser":{"name":"zackljackson","email":"zackary.l.jackson@gmail.com"},"dist":{"integrity":"sha512-4R89/Q+pwv0M6DEpp0oCgGQVIbty/jspMuWIU7Q26MAq7glZON50wtob33GZg9h3FbFP2cM7EusY3d5iBp89RA==","shasum":"14bc6d0bd05b70f8bb0812ce37ea1a815f3daee9","tarball":"https://registry.npmjs.org/extract-css-chunks-webpack-plugin/-/extract-css-chunks-webpack-plugin-4.7.2-mit.tgz","fileCount":11,"unpackedSize":61831,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIUOdCRA9TVsSAnZWagAAV4MP/iDx9sTirldPJiTYdPyk\nAX86x2/kqSJmzARvrDqFpLSh8uK+/dy4p8BiP/rUVMx1QvpN7A0UTZfaTThu\nwv5vhYM+cWocYH9Kwn3cGk3hZc3VdVSc1E3fRdOnfO1eLpmAqyJoCrewzn85\nAS+yN86zMgx699vKpfiSb9rlUHnjJGe0lZhan9bIgk60ULYsxkQ9cUSFxnlm\n+TRcvyTMUQTrATBplNP89p5q5EB4B2NGuydqskdWYEk1I5eSP9NgBZr3REub\nPL5Zuk6aBltgKF1F8rC6vTQctpiRPQZw/UT3mgbEXHyhoTCvwl5uP6ITOGyg\nwzmGLVoDMC25o6CgHFI8TmXSvpqFHVm9fJXOI9I1UQYdRB6Nq8b5+gzoq+gF\n7fQ0wpS7Iqh4h9kqJ/KH77rnzQ2KUBxL6L+ymQeqNyEqmyO4JkDzv7PeQJkN\n3IGgQaPyvsBoWMX4luFnxQm3JFbf+Gn0nKFP4B4FTcrBqLwydbzYpB7h6Qjk\nmji8cV3b8IaxglWlPAlbBtN8HbhLHQ932lNn9jnMJ9BFu8dWchRIpP0KyqR6\ny33UW829H7ZnehT0h5TrLDWiRjcFa8DyDKjWJIvI10BL3yzP5WCG4IUHvgv5\nLzOvL+Na+nDwQzx+fE5j5oW+77qJ4jYo5k72EWYflw79OaSM0weE7grj8vvy\nfo0X\r\n=fJYq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGdGXQ7Ulp3mZLYg0rJRRyozeGZNa0zXbA2vPPaYy6bVAiEA5CxkuSA3BgcBQvRwyHYvHDTzn2AQ4z9deY9RGwuEzHs="}]},"maintainers":[{"email":"james@faceyspacey.com","name":"faceyspacey"},{"email":"zackary.l.jackson@gmail.com","name":"zackljackson"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/extract-css-chunks-webpack-plugin_4.7.2-mit_1579238300902_0.43349522748868097"},"_hasShrinkwrap":false},"4.7.4":{"name":"extract-css-chunks-webpack-plugin","version":"4.7.4","description":"Extract CSS from chunks into stylesheets + HMR. Supports Webpack 4 + SSR","license":"MIT","author":{"name":"James Gillmore","email":"james@faceyspacey.com"},"contributors":[{"name":"Zack Jackson","email":"zack@ScriptedAlchemy.com","url":"https://github.com/ScriptedAlchemy"}],"homepage":"http://github.com/faceyspacey/extract-css-chunks-webpack-plugin","repository":{"type":"git","url":"git+https://github.com/faceyspacey/extract-css-chunks-webpack-plugin.git"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"keywords":["css","chunks","code splitting","mini-css","hot","hmr","universal","webpack","webpack 4","css-hot-loader","extract-css-chunks-webpack-plugin"],"main":"dist/cjs.js","engines":{"node":">= 6.9.0"},"scripts":{"start":"npm run build -- -w","prebuild":"npm run clean","build":"cross-env NODE_ENV=production babel src -d dist --ignore \"src/**/*.test.js\" --copy-files","postbuild":"es-check es5 dist/hmr/hotModuleReplacement.js","clean":"del-cli dist","commitlint":"commitlint --from=master","lint:prettier":"prettier \"{**/*,*}.{js,json,md,yml,css}\" --list-different","lint:js":"eslint --cache src test","lint":"npm-run-all -l -p \"lint:js\" \"lint:prettier\"","prepare":"npm run build","release":"standard-version","security":"npm audit","test:only":"cross-env NODE_ENV=test jest --updateSnapshot","test:watch":"cross-env NODE_ENV=test jest --watch","test:coverage":"cross-env NODE_ENV=test jest --collectCoverageFrom=\"src/**/*.js\" --coverage","test:manual":"npm run build && webpack-dev-server test/manual/src/index.js --open --config test/manual/webpack.config.js","pretest":"npm run lint","test":"cross-env NODE_ENV=test npm run test:coverage","defaults":"webpack-defaults","semantic-release":"npx semantic-release","travis":"npm run ci:coverage"},"peerDependencies":{"webpack":"^4.4.0 || ^5.0.0"},"dependencies":{"loader-utils":"^1.1.0","normalize-url":"1.9.1","schema-utils":"^1.0.0","webpack-external-import":"^1.1.0-beta.3","webpack-sources":"^1.1.0"},"devDependencies":{"@babel/cli":"^7.7.5","@babel/core":"^7.7.5","@babel/preset-env":"^7.7.6","@commitlint/cli":"^8.1.0","@commitlint/config-conventional":"^8.1.0","@webpack-contrib/defaults":"^5.0.2","@webpack-contrib/eslint-config-webpack":"^3.0.0","babel-eslint":"^10.0.2","babel-jest":"^24.8.0","commitlint-azure-pipelines-cli":"^1.0.2","cross-env":"^5.2.0","css-loader":"^3.3.2","del":"^4.1.1","del-cli":"^1.1.0","es-check":"^5.0.0","eslint":"^6.7.2","eslint-config-prettier":"^6.0.0","eslint-plugin-import":"^2.19.1","eslint-plugin-prettier":"^3.1.2","file-loader":"^4.0.0","husky":"^3.0.0","jest":"^24.8.0","jest-junit":"^10.0.0","lint-staged":"^9.5.0","memfs":"^3.0.2","npm-run-all":"^4.1.5","prerender-loader":"^1.3.0","prettier":"^1.19.1","standard-version":"^7.0.1","webpack":"^4.41.4","webpack-cli":"^3.3.6","webpack-dev-server":"^3.7.2"},"gitHead":"954fd25defb100cbdf575110fb59abf0e05261ef","bugs":{"url":"https://github.com/faceyspacey/extract-css-chunks-webpack-plugin/issues"},"_id":"extract-css-chunks-webpack-plugin@4.7.4","_nodeVersion":"13.6.0","_npmVersion":"6.13.4","dist":{"integrity":"sha512-Q0iLfJnS+MT8L/KbiPxFeTLi06dBzJaAphXJg00rIlcyjSqNx5yI0/V8ODGWCcwUO1V7W2z3dpjC+8eBKBoQrA==","shasum":"db6465ca18d1fe8a89bad3dc72803127638fb477","tarball":"https://registry.npmjs.org/extract-css-chunks-webpack-plugin/-/extract-css-chunks-webpack-plugin-4.7.4.tgz","fileCount":11,"unpackedSize":61846,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIhpCCRA9TVsSAnZWagAANocP/A6xoXwX9qELU70VyY1I\nGdQorOZTGJsupsF2KMN7vbrAjKvaqrj9q7WGSeXvmz5s9I42YldsHM7QW4Zf\nLALmz0Slz9qd+qALD7KyyDSN/ozORon8DBB5OkLa71GLFgRdNU00L5n4bBGF\nOwOQ+WrnFKTEXwf1qBb6k/HZdf84Y2lMf5zhd5UWGTLijUHuXv3ChFAIuxhV\nbzZBgmDx4F8oO8YExbWM6MNB2r8swccOMeLjQnThenmpvOYEGL7xoTpX48Gv\nbpuofCZGdlp7UszlEvDnZeNdnPUDkINL+oDeoVu1VLFIPMkCARAwuPNZESVD\nYr6knXwYbFe3MhMyzmVRRNjJfCfff574cXQC1jVPxyiCe9+z3c1YLgMP2lBl\nsr8eIaYPmUSbo4PvU/wulviFm9Osux/2SE0qYHL1ClnS5N1d33efFzUofD1f\nvLYsPYCOwdhzEjNtffR0vd7+aOLZQ2uYN5K91vyv+s83C5n9hAoD3GaBJa5j\nlF7+7fezvsgewybKqm2CaLQ6vNCMAHMZw72BUkeOimLNnmUB2xLx9Zb4oxoh\nFGMzQh+WBO09hNvnYPWrHQoy+7ZrNCqQXpGJQw+UeiOAXOuah8c/2n+/w4KF\nHbydOSMDx33e0nFEZHf7FxyT1ffT5QVa4BX1RLZTxbms1u72nU1FS0+PfVc2\nCvhT\r\n=ckIx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD9ggM1U3qrL3DL8y9Eq5WdYw21G8f3veS7TN/lS2UWtAIgMCE7O2oUtGtTJ28jZDCMpYfhohJ0PjvDInQyqoXTrec="}]},"maintainers":[{"email":"james@faceyspacey.com","name":"faceyspacey"},{"email":"zackary.l.jackson@gmail.com","name":"zackljackson"}],"_npmUser":{"name":"zackljackson","email":"zackary.l.jackson@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/extract-css-chunks-webpack-plugin_4.7.4_1579293249813_0.8376940822628633"},"_hasShrinkwrap":false},"4.7.5":{"name":"extract-css-chunks-webpack-plugin","version":"4.7.5","description":"Extract CSS from chunks into stylesheets + HMR. Supports Webpack 4 + SSR","license":"MIT","author":{"name":"James Gillmore","email":"james@faceyspacey.com"},"contributors":[{"name":"Zack Jackson","email":"zack@ScriptedAlchemy.com","url":"https://github.com/ScriptedAlchemy"}],"homepage":"http://github.com/faceyspacey/extract-css-chunks-webpack-plugin","repository":{"type":"git","url":"https://github.com/faceyspacey/extract-css-chunks-webpack-plugin.git"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"keywords":["css","chunks","code splitting","mini-css","hot","hmr","universal","webpack","webpack 4","css-hot-loader","extract-css-chunks-webpack-plugin"],"main":"dist/cjs.js","engines":{"node":">= 6.9.0"},"scripts":{"commit":"git-cz","start":"npm run build -- -w","prebuild":"npm run clean","build":"cross-env NODE_ENV=production babel src -d dist --ignore \"src/**/*.test.js\" --copy-files","postbuild":"es-check es5 dist/hmr/hotModuleReplacement.js","clean":"del-cli dist","commitlint":"commitlint --from=master","lint:prettier":"prettier \"{**/*,*}.{js,json,md,yml,css}\" --list-different","lint:js":"eslint --cache src test","lint":"npm-run-all -l -p \"lint:js\" \"lint:prettier\"","prepare":"npm run build","release":"standard-version","security":"npm audit","test:only":"cross-env NODE_ENV=test jest --updateSnapshot","test:watch":"cross-env NODE_ENV=test jest --watch","test:coverage":"cross-env NODE_ENV=test jest --collectCoverageFrom=\"src/**/*.js\" --coverage","test:manual":"npm run build && webpack-dev-server test/manual/src/index.js --open --config test/manual/webpack.config.js","pretest":"npm run lint","test":"cross-env NODE_ENV=test npm run test:coverage","defaults":"webpack-defaults","semantic-release":"npx semantic-release","travis":"npm run ci:coverage"},"peerDependencies":{"webpack":"^4.4.0 || ^5.0.0"},"dependencies":{"loader-utils":"^2.0.0","normalize-url":"1.9.1","schema-utils":"^1.0.0","webpack-external-import":"^2.2.4","webpack-sources":"^1.1.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","@webpack-contrib/defaults":"6.3.0","@webpack-contrib/eslint-config-webpack":"3.0.0","babel-eslint":"10.1.0","babel-jest":"25.1.0","commitizen":"4.0.4","commitlint-azure-pipelines-cli":"1.0.3","cross-env":"7.0.2","css-loader":"3.5.2","cz-conventional-changelog":"3.1.0","del":"5.1.0","del-cli":"3.0.0","es-check":"5.1.0","eslint":"6.8.0","eslint-config-prettier":"6.10.1","eslint-plugin-import":"2.20.2","eslint-plugin-prettier":"3.1.2","file-loader":"6.0.0","husky":"4.2.3","jest":"25.1.0","jest-dev-server":"4.4.0","jest-junit":"10.0.0","jest-puppeteer":"4.4.0","lint-staged":"10.0.8","memfs":"3.1.2","npm-run-all":"4.1.5","prerender-loader":"1.3.0","prettier":"1.19.1","puppeteer":"2.1.1","serve":"11.3.0","standard-version":"7.1.0","webpack":"4.42.0","webpack-cli":"3.3.11","webpack-dev-server":"3.10.3"},"licenseText":"Copyright JS Foundation and other contributors\nCopyright Zack Jackson\n\nPermission is hereby granted, free of charge, to any person obtaining\na copy of this software and associated documentation files (the\n'Software'), to deal in the Software without restriction, including\nwithout limitation the rights to use, copy, modify, merge, publish,\ndistribute, sublicense, and/or sell copies of the Software, and to\npermit persons to whom the Software is furnished to do so, subject to\nthe following conditions:\n\nThe above copyright notice and this permission notice shall be\nincluded in all copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,\nEXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF\nMERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.\nIN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY\nCLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,\nTORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE\nSOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.\n","_id":"extract-css-chunks-webpack-plugin@4.7.5","dist":{"shasum":"d85ebf0aaf3366f942502eced275711d72bd4ba9","integrity":"sha512-7XlPj/OW+vpIdMcm1H/mo5hgJubMKXlWF5Pgq9F/db39b19A+XlRWppyAZHNaJChC8kJKQl5n8PbfwouIl9AJQ==","tarball":"https://registry.npmjs.org/extract-css-chunks-webpack-plugin/-/extract-css-chunks-webpack-plugin-4.7.5.tgz","fileCount":14,"unpackedSize":61433,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJewsYoCRA9TVsSAnZWagAA6aIP/izD1TsByeM3BsuAgWSp\nByZ3btqdhjkY0trGkhu1EBa701Vq07S3wPOcqwJkiZErumeU8eLLego50yyg\n9NM+K5kVsJeNVCtmhRyqsf0sW5UsaRaXVLztQvR16jduIpa0nKoOyrfnh6o+\nNFE+Ae6eDnoBWK2MEOQ1dWuJOwOrDSiWb6KoNcsqYLzh5i47d61oiHwn3f+N\npZx5MtCf9JuBZVCVpHnfggxosXDn6qXp4rP0XXo4RO2ZtXUP/qYNWD18JS1c\nZaIKWY8fWqWFhZcd+Bd5Rs/08JmXXTIv8i7OVi+gU1tMVkbOUtc/O4fmht+R\nc37ur7e5I5ps1wAET4wlvL/1YvUtZbS68cYFQw6h9yC4s2xxBMI0AvOGXc63\najDWEt/aXUK8cU7+F/pYOZ6TOoWgwIqmLTX6VTOwbAq8Vlj4h3ITXOCLge9Y\ncmxd41DQg3/S5ybe/fcmq9jByo0RoVXqJN7bAQ1RhY2xblBn1se+Uvd1HKnW\nv0PeOa8iD47sxh66IGb5pM6RCYrnUvRYJm0Njduh4I8QJYVT5A0eTXFy32TE\nmMdkI8Aixfb9njky6TqV7yYE2vl3fnR2p+UWaej1RkwWXOGD+CM6f6zKGprm\nfe0hkOkfKyemBLI4ZPZsbYQA655vOvbxE1TxJ7IZlS2jLEkyfQRuoJUkGRKJ\n4AMf\r\n=/jLl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFXdbeouu0+GigZVuaoCrQIPaowdgBt8uXIt/0gyrrumAiEA2ga8IShnrV6hqxCw4OQy+aa9ctwJPqUvzM4XobRj7Pw="}]},"maintainers":[{"email":"james@faceyspacey.com","name":"faceyspacey"},{"email":"zackary.l.jackson@gmail.com","name":"zackljackson"}],"_npmUser":{"name":"zackljackson","email":"zackary.l.jackson@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/extract-css-chunks-webpack-plugin_4.7.5_1589823015547_0.7621240098688735"},"_hasShrinkwrap":false},"4.8.0":{"name":"extract-css-chunks-webpack-plugin","version":"4.8.0","description":"Extract CSS from chunks into stylesheets + HMR. Supports Webpack 4 + SSR","license":"MIT","author":{"name":"James Gillmore","email":"james@faceyspacey.com"},"contributors":[{"name":"Zack Jackson","email":"zack@ScriptedAlchemy.com","url":"https://github.com/ScriptedAlchemy"}],"homepage":"http://github.com/faceyspacey/extract-css-chunks-webpack-plugin","repository":{"type":"git","url":"git+https://github.com/faceyspacey/extract-css-chunks-webpack-plugin.git"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"keywords":["css","chunks","code splitting","mini-css","hot","hmr","universal","webpack","webpack 4","css-hot-loader","extract-css-chunks-webpack-plugin"],"main":"dist/cjs.js","types":"index.d.ts","engines":{"node":">= 6.9.0"},"scripts":{"commit":"git-cz","start":"npm run build -- -w","prebuild":"npm run clean","build":"cross-env NODE_ENV=production babel src -d dist --ignore \"src/**/*.test.js\" --copy-files","postbuild":"es-check es5 dist/hmr/hotModuleReplacement.js","clean":"del-cli dist","commitlint":"commitlint --from=master","lint:prettier":"prettier \"{**/*,*}.{js,json,md,yml,css}\" --list-different","lint:js":"eslint --cache src test","lint":"npm-run-all -l -p \"lint:js\" \"lint:prettier\"","prepare":"npm run build","release":"standard-version","security":"npm audit","test:only":"cross-env NODE_ENV=test jest --updateSnapshot","test:watch":"cross-env NODE_ENV=test jest --watch","test:coverage":"cross-env NODE_ENV=test jest --collectCoverageFrom=\"src/**/*.js\" --coverage","test:manual":"npm run build && webpack-dev-server test/manual/src/index.js --open --config test/manual/webpack.config.js","pretest":"npm run lint","test":"cross-env NODE_ENV=test npm run test:coverage","defaults":"webpack-defaults","semantic-release":"npx semantic-release","travis":"npm run ci:coverage"},"peerDependencies":{"webpack":"^4.4.0 || ^5.0.0"},"dependencies":{"loader-utils":"^2.0.0","normalize-url":"1.9.1","schema-utils":"^1.0.0","webpack-external-import":"^2.2.4","webpack-sources":"^1.1.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","@webpack-contrib/defaults":"6.3.0","@webpack-contrib/eslint-config-webpack":"3.0.0","babel-eslint":"10.1.0","babel-jest":"25.5.1","commitizen":"4.0.4","commitlint-azure-pipelines-cli":"1.0.3","cross-env":"7.0.2","css-loader":"3.5.2","cz-conventional-changelog":"3.1.0","del":"5.1.0","del-cli":"3.0.0","es-check":"5.1.0","eslint":"6.8.0","eslint-config-prettier":"6.10.1","eslint-plugin-import":"2.20.2","eslint-plugin-prettier":"3.1.2","file-loader":"6.0.0","husky":"4.2.3","jest":"25.5.4","jest-dev-server":"4.4.0","jest-junit":"10.0.0","jest-puppeteer":"4.4.0","lint-staged":"10.0.8","memfs":"3.1.2","npm-run-all":"4.1.5","prerender-loader":"1.3.0","prettier":"1.19.1","puppeteer":"2.1.1","serve":"11.3.0","standard-version":"8.0.1","webpack":"4.43.0","webpack-cli":"3.3.11","webpack-dev-server":"3.10.3"},"gitHead":"39f3332f66828c186af05ad9070fad8d7cd40645","bugs":{"url":"https://github.com/faceyspacey/extract-css-chunks-webpack-plugin/issues"},"_id":"extract-css-chunks-webpack-plugin@4.8.0","_nodeVersion":"12.13.1","_npmVersion":"6.12.1","_npmUser":{"name":"zackljackson","email":"zackary.l.jackson@gmail.com"},"dist":{"integrity":"sha512-dt0W0oouL0xjS51xkJQGc7ezNOl/ax3y8x/3EqYvoiGotYyTTFskt257r1yV3gExm4wqs1q95tOJ5vyQwhi2MA==","shasum":"4a9cf9888a07abf4a86e9305f784cf12d46425c5","tarball":"https://registry.npmjs.org/extract-css-chunks-webpack-plugin/-/extract-css-chunks-webpack-plugin-4.8.0.tgz","fileCount":12,"unpackedSize":63042,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfnfvdCRA9TVsSAnZWagAAk+4P/jc5YKZ2v3rC7k+25JzE\nf0Lp5BZjuNOtdt6Od/5rhBMkKNg6VVLtqQgzrfUPfLf3sGDA1ocfXl3ZGaBW\nnzthemswnEQaKBUg0/6UqHBDFWDjNVBYxfdsljSST3dDFjUMinHudUE9hHo1\nkSakivJT/KUKaRWJeBcRM/EujIaPMGTgVkp6JVbfTHROyf6jqUzZmU3Nr6B6\ni3qPhGqQmbGVwBpMJx7syq8pzzwknal3Zt/7j3IqnB+nVOeSoB3rBcwpH5ow\nLRlrtQrWSVQE9G9OENC3hntn5ZxB42ZSrTpF19PRA56SGmesaeJgWfUJC4LP\nSqedjaQBkLH5YSMrTbaLpLWMNnALip9Ee2PgnrcQFCexc5GYXZuMUgQJFwVp\nWIPA2MQVEIvHRQxpYJLOz8mElX4YNnCqcU1I0je+Ms561rfXLZhJ0j/0kyXy\nrTHqOzP2YjKsaVASUGGzjlUYx/5MK6Zvj5OsxQQFJQKyUK1zMpFJGpBW/odp\n1sy9qPo+2iLbe70XebMe5KMC3YPBdiksI5Kwe6jpmuOvHLkhh+L57JDWX+Gy\n89PAJivfOBv3X91vcFVdPH5kQ/TSFZIlr70AMSLuSiVK3AwSv4qUI9ptepaQ\npHa0Hg1sQ0JMjXMDgWvXLqjI1etS5ydgG9kyI0JmKGSVLKKYOffofdvIh1gQ\nPTrR\r\n=aaST\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCVb+GYFCx2SPxGm1317ua1CedgyiLg7iCIX+ZL26LDSQIgfIZgSACnk1Oi3J94aBvEpT/CuDhS/3hQ69Y3gWc5egg="}]},"maintainers":[{"name":"faceyspacey","email":"james@faceyspacey.com"},{"name":"zackljackson","email":"zackary.l.jackson@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/extract-css-chunks-webpack-plugin_4.8.0_1604189149401_0.5479921343636576"},"_hasShrinkwrap":false},"4.9.0":{"name":"extract-css-chunks-webpack-plugin","version":"4.9.0","description":"Extract CSS from chunks into stylesheets + HMR. Supports Webpack 4 + SSR","license":"MIT","author":{"name":"James Gillmore","email":"james@faceyspacey.com"},"contributors":[{"name":"Zack Jackson","email":"zack@ScriptedAlchemy.com","url":"https://github.com/ScriptedAlchemy"}],"homepage":"http://github.com/faceyspacey/extract-css-chunks-webpack-plugin","repository":{"type":"git","url":"git+https://github.com/faceyspacey/extract-css-chunks-webpack-plugin.git"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"keywords":["css","chunks","code splitting","mini-css","hot","hmr","universal","webpack","webpack 4","css-hot-loader","extract-css-chunks-webpack-plugin"],"main":"dist/cjs.js","types":"index.d.ts","engines":{"node":">= 6.9.0"},"scripts":{"commit":"git-cz","start":"npm run build -- -w","prebuild":"npm run clean","build":"cross-env NODE_ENV=production babel src -d dist --ignore \"src/**/*.test.js\" --copy-files","postbuild":"es-check es5 dist/hmr/hotModuleReplacement.js","clean":"del-cli dist","commitlint":"commitlint --from=master","lint:prettier":"prettier \"{**/*,*}.{js,json,md,yml,css}\" --list-different","lint:js":"eslint --cache src test","lint":"npm-run-all -l -p \"lint:js\" \"lint:prettier\"","prepare":"npm run build","release":"standard-version","security":"npm audit","test:only":"cross-env NODE_ENV=test jest --updateSnapshot","test:watch":"cross-env NODE_ENV=test jest --watch","test:coverage":"cross-env NODE_ENV=test jest --collectCoverageFrom=\"src/**/*.js\" --coverage","test:manual":"npm run build && webpack-dev-server test/manual/src/index.js --open --config test/manual/webpack.config.js","pretest":"npm run lint","test":"cross-env NODE_ENV=test npm run test:coverage","defaults":"webpack-defaults","semantic-release":"npx semantic-release","travis":"npm run ci:coverage"},"peerDependencies":{"webpack":"^4.4.0 || ^5.0.0"},"dependencies":{"loader-utils":"^2.0.0","normalize-url":"1.9.1","schema-utils":"^1.0.0","webpack-sources":"^1.1.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","@webpack-contrib/defaults":"6.3.0","@webpack-contrib/eslint-config-webpack":"3.0.0","babel-eslint":"10.1.0","babel-jest":"25.5.1","commitizen":"4.0.4","commitlint-azure-pipelines-cli":"1.0.3","cross-env":"7.0.2","css-loader":"3.5.2","cz-conventional-changelog":"3.1.0","del":"5.1.0","del-cli":"3.0.0","es-check":"5.1.0","eslint":"6.8.0","eslint-config-prettier":"6.10.1","eslint-plugin-import":"2.20.2","eslint-plugin-prettier":"3.1.2","file-loader":"6.0.0","husky":"4.2.3","jest":"25.5.4","jest-dev-server":"4.4.0","jest-junit":"10.0.0","jest-puppeteer":"4.4.0","lint-staged":"10.0.8","memfs":"3.1.2","npm-run-all":"4.1.5","prerender-loader":"1.3.0","prettier":"1.19.1","puppeteer":"2.1.1","serve":"11.3.0","standard-version":"8.0.1","webpack":"4.43.0","webpack-cli":"3.3.11","webpack-dev-server":"3.10.3"},"gitHead":"a44cd0bfad12411ced3ad6c92fdac689eba674d5","bugs":{"url":"https://github.com/faceyspacey/extract-css-chunks-webpack-plugin/issues"},"_id":"extract-css-chunks-webpack-plugin@4.9.0","_nodeVersion":"12.16.1","_npmVersion":"6.13.4","dist":{"integrity":"sha512-HNuNPCXRMqJDQ1OHAUehoY+0JVCnw9Y/H22FQzYVwo8Ulgew98AGDu0grnY5c7xwiXHjQa6yJ/1dxLCI/xqTyQ==","shasum":"da5e6b1d8b39a398c817ffc98550f4ccb6d795e1","tarball":"https://registry.npmjs.org/extract-css-chunks-webpack-plugin/-/extract-css-chunks-webpack-plugin-4.9.0.tgz","fileCount":12,"unpackedSize":63928,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfzmT7CRA9TVsSAnZWagAAnjUP/2zSqffx+pifz3AaDeqn\nVJB4KWLo82m/NoXTZBfOGfomMUJ3d/cEYfwZRmrZ0DjA3jaCZJxs347tOibq\nlPawhy7yqHaBC3CdK43ybN0kRMqNBUrwSPIz56D7o5ZAY5xWoPAJfLNpY15A\nV0nmp9qj6a9mG2kfJGm1C+iNz5IZrpG2JdrWrSXjF39OuDfdmo2gWQtoVg4Z\nEJrXNUzZ36LWbuh5hzT9cMa6mGesJl5MP9a4azrF4O4Qt+HUqy0/jFRurPKj\nutzR81yqaDLlN/TyvZxuhzkTYAxxab1JVpFEeDF6Zgb1Qjfv8Ob06QTNI5xr\nuf/VY63hkO3EPL8hwQrCcbu8xjYZgyUgAprpk291S3fsSL5+9erkJ19vNQLc\nzjPJVSV/mxgDRPsE1Bz2GufH89Dqp9KpxndeAOHXYi88Y++A0xgNvnP1spzf\nfS8RwLq4C/eGnHenp3k0oDNFPc3I3qhf0Jmzlz2qdwPu9JDIHmKhou7lsK5p\nddLe9srRgpogmVmPKatwEmlF9E3ktPLvm4ZiCUanru0nfCipUWQchO+U4tc7\ncK8L36UC52wgEr3Y/EeGNTAVQVbfib6N/FaQf7/6xtv018fgZevlOxEHiu08\nGtC7uLhguFC9L1XiJG9yJnG/2JCoXwhmKAKISXzzlCwvDwwZepLa66vCvvi4\nwUzw\r\n=4q7U\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEoYGlBuYEjqIU7GWQOWrmtdK9kB64gXsTpUqnINlagbAiA+PGcWSf/AW4ZDM0XGlA7ehs5KNB0d5aYkwkogtzAJbw=="}]},"_npmUser":{"name":"zackljackson","email":"zackary.l.jackson@gmail.com"},"directories":{},"maintainers":[{"name":"faceyspacey","email":"james@faceyspacey.com"},{"name":"zackljackson","email":"zackary.l.jackson@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/extract-css-chunks-webpack-plugin_4.9.0_1607361786302_0.4322862059325836"},"_hasShrinkwrap":false},"4.10.0":{"name":"extract-css-chunks-webpack-plugin","version":"4.10.0","description":"Extract CSS from chunks into stylesheets + HMR. Supports Webpack 4 + SSR","license":"MIT","author":{"name":"James Gillmore","email":"james@faceyspacey.com"},"contributors":[{"name":"Zack Jackson","email":"zack@ScriptedAlchemy.com","url":"https://github.com/ScriptedAlchemy"}],"homepage":"http://github.com/faceyspacey/extract-css-chunks-webpack-plugin","repository":{"type":"git","url":"https://github.com/faceyspacey/extract-css-chunks-webpack-plugin.git"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"keywords":["css","chunks","code splitting","mini-css","hot","hmr","universal","webpack","webpack 4","css-hot-loader","extract-css-chunks-webpack-plugin"],"main":"dist/cjs.js","types":"index.d.ts","engines":{"node":">= 6.9.0"},"scripts":{"commit":"git-cz","start":"npm run build -- -w","prebuild":"npm run clean","build":"cross-env NODE_ENV=production babel src -d dist --ignore \"src/**/*.test.js\" --copy-files","postbuild":"es-check es5 dist/hmr/hotModuleReplacement.js","clean":"del-cli dist","commitlint":"commitlint --from=master","lint:prettier":"prettier \"{**/*,*}.{js,json,md,yml,css}\" --list-different","lint:js":"eslint --cache src test","lint":"npm-run-all -l -p \"lint:js\" \"lint:prettier\"","prepare":"npm run build","release":"standard-version","security":"npm audit","test:only":"cross-env NODE_ENV=test jest --updateSnapshot","test:watch":"cross-env NODE_ENV=test jest --watch","test:coverage":"cross-env NODE_ENV=test jest --collectCoverageFrom=\"src/**/*.js\" --coverage","test:manual":"npm run build && webpack-dev-server test/manual/src/index.js --open --config test/manual/webpack.config.js","pretest":"npm run lint","test":"cross-env NODE_ENV=test npm run test:coverage","defaults":"webpack-defaults","semantic-release":"npx semantic-release","travis":"npm run ci:coverage"},"peerDependencies":{"webpack":"^4.4.0 || ^5.0.0"},"dependencies":{"loader-utils":"^2.0.4","normalize-url":"1.9.1","schema-utils":"^1.0.0","webpack-sources":"^1.1.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","@webpack-contrib/defaults":"6.3.0","@webpack-contrib/eslint-config-webpack":"3.0.0","babel-eslint":"10.1.0","babel-jest":"25.5.1","commitizen":"4.0.4","commitlint-azure-pipelines-cli":"1.0.3","cross-env":"7.0.2","css-loader":"3.5.2","cz-conventional-changelog":"3.1.0","del":"5.1.0","del-cli":"3.0.0","es-check":"5.1.0","eslint":"6.8.0","eslint-config-prettier":"6.10.1","eslint-plugin-import":"2.20.2","eslint-plugin-prettier":"3.1.2","file-loader":"6.0.0","husky":"4.2.3","jest":"25.5.4","jest-dev-server":"4.4.0","jest-junit":"10.0.0","jest-puppeteer":"4.4.0","lint-staged":"10.0.8","memfs":"3.1.2","npm-run-all":"4.1.5","prerender-loader":"1.3.0","prettier":"1.19.1","puppeteer":"2.1.1","serve":"11.3.0","standard-version":"8.0.1","webpack":"4.43.0","webpack-cli":"3.3.11","webpack-dev-server":"3.10.3"},"licenseText":"Copyright JS Foundation and other contributors\nCopyright Zack Jackson\n\nPermission is hereby granted, free of charge, to any person obtaining\na copy of this software and associated documentation files (the\n'Software'), to deal in the Software without restriction, including\nwithout limitation the rights to use, copy, modify, merge, publish,\ndistribute, sublicense, and/or sell copies of the Software, and to\npermit persons to whom the Software is furnished to do so, subject to\nthe following conditions:\n\nThe above copyright notice and this permission notice shall be\nincluded in all copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,\nEXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF\nMERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.\nIN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY\nCLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,\nTORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE\nSOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.\n","_id":"extract-css-chunks-webpack-plugin@4.10.0","dist":{"shasum":"60a847b1c86e99318c3b2a777d642ece2702ba80","integrity":"sha512-D/wb/Tbexq8XMBl4uhthto25WBaHI9P8vucDdzwPtLTyVi4Rdw/aiRLSL2rHaF6jZfPAjThWXepFU9PXsdtIbA==","tarball":"https://registry.npmjs.org/extract-css-chunks-webpack-plugin/-/extract-css-chunks-webpack-plugin-4.10.0.tgz","fileCount":15,"unpackedSize":64020,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD8dpZeMjj0pOwc5lrhd1Nz+tfPgpeOM+IvhLozfkIWmQIgHjzl6awQABmPWwanKgFb0b+g7JNTC4aQm5SznwO3nZE="}]},"_npmUser":{"name":"zackljackson","email":"zackary.l.jackson@gmail.com"},"directories":{},"maintainers":[{"name":"faceyspacey","email":"james@faceyspacey.com"},{"name":"zackljackson","email":"zackary.l.jackson@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/extract-css-chunks-webpack-plugin_4.10.0_1694744630073_0.025152244038145755"},"_hasShrinkwrap":false}},"readme":"If you like our work, check out our Redux-based router <a href=\"https://github.com/faceyspacey/redux-first-router\" target=\"_blank\">redux-first-router</a> or its sucessor which, <a href=\"https://github.com/respond-framework/rudy\" target=\"_blank\">Rudy<a>\n\n# extract-css-chunks-webpack-plugin\n\n<p align=\"center\">\n  <a href=\"https://www.npmjs.com/package/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://img.shields.io/npm/v/extract-css-chunks-webpack-plugin.svg\" alt=\"Version\" />\n  </a>\n<img src=\"https://ssl.google-analytics.com/collect?v=1&t=event&ec=email&ea=open&t=event&tid=UA-120967034-1&z=1589684734&cid=9befe819-70e1-278b-50fc-859e6d1970cb&dt=ExtractCssChunks&dp=/email/ExtractCssChunks\">\n  <a href=\"https://travis-ci.org/faceyspacey/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://travis-ci.org/faceyspacey/extract-css-chunks-webpack-plugin.svg?branch=master\" alt=\"Build Status\" />\n  </a>\n\n  <a href=\"https://www.npmjs.com/package/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://img.shields.io/npm/dt/extract-css-chunks-webpack-plugin.svg\" alt=\"Downloads\" />\n  </a>\n\n  <a href=\"https://www.npmjs.com/package/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://img.shields.io/npm/dm/extract-css-chunks-webpack-plugin.svg\" alt=\"License\" />\n  </a>\n  \n  <a href=\"https://www.npmjs.com/package/extract-css-chunks-webpack-plugin\">\n    <img src=\"https://img.shields.io/npm/l/extract-css-chunks-webpack-plugin.svg\" alt=\"License\" />\n  </a>\n</p>\n\n<h2 align=\"center\">🍾🍾🍾It's our absolute pleasure to announce Webpack 4 Support 🚀🚀🚀</h2>\n\n> **HEADLINES (May 2018): Now Independently supports Webpack 4:**\n> Yep that's right. The universal family is now fully Webpack 4. Thank you to all our users for your loyalty and patience! If you love Universal, then you are gonna fall head over heels when we bring out the main course!\n\nSo... why did we rebuild `extract-css-chunks-webpack-plugin`? What does it offer?\n\nIt's got all the goodness of `mini-css-extract-plugin` but with 2 gleaming, sought after benefits.\n\nCompared to the existing loaders, we are offering a single solution as opposed to needing to depend on multiple loaders to cater for different features:\n\n## Perks\n\n- **HMR:** It also has first-class support for **Hot Module Replacement** across ALL those css files/chunks!!!\n- cacheable stylesheets\n- smallest total bytes sent compared to \"render-path\" css-in-js solutions that include your CSS definitions in JS\n- Faster than the V2!\n- Async loading\n- No duplicate compilation (performance)\n- Easier to use\n- Specific to CSS\n- SSR Friendly development build, focused on frontend DX\n- Works seamlessly with the Universal family\n- Works fantastically as a standalone style loader (You can use it for any webpack project! with no extra dependencies!)\n- Async styles do not render block webkit browsers, if you use the `insert` option\n\nAdditionally, if you are already a user of the universal family -- we will be waving goodbye to the mandatory `window.__CSS_CHUNKS__`.\n\nThe functionality is still available to you via chunk flushing, and it can come in super handy when needing to easily resolve style assets as urls that might need to be passed to a third party.\n\n**webpack.config.js**\n\n```js\nconst ExtractCssChunks = require('extract-css-chunks-webpack-plugin');\n\nmodule.exports = {\n  plugins: [new ExtractCssChunks()],\n  module: {\n    rules: [\n      {\n        test: /\\.css$/i,\n        use: [ExtractCssChunks.loader, 'css-loader'],\n      },\n    ],\n  },\n};\n```\n\n## Options\n\n### `publicPath`\n\nType: `String|Function`\nDefault: the `publicPath` in `webpackOptions.output`\n\nSpecifies a custom public path for the target file(s).\n\n#### `String`\n\n**webpack.config.js**\n\n```js\nconst ExtractCssChunks = require('extract-css-chunks-webpack-plugin');\n\nmodule.exports = {\n  plugins: [\n    new ExtractCssChunks({\n      // Options similar to the same options in webpackOptions.output\n      // both options are optional\n      filename: '[name].css',\n      chunkFilename: '[id].css',\n    }),\n  ],\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [\n          {\n            loader: ExtractCssChunks.loader,\n            options: {\n              publicPath: '/public/path/to/',\n            },\n          },\n          'css-loader',\n        ],\n      },\n    ],\n  },\n};\n```\n\n#### `Function`\n\n**webpack.config.js**\n\n```js\nconst ExtractCssChunks = require('extract-css-chunks-webpack-plugin');\n\nmodule.exports = {\n  plugins: [\n    new ExtractCssChunks({\n      // Options similar to the same options in webpackOptions.output\n      // both options are optional\n      filename: '[name].css',\n      chunkFilename: '[id].css',\n    }),\n  ],\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [\n          {\n            loader: ExtractCssChunks.loader,\n            options: {\n              publicPath: (resourcePath, context) => {\n                return path.relative(path.dirname(resourcePath), context) + '/';\n              },\n            },\n          },\n          'css-loader',\n        ],\n      },\n    ],\n  },\n};\n```\n\n### `esModule`\n\nType: `Boolean`\nDefault: `false`\n\nBy default, `extract-css-chunks-webpack-plugin` generates JS modules that use the CommonJS modules syntax.\nThere are some cases in which using ES modules is beneficial, like in the case of [module concatenation](https://webpack.js.org/plugins/module-concatenation-plugin/) and [tree shaking](https://webpack.js.org/guides/tree-shaking/).\n\nYou can enable a ES module syntax using:\n\n**webpack.config.js**\n\n```js\nconst ExtractCssChunks = require('extract-css-chunks-webpack-plugin');\n\nmodule.exports = {\n  plugins: [new ExtractCssChunks()],\n  module: {\n    rules: [\n      {\n        test: /\\.css$/i,\n        use: [\n          {\n            loader: ExtractCssChunks.loader,\n            options: {\n              esModule: true,\n            },\n          },\n          'css-loader',\n        ],\n      },\n    ],\n  },\n};\n```\n\n## Examples\n\n### Minimal example\n\n**webpack.config.js**\n\n```js\nconst ExtractCssChunks = require('extract-css-chunks-webpack-plugin');\n\nmodule.exports = {\n  plugins: [\n    new ExtractCssChunks({\n      // Options similar to the same options in webpackOptions.output\n      // all options are optional\n      filename: '[name].css',\n      chunkFilename: '[id].css',\n      ignoreOrder: false, // Enable to remove warnings about conflicting order\n    }),\n  ],\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [\n          {\n            loader: ExtractCssChunks.loader,\n            options: {\n              // you can specify a publicPath here\n              // by default it uses publicPath in webpackOptions.output\n              publicPath: '../',\n              hmr: process.env.NODE_ENV === 'development',\n            },\n          },\n          'css-loader',\n        ],\n      },\n    ],\n  },\n};\n```\n\n### The `publicPath` option as function\n\n**webpack.config.js**\n\n```js\nconst ExtractCssChunks = require('extract-css-chunks-webpack-plugin');\n\nmodule.exports = {\n  plugins: [\n    new ExtractCssChunks({\n      // Options similar to the same options in webpackOptions.output\n      // both options are optional\n      filename: '[name].css',\n      chunkFilename: '[id].css',\n    }),\n  ],\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [\n          {\n            loader: ExtractCssChunks.loader,\n            options: {\n              publicPath: (resourcePath, context) => {\n                // publicPath is the relative path of the resource to the context\n                // e.g. for ./css/admin/main.css the publicPath will be ../../\n                // while for ./css/main.css the publicPath will be ../\n                return path.relative(path.dirname(resourcePath), context) + '/';\n              },\n            },\n          },\n          'css-loader',\n        ],\n      },\n    ],\n  },\n};\n```\n\n### Advanced configuration example\n\nThis plugin should be used only on `production` builds without `style-loader` in the loaders chain, especially if you want to have HMR in `development`.\n\nHere is an example to have both HMR in `development` and your styles extracted in a file for `production` builds.\n\n(Loaders options left out for clarity, adapt accordingly to your needs.)\n\n**webpack.config.js**\n\n```js\nconst ExtractCssChunks = require('extract-css-chunks-webpack-plugin');\nconst devMode = process.env.NODE_ENV !== 'production';\n\nmodule.exports = {\n  plugins: [\n    new ExtractCssChunks({\n      // Options similar to the same options in webpackOptions.output\n      // both options are optional\n      filename: devMode ? '[name].css' : '[name].[hash].css',\n      chunkFilename: devMode ? '[id].css' : '[id].[hash].css',\n    }),\n  ],\n  module: {\n    rules: [\n      {\n        test: /\\.(sa|sc|c)ss$/,\n        use: [\n          {\n            loader: ExtractCssChunks.loader,\n            options: {\n              hmr: process.env.NODE_ENV === 'development',\n            },\n          },\n          'css-loader',\n          'postcss-loader',\n          'sass-loader',\n        ],\n      },\n    ],\n  },\n};\n```\n\n### Hot Module Reloading (HMR)\n\nThe `extract-css-chunks-webpack-plugin` supports hot reloading of actual css files in development.\nSome options are provided to enable HMR of both standard stylesheets and locally scoped CSS or CSS modules.\nBelow is an example configuration of `extract-css-chunks` for HMR use with CSS modules.\n\nWhile we attempt to hmr css-modules. It is not easy to perform when code-splitting with custom chunk names.\n`reloadAll` is an option that should only be enabled if HMR isn't working correctly.\nThe core challenge with css-modules is that when code-split, the chunk ids can and do end up different compared to the filename.\n\n**webpack.config.js**\n\n```js\nconst ExtractCssChunks = require('extract-css-chunks-webpack-plugin');\n\nmodule.exports = {\n  plugins: [\n    new ExtractCssChunks({\n      // Options similar to the same options in webpackOptions.output\n      // both options are optional\n      filename: '[name].css',\n      chunkFilename: '[id].css',\n    }),\n  ],\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [\n          {\n            loader: ExtractCssChunks.loader,\n            options: {\n              // only enable hot in development\n              hmr: process.env.NODE_ENV === 'development',\n              // if hmr does not work, this is a forceful method.\n              reloadAll: true,\n            },\n          },\n          'css-loader',\n        ],\n      },\n    ],\n  },\n};\n```\n\n### Minimizing For Production\n\nTo minify the output, use a plugin like [optimize-css-assets-webpack-plugin](https://github.com/NMFR/optimize-css-assets-webpack-plugin).\nSetting `optimization.minimizer` overrides the defaults provided by webpack, so make sure to also specify a JS minimizer:\n\n**webpack.config.js**\n\n```js\nconst TerserJSPlugin = require('terser-webpack-plugin');\nconst ExtractCssChunks = require('extract-css-chunks-webpack-plugin');\nconst OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');\n\nmodule.exports = {\n  optimization: {\n    minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})],\n  },\n  plugins: [\n    new ExtractCssChunks({\n      filename: '[name].css',\n      chunkFilename: '[id].css',\n    }),\n  ],\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [ExtractCssChunks.loader, 'css-loader'],\n      },\n    ],\n  },\n};\n```\n\n### Using preloaded or inlined CSS\n\nThe runtime code detects already added CSS via `<link>` or `<style>` tag.\nThis can be useful when injecting CSS on server-side for Server-Side-Rendering.\nThe `href` of the `<link>` tag has to match the URL that will be used for loading the CSS chunk.\nThe `data-href` attribute can be used for `<link>` and `<style>` too.\nWhen inlining CSS `data-href` must be used.\n\n### Extracting all CSS in a single file\n\nSimilar to what [extract-text-webpack-plugin](https://github.com/webpack-contrib/extract-text-webpack-plugin) does, the CSS can be extracted in one CSS file using `optimization.splitChunks.cacheGroups`.\n\n**webpack.config.js**\n\n```js\nconst ExtractCssChunks = require('extract-css-chunks-webpack-plugin');\n\nmodule.exports = {\n  optimization: {\n    splitChunks: {\n      cacheGroups: {\n        styles: {\n          name: 'styles',\n          test: /\\.css$/,\n          chunks: 'all',\n          enforce: true,\n        },\n      },\n    },\n  },\n  plugins: [\n    new ExtractCssChunks({\n      filename: '[name].css',\n    }),\n  ],\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [ExtractCssChunks.loader, 'css-loader'],\n      },\n    ],\n  },\n};\n```\n\n### Extracting CSS based on entry\n\nYou may also extract the CSS based on the webpack entry name.\nThis is especially useful if you import routes dynamically but want to keep your CSS bundled according to entry.\nThis also prevents the CSS duplication issue one had with the ExtractTextPlugin.\n\n```js\nconst path = require('path');\nconst ExtractCssChunks = require('extract-css-chunks-webpack-plugin');\n\nfunction recursiveIssuer(m) {\n  if (m.issuer) {\n    return recursiveIssuer(m.issuer);\n  } else if (m.name) {\n    return m.name;\n  } else {\n    return false;\n  }\n}\n\nmodule.exports = {\n  entry: {\n    foo: path.resolve(__dirname, 'src/foo'),\n    bar: path.resolve(__dirname, 'src/bar'),\n  },\n  optimization: {\n    splitChunks: {\n      cacheGroups: {\n        fooStyles: {\n          name: 'foo',\n          test: (m, c, entry = 'foo') =>\n            m.constructor.name === 'CssModule' && recursiveIssuer(m) === entry,\n          chunks: 'all',\n          enforce: true,\n        },\n        barStyles: {\n          name: 'bar',\n          test: (m, c, entry = 'bar') =>\n            m.constructor.name === 'CssModule' && recursiveIssuer(m) === entry,\n          chunks: 'all',\n          enforce: true,\n        },\n      },\n    },\n  },\n  plugins: [\n    new ExtractCssChunks({\n      filename: '[name].css',\n    }),\n  ],\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [ExtractCssChunks.loader, 'css-loader'],\n      },\n    ],\n  },\n};\n```\n\n### Module Filename Option\n\nWith the `moduleFilename` option you can use chunk data to customize the filename. This is particularly useful when dealing with multiple entry points and wanting to get more control out of the filename for a given entry point/chunk. In the example below, we'll use `moduleFilename` to output the generated css into a different directory.\n\n**webpack.config.js**\n\n```js\nconst ExtractCssChunks = require('extract-css-chunks-webpack-plugin');\n\nmodule.exports = {\n  plugins: [\n    new ExtractCssChunks({\n      moduleFilename: ({ name }) => `${name.replace('/js/', '/css/')}.css`,\n    }),\n  ],\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [ExtractCssChunks.loader, 'css-loader'],\n      },\n    ],\n  },\n};\n```\n\n### Long Term Caching\n\nFor long term caching use `filename: \"[contenthash].css\"`. Optionally add `[name]`.\n\n**webpack.config.js**\n\n```js\nconst ExtractCssChunks = require('extract-css-chunks-webpack-plugin');\n\nmodule.exports = {\n  plugins: [\n    new ExtractCssChunks({\n      filename: '[name].[contenthash].css',\n      chunkFilename: '[id].[contenthash].css',\n    }),\n  ],\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [ExtractCssChunks.loader, 'css-loader'],\n      },\n    ],\n  },\n};\n```\n\n### Remove Order Warnings\n\nFor projects where css ordering has been mitigated through consistent use of scoping or naming conventions, the css order warnings can be disabled by setting the ignoreOrder flag to true for the plugin.\n\n**webpack.config.js**\n\n```js\nconst ExtractCssChunks = require('extract-css-chunks-webpack-plugin');\n\nmodule.exports = {\n  plugins: [\n    new ExtractCssChunks({\n      ignoreOrder: true,\n    }),\n  ],\n  module: {\n    rules: [\n      {\n        test: /\\.css$/i,\n        use: [ExtractCssChunks.loader, 'css-loader'],\n      },\n    ],\n  },\n};\n```\n\n### insert\n\nType: `Function`\nDefault: `head`\n\nBy default, the `extract-css-chunks-plugin` appends styles (`<link>` elements) to `document.head` of the current `window`.\n\nHowever in some circumstances it might be necessary to have finer control over the append target or even delay `link` elements instertion. For example this is the case when you asynchronously load styles for an application that runs inside of an iframe. In such cases `insert` can be configured to be a function or a custom selector.\n\nIf you target an [iframe](https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement) make sure that the parent document has sufficient access rights to reach into the frame document and append elements to it.\n\n#### `insert` as a function\n\nAllows to override default behavior and insert styles at any position.\n\n> ⚠ Do not forget that this code will run in the browser alongside your application. Since not all browsers support latest ECMA features like `let`, `const`, `arrow function expression` and etc we recommend you to use only ECMA 5 features and syntax.\n\n> ⚠ The `insert` function is serialized to string and passed to the plugin. This means that it won't have access to the scope of the webpack configuration module.\n\n```js\nnew ExtractCssChunksPlugin({\n  insert: function insert(linkTag) {\n    const reference = document.querySelector('#some-element');\n    if (reference) {\n      reference.parentNode.insertBefore(linkTag, reference);\n    }\n  },\n});\n```\n\nA new `<link>` element will be inserted before the element with id `some-element`.\n\n### Media Query Plugin\n\nIf you'd like to extract the media queries from the extracted CSS (so mobile users don't need to load desktop or tablet specific CSS anymore) you should use one of the following plugins:\n\n- [Media Query Plugin](https://github.com/SassNinja/media-query-plugin)\n- [Media Query Splitting Plugin](https://github.com/mike-diamond/media-query-splitting-plugin)\n","maintainers":[{"name":"faceyspacey","email":"james@faceyspacey.com"},{"name":"zackljackson","email":"zackary.l.jackson@gmail.com"}],"time":{"modified":"2023-09-15T02:23:50.380Z","created":"2017-04-27T07:55:46.453Z","1.0.3":"2017-04-27T07:55:46.453Z","1.0.4":"2017-04-27T07:56:45.290Z","1.0.5":"2017-04-27T08:30:54.909Z","1.0.6":"2017-04-27T08:38:15.876Z","1.0.7":"2017-04-27T11:16:43.233Z","1.0.8":"2017-04-27T12:19:07.005Z","1.0.9":"2017-05-07T10:09:46.234Z","1.0.10":"2017-05-07T10:37:24.912Z","1.0.11":"2017-06-07T22:52:37.092Z","1.0.12":"2017-06-07T23:04:42.620Z","1.0.13":"2017-06-08T04:22:34.976Z","1.0.14":"2017-06-08T15:48:20.087Z","1.0.15":"2017-06-14T10:50:15.207Z","2.0.0":"2017-06-30T11:55:42.968Z","2.0.1":"2017-07-07T14:44:37.581Z","2.0.2":"2017-07-07T17:49:58.989Z","2.0.3":"2017-07-07T17:52:16.870Z","2.0.4":"2017-07-11T23:25:03.191Z","2.0.5":"2017-07-17T20:08:53.476Z","2.0.6":"2017-07-17T20:21:35.671Z","2.0.7":"2017-07-21T11:10:33.732Z","2.0.8":"2017-07-23T07:45:59.321Z","2.0.9":"2017-07-27T00:03:23.203Z","2.0.10":"2017-07-27T15:29:12.456Z","2.0.11":"2017-07-27T15:36:47.353Z","2.0.12":"2017-07-27T15:45:06.605Z","2.0.13":"2017-07-27T15:46:51.311Z","2.0.14":"2017-07-27T16:06:50.265Z","2.0.15":"2017-07-27T16:08:02.101Z","2.0.16":"2017-07-31T10:45:54.354Z","2.0.17":"2017-08-25T23:16:34.155Z","2.0.18":"2017-11-20T18:00:21.512Z","2.0.19":"2018-04-23T21:09:18.908Z","0.0.0-placeholder":"2018-05-31T19:29:46.507Z","3.0.0":"2018-05-31T19:39:33.043Z","3.0.0-beta.1":"2018-06-01T03:41:01.130Z","3.0.1":"2018-06-01T05:57:21.072Z","3.0.1-beta.2":"2018-06-01T23:42:55.409Z","3.0.1-beta.3":"2018-06-04T23:21:30.164Z","3.0.2":"2018-06-04T23:53:57.213Z","3.0.3":"2018-06-04T23:56:45.316Z","3.0.4-beta.1":"2018-06-05T15:31:11.943Z","3.0.4":"2018-06-06T03:32:56.871Z","3.0.5":"2018-06-06T03:35:57.233Z","3.0.6-beta.1":"2018-06-24T21:54:07.750Z","3.0.6-beta.2":"2018-06-24T22:08:35.546Z","3.0.6":"2018-06-25T16:19:31.832Z","3.0.7-beta.1":"2018-07-10T23:38:14.709Z","3.0.7":"2018-07-12T16:07:16.166Z","3.0.8-beta.1":"2018-07-13T18:37:24.095Z","3.0.8-beta.2":"2018-07-14T21:49:19.619Z","3.0.8-beta.3":"2018-07-16T17:27:03.114Z","3.0.8-beta.4":"2018-07-16T19:08:34.005Z","3.0.8-beta.5":"2018-07-16T19:17:58.926Z","3.0.8":"2018-07-16T19:41:50.989Z","3.0.9":"2018-07-16T19:43:35.746Z","3.1.0-beta.1":"2018-07-17T18:08:03.474Z","3.1.0-beta.2":"2018-07-18T16:33:11.965Z","3.0.10":"2018-07-18T16:34:12.929Z","3.0.11":"2018-07-26T01:45:18.271Z","3.1.0-beta.3":"2018-07-26T01:47:21.685Z","3.1.0-beta.4":"2018-08-09T23:25:30.075Z","3.1.0-beta.7":"2018-08-13T17:24:30.775Z","3.1.0-beta.8":"2018-08-14T15:07:08.254Z","3.1.0-beta.9":"2018-08-14T15:23:13.200Z","3.0.12":"2018-08-31T18:40:17.904Z","3.1.0":"2018-09-01T04:55:27.690Z","3.1.1":"2018-09-01T07:58:44.355Z","3.1.2-beta.1":"2018-09-07T06:28:12.470Z","3.1.2-beta.2":"2018-09-07T06:55:15.887Z","3.1.2-beta.3":"2018-09-10T18:11:26.783Z","3.1.2-beta.4":"2018-09-10T20:21:29.217Z","3.1.2-beta.5":"2018-09-10T20:35:36.493Z","3.1.2-beta.6":"2018-09-15T00:38:23.980Z","3.1.2-beta.7":"2018-10-01T15:27:23.918Z","3.1.2":"2018-10-02T05:11:43.351Z","3.1.3":"2018-10-02T06:00:24.668Z","3.2.0":"2018-10-08T21:58:09.226Z","3.2.1-alpha.0":"2018-10-09T00:51:33.032Z","3.2.1-alpha.1":"2018-10-09T17:23:13.173Z","3.2.1":"2018-10-23T15:30:36.625Z","3.3.0":"2018-12-27T20:52:56.272Z","3.3.1":"2018-12-31T00:13:37.406Z","3.3.2":"2018-12-31T17:05:14.615Z","4.0.0-beta.1":"2019-03-03T00:42:41.983Z","4.0.0-beta.2":"2019-03-03T01:33:19.233Z","3.3.3":"2019-03-04T18:26:36.304Z","4.0.0":"2019-03-05T06:05:31.440Z","4.0.0-beta.3":"2019-03-11T00:19:38.120Z","4.0.1":"2019-03-11T18:13:42.829Z","4.0.2":"2019-03-23T04:34:39.767Z","4.1.0":"2019-03-27T00:51:14.582Z","4.1.1":"2019-03-27T03:44:51.199Z","4.2.0":"2019-03-27T04:10:20.553Z","4.3.0":"2019-04-04T05:26:43.905Z","4.3.1":"2019-04-13T19:21:14.329Z","4.3.2":"2019-04-15T21:08:16.721Z","4.4.0":"2019-05-16T22:10:19.204Z","4.5.0":"2019-05-17T19:34:28.666Z","4.5.1":"2019-05-19T17:51:01.541Z","4.5.2":"2019-05-29T19:00:17.872Z","4.5.3":"2019-06-28T22:34:24.756Z","4.5.4":"2019-07-01T17:03:58.343Z","4.5.5":"2019-07-05T21:59:52.999Z","4.5.6":"2019-07-13T03:08:33.594Z","4.5.7":"2019-08-03T23:16:41.172Z","4.6.0":"2019-08-04T04:33:49.758Z","4.7.0":"2019-11-25T04:59:53.626Z","4.7.1":"2019-11-27T20:17:12.266Z","4.7.2":"2020-01-17T05:11:36.590Z","4.7.3":"2020-01-17T05:17:51.473Z","4.7.2-mit":"2020-01-17T05:18:21.133Z","4.7.4":"2020-01-17T20:34:10.028Z","4.7.5":"2020-05-18T17:30:15.836Z","4.8.0":"2020-11-01T00:05:49.566Z","4.9.0":"2020-12-07T17:23:06.781Z","4.10.0":"2023-09-15T02:23:50.242Z"},"homepage":"http://github.com/faceyspacey/extract-css-chunks-webpack-plugin","repository":{"type":"git","url":"https://github.com/faceyspacey/extract-css-chunks-webpack-plugin.git"},"author":{"name":"James Gillmore","email":"james@faceyspacey.com"},"license":"MIT","readmeFilename":"README.md","users":{"derrickbeining":true,"voznik":true},"contributors":[{"name":"Zack Jackson","email":"zack@ScriptedAlchemy.com","url":"https://github.com/ScriptedAlchemy"}],"keywords":["css","chunks","code splitting","mini-css","hot","hmr","universal","webpack","webpack 4","css-hot-loader","extract-css-chunks-webpack-plugin"]}