It's a babel plugin that can use LESS syntax in the style template of styled-components or emotion.
- Template literal with props
const Button = styled.button<{ disabled: boolean }>`
.color(${props => (props.disabled ? 'gray' : 'red')});
`
- Referring to other components
const Link = styled.a`
.flex; .items-center; .p(5, 10);
`;
const Span = styled.span`
.c(red);
${Link}:hover & { .c(blue) }
`;
- add global imports option, it can be referenced in all the style blocks.
[
'babel-plugin-less-for-styled-components',
{ globalImports: ['src/less/proj'] }
]
When registering this plug-in, it must be registered before(improved since 1.2.0).babel-plugin-styled-components
function to detect template is from styless.