Extractor de variables CSS
Pega una hoja de estilos y extrae cada --propiedad-personalizada, agrupada por
prefijo, con las definiciones duplicadas marcadas.
Analiza cada bloque de selector, no solo :root. El mismo nombre con un valor distinto entre selectores se marca como duplicado.
Las variables agrupadas aparecerán aquí.
Cómo funciona
El texto de entrada se analiza bloque de regla por bloque de regla (emparejando pares
selector { ... }, incluidos los anidados como las media queries), y cada
declaración --nombre: valor; dentro de cada bloque se registra junto con el
selector al que pertenece. Las variables se agrupan por prefijo, el primer segmento
delimitado por guiones tras el -- inicial, así que --color-primary-500
y --color-accent quedan bajo "color", lo que refleja cómo se estructuran la
mayoría de las convenciones de nomenclatura de tokens de diseño. Un nombre se marca como
duplicado solo cuando se declara con valores genuinamente distintos en otro lugar, no solo
cuando se declara de nuevo bajo otro selector con el mismo valor (ese es el patrón normal
para las variantes de tema).
Todo se ejecuta con cada pulsación en el JavaScript de esta página, usando un escáner ligero de emparejamiento de llaves en lugar de un analizador CSS completo. Nada de lo que pegas se sube.
Preguntas frecuentes
¿Qué propiedades personalizadas encuentra?
Cualquier declaración de la forma --nombre: valor; dentro de cualquier bloque de selector, no solo :root, incluidas reglas anidadas y media queries. Cada aparición registra bajo qué selector se declaró.
¿Cómo funciona la detección de duplicados?
Si el mismo nombre de variable se declara más de una vez con valores diferentes (una señal habitual de tokens copiados y pegados o inconsistentes), se marca. Declarar el mismo nombre con el mismo valor en varios ámbitos (como las variantes de tema claro/oscuro) es normal y no se marca.
¿Se envía mi CSS a algún sitio?
No, el análisis ocurre por completo en tu navegador con un pequeño escáner en JavaScript. Nada de lo que pegas se sube.