document.styleSheets para o que usar?

[felquis]

Você sabia que da para mudar o conteúdo de uma stylesheet sem usar o atributo style de um elemento mas mudando a definição da regra no stylesheet em si?

document.styleSheets tem uma lista de todos os CSS e das tags style na página.

Se tiver 2 arquivos CSS e um <style> da para acessa-los assim:

document.styleSheets[0]
document.styleSheets[1]
document.styleSheets[2]

A parte legal é que tem como adicionar uma regra dinamicamente com styleSheet.addRule ou styleSheet.insertRule

Assim:

document.styleSheets[0].addRule('*','background:linear-gradient(to right, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%)!important;background-clip:text!important', 0)

Da para deletar uma rule usando o seletor:

document.styleSheets[0].deleteRule('.container')

O que não acho legal, é que não encontrei um método para encontrar um selector usando o seletor em si. Então tenho que usar um find e verificar pelo selectorText na rule, o objeto da rule contem tudo relacionado aquela regra CSS.

let rule = Array.from(document.styleSheets[1].rules).find(x=>x.selectorText===':root')

Depois que você tem uma referência para a rule na stylesheet, tem como fazer o que quiser com qualquer propriedade do CSS:

rule.style.setProperty('--custom-color', '#19cade')

Acho muito massa essa API, mas nunca usei em algo interessante, até usei, mas não foi tão divertido e uau

Se você tiver algum esclarecimento sobre essa API, testemunho, ou tiver aluma ideia maluca, útil ou potencialmente inútil para usar com essa API, compartilha aqui com a gente 👍

Abs.

[lagden]

Quem utiliza o emotion está usando muito essa API sem saber!

Exemplo da vida real

Essa navegação só funciona graças essa API:
https://codepen.io/lagden/pen/xQPVZQ

Veja na linha 24 do CSS que tem a var(--total):

grid-template-columns: repeat(var(--total), 100%);

A variável --total só é declarada via API (linha 14 do JS):

tabContainer.style.setProperty('--total', tabContainer.childElementCount)

[kazzkiq]

Cara, API fenomenal!

Aqui na empresa temos um produto que permite "injetar" CSS/JS em sistemas legados pra deixar eles responsivos ou melhorar UX, etc.

Na maioria dos casos, ou nós deletamos os elementos <style> e <link> do DOM, ou apelamos pra gambiarras com !important e seletores mais específicos no nosso CSS.

Essa API que você mostrou vai ajudar demais porque agora podemos deletar apenas as regras que estão nos atrapalhando, sem quebrar o resto do sistema inteiro!

Valeu pelo insight! 👊