CSS custom properties definitions are returned as lowercase by CSSRule.cssText

Confirmed Issue #12202135 • Assigned to Saqib A.

Details

Author
Jerome L.
Created
Jun 1, 2017
Privacy
This issue is public.
Found in
  • Microsoft Edge
Reports
Reported by 1 person

Sign in to watch or report this issue.

Steps to reproduce

Microsoft Edge 40.15063.0.0
Microsoft EdgeHTML 15.15063

When accessing a stylesheet’s rules through CSSRule.cssText, the custom properties definitions are in lowercase, even if the initial code contained uppercase characters.

:root {
  --test-myColor: red;
}

span {
  color: var(--test-myColor);
}
Array.from(document.styleSheets[index].cssRules)
  .forEach((rule) => console.log(rule.cssText))
;

Console:

:root { --test-mycolor: red; }
span { color: var(--test-myColor); } 

See the issue on codepen

This can be a bit problematic when one needs to process the rules in one way or another. In our app, we’re doing a bit of search and replace in our stylesheet rules, which has for effect of breaking our custom properties definitions in Edge.

Attachments

0 attachments

    Comments and activity

    • Changed Steps to Reproduce

    • Microsoft Edge Team

      Changed Assigned To to “James M.”

      Changed Assigned To to “Bogdan B.”

      Changed Assigned To from “Bogdan B.” to “Saqib A.”

      Changed Status to “Confirmed”

      Changed Title from “CSS custom properties (variables) definitions are returned as lowercase by CSSRule.cssText” to “CSS custom properties definitions are returned as lowercase by CSSRule.cssText”

    You need to sign in to your Microsoft account to add a comment.

    Sign in