{"_id":"@airvert.com/isomorphic-style-loader","_rev":"3-7ec763f95c85fa512ed9f3c51c3c0414","name":"@airvert.com/isomorphic-style-loader","dist-tags":{"latest":"5.1.4"},"versions":{"5.1.0":{"name":"@airvert.com/isomorphic-style-loader","version":"5.1.0","description":"CSS style loader for Webpack optimized for critical path CSS rendering and isomoprhic web apps","repository":{"type":"git","url":"git+https://github.com/kriasoft/isomorphic-style-loader.git"},"author":{"name":"Kriasoft","email":"hello@kriasoft.com","url":"https://www.kriasoft.com"},"contributors":[{"name":"Konstantin Tarkus","email":"hello@tarkus.me","url":"https://medium.com/@tarkus"},{"name":"Vladimir Kutepov"}],"license":"MIT","keywords":["webpack","webpack-loader","webpack loader","loader","css","scss","style","styles","style-loader","style loader","react","reactjs","isomorphic","universal","critical-css","critical css","critical-path-css","critical path css"],"main":"index.js","dependencies":{"hoist-non-react-statics":"^3.0.0","loader-utils":"^1.2.3","react":"^16.3.0"},"bugs":{"url":"https://github.com/kriasoft/isomorphic-style-loader/issues"},"homepage":"https://github.com/kriasoft/isomorphic-style-loader#readme","_id":"@airvert.com/isomorphic-style-loader@5.1.0","_nodeVersion":"10.20.1","_npmVersion":"6.14.4","dist":{"integrity":"sha512-j5FoAlhMa7XAPrYjzGbhPQ7hs/7y2KRyaxWsDpfooODEnu+medrj3Ctsh4La/F8x+4ZKKzi2305V9pkQHgGKFQ==","shasum":"ea9dc71d370c907e537a6405366710eaffbe4a8d","tarball":"https://registry.npmjs.org/@airvert.com/isomorphic-style-loader/-/isomorphic-style-loader-5.1.0.tgz","fileCount":18,"unpackedSize":35069,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeu2dpCRA9TVsSAnZWagAAl3AP/0Um3YgBBV//yjX9wwvV\nnZg2iElDJuDD4gl2zR99hxL5iSGya4DxDjcUYbXH6qU92MA6kjYDafj7eArm\nM7s7Fjjg+wzIunts6mk7VHeLuCy/ykFM2YBpYYCNlO51yLez3d59uw/fD8MA\nk1wm8jPN4mlxCClRzQlRL4NEQyD9I2+Gn+LvpConI4z7pmqlMkSVRTSXbd/f\nvW1v48Auqqz61kAPLxtarnwTpIZD/1EuyEd1Kg1W0tbG/wc2ejXANl6DuFzV\nhetkKl0Yv30RZe2JCe51noJQU68qqgCRZNKjhKNnujc5bObSKNLON3MKkWcD\nWeHVeepeyRi5MNI9fz3oC0PXGp5B6TkvON6OiQF7N5B3ZL0fz1hFlPcpaXJ7\nvvgE5TjiWwHNNYJ/KeRtcJRO5h7X+0fuVHdcpUVfhpGxuHQzMDqLahLH93qO\nXq5gLPsb1prbYoK09ML05ZaxBkmhXE2QOYKddKS8PuKRXOJT8kFMXd486hHW\nh7LTUH9zcSq2aHpjqDf1K6UgudhuczzBMeQfZWT0ZVKqUevsydfPkmXLYbd/\nVmp6tDrbeLjUoO47hZu7hMXOJhiDPWUmx8CYODr45oPwGJukMrz4Boa5LH74\nfn9dVfd3koIoyfhaWedSWNSisquaicWxSi2esf4tdrsiOzrLaJbTiZp8UezJ\n9bHX\r\n=sEsc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCz8kp1SEuS6WVLtjFduS1U9i1hCi7A9h4e8r1Pcc0jzgIhAMnz0W1zjCl31J2BPUDx6XSGEpw8zV+cAlCbeGekxieQ"}]},"maintainers":[{"name":"thuanpq","email":"thuanpq.io@gmail.com"}],"_npmUser":{"name":"thuanpq","email":"thuanpq.io@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/isomorphic-style-loader_5.1.0_1589340009060_0.9783013561652356"},"_hasShrinkwrap":false},"5.1.3":{"name":"@airvert.com/isomorphic-style-loader","version":"5.1.3","description":"CSS style loader for Webpack optimized for critical path CSS rendering and isomoprhic web apps","repository":{"type":"git","url":"git+https://github.com/kriasoft/isomorphic-style-loader.git"},"author":{"name":"Kriasoft","email":"hello@kriasoft.com","url":"https://www.kriasoft.com"},"contributors":[{"name":"Konstantin Tarkus","email":"hello@tarkus.me","url":"https://medium.com/@tarkus"},{"name":"Vladimir Kutepov"}],"publishConfig":{"access":"public"},"license":"MIT","keywords":["webpack","webpack-loader","webpack loader","loader","css","scss","style","styles","style-loader","style loader","react","reactjs","isomorphic","universal","critical-css","critical css","critical-path-css","critical path css"],"main":"index.js","dependencies":{"hoist-non-react-statics":"^3.0.0","loader-utils":"^1.2.3","react":"^16.3.0"},"bugs":{"url":"https://github.com/kriasoft/isomorphic-style-loader/issues"},"homepage":"https://github.com/kriasoft/isomorphic-style-loader#readme","_id":"@airvert.com/isomorphic-style-loader@5.1.3","_nodeVersion":"10.20.1","_npmVersion":"6.14.5","dist":{"integrity":"sha512-colwPLmISTv0UY9+IuBIwmYKV3elR/kNFyemXMLOQM1SFPfR9qbih5wSOpt2bX7oUiGVatupf58JJli36q0omw==","shasum":"bc54775f4d387daccc382a7fd9c5f20d96cfda68","tarball":"https://registry.npmjs.org/@airvert.com/isomorphic-style-loader/-/isomorphic-style-loader-5.1.3.tgz","fileCount":18,"unpackedSize":35118,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeu4AwCRA9TVsSAnZWagAATtEP/13Yu3Hbkfmkb797mbx/\nkTvLcR7LKlUb2qF4XoZKZ3LmGML1IJLWGxQ22Xbzklc2Y4pkCj0atSA+JInL\nBSZZByajpBASTBHiC0OQEO4Ma30+R8htS67CiH05oHbKPwchFvh16Pu7lCKw\nH4r+324quZ7G9Z74F0BgEzpe2kVyGvfo2k58DJdm5ugV+19ckNGN4XHXKTZQ\n4p0prm8E49bMscW+8yiMOU3zyGzZIbtIBhUgmLcow3BHHz0a7sGLGwIIifw2\nHzlJWpCiuHoZI2cEyxc2CghuZuX7k0XQ+2L1Ae9dBfIaEffrjDX+Sm79Q0CO\nzDrdroyg/HlTW673s2lvre0/XLI5XVx8ZEOGEprk7Y6cIBavmh/mKnftRWYe\npQR1HllhrPULFj9IWW05C15b9bg/iaxsqXG3wylWGoZiydcyFoLLGawhNT1P\n9qTcNqnlo71zyDkXfpOg88ryr1iRTlGr8Ov8pCbvNiXXTbeXAwKv55GuFU1W\nHCc56EaHf0HdaHOQc6STpDDKTOGRYfhSVTl5jYQGOwrWaHPx09o5UooIdJS/\nqn5WYK8l9lGYf4/bN62b9i0FQfAWdz2yfUpruN1fniKxgUpbWZgZwL14Z+Cq\n9TrhLytcRjD5am/KcovmRnuD4OJ3dKkV7+C8SLOpLH3KN+qHL59vUewRalq7\nAn0H\r\n=qUtk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCc12myK/ZZa3R1g3cC4gjnPmfQpVP5mzCyjIznG32VgwIhANvx1mvgZ57h0LoNzynIxY5dg5scVsGBb2B7qUUu15Dn"}]},"maintainers":[{"name":"thuanpq","email":"thuanpq.io@gmail.com"}],"_npmUser":{"name":"thuanpq","email":"thuanpq.io@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/isomorphic-style-loader_5.1.3_1589346351909_0.7223338785726607"},"_hasShrinkwrap":false},"5.1.4":{"name":"@airvert.com/isomorphic-style-loader","version":"5.1.4","description":"CSS style loader for Webpack optimized for critical path CSS rendering and isomoprhic web apps","repository":{"type":"git","url":"git+https://github.com/kriasoft/isomorphic-style-loader.git"},"author":{"name":"Kriasoft","email":"hello@kriasoft.com","url":"https://www.kriasoft.com"},"contributors":[{"name":"Konstantin Tarkus","email":"hello@tarkus.me","url":"https://medium.com/@tarkus"},{"name":"Vladimir Kutepov"}],"publishConfig":{"access":"public"},"license":"MIT","keywords":["webpack","webpack-loader","webpack loader","loader","css","scss","style","styles","style-loader","style loader","react","reactjs","isomorphic","universal","critical-css","critical css","critical-path-css","critical path css"],"main":"index.js","dependencies":{"hoist-non-react-statics":"^3.0.0","loader-utils":"^1.2.3","react":"^16.3.0"},"bugs":{"url":"https://github.com/kriasoft/isomorphic-style-loader/issues"},"homepage":"https://github.com/kriasoft/isomorphic-style-loader#readme","_id":"@airvert.com/isomorphic-style-loader@5.1.4","_nodeVersion":"10.20.1","_npmVersion":"6.14.4","dist":{"integrity":"sha512-ouX7qTrtXbAOX/ZJpmb7tKQRIGhoW+AQ3Mg0ex1diDn4iit2IjiGPkPW5GmLRBXDSzwyo8B0yVtdr/rox1XWow==","shasum":"5a63d7ce75f73d94c6539025f19a401ff4e86881","tarball":"https://registry.npmjs.org/@airvert.com/isomorphic-style-loader/-/isomorphic-style-loader-5.1.4.tgz","fileCount":18,"unpackedSize":35118,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeu4FQCRA9TVsSAnZWagAAVlgP+wapOofO6e9THyc9h8v7\nexF+0O4jP1CAoil6DMf/1CsjQZHMfUHj7/HuIIPKKaQgGwWIZsZ3V+mR6Apl\npEzJ751VwR34DU9N8NcbZTqJCufg9HpTFfz98YU0zdJc1yELiWa5Ny3FakVX\nN7/AkHlO+ZnO3iP9Z/KwRud56wQedefEILg23CAnVhYra2/RNo4YWH4GgVFt\nwsEXqDV2lR5ernzTOj30iRiMuNhRVlyYQS6G8yEHcjR7/HyVrlOLf8zVI+ax\nji/9NBtDuNpfQj5HtDOluGeneJnVXn+OnReN24JHuEqkswQ5UZkRZbQ9GyPM\ncM9bXIK7DRYhOxEcB6Y3zsFlpB0uG9VGEYdi0PsKTVMm0w5SdChvKVHLegQh\n+QRXDKPwauYd+9+LTEboUyoHIWIQaNuZkOS03wWnv4NUKly7YpEzPFKw6L5r\nxt67nCYd9cEo0mWNcL/MgmarcTLPS2oQrYOmc5cWHXchwaKVdSox+jTTXKIT\noovOc2EIi5wVnmod7VRaHwM0eAhuMU9eJnXWQ7W2I4/Hl189RyQeRVyW+7br\nMqMPF1qRUQiBs1VfKe9T7+oStbkiru0CsQDhA9CG6GTVL4SbkNJFdFcicsTu\nqyjhadgA983tDq/lOH8Onqjndmhk2KHhEQlqRya+IZ73dB2r8p+fL74RAf01\nx8j1\r\n=/Qnu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCltVaYR0cdnbR3Ano8dxJTNnxBmUdClNr7aWqjWuGCrQIhAOew/3/G1tNzf2VH4Yat6qrPYq2GUss7Y8KYeSBMTJUc"}]},"maintainers":[{"name":"thuanpq","email":"thuanpq.io@gmail.com"}],"_npmUser":{"name":"thuanpq","email":"thuanpq.io@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/isomorphic-style-loader_5.1.4_1589346640291_0.5487241874413773"},"_hasShrinkwrap":false}},"time":{"created":"2020-05-13T03:20:08.868Z","5.1.0":"2020-05-13T03:20:09.160Z","modified":"2022-04-04T12:23:41.741Z","5.1.3":"2020-05-13T05:05:52.081Z","5.1.4":"2020-05-13T05:10:40.405Z"},"maintainers":[{"name":"thuanpq","email":"thuanpq.io@gmail.com"}],"description":"CSS style loader for Webpack optimized for critical path CSS rendering and isomoprhic web apps","homepage":"https://github.com/kriasoft/isomorphic-style-loader#readme","keywords":["webpack","webpack-loader","webpack loader","loader","css","scss","style","styles","style-loader","style loader","react","reactjs","isomorphic","universal","critical-css","critical css","critical-path-css","critical path css"],"repository":{"type":"git","url":"git+https://github.com/kriasoft/isomorphic-style-loader.git"},"contributors":[{"name":"Konstantin Tarkus","email":"hello@tarkus.me","url":"https://medium.com/@tarkus"},{"name":"Vladimir Kutepov"}],"author":{"name":"Kriasoft","email":"hello@kriasoft.com","url":"https://www.kriasoft.com"},"bugs":{"url":"https://github.com/kriasoft/isomorphic-style-loader/issues"},"license":"MIT","readme":"![](\"https://raw.githubusercontent.com/kriasoft/isomorphic-style-loader/8fe56ef8fba794e00bfbc9b6d731edf0f572d4e7/logo.png\")
\n\n# Isomorphic CSS style loader for [Webpack](http://webpack.github.io)\n\n[](https://www.npmjs.com/package/isomorphic-style-loader)\n[](https://www.npmjs.com/package/isomorphic-style-loader)\n[](https://bundlephobia.com/result?p=isomorphic-style-loader)\n[](https://gitter.im/kriasoft/react-starter-kit)\n\nCSS style loader for Webpack that works similarly to\n[style-loader](https://github.com/webpack/style-loader), but is optimized for\n[critical path CSS](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/)\nrendering and also works great in the context of\n[isomorphic apps](http://nerds.airbnb.com/isomorphic-javascript-future-web-apps/).\nIt provides two helper methods on to the `styles` object - `._insertCss()`\n(injects CSS into the DOM) and `._getCss()` (returns a CSS string).\n\nSee [getting started](#getting-started) | [changelog](CHANGELOG.md) | \nJoin [#react-starter-kit](https://gitter.im/kriasoft/react-starter-kit)\nchat room on Gitter to stay up to date\n\n## How to Install\n\n```bash\n$ npm install isomorphic-style-loader --save-dev\n```\n\n## Getting Started\n\n**Webpack configuration:**\n\n```js\nmodule.exports = {\n /* ... */\n module: {\n rules: [\n {\n test: /\\.css$/,\n use: [\n 'isomorphic-style-loader',\n {\n loader: 'css-loader',\n options: {\n importLoaders: 1\n }\n },\n 'postcss-loader'\n ]\n }\n ]\n }\n /* ... */\n}\n```\n\n**Note**: Configuration is the same for both client-side and server-side bundles. For more\ninformation visit https://webpack.js.org/configuration/module/.\n\n**React component example:**\n\n```css\n/* App.css */\n.root { padding: 10px }\n.title { color: red }\n```\n\n```js\n/* App.js */\nimport React from 'react'\nimport withStyles from 'isomorphic-style-loader/withStyles'\nimport s from './App.scss'\n\nfunction App(props, context) {\n return (\n \n
Hello, world!
\n \n )\n}\n\nexport default withStyles(s)(App) // <--\n```\n\n**P.S.**: It works great with [CSS Modules](https://github.com/css-modules/css-modules)!\nJust decorate your React component with the\n[withStyles](https://github.com/kriasoft/isomorphic-style-loader/blob/master/src/withStyles.js)\nhigher-order component, and pass a function to your React app via `insertCss`\ncontext variable (see [React's context API](https://reactjs.org/docs/context.html))\nthat either calls `styles._insertCss()` on a client or `styles._getCss()`\non the server. See server-side rendering example below:\n\n```js\nimport express from 'express'\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport StyleContext from 'isomorphic-style-loader/StyleContext'\nimport App from './App.js'\n\nconst server = express()\nconst port = process.env.PORT || 3000\n\n// Server-side rendering of the React app\nserver.get('*', (req, res, next) => {\n const css = new Set() // CSS for all rendered React components\n const insertCss = (...styles) => styles.forEach(style => css.add(style._getCss()))\n const body = ReactDOM.renderToString(\n \n \n \n )\n const html = `\n \n \n \n \n \n \n ${body}
\n \n `\n res.status(200).send(html)\n})\n\nserver.listen(port, () => {\n console.log(`Node.js app is running at http://localhost:${port}/`)\n})\n```\n\nIt should generate an HTML output similar to this one:\n\n```html\n\n \n My Application\n \n \n \n \n \n \n\n```\n\nRegardless of how many styles components there are in the `app.js` bundle,\nonly critical CSS is going to be rendered on the server inside the ``\nsection of HTML document. Critical CSS is what actually used on the\nrequested web page, effectively dealing with\n[FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\nissue and improving client-side performance.\nCSS of the unmounted components will be removed from the DOM.\n\nThen on client-side use [hydrate](https://reactjs.org/docs/react-dom.html#hydrate)\nto make your markup interactive:\n\n```js\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport StyleContext from 'isomorphic-style-loader/StyleContext'\nimport App from './App.js'\n\nconst insertCss = (...styles) => {\n const removeCss = styles.map(style => style._insertCss())\n return () => removeCss.forEach(dispose => dispose())\n}\n\nReactDOM.hydrate(\n \n \n ,\n document.getElementById('root')\n)\n```\n\n**React Hooks Support:**\n\nYou can also use `useStyles` inside your React Functional Components, instead of using `withStyles`.\nPlease note that you still need to pass `insertCss` function to `StyleContext.Provider` from top of the tree.\n\n```js\nimport React from 'react'\nimport useStyles from 'isomorphic-style-loader/useStyles'\nimport s from './App.scss'\n\nconst App = (props) => {\n useStyles(s);\n return (\n \n
Hello, world!
\n \n )\n};\n\nexport default App;\n```\n\n## Related Projects\n\n* [React Starter Kit](https://github.com/kriasoft/react-starter-kit) —\n Isomorphic web app boilerplate (Express.js, React, Relay)\n* [Node.js API Starter](https://github.com/kriasoft/nodejs-api-starter) —\n Project tempalte for building GraphQL API backends\n\n## License\n\nThe MIT License © 2015-present Kriasoft ([@kriasoft](https://twitter.com/kriasoft)).\nAll rights reserved.\n\n---\nMade with ♥ by\nKonstantin Tarkus ([@koistya](https://twitter.com/koistya), [blog](https://medium.com/@tarkus)),\nVladimir Kutepov ([frenzzy](https://github.com/frenzzy))\nand [contributors](https://github.com/kriasoft/isomorphic-style-loader/graphs/contributors)\n","readmeFilename":"README.md"}