{"bugs":{"url":"https://github.com/shepherdwind/css-hot-loader/issues"},"dist":{"shasum":"dbe0a963ecdb5a50830fd7ed5e27538607ba94d6","tarball":"https://registry.npmjs.org/css-hot-loader/-/css-hot-loader-1.4.0-beta.tgz","fileCount":7,"integrity":"sha512-6300VUANG4CxM8njKEx13WjgIb3KCNX1j42i7kgqGSRXLnFJzT2H91l//MYDxDW9Da4vjxBVIINI7k+Nj/tOLA==","signatures":[{"sig":"MEYCIQCwDBFHctRtHxd89HhhGWnC+Gqhurpu83Gr23jfbC0EXwIhANieTaSGhvN3feJXCBzgfzUFqsPmSRgHZIbVgCPDQXWr","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":11822,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbRaPxCRA9TVsSAnZWagAASb4P/2tuls7KIpgrrhxQ8ybc\nc/utmJuWr8YO5Kore+sfhIQDFgJw71k5MCaQ22jWYVqRD6ef2zIq9tXABifh\npVYjq7EAewPRtBhYMd/2ou3r6Epan+AXgQsVETEd7S/6OLkSXfzddmQtZlxp\nRSCPqhJNS4w3A1OgXzdSezsAnDpBwDyoAZzL21s7+jF427ChQpxVS8q18mIZ\nV6BvycYJ/SqZ+508KXqQv2QF7YqGYUt899jbKLU4eUiSENw31ntjhdQ4TjEe\nAj2XlHxIP9LweJ/nL1Xp7DOJlywoAaxm/6NMCGbv38ExAdl5rr9YQonHJMmH\n+rG5DcbGGNagmJgYqHt+9opI4xpv0vMZbfQRDd+4bytz09UaCldl/LnMa6fv\nR0OfYADmQdz2rwZbGHaRDFrpH4VY8Xgvfs+u1DwRU1U/BuA98lrEaxG2n6tZ\nXhm8M+WIdRce38Xr11VEKMcRPTuDd4aSV7mFTiYhdwhwpkRdefAistFbeCFV\n72vRH5X1u9V5F+TDUsQ0gn2X4WEqcVTV7rznE/xLcUXOMIADa2WlxtFkggVM\n/sB0mOOg4yq5qtRJqB7TVTieTZBcPSnX32EvwJ0DvFXNL1HaPMDx2QityllP\nCKl30tCb61KArN4V2yQr1nJAYcYXNYDmmWHhg/QKdo81DfOk9R52ClODyLdr\nzquE\r\n=6HQv\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\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 write this loader, which supprot 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### 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":"5a8ac3992739e90b8ec0fda575e18e5c5b28d4e7","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.0-beta_1531290609880_0.9440055342393645","host":"s3://npm-registry-packages"},"_id":"css-hot-loader@1.4.0-beta","version":"1.4.0-beta"}