Обновить
0
0

Пользователь

Отправить сообщение

Так и девтул под хром есть https://github.com/binaryage/cljs-devtools

Пример с модификатором


import { oneOf } from 'prop-types';
import styled from 'styled-components';

export const Heading = styled.div`
    font-weight: 400;
    font-size: ${
        ({ $size }) => ({
            1: '32px',
            2: '28px',
            3: '24px',
            4: '20px',
            5: '16px',
            6: '14px'
        })[$size]
    };  
`;
Heading.propTypes = {
    $size: oneOf('1 2 3 4 5 6'.split(' '))
};
Heading.defaultProps = {
    $size: '1'
};

// usage
<Heading as={h1} $size="1">Title</Heading>

Минусы:


  • раздуваются стили, исправление ожидается (можно решить временно с помощью csso минификации { restructure: true })
  • некоторые свойства пробрасываются в html, что раздует разметку при ssr (можно решить соглашением именования пропертей, например $size или _size вместо size, или другое название проперти не из whitelist)
Расскажите, пожалуйста, что-нибудь про tree-shaking в webpack.
2

Информация

В рейтинге
Не участвует
Зарегистрирован
Активность