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.

[FEATURE REQUEST] Config to make internal styles in head AND to insert rules directly to the CSSStyleSheet

See original GitHub issue

Related issue

[Material-UI 4.0.1-beta] Unwanted CSSStyleSheet.insertRule behavior when using styled (passing a function as a param for styles)

Issues

Issue	Effect
JSS doesn’t follow the exact same process to apply styles for all cases by default. At least two cases are already documented in the related issue above.	Worsens developer experience and performance

How to solve

Set the default mode to insert style rules directly to the CSSStyleSheet using CSSStyleSheet.insertRule

instead of doing the extra step of inlining styles to the <head>, making styles internal and leaving the browser to process style rules from the HTML finally applying them to the CSSStyleSheet of the StyleSheet interface.

Issue Analytics

State:
Created 4 years ago
Comments:17 (11 by maintainers)

Top GitHub Comments

1reaction

kofcommented, Jun 12, 2019

I have been playing around with a way to render styles in dev mode over DOM API to make it visible in style tags DOM inspector and editable in styles tab. I think I have some ideas. Opening a new clean issue #1125

1reaction

kofcommented, May 15, 2019

I put thumbs up when I understand the message. If you want to talk, ping me in dm on twitter or gitter. I honestly lost your point and at the moment don’t really know what you want.

Top Results From Across the Web

Style Sheets in HTML documents - W3C

Introduction to style sheets; Adding style to HTML. Setting the default style sheet language; Inline style information; Header style information: the STYLE ......

CSSStyleSheet - Web APIs | MDN

Chrome Edge CSSStyleSheet Full support. Chrome1. Toggle history Full support. Edge12... CSSStyleSheet() constructor Full support. Chrome73. Toggle history Full support. Edge79... addRule(). Deprecated Full support. Chrome1....

[4.0.1-beta] Unwanted CSSStyleSheet.insertRule behavior ...

[FEATURE REQUEST] Config to make internal styles in head AND to insert rules directly to the CSSStyleSheet cssinjs/jss#1102.

HTML Styles CSS - W3Schools

Internal - by using a <style> element in the <head> section; External - by using a <link> element to link to an external...

Inline Styles in HTML - Codecademy

Inline Style Syntax. Inline styles look and operate much like CSS, with a few differences. Inline styles directly affect the tag they are...