{"id":15105170,"url":"https://github.com/seancodes/ember-css-modules-less","last_synced_at":"2026-02-19T16:02:20.380Z","repository":{"id":172335923,"uuid":"649156537","full_name":"seanCodes/ember-css-modules-less","owner":"seanCodes","description":"An ember-css-modules plugin that configures the build pipeline for use with Less","archived":false,"fork":false,"pushed_at":"2023-06-08T05:41:08.000Z","size":422,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-01T16:11:30.980Z","etag":null,"topics":["css-modules","ember","ember-addon","emberjs","less"],"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/seanCodes.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-06-04T00:54:32.000Z","updated_at":"2023-06-04T00:56:37.000Z","dependencies_parsed_at":null,"dependency_job_id":"85e5f7f4-1c7b-4345-ad60-d0af7e79656b","html_url":"https://github.com/seanCodes/ember-css-modules-less","commit_stats":{"total_commits":15,"total_committers":1,"mean_commits":15.0,"dds":0.0,"last_synced_commit":"e205f7d80b3463948f11df815122b37931dfdb73"},"previous_names":["seancodes/ember-css-modules-less"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/seanCodes%2Fember-css-modules-less","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/seanCodes%2Fember-css-modules-less/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/seanCodes%2Fember-css-modules-less/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/seanCodes%2Fember-css-modules-less/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/seanCodes","download_url":"https://codeload.github.com/seanCodes/ember-css-modules-less/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247339136,"owners_count":20923009,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["css-modules","ember","ember-addon","emberjs","less"],"created_at":"2024-09-25T20:21:36.970Z","updated_at":"2025-10-17T14:59:47.035Z","avatar_url":"https://github.com/seanCodes.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ember-css-modules-less [![Actions Status](https://github.com/seanCodes/ember-css-modules-less/actions/workflows/ci.yml/badge.svg)](https://github.com/seanCodes/ember-css-modules-less/actions/workflows/ci.yml) [![npm version](https://img.shields.io/npm/v/ember-css-modules-less.svg)](https://www.npmjs.com/package/ember-css-modules-less)\n\nThis is an [ember-css-modules](https://github.com/salsify/ember-css-modules) plugin that allows it to understand [Less](https://lesscss.org/) syntax and work in conjunction with [ember-cli-less](https://github.com/gpoitch/ember-cli-less) to process Less CSS modules.\n\n\n## Compatibility\n\n- Ember.js v3.24 or above\n- Ember CLI v3.24 or above\n- Node.js v14 or above\n\n\n## Installation\n\n```sh\nember install ember-cli-less ember-css-modules ember-css-modules-less\n```\n\n\n## Usage\n\nUsage is the same as [ember-css-modules](https://github.com/salsify/ember-css-modules#usage) except that `.less` files will be processed as CSS modules. For example:\n\n```less\n// app/components/hello.less\n\n.look-at-me {\n   color: crimson;\n}\n```\n\n```hbs\n{{! app/components/hello.hbs }}\n\n\u003cp local-class=\"look-at-me\"\u003e\n   I’m scoped look at me!\n\u003c/p\u003e\n```\n\nwill output something like\n\n```html\n\u003cp class=\"_look-at-me_1p3fr2_\"\u003e\n   I’m scoped look at me!\n\u003c/p\u003e\n```\n\n\n\n## Configuration\n\nThis plugin will configure ember-css-modules so that classes in all `.less` files in your project will be namespaced. If you need finer-grained control over the treatment of specific aspects of the interplay between CSS Modules and Less, see the [ember-css-modules preprocessors guide](https://github.com/salsify/ember-css-modules/blob/master/docs/PREPROCESSORS.md).\n\n### Migrating to Modules\n\nBy default all files with a `.less` extension will be processed as CSS modules and will be combined and output as `app.less`. This can be an issue if you have existing styles that you want to gradually migrate to modules, or if you want the two to coexist.\n\nIn these cases you can differentiate between module/non-module Less files by providing a custom `cssModules.extension` value in your `ember-cli-build.js`. Modules can be output in a different location by customizing the `cssModules.intermediateOutputPath` and then the resulting file can be imported into your existing `app.less` file, for example:\n\n```js\n// ember-cli-build.js\n\nmodule.exports = function (defaults) {\n   const app = new EmberAddon(defaults, {\n      cssModules: {\n         extension: 'module.less',\n         intermediateOutputPath: 'app/styles/css-modules.less',\n      },\n   })\n   // ...\n}\n```\n\n```less\n// app/styles/app.less\n\n@import 'some-existing-import.less';\n\n@import 'css-modules.less';\n```\n\nWith this config only `*.module.less` files would be processed as a CSS Modules and all existing files would be handled as normal.\n\n## Usage with Embroider\n\nFor applications, the relative output path for CSS is different with Embroider than with a regular Ember CLI build. If `ember-css-modules-less` detects that you’re running in an application with `@embroider/compat` installed, it will attempt to adjust its `intermediateOutputPath` setting accordingly.\n\n\n## Contributing\n\nSee the [Contributing](CONTRIBUTING.md) guide for details.\n\n\n## License\n\nThis project is licensed under the [MIT License](LICENSE.md).\n\n\n## Credits\n\nThis addon is basically a clone of [ember-css-modules-sass](https://github.com/dfreeman/ember-css-modules-sass) by @dfreeman, but for modified for Less. Thanks to him for figuring this out first!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fseancodes%2Fember-css-modules-less","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fseancodes%2Fember-css-modules-less","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fseancodes%2Fember-css-modules-less/lists"}