https://github.com/oxizen/babel-plugin-less-for-styled-components

Using LESS for styled-components
https://github.com/oxizen/babel-plugin-less-for-styled-components

babel emotion less styled-components

Last synced: 3 months ago
JSON representation

Using LESS for styled-components

• Host: GitHub
• URL: https://github.com/oxizen/babel-plugin-less-for-styled-components
• Owner: oxizen
• License: mit
• Created: 2022-07-22T04:48:44.000Z (almost 4 years ago)
• Default Branch: master
• Last Pushed: 2023-01-30T06:36:05.000Z (over 3 years ago)
• Last Synced: 2025-10-09T04:49:09.707Z (9 months ago)
• Topics: babel, emotion, less, styled-components
• Language: JavaScript
• Homepage:
• Size: 106 KB
• Stars: 9
• Watchers: 1
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
[![npm](https://img.shields.io/npm/v/babel-plugin-less-for-styled-components.svg)](https://www.npmjs.com/package/babel-plugin-less-for-styled-components)

## LESS for styled-components

It's a babel plugin that can use LESS syntax in the style template of [styled-components](https://styled-components.com/) or [emotion](https://emotion.sh/docs/introduction).

- Template literal with props

```javascript

const Button = styled.button<{ disabled: boolean }>`

  .color(${props => (props.disabled ? 'gray' : 'red')});

`

```

- Referring to other components

```javascript

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.

```javascript

[

  '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](https://github.com/jean343/styless.git).