Parse CSS en JavaScript avec la conscience de sélecteur

Je veux construire quelque chose qui pourrait consommer un fichier .css retourner une fonction qui prendrait un tableau de noms de classe et retourner les styles qui s'appliqueraient à un élément avec ces noms de classe, comme un JavaScript objet. (Un tel outil serait adapté à une utilisation avec Glamour, Fela ou d'autres technologies CSS-in-JS.)Parse CSS en JavaScript avec la conscience de sélecteur

Par exemple, si vous avez ce fichier CSS:

.btn { 
    border: 1px solid gray; 
} 

.btn.primary { 
    background: blue; 
    border-color: blue; 
} 

.btn-group { 
    display: inline-block; 
}

alors vous pourriez faire quelque chose comme ceci:

import css from "./btn.css"; 
import applicableStyles from "applicable-styles"; // what I want to build 

const btnStyles = applicableStyles(css, ['btn', 'primary']); 

// Expected value: 
{ 
    border: "1px solid gray" 
    background: "blue"; 
    border-color: "blue"; 
}

Dans cet exemple, .btn-group est ignorée parce que nous ne demandions quel style s'appliquerait à .btn.primary.

Ceci est un nouveau territoire pour moi, mais je sais qu'il existe des outils pour analyser le CSS. Quelles bibliothèques pourraient être les plus prometteuses à regarder? (Ou, est-ce que quelque chose comme ceci existe déjà?)

Source

2017-09-22 Alan H.

êtes-vous à la recherche de https://developer.mozilla.org/en/docs/Web/API/Window/getComputedStyle? Il suffit de connecter le fichier CSS dans un iframe, créer les éléments là-bas et obtenir leurs styles – smnbbrv

Peut-être que https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet pourrait aider. . . –

Je ne veux pas getComputedStyle - qui retourne une énorme liste de propriétés calculées. –

Cela devrait être possible en utilisant certains des différents paquets npm là-bas.

Par exemple, le paquet css-object-loader vous permet de require un fichier .css, qui est converti en un objet avec les touches correspondant aux sélecteurs, que vous pouvez ensuite l'accès.

p { 
    font-size: 14px; 
} 

h1 { 
    text-indent: 20px; 
} 

.centered { 
    width: 100%; 
    margin: 0 auto; 
} 

var selectors = require('./rules.css'); 

// Get the 
selectors['.centered']

J'ai aussi vu SCSS déstructurée à import, comme:

import {btn, primary} from './btn.scss';

mais je ne peux malheureusement pas se rappeler ce que les chargeurs ont été utilisés pour ce faire.

Source

2017-09-28 09:37:11

Parse CSS en JavaScript avec la conscience de sélecteur

Répondre

Questions connexes