Comments (5)
-
With "real" interleaving (possible only in stream rendering) moving should be mandatory before hydration to match generated HTML. However I never tested this moment, considering tested by for example
emotion
- some technical details were borrowed from their transformers.
However there is another reason to move styles - you have to hoist them above "real" style definitions to let "real" styles override them if needed. This is more bound to how you write your styles. -
Removing is optional. However there is assumption, untested for modern browsers, that the less rules you have - the faster it runs.
How you write your styles
Let's imagine you have a critical styles written in BEM notation:
.myStyle {
color: red;
}
.myStyle--version1 {
color: blue;
}
And there is also one more modifier in the "real" styles
.myStyle--version2 {
color: green;
}
If critical styles would be defined in HTML, and "real" style in the header - due to specificity rules .myStyle
will always override .myStyle--version2
, which is not what you probably want :)
from used-styles.
Regarding the specificity, it makes sense. Otherwise it might introduce weird css issues. To be safe, I went with moving and removing the interleaved styles.
For anyone interested, I came up with this solution:
In the header template, I introduce a resolved and a count variable for any style tag:
<script>
window.__styleTagsResolved__ = 0;
window.__styleTagsCount__ = <%- styleTags.length %>;
</script>
<% styleTags.forEach(function(tag) { %>
<%- tag %>
<% }); %>
StyleTags are defined like this (pattern for non-blocking style tags adopted from this post):
createNonBlockingStyleTag = (href: string) =>
`<link rel="stylesheet" media="print" href="${href}" onload="this.onload=null; this.media='all'; window.__styleTagsResolved__++;">
<noscript><link rel="stylesheet" href="${href}"></noscript>`;
Notice that on resolving of any the the style tags, the number of resolved style tags is counted up.
On the client, before any hydration takes place, I do this to move the styles into the head first and then recursively check if the styles can be removed:
import { moveStyles, removeStyles } from 'used-styles/moveStyles';
moveStyles();
function checkRemoveStyles() {
if (window.__styleTagsResolved__ < window.__styleTagsCount__) {
setTimeout(checkRemoveStyles, 50);
return;
}
removeStyles();
}
checkRemoveStyles();
from used-styles.
Speaking of non-blocking style tags - actually webpack
mini-css-plugin
and friends might inject "used" .css
files on JS start, and consume some of network bandwidth in the moments when it's really needed for other resources.
It might be a good idea to prevent such behaviour.
- create
style
tags withdata-href
attribute refererring used style - convert them to style tags manually when ready
from used-styles.
interesting idea, thanks for sharing. in my case all script tags (which are preloaded) are inserted at the very bottom of the page and attributed async
, so rendering should have already been done the browser (using the critical interleaved styles) by the time any JS is executed.
do you think it might still be an issue? what "other resources" are you thinking of? will images be affected? or other chunks of JS which are loaded at runtime?
from used-styles.
Other scripts might be affected, as long as styles are usually more "important" than everything else, while in this particular case could be delated.
from used-styles.
Related Issues (20)
- media query support HOT 5
- Support publicURL HOT 8
- Inline full files and exclude them from loading twice HOT 1
- Styles priority HOT 1
- Correct rules order HOT 1
- detect when classes from different files are used on single node
- No dist in published package HOT 3
- Below The Fold
- Unlock selectors on discovery HOT 1
- Styles with same selector and content but different media are missing
- Usage example for CRA HOT 2
- `:not()` pseudo selector support HOT 2
- React 17 support HOT 2
- Rule filtering
- Cloudflare workers compatibility HOT 4
- React 18 (WebPack 5) doesn't work HOT 1
- missing css HOT 1
- [Q/A] "used-style" is simple ? HOT 2
- CSS truncated incorrectly HOT 6
- renderToPipeableStream examples HOT 15
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from used-styles.