Extraiteur de propriétés CSS

Extraiteur de propriétés CSS

Collez tout fichier CSS ou SCSS et obtenez instantanément une liste propre, triée, dédoublée de toutes les propriétés personnalisées déclarées dans ce fichier — ainsi que le sélecteur dans lequel elles ont été déclarées. L'extracteur affiche également les variables référencées mais jamais déclarées, ce qui est une cause fréquente de styles cassés dans les grands systèmes de conception. --custom-property Déclarez votre feuille de style dans la var(--name) boîte (ou cliquez

Comment utiliser

1. pour charger un exemple). Entrée CSS / SCSS un tableau de texte simple, un objet JSON ou un bloc prêt à coller Essayez un exemple .
2. Sélectionnez un Format de sortiechamp pour affiner les résultats par nom de variable, valeur ou portée. :root { } Inclure la portée du sélecteur
3. Utilisez le Filtre pour contrôler si le tableau affiche la portée où chaque variable a été déclarée.
4. Basculer Examinez le Panneau des variables non définies
5. pour toute référence sans déclaration correspondante. Copiez ou téléchargez la liste extraites avec les boutons du panneau de sortie. Analyseur intelligent des accolades var(--name) – parcourt le fichier caractère par caractère afin de gérer correctement les sélecteurs imbriqués, les requêtes de média et les valeurs entre guillemets.
6. Suivi de portée

Caractéristiques

• – chaque variable est associée au sélecteur ou à la règle dans laquelle elle a été déclarée, afin de distinguer un token d'une surcharge de portée composante. – tableau de texte simple pour la consultation, objet JSON pour l'utilisation programmée, et un bloc propre que vous pouvez coller dans un fichier de style.
• Détection des variables non définies – identifie toute variable qui n’a pas de déclaration correspondante dans le fichier d’entrée. :root Filtre en temps réel
• Trois formats de sortie – tapez pour affiner les résultats par nom de variable, valeur ou portée en temps réel. :root { } Dédoublage et tri
• – les déclarations redondantes dans la même portée sont regroupées et la liste est triée alphabétiquement pour une consultation rapide. – rien n’est envoyé ; fonctionne sur des feuilles de style privées ou incomplètes. var(--name) Audit d'une feuille de style de système de conception afin de construire une liste maîtresse de tokens.
• Mise à jour des variables SCSS vers des propriétés CSS personnalisées. Recherche d'un style cassé causé par une référence mal orthographiée.
• Génération d'un bloc de départ à partir d'un thème tiers. Exportation des tokens au format JSON pour une utilisation sur un site de documentation ou dans une entrée Storybook.
• Fonctionne entièrement dans votre navigateur Qu'est-ce qu'une propriété CSS personnalisée ?

Quand utiliser cet outil

• Une propriété CSS personnalisée (également appelée variable CSS) est un identificateur défini par l'auteur, préfixé par deux traits (par exemple, --color-primary), dont la valeur peut être réutilisée partout dans le fichier de style grâce à la fonction var(). Contrairement aux variables de préprocesseur, les propriétés personnalisées sont résolues au moment de l'exécution par le navigateur, ce qui signifie qu'elles cascaden et héritent comme n'importe quelle autre propriété CSS et peuvent être mises à jour dynamiquement grâce au JavaScript.
• Comment l'ensemble du sélecteur influence-t-il une propriété personnalisée ?
• Une propriété personnalisée existe uniquement dans l'arborescence de l'élément qui la déclare. La déclaration sur :root la rend efficacement globale car :root correspond à l'élément html, tandis que la déclaration dans un sélecteur composant comme .card limite sa valeur à ce composant et à ses descendants. Le même nom peut contenir des valeurs différentes selon les portées, ce qui est la mécanique derrière les thèmes, les commutateurs de mode sombre et les surcharges au niveau des composants. var() Pourquoi le CSS ne génère-t-il pas d'erreur lorsque var() pointe vers une propriété personnalisée non définie ?
• La spécification des propriétés CSS personnalisées exige que le navigateur fasse un retour silencieux lorsque la variable référencée n'a pas été déclarée. Si var() n'a pas d'argument de remplacement, la propriété est traitée comme si elle avait la valeur non définie, ce qui laisse souvent l'élément avec sa valeur initiale ou héritée. Comme aucune erreur n'est signalée dans la console, les références non définies sont faciles à manquer, et leur détection dès le départ empêche les retombées visuelles subtiles. :root { } Les variables SCSS et les propriétés CSS personnalisées sont-elles les mêmes choses ?
• Elles occupent un rôle similaire mais existent à des étapes différentes du pipeline. Les variables SCSS, écrites avec un signe dollar comme $color-primary, sont résolues lors de la compilation de SCSS en CSS et disparaissent dans le résultat final. Les propriétés CSS personnalisées préfixées par deux traits survivent à la compilation et sont évaluées par le navigateur au moment de l'affichage, ce qui permet les thèmes en temps réel et les mises à jour dynamiques via JavaScript.