Git Product home page Git Product logo

Comments (10)

jhildenbiddle avatar jhildenbiddle commented on August 25, 2024

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.

emmanuel-ma avatar emmanuel-ma commented on August 25, 2024

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.

jhildenbiddle avatar jhildenbiddle commented on August 25, 2024

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:

  1. 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.
  2. Replace startWith() (which isn't supported in IE or Safari < 9) for something more legacy-friendly.
  3. 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.

brodybits avatar brodybits commented on August 25, 2024

Shouldn't this be documented?

from css-vars-ponyfill.

jhildenbiddle avatar jhildenbiddle commented on August 25, 2024

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.

brodybits avatar brodybits commented on August 25, 2024

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.

jhildenbiddle avatar jhildenbiddle commented on August 25, 2024

@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.

emmanuel-ma avatar emmanuel-ma commented on August 25, 2024

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.

emmanuel-ma avatar emmanuel-ma commented on August 25, 2024

Hey @jhildenbiddle ,

With the new version 1.14.0 all is working great! Thanks, you really rock!

from css-vars-ponyfill.

jhildenbiddle avatar jhildenbiddle commented on August 25, 2024

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)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.