{"id":48346716,"url":"https://github.com/oxizen/babel-plugin-less-for-styled-components","last_synced_at":"2026-04-05T07:04:43.344Z","repository":{"id":48152953,"uuid":"516613483","full_name":"oxizen/babel-plugin-less-for-styled-components","owner":"oxizen","description":"Using LESS for styled-components","archived":false,"fork":false,"pushed_at":"2023-01-30T06:36:05.000Z","size":109,"stargazers_count":9,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-10-09T04:49:09.707Z","etag":null,"topics":["babel","emotion","less","styled-components"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/oxizen.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-07-22T04:48:44.000Z","updated_at":"2023-08-07T15:19:26.000Z","dependencies_parsed_at":"2023-02-15T14:46:00.536Z","dependency_job_id":null,"html_url":"https://github.com/oxizen/babel-plugin-less-for-styled-components","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"purl":"pkg:github/oxizen/babel-plugin-less-for-styled-components","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oxizen%2Fbabel-plugin-less-for-styled-components","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oxizen%2Fbabel-plugin-less-for-styled-components/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oxizen%2Fbabel-plugin-less-for-styled-components/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oxizen%2Fbabel-plugin-less-for-styled-components/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/oxizen","download_url":"https://codeload.github.com/oxizen/babel-plugin-less-for-styled-components/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oxizen%2Fbabel-plugin-less-for-styled-components/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31427387,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-05T02:22:46.605Z","status":"ssl_error","status_checked_at":"2026-04-05T02:22:33.263Z","response_time":75,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["babel","emotion","less","styled-components"],"created_at":"2026-04-05T07:04:43.239Z","updated_at":"2026-04-05T07:04:43.321Z","avatar_url":"https://github.com/oxizen.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"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)\n\n## LESS for styled-components\nIt'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).\n\n- Template literal with props\n```javascript\nconst Button = styled.button\u003c{ disabled: boolean }\u003e`\n  .color(${props =\u003e (props.disabled ? 'gray' : 'red')});\n`\n```\n\n- Referring to other components\n```javascript\nconst Link = styled.a`\n  .flex; .items-center; .p(5, 10);\n`;\n\nconst Span = styled.span`\n  .c(red);\n  ${Link}:hover \u0026 { .c(blue) }\n`;\n```\n\n### global import option\n- add global imports option, it can be referenced in all the style blocks.\n```javascript\n[\n  'babel-plugin-less-for-styled-components', \n  { globalImports: ['src/less/proj'] }\n]\n```\n\n### Cautions\n- ~~When registering this plug-in, it must be registered before `babel-plugin-styled-components`~~ (improved since 1.2.0).\n\n\nfunction to detect template is from [styless](https://github.com/jean343/styless.git).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foxizen%2Fbabel-plugin-less-for-styled-components","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Foxizen%2Fbabel-plugin-less-for-styled-components","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foxizen%2Fbabel-plugin-less-for-styled-components/lists"}