You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: packages/@css-blocks/ember-app/README.md
+11-3
Original file line number
Diff line number
Diff line change
@@ -14,13 +14,21 @@ This addon is only part of the Ember build pipeline for CSS Blocks! Your applica
14
14
2. Also make sure you add `@css-blocks/ember` as a dependency if you are authoring css using CSS Blocks.
15
15
3. Run `ember build`.
16
16
17
-
That's it! For development builds, we'll generate CSS output with some developer-friendly BEM class names so you can better understand your application. For production builds, you'll get a CSS artifact that's been concatenated and minified.
17
+
If your application has a `app/styles/app.css` file, the build output of CSS Blocks will be automatically added to end of that file. If your project uses some other filename (E.g. due to preprocessing) then a file named `app/styles/css-blocks.css` is added to your application styles directory during the build and it can be included/imported by your preprocessor or concatenated with other files to produce your application's css file.
18
18
19
-
This addon also provides a template helper for your application: `-css-blocks-`. We take a closer look at how this helper works in the Ember Build Pipeline Technical Deep Dive. The quick summary is that this helper figures out what styles to apply to any templates or components with an associated CSS Blocks file. Any templates that were previously compiled using the `@css-blocks/ember` addon will reference this helper, so you'll need to make sure you have it available in your app.
19
+
If your application uses engines, the `css-blocks` service must be added as a dependency to each engine that uses `@css-blocks/ember`.
20
+
21
+
That's it! For development builds, we'll generate CSS output with some developer-friendly BEM class names so you can better understand your application. For production builds, you'll get a CSS artifact that's been concatenated, optimized, and minified.
20
22
21
23
## Options
22
24
23
-
None at the moment, but when they're available, we'll document them here.
25
+
The following options can be passed as options to the `css-blocks` property in your application's `ember-cli-build.js`.
26
+
27
+
*`output` - `<string>` Changes the filename where css-block's styles are written into the `app/styles` directory during the build. If this is set, the styles are never concatenated automatically with `app/styles/app.css`.
28
+
*`aliases` - `<object>` The keys of this object import aliases accept values that are absolute paths to a directory containing CSS Block files. E.g. `{myblocks: path.resolve(__dirname, '../blocks')}` would cause `@block foo from 'myblocks/header.block.css';` to import the `header.block.css` file in the `../blocks` directory.
29
+
*`analysisOpts` - Template analysis options. You probably don't need to set these.
30
+
*`parserOpts` - Options passed to the CSS Blocks parser and compiler. If not set, these options are loaded automatically from a `css-blocks.config.js` file. Using a CSS Blocks configuration file will allow other tools like the CSS Blocks command line (`@css-blocks/cli`) to load the same options as your ember application.
31
+
*`optimization` - Options passed to the Opticss optimizer. This can be used to selectively enable or disable specific optimizations or to explicitly disable all optimizations by setting the `enable` option to `false`.
An ember-cli addon for Ember applications using CSS Blocks applications, addons, and engines that author stylesheets using CSS Blocks.
8
+
9
+
This addon is only part of the Ember build pipeline for CSS Blocks! Any application that consumes CSS Blocks from itself, an addon, or an engine will need the `@css-blocks/ember-app` addon as a dependency.
10
+
11
+
## Basic Usage
12
+
13
+
1. Add this addon as a dependency to your application, addon, or engine.
14
+
2. Also make sure you the application adds `@css-blocks/ember-app` as a dependency.
15
+
3. Run `ember build`. See the [README for `@css-blocks/ember-app](../ember-app/README.md) for more instructions.
16
+
17
+
## Options
18
+
19
+
The following options can be passed as options to the `css-blocks` property in your application's `ember-cli-build.js`.
20
+
21
+
*`output` - `<string>` Changes the filename where css-block's styles are written into the `app/styles` directory during the build. If this is set, the styles are never concatenated automatically with `app/styles/app.css`.
22
+
*`aliases` - `<object>` The keys of this object import aliases accept values that are absolute paths to a directory containing CSS Block files. E.g. `{myblocks: path.resolve(__dirname, '../blocks')}` would cause `@block foo from 'myblocks/header.block.css';` to import the `header.block.css` file in the `../blocks` directory.
23
+
*`analysisOpts` - Template analysis options. You probably don't need to set these.
24
+
*`parserOpts` - Options passed to the CSS Blocks parser and compiler. If not set, these options are loaded automatically from a `css-blocks.config.js` file. Using a CSS Blocks configuration file will allow other tools like the CSS Blocks command line (`@css-blocks/cli`) to load the same options as your ember application.
25
+
*`optimization` - Options passed to the Opticss optimizer. This can be used to selectively enable or disable specific optimizations or to explicitly disable all optimizations by setting the `enable` option to `false`.
26
+
27
+
## Common Gotchas
28
+
29
+
This section is devoted to common issues you might run into when working with this addon.
30
+
31
+
### Nothing yet...
32
+
33
+
There's nothing here yet, but we'll add things here as the need arises.
34
+
35
+
## More Reading
36
+
37
+
-[CSS Blocks User Documentation](https://css-blocks.com/)
38
+
- Ember Build Pipeline Technical Deep Dive - Link TBD
0 commit comments