CSS naar JavaScript-objectenconverter — Numio

Converteert gewone CSS naar een JavaScript-object (CSS-in-JS) met postcss-js. Eigenschapsnamen worden camelCase, selectors en at-regels worden sleutels, en een eigenschap die in één regel wordt herhaald, verandert in een array van waarden.

Verplaats stijlen van een .css-bestand naar een styled-systeem-, JSS-, Emotion- of Radium-object zonder elke eigenschap opnieuw te typen.

CSS

JavaScript Object

Wanneer gebruik je dit?

Verplaats stijlen van een .css-bestand naar een styled-systeem-, JSS-, Emotion- of Radium-object zonder elke eigenschap opnieuw te typen.
Een CSS-fragment, gekopieerd uit een ontwerptool of browser DevTools, omzetten in een object voor een inline stijl of een stijlprop.

Hoe werkt het

Plak CSS in de CSS-editor of plaats er een .css-bestand op.
Lees het resultaat in het JavaScript-objectpaneel; het is toegewezen aan `const converted` en geformatteerd met Prettier (geen puntkomma's).
Kopieer het object, hernoem de naam `converted` en kies de selectietoetsen die u nodig hebt. Deze pagina heeft geen instellingen die u kunt wijzigen.

CSS-ingang

.card {
  display: flex;
  background-color: #fff;
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  margin: 0 auto;
}

.card:hover .title {
  color: tomato;
}

@media (max-width: 600px) {
  .card { flex-direction: column; }
}

JavaScript-object

const converted = {
  ".card": {
    display: "flex",
    backgroundColor: "#fff",
    WebkitBoxShadow: "0 1px 2px rgba(0, 0, 0, 0.1)",
    margin: "0 auto",
  },
  ".card:hover .title": { color: "tomato" },
  "@media (max-width: 600px)": { ".card": { flexDirection: "column" } },
}

Details en beperkingen

Conversie wordt uitgevoerd in een Web Worker in uw browser (PostCSS parse + postcss-js objectiveren); de CSS wordt niet naar een server verzonden.

Eigenschappen met een leveranciervoorvoegsel behouden hun voorvoegsel in PascalCase (bijvoorbeeld -webkit-box-shadow wordt WebkitBoxShadow). Aangepaste eigenschappen zoals --main-color behouden hun oorspronkelijke naam.

Waarden worden bewaard als tekenreeksen, behalve numerieke eigenschappen zonder eenheid, zoals de z-index, die getallen worden. Reacties worden verwijderd.

De uitvoer is niet React Native-ready: selectors, :hover en @media blokken worden bewaard als geneste sleutels en verkorte waarden worden niet uitgebreid.

FAQ

Wat gebeurt er als dezelfde selector twee keer verschijnt?

Regels met dezelfde selector worden samengevoegd tot één sleutel. Als dezelfde eigenschap tweemaal wordt aangegeven, bijvoorbeeld kleur: rood !belangrijk; kleur: blauw, de sleutel bevat een array: ["rood !belangrijk", "blauw"].

Worden @media-query's en geneste selectors ondersteund?

Ja. Een @media-blok wordt een sleutel zoals "@media (max-width: 600px)" waarvan de waarde een object is van de regels erin. Descendant- en pseudo-selectors blijven als volledige stringsleutels.

Waarom krijg ik de foutmelding 'Niet gesloten blok'?

De invoer moet geldig CSS zijn. PostCSS stopt bij syntaxisfouten zoals een ontbrekende accolade sluiten en rapporteert de regel en kolom; Sass or Less-syntaxis (variabelen, nesten) wordt hier niet gecompileerd.

Specificaties en referenties

postcss-js op GitHub