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 babel-plugin-styled-components (improved since 1.2.0).

function to detect template is from styless.