[VUE] Gerar classes css via JS

[WandersonAlves]

Olá galerinha, como vão?

Pesquisei isso de várias maneiras e não encontrei uma forma de fazer o que estou querendo.

Estava querendo criar algumas diretivas para gerar algumas classes utilitárias a um componente que possua essa diretiva.

Hoje, consigo inserir estilos no componente da seguinte forma:

el.style.display = 'flex';
if (typeof binding.value === 'number') {
   el.style.maxWidth = `${binding.value}%`;
   el.style.width = `${binding.value}%`;
}

Porém...eu preciso usar media queries também. Sei da existência do window.matchMedia porém ele trás o problema de que mesmo respeitando as queries, os atributos são inseridos no elemento, logo existe uma complexidade maior para setar as queries e remover os atributos quando não se tem nenhum querie ativa.

O objetivo é gerar uma classe css complexa desse tipo (sintaxe do scss):

.flex {
  display: flex
  @media (max-width: 768px) {
     flex-direction: column
   }
}

E fazer algo do tipo:

el.style.append(classeGerada)

Vocês tem alguma ideia de como chegar ai? (se possível sem nenhuma dependência extra kkk)

[Marlysson]

Você poderia abstrair um pouco essa parte da geração, tendo um objeto que recebe um dicionário por exemplo, com a seguinte estrutura..

estilos = {
    "width":"100px",
    "height":"100px",
    "font-size":"15px",
    "media_query" : {
        "width < 768px": {
           "width":"100%",
           "height":"100%"
        },
        "width > 768": {
            ......
        }

Aí o trabalho seria converter os "< X" para min-width:X ou min-X qualquer..

E no final daria um

el.apply(estilos)

Esse .apply você teria que fazer algum prototype da vida pra extender o componente pra aceitar esse método..

e lá dentro vc pega as medidas e vai aplicando pro componente.. e uma forma de converter as media query.. Assim no final terá passado um objeto e lá dentro converteria e aplicaria..

OBS: Não sei se essa é a melhor solução, e nem se servirá.. Mas foi algo que pensei aqui que pudesse ajudar 😄

[klarkc]

Acho que seria mais fácil injetar o CSS scoped via vue-loader nos componentes que possuem essa diretiva, se vc o utiliza. Então a diretiva apenas ativaria as classes que foram injetadas no scoped css

[WandersonAlves]

@klarkc seria uma opção essa. Porém queria tirar ao máximo a quantidade de dependências e só fazer esse "generator" mesmo.

Que na real, eu tô tentando fazer algo como o https://github.com/angular/flex-layout (não olhei o src dele direito) pro vue, o que seria uma mão na roda.

Vi outras soluções, mas todas elas são em forma de componentes e não diretivas 😢

EDIT: a parte que eu queria que funcionasse no vue como o @/angular/flex-layout é o fxFlex fxFlex="50" fxFlexAlign="center center" fxLayoutGap="20px" por exemplo

[klarkc]

Talvez isso resolva: https://github.com/raphamorim/native-css

mas já adiantando vai pesar bastante na renderização do componente transpilar CSS para JS no browser

[LucasLeandro1204]

Pq não um pre processador css? Não entendi muito bem o problema.

[WandersonAlves]

UPDATE: consegui fazer o que queria usando o shadowDom.

Basicamente faço um document.querySelector('seletor').createShadowRoot() e com o retorno disso, consigo fazer um root.innerHTML = <style></style>

Aparentemente isso só funciona no Chrome kkk

[klarkc]

@WandersonAlves talvez isso ajude https://github.com/webcomponents/webcomponentsjs