Styled Components 💅
Ну что же, вот я и докатился до жизни такой. По настоятельной рекомендации
@kana_sama решил попробовать styled-components (https://www.styled-components.com/) в 2k19. На фоне образовавшейся на текущем проекте проблемы с поддержкой дизайн-токенов и распрастранения его между имплементациями компонентов, styled-components вызвали приятное ощущение внизу живота:
- Приятный строковый литерал, вместо собственного всратого "DSL", как в JSS (или мечтах
@kana_sama)
- Возможность хранить все в javascript, с возможностью импортиовать/экспортировать и организовывать как душе угодно
- Уменьшение бойлерплейта для написания нового компонента, в сравнении с css-modules.
Я люблю цсс модули, но тот факт что для каждого нового компонента приходится писать примерно такой код:
import React from 'react'
import cc from 'classcat'
import style from './style.css'
export const Joper = ({ className, ...props }) =>
вместо:
import React from 'react'
import styled from 'styled-components'
export const Joper = styled.div`...`
действительно выглядит заманчиво
Из минусов у styled-components самым серьезным и главным недостатком видится тот факт: он _до сих пор_ не хочет дать возможность собрать весь цсс в билд тайме, и не тянуть это все добро в бандл.
Это нормальная позиция, тот же emotion делает тоже самое. Существует [мнение](https://twitter.com/andrey_sitnik/status/1047184704133390340) что эта позиция оправдана, если очень хочется гибко управлять всем в рантайме, но это очень императивный подход. На мой взгляд, куда лучше иметь конечную машину состояний, где состояния обычные темы и переключать управляющие классы. Но это отдельная тема
Как вы, уже, наверное догадались styled-components мне понравились, но вот эта проблема с затягиванием в рантайм как-то не тянет на лучшие практики благородных домов. Хорошо что сразу всплыли варианты linaria(https://github.com/callstack/linaria) и astroturf(https://github.com/4Catalyzer/astroturf).
Первый выглядил поприличне, и звезд побольше. Но, увы, с parcel дружить не захотел никак. Даже после установки плагина (из официального списка), стал ловить ошибки при сборке. В самом плагине автор пишет что плагин любит поконфликтовать с JSAssets парсела, так что, увы и ах.
Со вторым проблем сходу не возникло, хотя и пришлось домотать до конца документации чтобы найти солюшен где в babelrc.js мы собираем файлы и кладем их отдельную директорию, чтобы не засирать директории компонентов. После этого опять разочарование: Astroturf идеалогически не поддерживает инкапсуляции js из других файлов. Иными словами вы можете сделать вот так:
...
const width = 100
const Joper = styled.div`
width: ${width}px;
`
но не сможете сделать вот так:
...
import sizes from '/theme/sizes.js';
const Joper = styled.div`
width: ${sizes.hole}px;
`
Про это есть ишью, в котором автор ответил что сделать такое сложно, поэтому он не делает это по идеалогическим причинам (https://github.com/4Catalyzer/astroturf/issues/16) 🥒.
Ничего не оставалось кроме как сдаться и начать использовать SCSS, с этим тоже возникли проблемы, но это наши парселоебские штучки.
То, что получилось и код (обратите внимание на .babelrc.js) можете посмотреть по ссылке:
https://gitlab.com/creepypoke/styled-components-example
