1.2.1 • Published 1 year ago
babel-plugin-less-for-styled-components v1.2.1
LESS for styled-components
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) }
`;
global import option
- add global imports option, it can be referenced in all the style blocks.
[
'babel-plugin-less-for-styled-components',
{ globalImports: ['src/less/proj'] }
]
Cautions
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.
1.2.0
1 year ago
1.1.9
1 year ago
1.2.1
1 year ago
1.1.8
1 year ago
1.1.7
1 year ago
1.1.6
1 year ago
1.1.5
2 years ago
1.1.4
2 years ago
1.1.3
2 years ago
1.1.2
2 years ago
1.1.1
2 years ago
1.1.0
2 years ago
1.0.7
2 years ago
1.0.6
2 years ago
1.0.5
2 years ago
1.0.4
2 years ago
1.0.3
2 years ago
1.0.2
2 years ago
1.0.1
2 years ago
1.0.0
2 years ago