Installations
npm install @toruslabs/isomorphic-style-loaderDeveloper Guide
Typescript
No
Module System
CommonJS
Node Version
16.16.0
NPM Version
8.19.3
Score
66.6
Supply Chain
90.8
Quality
80.3
Maintenance
100
Vulnerability
100
License
Releases
Contributors
Unable to fetch Contributors
Languages
JavaScript (100%)
Love this project? Help keep it running — sponsor us today! 🚀
Developer
Download Statistics
Total Downloads
7,433
Last Day
2
Last Week
41
Last Month
180
Last Year
3,894
GitHub Statistics
MIT License
1,271 Stars
106 Commits
144 Forks
19 Watchers
1 Branches
33 Contributors
Updated on Jan 22, 2025
Bundle Size
77.08 kB
Minified
23.19 kB
Minified + Gzipped
Maintainers
Package Meta Information
Latest Version
5.3.3
Package Id
@toruslabs/isomorphic-style-loader@5.3.3
Unpacked Size
37.66 kB
Size
10.52 kB
File Count
18
NPM Version
8.19.3
Node Version
16.16.0
Total Downloads
Cumulative downloads
Total Downloads
7,433
Last Day
100%
2
Compared to previous day
Last Week
105%
41
Compared to previous week
Last Month
5.3%
180
Compared to previous month
Last Year
45.2%
3,894
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
3
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
3 commit(s) and 2 issue activity found in the last 90 days -- score normalized to 4
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.8
/10
Last Scanned on 2025-02-10
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