Comments (1)
The architecture Critters uses is quite different from used-styles
, and can't be done in a streaming manner. used-styles
does a loose analysis of your code (with specific workarounds for things like React components) to make an educated guess at which styles are used by a set of files. Critters does an analysis of an HTML document in order to determine with 100% certainty which styles are used by that document.
In a theoretical React-style streaming SSR setup, there is no reliable way to analyze generated HTML as a document until renderToNodeStream completes. Critters could potentially use the unfinished buffered HTML output to begin downloading resources, but this is not natively supported by JSDOM - we'd essentially be implementing the browser's preload scanner, which is a rather complex thing to do. It requires detecting URLs in a mixture of HTML, CSS and JS, but also obtaining enough context during scanning to determine whether a given URL is actually a stylesheet or not.
Also, this is a bit off-topic, but FWIW it's extraordinarily unlikely that streaming SSR offers performance benefits. The outcome is generally a stream with a single utf8-encoded chunk due to the default high watermark for HTTP in Node being 16kb, which means the only difference between streaming and non-streaming is that streaming incurs buffering and book-keeping overhead. I covered this issue in a talk last year.
Finally, my guess is that this question is perhaps related to performance. Streaming is one potential way to spread work out over time (of debatable benefit given the above), but I think Critters' implementation could be made considerably faster without requiring an interface change. Currently it creates new JSDOM document instances for every instantiation, and does not memoize or optimize selector execution at all. Both of these things end up consuming more time than they should. They're also both things that were introduced after the original release, which used a much faster purpose-built DOM implementation and a faster CSS selector engine. Perhaps performance improvements would be reason enough to consider moving back to something more minimal like that.
from critters.
Related Issues (20)
- Branching webpack versions
- `pruneSource: true` not pruning files
- Non-critical rules are erased from inline styles HOT 6
- Local font source is not recognized as valid
- relative urls within css
- Allow attributes to be set on generated style tag for CSP
- How to use critters in next.js v13 HOT 2
- critters de-encodes html entities HOT 1
- Parse include/exclude markers with @preserve or /*! hints
- Cannot read properties of undefined (reading 'setAttribute') HOT 6
- Disable font-face exclusion
- The `allowRules` option is missing in the types and documentation
- Passing includeSelectors config HOT 2
- Add the option of a prefix path
- Used css attribute selector gets removed by critters
- Feature Request: Expose method `processCss` which returns inlined css only
- Simple Example fails
- Building Angular 17.1 with Angular CLI when using Bootstrap 5.3.2 results in Critical CSS Inlining failing because 2 rules are skipped due to selector errors HOT 9
- 2 different lock files
- The css modules key styles are not inlined when configuring generateScopedName. HOT 1
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 critters.