Comments (4)
Is there a convenient way to rewrite relative paths in url()?
The critical css is placed in head section and relative paths copied from css files are usually broken due to the files are located in different path than index.php or something?
I don't understand the issue based on this description. Can you produce an example with ins and outs?
from usus.
Sure
There's css file style.css with content
.block {
background-image: url(./images/img.jpg)
}
The css-file can be placed anywhere. Let's say it's located in assets/styles
We include css by
<link rel="stylesheet" href="assets/styles/style.css"/>
When the page is rendered the image is found correctly: url(./images/img.jpg) contains a relative path to the image. It's relative on the css-file location. So assets/styles/ + ./images/img.jpg
gives the correct path to image: site.com/assets/styles/images/img.jpg
When we generate critical css we get the same code
.block {
background-image: url(./images/img.jpg)
}
But being included in the head section in <style>...</style>
the critical css ships broken links to images:
url(./images/img.jpg) is perceived by the browser as current_url/images/img.jpg .
So the question is: is there a native way to generate critical css avoiding the issue?
from usus.
Oh I see. Thats an issue.
A fix would require resolving these paths and constructing an absolute resource path.
There is no such behaviour available at the moment.
The reason I have not run into such case is because all my images are being referred with an absolute path.
from usus.
Same issue fixed in minimalcss peterbe/minimalcss#28. May be useful as reference
from usus.
Related Issues (20)
- What makes styles 'critical'? HOT 2
- Pseudo classes missing from extracted CSS? HOT 2
- Skip `inlineStyles` when already inline? HOT 2
- preload non-critical CSS pattern? HOT 2
- Add an option to preload fonts using rel=preload HOT 9
- Add tests
- Exclude CSS loaded by alien frames (e.g. third party scripts)
- Add a chart illustrating how usus integrates into the web stack
- Detect if a page responded with a 404 statusCode HOT 2
- Custom page load event. HOT 1
- Engines definition excludes node 6
- Ability to pass down custom Chrome settings HOT 1
- Prevent inline styling HOT 3
- media queries not included
- CentOS - ECONNREFUSED ip:port
- [Ask] How to Open Raw HTML (.html) in React 'Public' Folder?
- await is a reserved word (12:12) HOT 1
- Create examples for Node JS SEO crawlers use
- just prints to console no way of saving file 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 usus.