How to make it work with CDN?

[abozhinov]

Hi,
can anyone share with me a working solution with CDN & element-queries? In my local machine, I use webpack dev server and try to set CORS headers but this doesn't help.

@marcj this is my webpack config:
headers: {
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS",
"Access-Control-Allow-Headers": "X-Requested-With, content-type, Authorization"
}

[marcj]

What error do you get? Which browser? Please also post a repo where we can replicate the issue.

[enventa]

I cannot provide any detail, but I can confirm that when using a CDN, no matter which browser, we need to exclude CSS files for css-element-queries to work fine. Don't know the reason why, but that happens.

[benjamingr]

This is because Chrome no longer allows access to cross-origin CSS through the DOM.

This is - css-element-queries can't get access to those rules to parse. The CDN would need to contain an Access-Control-Allow-Origin (which is possible on paid CDNs). See this question on how to load it with XHR, attach it and then call .init if you do this.

This is also a suitable workaround: https://stackoverflow.com/a/10981062

[nathanhannig]

I worked on a site using a Wordpress plugin which uses css-element-queries.

The CDN plugin I was using called LSCache had an option to exclude serving specific files over CDN.

I had to exclude the affected CSS files to resolve this issue. Not a desirable solution, short of removing the used plugin which depends on this JS module. Hope this helps anyone in the future with a workaround.

[enventa]

@marcj any update on this? Is there anything I can do to help you with this?

[marcj]

@enventa there's nothing we can do. It's a browser security issue you need to solve via CORS headers when serving the css files via a CDN. 🤷‍♂️

[enventa]

@marcj thanks for answering. The thing is that CSS files are being downloaded and used by the browser (styles are applied correctly)... so they are not blocked or whatsoever. The issue, in my case, is that the "min-width" attribute your javascript adds to the DOM is not there. I pointed this out in issue #264

[marcj]

@enventa those attributes are not there because the library can not read the CSS rules from a CDN that is incorrectly configured. Adding correct CORS headers allows the JS file to read the CSS rules, then those attributes can be set.

[enventa]

After testing all proposed solutions in this thread, my results are:

@marcj Adding a "Access-Control-Allow-Origin": "*" header doesn't fix the issue. JS cannot read CSS files downloaded from a CDN. It is absolutely a CORS issue, but I'm not familiar with CORS, so can't find the right configuration to make it work.

@nathanhannig yes, that's what I found. As you say, it works but it is not a real solution. Just a workaround.

@benjamingr Could you provide some more detail on which headers should be returned and which value they should have? Maybe the domain name instead of *? Setting that header to * doesn't work for me on Kinsta CDN.

@abozhinov my last try that actually works was to add element-query CSS rules into a <style></style> tag in the head of my HTML. As @marcj's JS parses all CSS rules in your document, they are parsed too, so it works. I wouldn't say it is the best solution at all, specially if you have extensive related CSS, but, at least, you don't need to exclude anything from CDN -which many providers doesn't support.

I really hope someone with CORS knowledge and experience can provide some insight on how to properly configure headers to allow JS read CSS files downloaded from an external -different origin- CDN.

[jclusso]

@marcj what is the deal with this and #102? I've added the proper CORS headers with no luck. Also, how come I don't see a CORS error in Chrome for this?

[jclusso]

@marcj I figured out the solution.

All you need is "Access-Control-Allow-Origin": "*" (or your host) on your CSS files. The other important thing is you need to add crossorigin on the link tag. Until I added crossorigin to the link tag it wouldn't work.

Also, maybe you can add this to the README. I spent quite a lot of time messing with this all to find out this very simple solution.