Comments (10)
Hi @emmanuel-ma.
The ponyfill has supported this feature since 1.0. I've confirmed it is working as expected in the linked demo:
Notice the fallback test on line 17 in the CSS panel:
font-family: var(--fail, var(--font-family));
Notice how this declaration is transformed to font-family: sans-serif;
in the output.
Verify that --my-var
does not exist, and that --my-background
is set properly. You can also review the values stored in the cssVariables
object passed as the third argument to the options.onComplete
callback to see what CSS custom properties the ponyfill has detected.
Hope this helps.
from css-vars-ponyfill.
Hi @jhildenbiddle ,
Thanks for your support. You are right, the fallback values work great, your library is a beauty.
I am working with a React project and the issue was related with the CSS resource link. If its href property is linked to a non-existent CSS file, the HTTP request status is 200 and the retrieved content is the content of the index.html file of the project. I expected a 404 status and an options.onError
event but I don't find out the origin of this behavior yet. In the meantime, I had to use the following code to solve the issue.
cssVars({
// Exclude Bootstrap & Google CSS resources
exclude: '[href*=bootstrap],[href*=google]',
onSuccess(cssText, node, url) {
// If the HTTP request status to a non-existent CSS file is 200,
// then we need to verify that the content of the file is not
// the 'public/index.html' content.
if (cssText && cssText.startsWith('<!DOCTYPE html>')) {
// Excluding link tag
return ':root {}'; // empty CSS variables
}
return cssText;
}
});
Have you had a similar case?
from css-vars-ponyfill.
I haven't run into that, but it makes sense. Sounds like your app is just configured to redirect all 404 errors to index.html
.
I think your solution works well, although I'd propose a few small tweaks:
- Trim
cssText
and simplify the test to just an open bracket. This will account for spaces before the tag, upper/lower case, and other doctypes. - Replace
startWith()
(which isn't supported in IE or Safari < 9) for something more legacy-friendly. - Return
false
to tell the ponyfill to ignore the return value entirely. Returned:root {}
is fine too, but false is a little cleaner.
cssVars({
exclude: '[href*=bootstrap],[href*=google]',
onSuccess(cssText, node, url) {
const isHTML = cssText.trim().charAt(0) === '<';
return isHTML ? false : cssText;
}
});
from css-vars-ponyfill.
Shouldn't this be documented?
from css-vars-ponyfill.
Better yet, perhaps the above check (first character of the trim()
ed XMLHttpRequest.responseText !== "<") should just be baked into the ponyfill. It seems like a reasonable check, since I don't know of any reason why a valid CSS file would begin with an open bracket. To make the check slightly more complete, I can also check for the existence of at least one pair of curly braces (.{}
)
If this check is added, I would also call options.onError
and log some sort of "response does not appear to be valid CSS" error to the console (assuming options.silent
is false
) when the first character of the trim()
ed XMLHttpRequest.responseText === "<".
Thoughts?
from css-vars-ponyfill.
Sounds good to me. I neglected to mention that I am actually a newbie with CSS vars, hope we get feedback from people with more expertise. Also hoping to see a more appropriate label on this issue:)
from css-vars-ponyfill.
@emmanuel-ma --
I've updated the ponyfill to perform the above test automatically. You should be able to remove your onSuccess
callback after you've updated the ponyfill to 1.14.0.
FWIW, the update was actually made in the get-css-data lib which handles fetching <link>
CSS text for the ponyfill.
Hope this addresses your issue. Let me know, then I'll close this issue.
Thanks!
from css-vars-ponyfill.
return isHTML ? false : cssText;
Hi @jhildenbiddle ,
Thanks for your tweaks!
Currently I am using the version 1.12.2 and when I use false in the return of the onSuccess method seems like the processed CSS is not skipped. However, if I use return isHTML ? ':root {}' : cssText;
it works fine, maybe it could be a bug! I will update to the version 1.14.0 to check it out.
from css-vars-ponyfill.
Hey @jhildenbiddle ,
With the new version 1.14.0 all is working great! Thanks, you really rock!
from css-vars-ponyfill.
Excellent! Good to hear the new version is working for you, @emmanuel-ma.
You were right about the options.onSuccess
callback not handling a return value of false
as it should have. This has been fixed in 1.15.0, and the callback now handles other falsey values properly as well (e.g. null
, 0
, ""
).
Thanks for taking the time to file these issues. They make the ponyfill better for everyone! 😄
from css-vars-ponyfill.
Related Issues (20)
- works in IE dev mode, but not prod mode HOT 2
- CSS XHR error HOT 2
- Not working IE11 in Prod Mode HOT 3
- How to switch themes without browser reload using css variables? HOT 1
- v2.4.4 no longer transpiles to pure ECMAScript 5 HOT 1
- `CSS.supports()` doesn't support in IE11, but css-vars-ponyfill insert it into build artifact. HOT 1
- Option to skip formatting CSS HOT 3
- Does this library works for dynamically added CSS? HOT 1
- Am i missing something for use in Angular 10+? HOT 1
- the page's efficiency HOT 1
- Doesn't work with styled-components createGlobalStyle HOT 3
- Can I use it in Nuxtjs? HOT 2
- run onComplete callback too slow HOT 8
- [bug] link set setAttribute disabled not work HOT 1
- HasVarChange has a calculation problem HOT 1
- `fixKeyframes` throws error when using shadow DOM + legacy browsers HOT 1
- IE11 js runs too slowly. Can you use this when packaging webpacks? HOT 1
- map file HOT 1
- cssVars():: CSS parse error: missing '}' HOT 1
- ie 9 10 Use without effect HOT 3
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 css-vars-ponyfill.