Comments (2)
@developit Thank you Jason. Yeah, I've basically decided to go with a backend solution for now, and use something like critters once I finally get around to decoupling my frontend and doing an SPA frontend etc which will run better with webpack type thinking. Thanks!
from critters.
Seems like the best solution here would be to add a "placeholder" HTML file to your Webpack build (it could likely just be empty), and then grab the CSS from it once the build is completed. You could use html-webpack-plugin
for this.
However, the issue you're going to run into with any of these solutions is that webpack has no knowledge of what your page looks like. In order to extract Critical CSS, we need to have the page available so all the CSS selectors can be evaluated to see if they match things. Without that, it would just extract nothing.
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 5
- 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.