Olhando mais a fundo sobre os CSS Handles e sua utilização, cheguei em um ponto no qual não consegui distinguir seu uso diante de por exemplo os CSS Modules.
Exemplo:
Aqui temos uma div
onde vamos definir duas classes:
- Uma, com o nosso handle criado pelo
useCssHandles(CSS_HANDLES)
, ondeCSS_HANDLES
é o nosso array de classes, e passado para o componente pelo hookuseContextCssHandles()
que como o nome sugere, cria um contexto com os nossos handles. - E a segunda sendo uma classe usada para estilizar via CSS Modules, importada logo a cima.
Com isso temos:
import React from 'react'
import { useContextCssHandles } from '../../context/CSSHandles'
import styles from './styles.modules.css'
export default () => {
const { handles } = useContextCssHandles()
return <div className={`${handles['container']} ${styles['container']}`}></div>
}
E o resultado que obtemos deve ser alguma coisa como:
<div class="vendor-app-0-x-container vendor-app-0-x-container"</div>
Resultado:
Bom… A mesma coisa?
Aparentemente sim, pelos testes que fiz os dois se comportam da mesma maneira, tendo HMR em apps declarados nas dependencies
e (estranhamente) não quando declarados nas peerDependencies
.
Gostaria de saber se alguém sabe, conhece ou gostaria de adicionar alguma coisa ao comentado.