Alterar o padrão de nomenclatura de styled-components

[vilaboim]

Is your feature request related to a problem? Please describe.
No início do projeto definimos que os arquivos de estilo seriam chamados style.js em vez de styled.js para não atrelar a uma ferramenta específica, mas acabamos fazendo isso no nome dos componentes (StyledTitle, StyleTypography, etc.).

Describe the solution you'd like
Pensei em deixarmos sem prefixo ou sufixo (Title, Subtitle) e quando precisarmos usar o nome de algum componente do Material-UI usarmos o seguinte padrão:

import TypographyMU from '@material-ui/core/Typography'

export const Typography = styled(TypographyMU)``

E em um caso mais específico, em que precisemos usar um componente do MUI e um interno no mesmo arquivo poderia ser assim:

import TypographyMU from '@material-ui/core/Typography'

export const TypographyJug = styled(TypographyMU)``

E o uso em um componente React seria assim:

<Typography />
<TypographyJug />

Qual é a opinião de vocês?

[stanleygomes]

Cara, eu acho uma boa. Bora fazer.

[fredericofigueira]

Eu gosto da ideia também, bora fazer!

[marlonmleite]

Essa opção do TypographyJug não é elegante e muito verboso.

Acho que no styled poderia ser assim:

import TypographyComponent from '@material-ui/core/Typography'

export const Typography = styled(TypographyComponent)

Ou algo assim:

import Typo from '@material-ui/core/Typography'

export const Typography = styled(Typo)

Tem alguns projetos que acompanhei e o pessoal utiliza puro, sem prefixo ou coloca tudo dentro do import (Porém voto por ser sem prefixo nenhum):

import * as S from './styles.js'

<S.Text />

[douglaszaltron]

Uma sujestão é levar a mesma nomeclatura que a biblioteca usa internamente. (O material-ui utiliza o "Mui" como prefixo)

import MuiTypography from '@material-ui/core/Typography'

export const Typography = styled(MuiTypography)

no import essa abordagem é bacana, a vantagem é que dessa forma o Typography pode coexistirem tanto o estilizado tanto o importado do components.

import Typography from 'components/Typography' 
import * as Styled from './styles' //É uma abordagem semelhante a que o Antd faz, e como o webpack já reconhece o que está sendo utilizado para importar, não tem o problema de tree shaking.

<Typography />
<Styled.Typography />

Porém sem prefixo apresenta ser mais confortavél visualmente, e como o cenário acima não é tão comum, prefiro assim.

import { Typography } from './styles' 

<Typography />

[douglaszaltron]

Sobre o nome do arquivo ser 'styles' ou 'style', já que esse arquivo pode contém mais de uma estilização de componentes diferente não seria interessante ser em plural?

Em alguns projetos que acompanho, quando se trata de um componente isolado, gosto dessa abordagem.

Ao criar um componente novo:

Button > index.jsx
Button > Button.jsx
Button > Button.style.jsx
Button > Button.spec.jsx
Button > Button.story.jsx

import { ButtonIcon, ButtonLabel, ButtonShape, ButtonPrimary, ButtonSecondary, ButtonGhost } from './Button.style' 

ou em plural sem o prefix

Container > Login > index.jsx
Container > Login > Login.jsx
Container > Login > styles.jsx

import { ContentLeft, ContentRight, PictureIllustration  } from './styles'