{"id":21884621,"url":"https://github.com/onehilltech/ember-cli-styled","last_synced_at":"2025-10-19T12:16:02.712Z","repository":{"id":57223486,"uuid":"153684900","full_name":"onehilltech/ember-cli-styled","owner":"onehilltech","description":"an EmberJS add-on for modularizing your styles by routes and components","archived":false,"fork":false,"pushed_at":"2024-04-07T03:36:19.000Z","size":922,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-02-27T12:39:46.631Z","etag":null,"topics":["addons","css","emberjs","modularization","stylesheets"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/onehilltech.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":"2018-10-18T20:41:29.000Z","updated_at":"2023-03-07T19:50:06.000Z","dependencies_parsed_at":"2024-11-16T17:32:31.605Z","dependency_job_id":"5f96a8bd-d2c8-441c-a3f8-946e50605375","html_url":"https://github.com/onehilltech/ember-cli-styled","commit_stats":null,"previous_names":[],"tags_count":15,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/onehilltech%2Fember-cli-styled","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/onehilltech%2Fember-cli-styled/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/onehilltech%2Fember-cli-styled/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/onehilltech%2Fember-cli-styled/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/onehilltech","download_url":"https://codeload.github.com/onehilltech/ember-cli-styled/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244892903,"owners_count":20527513,"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":["addons","css","emberjs","modularization","stylesheets"],"created_at":"2024-11-28T10:14:57.667Z","updated_at":"2025-10-19T12:16:02.700Z","avatar_url":"https://github.com/onehilltech.png","language":"JavaScript","readme":"# ember-cli-styled\n\nember-cli add-on for modularizing your styles\n\n\n## Compatibility\n\n* Ember.js v4.4 or above\n* Ember CLI v4.4 or above\n* Node.js v14 or above\n\n\n## Installation\n\n\n    ember install ember-cli-styled\n    \n    \nFeatures\n------------------------------------------------------------------------------\n\n* Separate styles by route and/or component\n* Automatically apply styles based on the current route\n* Add polymorphic behavior to your styles\n\n\nUsage\n-----------------------------------------------\n\n### Initialize the service\n\nInject the `styled` service into your application route, and call the \n`initialize()` method.\n\n```javascript\nimport Route from '@ember/routing/route';\nimport { inject as service } from '@ember/service';\n\nexport default class ApplicationRoute extends Route {\n  @service\n  styled;\n\n  constructor () {\n    super (...arguments);\n\n    this.styled.initialize ();\n  }\n}\n```\n\n### Generate Styles for a Route\n\nUse the `style` blueprint to generate the style for a route:\n\n    ember g style [name]\n    \nFor example, here is the command to generate the style for route `a/b/c`:\n\n    ember g style a/b/c\n    \nThis will generate the a style file that contains the following contents:\n\n```scss\n// app/styles/routes/a/b/_c.scss\n\n.route__a-b-c {\n\n}\n```    \n\nNow, class names that appear within the scope `.route__a-b-c` will only be applied\nwhen the user enters route `a/b/c`.\n\n### Generate Styles for a Component\n\nUse the `component-style` blueprint to generate the style for a component:\n\n    ember g component-style [name]\n    \nFor example, here is the command to generate the style for component `foo-bar`:\n\n    ember g component-style foo-bar\n    \nThis will generate a style that contains the following contents:\n\n```scss\n// app/styles/components/_foo-bar.scss\n\n.foo-bar {\n\n}\n```    \n\nNow, class names that appear within the scope `.foo-bar` will be applied to components\nthat have `foo-bar` added to its `classNames` property.\n\n\nBut, How Does It Work?! (TLDR)\n------------------------------------------------------------------------------\n\nTo understand how `ember-cli-styled` works, you must first understand how routes\nwork in Ember. Whenever you enter or exit a route, the route fires the `activate`\nand `deactivate` event, respectively, on the `Route` class. The `deactivate` event, \nif applicable, is always fired before the `activate` event. Likewise, routes (not \nto be mistaken with URL paths) can have child routes. For example, in `a/b/c` then \n`a` route has a child route of `b`, which has a child route of `c`. Each route \nhas the option of providing a `{{outlet}}` for which the child route (or template) \ncan generate its template code.\n\nIn the example route `a/b/c`, Ember will first fire the `activate` on route \n`a`, then fire the `activate` event on route `a/b`, and lastly fire the `activate`\nevent on route `a/b/c`. \n\n`ember-cli-styled` uses this behavior to apply and remove style class names that correspond \nto a given route as the user routes around your application. All style class names are \napplied the the `body` HTML element. In the example above, `ember-cli-styled` generate\na `body` element with the following class names:\n\n\n```html\n\u003cbody class=\"route__a route__a-b route__a-b-c\"\u003e\n\n\u003c/body\u003e\n```\n\nThis allows you to separate styles based on route definitions instead of adding them\nall to `app.css` or `app.scss`. For example, if you have styles that are applicable \nto all child routes of `a/b`, like `a/b/c` or `a/b/d`, then you can define it in \n`.route__a-b`.\n\n\nHappy Coding!\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fonehilltech%2Fember-cli-styled","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fonehilltech%2Fember-cli-styled","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fonehilltech%2Fember-cli-styled/lists"}