Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

DOMException: Failed to read the 'cssRules' property from 'CSSStyleSheet' (file system based access)

See original GitHub issue

Bug report

Describe the bug

Environments using local-style resources (think of file://) might fail initialization because in this context scripts lack permissions to access .cssRules of linked stylesheets.

The topic is covered here:

https://stackoverflow.com/questions/48753691/cannot-access-cssrules-from-local-css-file-in-chrome-64

To Reproduce

Since this is primarily an environment-related (and probably rare) issue, I won’t provide a working example. But I think it is obvious that the issue originates from…

https://github.com/modulz/stitches/blob/canary/packages/core/src/sheet.js LINE 36 and 38

A code snippet to reproduce this, when accessed e.g. in Chrome via local file system access:

<html>
  <body>
    <link href="./path-to/some.css" rel="stylesheet">
    <script src="./path-to/some-script-launching-stitches.js"></script>
  </body>
</html>

Concerns

While this might seem like a rare issue, I want to express some concerns about how this could affect special environments like e.g. hybrid apps on iOS relying on local access.

UPDATE: I can confirm that this issue affects iOS when using WKWebView with loadFileURL/allowingReadAccessToURL IF there’s a local stylesheet linked.

Expected behavior

Improved detection of .cssRules access rights.

System information

OS: macOS
Chrome
Version of Stitches: 1.0.0

Issue Analytics

State:
Created 2 years ago
Reactions:1
Comments:9 (5 by maintainers)

Top GitHub Comments

2reactions

hadihallakcommented, Dec 2, 2021

Published under 1.2.6 🎉

1reaction

megawebmastercommented, Oct 20, 2021

@jonathantneal - I just had an idea how to overcome this issue without breaking current code 😄

At the moment Stitches checks whether CSS sheet is usable with this line if (sheet.href && !sheet.href.startsWith(location.origin)) continue. What about adding a check if we can access (and maybe modify?) sheet.cssRules property with such code:

function isSheetAccessible(sheet) {
  if (sheet.href && !sheet.href.startsWith(location.origin)) return false;

  try {
    sheet.cssRules;

    // We have access
    return true;
  } catch(e) {
    // We don't have access
    return false;
  }
}

This way if Stitches cannot find any usable CSS style tag it will create it’s own and keep working - it just won’t hydrate existing styles.

I went ahead and created a PR for you to test and see 💪