Gathering detailed insights and metrics for @toruslabs/isomorphic-style-loader
Gathering detailed insights and metrics for @toruslabs/isomorphic-style-loader
CSS style loader for Webpack that is optimized for isomorphic (universal) web apps.
Installations
npm install @toruslabs/isomorphic-style-loaderDeveloper Guide
BETA
Typescript
No
Module System
CommonJS
Node Version
20.16.0
NPM Version
10.8.1
Score
63.7
Supply Chain
90.5
Quality
81.2
Maintenance
100
Vulnerability
100
License
Releases
15
Languages
1
JavaScript
JavaScript (100%)
Developer
Download Statistics
Total Downloads
8,013
Last Day
2
Last Week
26
Last Month
135
Last Year
3,544
GitHub Statistics
MIT License
1,271 Stars
106 Commits
144 Forks
18 Watchers
1 Branches
33 Contributors
Updated on Jun 30, 2025
Bundle Size
77.08 kB
Minified
23.19 kB
Minified + Gzipped
Maintainers
5
Package Meta Information
Latest Version
5.4.0
Package Id
@toruslabs/isomorphic-style-loader@5.4.0
Unpacked Size
38.56 kB
Size
10.91 kB
File Count
18
NPM Version
10.8.1
Node Version
20.16.0
Published on
Mar 20, 2025
Total Downloads
Cumulative downloads
Total Downloads
8,013
Last Day
-75%
2
Compared to previous day
Last Week
-50%
26
Compared to previous week
Last Month
-36.6%
135
Compared to previous month
Last Year
27.6%
3,544
Compared to previous year
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
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 2025-06-30
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