ember-savvy-css

An Ember addon for including Savvy CSS in an Ember project.

Installation

ember install @savvy-css/ember-savvy-css

Usage

Generating Files

During installation, the addon will run its default blueprint (which can be run manually with ember g ember-savvy-css). The blueprint generates a savvy-css/ directory within your project's app/styles/ directory. This directory consists of files that organize imports of the modules comprising savvy-css:

_settings.css

This file contains all of the CSS Custom Properties provided by Savvy. You can override these properties with you own values by importing this file as the first thing in your application.

_core.css

This file contains Savvy's core -- its helper classes. Some of these will attempt to make use of Savvy variables (otherwise, they'll fallback on default values), so it's recommended to import this file after _settings.css.

Importing Generated Files

After the default blueprint runs, all you need to do is import the generated files in your app.css file to make it a part of the styles that are processed by your app.

Here's our recommended setup:

/* --------- app.css --------- */

/* Import Savvy CSS variables/settings */
@import "./savvy-css/_settings.css";

/* Import local variables/settings after Savvy settings */
@import "./_variables.css";

/* Import core Savvy CSS before local core CSS */
@import "./savvy-css/_core.css";


/* Organize the rest of your app's CSS from this point onward */

Currently, this setup assumes that your styles are being processed wth ember-cli-postcss, but more flexible options are being explored.

Configuring your Build with PostCSS

PostCSS requires at least one plugin be defined. We're going to need a way to resolve paths of CSS @import rules anyway, so let's use postcss-import as our first plugin. Here's what the PostCSS options should look like in ember-cli-build.js:

// ember-cli-build.js

/* eslint-env node */
const EmberApp = require('ember-cli/lib/broccoli/ember-app');
const cssImport = require('postcss-import');

module.exports = function(defaults) {
  var app = new EmberApp(defaults, {
    postcssOptions: {
      compile: {
        enabled: true,
        plugins: [
          { module: cssImport }
        ]
      }
    },
  });
  return app.toTree();
};