@css-blocks/ember-cli
Use CSS Blocks with your Ember and Glimmer projects.
Last updated 8 months ago by chriseppstein .
MIT · Repository · Original npm · Tarball · package.json
$ cnpm install @css-blocks/ember-cli 
SYNC missed versions from official npm registry.

Ember CLI Plugin for CSS Blocks

Ember CLI integration for Ember CLI built apps.

Installation

ember install @css-blocks/ember-cli

Be sure that @css-blocks/ember-cli is installed as a dependency and not a dev-dependency. Every individual app, addon, or engine must depend on @css-blocks/ember-cli individually.

Usage

This addon is pre-1.0 and should be considered experimental

There are a number of caveats you should know:

  1. Eager engines are a little hacky. We'll want to make some changes to engines proper to make their behavior more consistent with regular addons.
  2. Lazy engines are not supported at this time and will require non-trivial work in ember-engines to support. We have a failing (skipped) test for them in this addon.
  3. The optimizer can not be enabled at this time and is hard-coded to disabled.
  4. The broccoli plugins do not have any kind of caching strategy right now! That, and build impact stats / tests, are coming soon.

The four above items will need to be finished in order to call this addon "done". We will be tracking these all in separate tickets.

But otherwise, this works for unlocking CSS Blocks syntax in your addons and apps ????

To style any component in an addon with CSS Blocks simply add a corresponding styles/components/component-name.block.css file. The addon will auto-discover this file and build accordingly.

For Glimmer template syntax, plese see @css-blocks/glimmer. For CSS Blocks syntax, plese see the main project's readme.

Styling {{link-to}}

In the Ember + CSS Blocks build, the built-in {{link-to}} component receives special treatment. The {{link-to}} component manages its own internal style application for [loading], [active] and [disabled]. To style a `{{link-to}} in these special states, simply apply a class with those special state names and Ember will apply the correct classes at runtime as required. For example:

/* stylesheet.block.css */
.link           { color: blue; }
.link[loading]  { color: yellow; }
.link[active]   { color: green; }
.link[disabled] { color: gray; }
{{!-- template.hbs --}}
{{link-to "route-name" block:class="link"}}

Current Tags

  • 0.20.0-beta.0                                ...           beta (2 years ago)
  • 1.3.0                                ...           latest (3 days ago)
  • 1.0.0-alpha.7                                ...           next (6 months ago)

30 Versions

  • 1.3.0                                ...           3 days ago
  • 1.2.2                                ...           9 days ago
  • 1.2.0                                ...           9 days ago
  • 1.1.2                                ...           25 days ago
  • 1.1.1                                ...           a month ago
  • 1.1.0                                ...           3 months ago
  • 1.0.0                                ...           4 months ago
  • 1.0.0-alpha.7                                ...           6 months ago
  • 1.0.0-alpha.6                                ...           6 months ago
  • 1.0.0-alpha.5                                ...           6 months ago
  • 1.0.0-alpha.4                                ...           8 months ago
  • 1.0.0-alpha.3                                ...           8 months ago
  • 1.0.0-alpha.2                                ...           8 months ago
  • 1.0.0-alpha.1                                ...           8 months ago
  • 1.0.0-alpha.0                                ...           9 months ago
  • 0.24.0                                ...           a year ago
  • 0.23.2                                ...           a year ago
  • 0.23.0                                ...           a year ago
  • 0.22.0                                ...           a year ago
  • 0.21.0                                ...           a year ago
  • 0.20.0                                ...           a year ago
  • 0.20.0-beta.8                                ...           a year ago
  • 0.20.0-beta.7                                ...           2 years ago
  • 0.20.0-beta.5                                ...           2 years ago
  • 0.20.0-beta.4                                ...           2 years ago
  • 0.20.0-beta.3                                ...           2 years ago
  • 0.20.0-beta.1                                ...           2 years ago
  • 0.20.0-beta.0                                ...           2 years ago
  • 0.19.0                                ...           2 years ago
  • 0.18.0                                ...           2 years ago
Downloads
Today 1
This Week 13
This Month 48
Last Day 1
Last Week 35
Last Month 26
Dependencies (10)
Dev Dependencies (25)

Copyright 2014 - 2017 © taobao.org |