Cómo usar esta herramienta para desarrolladores
- Pega CSS con declaraciones --nombre: valor.
- Ejecuta la extracción.
- Revisa definiciones repetidas y referencias var().
- Exporta el inventario como JSON o CSV.
CSS Custom Property Extractor
Extrae declaraciones de propiedades personalizadas CSS (--variables) desde hojas de estilo o fragmentos style. Muestra nombre, valor, selector o bloque aproximado, número de apariciones y referencias var(...) para ayudarte a inventariar tokens y localizar redefiniciones.
Datos de entrada
CSS con custom propertiesEspacio publicitario
Qué hace esta herramienta para desarrolladores
Busca declaraciones de custom properties y referencias var(--nombre) conservando una aproximación del bloque donde se definió cada variable.
Se eliminan comentarios para reducir falsos positivos, se recorren bloques CSS y se extraen declaraciones cuyo nombre empieza por --. Las referencias var() se cuentan por nombre.
Un parser CSS completo puede interpretar casos extremos con llaves o puntos y coma dentro de construcciones complejas mejor que esta utilidad basada en análisis de texto.
Ejemplo
:root { --brand: #333; }
.dark { --brand: #eee; }
→ --brand aparece 2 veces.
Casos de uso
- Inventariar design tokens existentes.
- Detectar variables redefinidas.
- Preparar una migración a tokens centralizados.
- Encontrar variables usadas con var().
Consejos para obtener resultados fiables
- Centraliza valores globales en :root cuando tenga sentido.
- Las redefiniciones por tema pueden ser intencionales.
- No elimines una variable solo porque no aparezca en var(); puede consumirse desde otro archivo.
- Conserva fallbacks de var() al refactorizar.
Detalles del procesamiento
El extractor analiza bloques básicos y declaraciones terminadas por punto y coma o cierre de bloque. También recorre todo el texto para contar referencias var(--x).
No resuelve @import ni otros archivos y puede requerir revisión con CSS que contenga sintaxis muy compleja o valores con llaves.
Preguntas frecuentes
¿Qué tipo de entrada acepta CSS Custom Property Extractor?
Acepta CSS con declaraciones --nombre: valor y referencias var(--nombre).
¿Cómo trata CSS Custom Property Extractor el HTML o CSS no válido?
El análisis textual intenta evitar comentarios, pero sintaxis excepcional puede requerir un parser CSS dedicado.
¿Los datos que pego en CSS Custom Property Extractor se envían a un servidor?
No. El procesamiento principal se ejecuta localmente en el navegador y no necesita una API externa.
¿Puedo usar el resultado de CSS Custom Property Extractor directamente en mi proyecto?
Sí, pero conviene revisarlo cuando la entrada contenga sintaxis ambigua, fragmentos incompletos o datos generados por terceros.
¿Funciona CSS Custom Property Extractor con texto Unicode y caracteres acentuados?
Sí. La herramienta trabaja con cadenas JavaScript y conserva Unicode; en descargas utiliza UTF-8.
Herramientas relacionadas para desarrolladores
Resumen técnico
| Módulo | Función |
|---|---|
| Entrada | CSS con custom properties |
| Procesamiento | Local en el navegador |
| Salida | .json y exportaciones cuando corresponda |
Explora la categoría HTML, CSS y JavaScript
Consulta más utilidades para inspeccionar, transformar y validar código del navegador.