https://github.com/onehilltech/ember-cli-styled
an EmberJS add-on for modularizing your styles by routes and components
https://github.com/onehilltech/ember-cli-styled
addons css emberjs modularization stylesheets
Last synced: about 1 month ago
JSON representation
an EmberJS add-on for modularizing your styles by routes and components
- Host: GitHub
- URL: https://github.com/onehilltech/ember-cli-styled
- Owner: onehilltech
- License: apache-2.0
- Created: 2018-10-18T20:41:29.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2024-04-07T03:36:19.000Z (about 1 year ago)
- Last Synced: 2025-02-27T12:39:46.631Z (2 months ago)
- Topics: addons, css, emberjs, modularization, stylesheets
- Language: JavaScript
- Homepage:
- Size: 900 KB
- Stars: 2
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
Awesome Lists containing this project
README
# ember-cli-styled
ember-cli add-on for modularizing your styles
## Compatibility
* Ember.js v4.4 or above
* Ember CLI v4.4 or above
* Node.js v14 or above
## Installation
ember install ember-cli-styled
Features
------------------------------------------------------------------------------
* Separate styles by route and/or component
* Automatically apply styles based on the current route
* Add polymorphic behavior to your styles
<<<<<<< HEAD
Usage
-----------------------------------------------
### Initialize the service
Inject the `styled` service into your application route, and call the
`initialize()` method.
```javascript
import Route from '@ember/routing/route';
import { inject as service } from '@ember/service';
export default class ApplicationRoute extends Route {
@service
styled;
constructor () {
super (...arguments);
this.styled.initialize ();
}
}
```
### Generate Styles for a Route
Use the `style` blueprint to generate the style for a route:
ember g style [name]
For example, here is the command to generate the style for route `a/b/c`:
ember g style a/b/c
This will generate the a style file that contains the following contents:
```scss
// app/styles/routes/a/b/_c.scss
.route__a-b-c {
}
```
Now, class names that appear within the scope `.route__a-b-c` will only be applied
when the user enters route `a/b/c`.
### Generate Styles for a Component
Use the `component-style` blueprint to generate the style for a component:
ember g component-style [name]
For example, here is the command to generate the style for component `foo-bar`:
ember g component-style foo-bar
This will generate a style that contains the following contents:
```scss
// app/styles/components/_foo-bar.scss
.foo-bar {
}
```
Now, class names that appear within the scope `.foo-bar` will be applied to components
that have `foo-bar` added to its `classNames` property.
But, How Does It Work?! (TLDR)
------------------------------------------------------------------------------
=======
## Usage
>>>>>>> 6dfe9e7 (v3.18.0...v4.12.2)
To understand how `ember-cli-styled` works, you must first understand how routes
work in Ember. Whenever you enter or exit a route, the route fires the `activate`
and `deactivate` event, respectively, on the `Route` class. The `deactivate` event,
if applicable, is always fired before the `activate` event. Likewise, routes (not
to be mistaken with URL paths) can have child routes. For example, in `a/b/c` then
`a` route has a child route of `b`, which has a child route of `c`. Each route
has the option of providing a `{{outlet}}` for which the child route (or template)
can generate its template code.
In the example route `a/b/c`, Ember will first fire the `activate` on route
`a`, then fire the `activate` event on route `a/b`, and lastly fire the `activate`
event on route `a/b/c`.
<<<<<<< HEAD
`ember-cli-styled` uses this behavior to apply and remove style class names that correspond
to a given route as the user routes around your application. All style class names are
applied the the `body` HTML element. In the example above, `ember-cli-styled` generate
a `body` element with the following class names:
=======
## Contributing
>>>>>>> 6dfe9e7 (v3.18.0...v4.12.2)
```html
```
<<<<<<< HEAD
This allows you to separate styles based on route definitions instead of adding them
all to `app.css` or `app.scss`. For example, if you have styles that are applicable
to all child routes of `a/b`, like `a/b/c` or `a/b/d`, then you can define it in
`.route__a-b`.
=======
## License
>>>>>>> 6dfe9e7 (v3.18.0...v4.12.2)
Happy Coding!