Gathering detailed insights and metrics for isomorphic-style-loader
Gathering detailed insights and metrics for isomorphic-style-loader
CSS style loader for Webpack that is optimized for isomorphic (universal) web apps.
Installations
npm install isomorphic-style-loaderDeveloper
Developer Guide
BETA
Module System
CommonJS
Min. Node Version
Typescript Support
No
Node Version
NPM Version
Statistics
1,273 Stars
103 Commits
144 Forks
19 Watching
1 Branches
31 Contributors
Updated on 06 Nov 2024
Bundle Size
77.08 kB
Minified
23.19 kB
Minified + Gzipped
Languages
JavaScript (100%)
Total Downloads
Cumulative downloads
Total Downloads
17,746,882
Last day
-16%
9,176
Compared to previous day
Last week
-12.9%
47,868
Compared to previous week
Last month
-6.5%
234,043
Compared to previous month
Last year
-5.6%
3,528,234
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
3
Versions
Isomorphic CSS style loader for Webpack
CSS style loader for Webpack that works similarly to
style-loader, but is optimized for
critical path CSS
rendering and also works great in the context of
isomorphic apps.
It provides two helper methods on to the styles object - ._insertCss()
(injects CSS into the DOM) and ._getCss() (returns a CSS string).
See getting started | changelog | Join #isomorphic-style-loader chat room on Discord to stay up to date
How to Install
1$ npm install isomorphic-style-loader --save-dev
Getting Started
Webpack configuration:
1module.exports = { 2 /* ... */ 3 module: { 4 rules: [ 5 { 6 test: /\.css$/, 7 use: [ 8 'isomorphic-style-loader', 9 { 10 loader: 'css-loader', 11 options: { 12 importLoaders: 1 13 } 14 }, 15 'postcss-loader' 16 ] 17 } 18 ] 19 } 20 /* ... */ 21}
Note: Configuration is the same for both client-side and server-side bundles. For more information visit https://webpack.js.org/configuration/module/.
React component example:
1/* App.css */ 2.root { padding: 10px } 3.title { color: red }
1/* App.js */ 2import React from 'react' 3import withStyles from 'isomorphic-style-loader/withStyles' 4import s from './App.scss' 5 6function App(props, context) { 7 return ( 8 <div className={s.root}> 9 <h1 className={s.title}>Hello, world!</h1> 10 </div> 11 ) 12} 13 14export default withStyles(s)(App) // <--
P.S.: It works great with CSS Modules!
Just decorate your React component with the
withStyles
higher-order component, and pass a function to your React app via insertCss
context variable (see React's context API)
that either calls styles._insertCss() on a client or styles._getCss()
on the server. See server-side rendering example below:
1import express from 'express' 2import React from 'react' 3import ReactDOM from 'react-dom' 4import StyleContext from 'isomorphic-style-loader/StyleContext' 5import App from './App.js' 6 7const server = express() 8const port = process.env.PORT || 3000 9 10// Server-side rendering of the React app 11server.get('*', (req, res, next) => { 12 const css = new Set() // CSS for all rendered React components 13 const insertCss = (...styles) => styles.forEach(style => css.add(style._getCss())) 14 const body = ReactDOM.renderToString( 15 <StyleContext.Provider value={{ insertCss }}> 16 <App /> 17 </StyleContext.Provider> 18 ) 19 const html = `<!doctype html> 20 <html> 21 <head> 22 <script src="client.js" defer></script> 23 <style>${[...css].join('')}</style> 24 </head> 25 <body> 26 <div id="root">${body}</div> 27 </body> 28 </html>` 29 res.status(200).send(html) 30}) 31 32server.listen(port, () => { 33 console.log(`Node.js app is running at http://localhost:${port}/`) 34})
It should generate an HTML output similar to this one:
1<html> 2 <head> 3 <title>My Application</title> 4 <script async src="/client.js"></script> 5 <style type="text/css"> 6 .App_root_Hi8 { padding: 10px } 7 .App_title_e9Q { color: red } 8 </style> 9 </head> 10 <body> 11 <div id="root"> 12 <div class="App_root_Hi8"> 13 <h1 class="App_title_e9Q">Hello, World!</h1> 14 </div> 15 </div> 16 </body> 17</html>
Regardless of how many styles components there are in the app.js bundle,
only critical CSS is going to be rendered on the server inside the <head>
section of HTML document. Critical CSS is what actually used on the
requested web page, effectively dealing with
FOUC
issue and improving client-side performance.
CSS of the unmounted components will be removed from the DOM.
Then on client-side use hydrate to make your markup interactive:
1import React from 'react' 2import ReactDOM from 'react-dom' 3import StyleContext from 'isomorphic-style-loader/StyleContext' 4import App from './App.js' 5 6const insertCss = (...styles) => { 7 const removeCss = styles.map(style => style._insertCss()) 8 return () => removeCss.forEach(dispose => dispose()) 9} 10 11ReactDOM.hydrate( 12 <StyleContext.Provider value={{ insertCss }}> 13 <App /> 14 </StyleContext.Provider>, 15 document.getElementById('root') 16)
React Hooks Support:
You can also use useStyles inside your React Functional Components, instead of using withStyles.
Please note that you still need to pass insertCss function to StyleContext.Provider from top of the tree.
1import React from 'react' 2import useStyles from 'isomorphic-style-loader/useStyles' 3import s from './App.scss' 4 5const App = (props) => { 6 useStyles(s); 7 return ( 8 <div className={s.root}> 9 <h1 className={s.title}>Hello, world!</h1> 10 </div> 11 ) 12}; 13 14export default App;
Related Projects
- React Starter Kit — Isomorphic web app boilerplate (Express.js, React, Relay)
- Node.js API Starter — Project tempalte for building GraphQL API backends
License
The MIT License © 2015-present Kriasoft (@kriasoft). All rights reserved.
Made with ♥ by Konstantin Tarkus (@koistya, blog), Vladimir Kutepov (frenzzy) and contributors
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
0 existing vulnerabilities detected
Reason
license file detected
Details
- Info: project has a license file: LICENSE.txt:0
- Info: FSF or OSI recognized license: MIT License: LICENSE.txt:0
Reason
Found 17/30 approved changesets -- score normalized to 5
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 20 are checked with a SAST tool
Score
4.2
/10
Last Scanned on 2024-11-18
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More