{"bugs":{"url":"https://github.com/shepherdwind/css-hot-loader/issues"},"dist":{"shasum":"97e57091841e7dd1ca236ff8542634851f7a27fa","tarball":"https://registry.npmjs.org/css-hot-loader/-/css-hot-loader-1.4.2-beta.tgz","fileCount":7,"integrity":"sha512-n9BJkGfBh15lGcWt2EZ1uN6RVaGbIMiwEfizqoh/W+Oa8A0lPJ3kDy/WMZb6FrcBOfsL5yaR2MM6XzGsrC4+NA==","signatures":[{"sig":"MEQCIAzwdm6kO4WKl+SSUVLTiUoA7HlAVUO9X5hg1zE8uPjZAiBnQ0N1wTCPDI2Sq52KRmKSLHGX6IYGps0WPCcLIbV56g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12242,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbcyfiCRA9TVsSAnZWagAApgcP/2Jimmk3oz0I6w4FQ9p1\nuh1YCvwOWNCvAS2spT0Ge+BD3J5pc8vLlY8R7/2T/f93Td8M8C0uEKbC3vsi\nS8MCpodBqblp3ueleT6Tr62jN61W8QfCQvqvGiIcZfGKE4bi8QZCOpnBfijY\nZb1vrm2xz4aH4FirTRyK9buvQsq2IAg6QkpqSTqHGj5mt7+tmnpvXtNxMgYp\nTvjLAUBB7Lvf95CV3rzPzTV6F6RiIba0w1LOK3KIF0ShourBwdDzRtQIAD4V\n9Yd6tEXPBnItKrLxSVgomsWaMZE7hbhPsJdE9A3sQZuiAnmvC+w1gcdJ78tQ\n3FB5njX2CsMDYAnApQbmcfCybOvSxUdG1tRYngXw4BqYR0GUQyRKeQRN7oRe\n+rz/BTTqxurO23GTqHdJ9ojXCPXqkoW/yosxTKh2f6Yr6r7fSVtHQTuJGG9X\nlZztierwIz7lTYmYmwG1d3dKsJWodkhoIUby36eMLmlFxatBJTjjlY2P0vOd\n5CWCh3wDGvMCyY3H1M9VIR9FOETtswLCDVRXtvV1DEBQ9SqEcwLG4P9WJb1w\nn5MdSzmF5GbQFElbaEwSO5FCg6A4M9APlVa3sFZuXQ2LXEi2aozH0+fV7yza\npqmgGI/GOVNHGur+ow7gqCfvSKN0U3browQQjS8bPwAuEmEMCDcSthmJ2Lgj\nLMR5\r\n=wdcg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","name":"css-hot-loader","files":["loader.js","hotModuleReplacement.js","index.js"],"author":{"name":"shepherdwind"},"readme":"### CSS Hot Loader\n\n[![build status][travis-image]][travis-url]\n[![Test coverage][coveralls-image]][coveralls-url]\n[![NPM version][npm-image]][npm-url]\n[![npm download][download-image]][download-url]\n\n[npm-image]: http://img.shields.io/npm/v/css-hot-loader.svg?style=flat-square\n[npm-url]: http://npmjs.org/package/css-hot-loader\n[download-image]: https://img.shields.io/npm/dm/css-hot-loader.svg?style=flat-square\n[download-url]: https://npmjs.org/package/css-hot-loader\n[travis-image]: https://img.shields.io/travis/shepherdwind/css-hot-loader.svg?style=flat-square\n[travis-url]: https://travis-ci.org/shepherdwind/css-hot-loader\n[coveralls-image]: https://img.shields.io/coveralls/shepherdwind/css-hot-loader.svg?style=flat-square\n[coveralls-url]: https://coveralls.io/r/shepherdwind/css-hot-loader?branch=master\n\nThis is a css hot loader, which support hot module replacement for an extracted css file.\n\n### Why we need css hot loader\n\nIn most cases, we can realize css hot reload by [style-loader](https://github.com/webpack/style-loader) . But style-loader need inject style tag into document, Before js ready, the web page will have no any style. That is not good experience.\n\nAlso, a lots of people thought about that, How can realize hot reload with\nextract-text-webpack-plugin. For example [#30](https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/30) , [#!89](https://github.com/webpack-contrib/extract-text-webpack-plugin/pull/89).\n\nSo I wrote this loader, which supports hot module replacement for an extracted css file.\n\n### Install\n\nFirst install package from npm\n\n```sh\n$ npm install css-hot-loader --save-dev\n```\n\nThen config webpack.config.js\n\n```javascript\nmodule: {\n  rules: [\n    {\n      test: /\\.css$/,\n      use: ['css-hot-loader'].concat(ExtractTextPlugin.extract({\n        fallback: 'style-loader',\n        use: 'css-loader'\n      })),\n    },\n  ]\n}\n```\n\n`css-hot-loader` should be the first loader before `extract-text-webpack-plugin`.\n\n### Attention\n\nThis plugin require the output css file name static. If output file name depend\non css content, for example `'bundle.[name].[contenthash].css'`, HMR reload will\nfail, more detail refer to [#21](https://github.com/shepherdwind/css-hot-loader/issues/21).\n\n### webpack 4\n\nThere is an issue to work with webpack4 [#37](https://github.com/shepherdwind/css-hot-loader/issues/37).\nPlease use [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin) to replace extract-text-webpack-plugin.\nConfig like this:\n\n```javascript\nmodule: {\n  rules: [\n    {\n      test: /\\.css/,\n      use: [\n        'css-hot-loader',\n        MiniCssExtractPlugin.loader,\n        'css-loader',\n      ],\n    },\n  ] // end rules\n},\n```\n\n### webpack 1.x\n\nConfig file example should like this\n\n```javascript\n  module: {\n    loaders: [{\n      test: /\\.less$/,\n      loaders: [\n        'css-hot-loader',\n        'extract-text-webpack-plugin',\n        'less',\n        ...\n       ],\n      include: path.join(__dirname, 'src')\n    }]\n  }\n```\n\n### options\n\n#### fileMap\n\nOption to define you css file reload rule. Since 1.1.0 .\n\nFor example `'css-hot-loader?fileMap='../css/{fileName}'` , which mean\n\n```\njs/foo.js => css/foo.css\n```\n\nDefault value is `{fileName}`.\n\nsee [#3](https://github.com/shepherdwind/css-hot-loader/issues/3).\n\n#### reloadAll\n\nForce reload all css file.\n\n### How\n\n\nThe realization principle of this loader is very simple. There are some assumed condition:\n\n1. css required by js , so css also be a js file\n2. The name of css file, which need hot reload , is the same as js file excuted.\n\nThe secend assumption is often established. If you use extract-text-webpack-plugin , entry `foo.js` will extract css file `foo.css`. This principle will help us to locate the url of css file extracted.\n\nBecause every css file will be a js module , every css file change can affect a module change. CSS hot loader will accept this kind change, then find extracted css file by `document.currentScript`.\n\nSo when a css file changed, We just need find which css file link element, and reload css file.\n\n### License\n\n(The MIT License)\n","gitHead":"2dbc7cc94733f63520ddf2928d1b7bce74ba1715","license":"ISC","scripts":{"ci":"npm run cov && cat ./coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js","cov":"jest --collectCoverageFrom='[\"*.js\"]' --coverage","pub":"npm version patch && npm publish && git push origin && git push origin --tags","test":"jest"},"_npmUser":{"name":"shepherdwind","email":"eward.song@gmail.com"},"homepage":"http://git.shepherdwind.com/css-hot-loader/","repository":{"url":"git://github.com/shepherdwind/css-hot-loader.git","type":"git"},"_npmVersion":"5.6.0","description":"css hot reload work with extract-text-webpack-plugin","directories":{},"maintainers":[{"name":"shepherdwind","email":"eward.song@gmail.com"}],"_nodeVersion":"8.11.2","dependencies":{"lodash":"^4.17.5","loader-utils":"^1.1.0","normalize-url":"^1.9.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^20.0.4","coveralls":"^2.13.1","strict-uri-encode":"^2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/css-hot-loader_1.4.2-beta_1534273506481_0.9532617193338873","host":"s3://npm-registry-packages"},"_id":"css-hot-loader@1.4.2-beta","version":"1.4.2-beta"}