Ich möchte etwas erstellen, die eine .css
Datei zurückgeben könnte eine Funktion, die ein Array von Klassennamen und die Stile, die für ein Element mit diesen Klassennamen, wie ein JavaScript gelten würde Objekt. (Ein solches Werkzeug würde für die Verwendung mit Glamour, Fela oder andere CSS-in-JS-Technologien geeignet sein.)Parsen CSS in JavaScript mit Selektor Bewusstsein
Eg, wenn Sie diese CSS-Datei:
.btn {
border: 1px solid gray;
}
.btn.primary {
background: blue;
border-color: blue;
}
.btn-group {
display: inline-block;
}
dann könnte man so etwas wie dies:
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";
}
In diesem Beispiel wird .btn-group
ignoriert, weil wir nur gefragt, was Stil zu .btn.primary
gelten würde.
Das ist Neuland für mich, aber ich weiß, dass es Werkzeuge gibt, um CSS zu parsen. Welche Bibliotheken könnten am vielversprechendsten sein? (Oder existiert so etwas schon?)
suchen Sie https://developer.mozilla.org/en/docs/Web/API/Window/getComputedStyle? Verbinde einfach die CSS-Datei in einem Iframe, erstelle die Elemente dort und erhalte ihre Stile – smnbbrv
Vielleicht hilft https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet. . . –
Ich möchte nicht getComputedStyle - das eine riesige Liste von berechneten Eigenschaften zurückgibt. –