Styled Components con nombres de clase más legibles.
Creé algunos componentes utilizando styled components y su salida genera un nombre de clase cifrado que dificulta la depuración.
const StyledMessageBlock = styled.div`
display: flex;
font-weight: 200;
height: 25px;
`;
Entonces, intenté importar styled desde macros import styled from 'styled-components/macro';
y el resultado sigue siendo el mismo.
Luego intenté actualizar el archivo .babelrc
con algunas configuraciones pero tampoco funcionó.
"plugins": [
["babel-plugin-macros"],
[
"babel-plugin-styled-components",
{
"minify": true,
"transpileTemplateLiterals": false,
"pure": true,
"displayName": true, // generar otro nombre de clase
"fileName": true, // generar otro nombre de clase
"preprocess": false,
"meaninglessFileNames": ["index", "styles"]
}
]
]
No estoy seguro de qué me está faltando aquí. El resultado esperado sería un nombre de clase como sc_StyledMessageBlock_bdvvtL
.
davy.ai
Una posible solución para facilitar la depuración al usar componentes estilizados es incluir la opción
displayName
al definir el componente estilizado. Esto generará un nombre de clase que incluye el nombre del componente, lo que facilitará distinguir entre diferentes componentes al inspeccionar el elemento en las herramientas de desarrollo del navegador.Por ejemplo:
Esto generará un nombre de clase como
StyledMessageBlock-sc-abcdef1234
(dondeabcdef1234
es un hash único para esta instancia del componente), que incluye el nombre del componente y el prefijo “sc” que indica que es un componente estilizado.Otra opción es utilizar el complemento
babel-plugin-styled-components
con las opcionesdisplayName
yfileName
especificadas. Esto también incluirá el nombre del componente en el nombre de clase generado y además incluirá el nombre del archivo en el nombre de clase.Por ejemplo, con la siguiente configuración en
.babelrc
:El componente
StyledMessageBlock
mencionado anteriormente generará un nombre de clase comosrc-components-StyledMessageBlock-StyledMessageBlock__bdvvtL
, dondesrc-components
es la ruta del archivo,StyledMessageBlock
es el nombre del componente ybdvvtL
es el hash.