feat: remove dependency on ember-cli-sass and sass

This also adds the ability to exclude Ember Freestyle's styles.

.eslintrc.js

@@ -37,6 +37,7 @@ module.exports = {
         './blueprints/*/index.js',
         './config/**/*.js',
         './lib/**/*.js',
+        './script/**/*.js',
         './tests/dummy/config/**/*.js',
       ],
       parserOptions: {

.husky/pre-commit

@@ -0,0 +1,5 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+yarn compile-styles
+git add ./vendor/ember-freestyle.css

README.md

@@ -58,12 +58,41 @@ You can even use the constituent components like `freestyle-usage` on their own.
 Hopefully the installation instructions got you off to a smooth, seamless start.
 If you have any problems, feel free to chat with us in the [Ember Community Discord](https://discord.gg/emberjs) or [open an issue](https://github.com/chrislopresto/ember-freestyle/issues/new). As always, PRs are welcome!
 
-## Removing Ember Freestyle from Your Production Build
+## Excluding Ember Freestyle's Styles
+
+If you want to exclude Ember Freestyle's styles, you can set the `includeStyles`
+option to `false` in your `ember-cli-build.js` file:
+
+```js
+// ember-cli-build.js
+
+module.exports = function (defaults) {
+  const app = new EmberApp(defaults, {
+    'ember-freestyle': {
+      includeStyles: false,
+    },
+  };
+};
+```
+
+This might be useful in case you want to define your own styles _or_ if you are
+using `ember-cli-sass` and want to import Ember Freestyle's styles explicitly:
+
+```scss
+$FreestyleGuide-color--primary: #C70039;
+$FreestyleGuide-color--accent: #DAF7A6;
+
+@import 'ember-freestyle';
+```
+
+## Excluding Ember Freestyle from Your Production Build
 
 We recommend excluding Ember Freestyle from production builds using Ember CLI's
 `addons.blacklist` option.
 
 ```js
+// ember-cli-build.js
+
 const environment = process.env.EMBER_ENV;
 const addonsToExclude = environment === 'production' ? ['ember-freestyle'] : [];
 

ember-cli-build.js

@@ -8,6 +8,9 @@ module.exports = function (defaults) {
     autoprefixer: {
       cascade: false,
     },
+    'ember-freestyle': {
+      includeStyles: false,
+    },
     snippetSearchPaths: ['tests/dummy/app'],
   });
 

index.js

@@ -1,5 +1,9 @@
 'use strict';
 
+const DEFAULT_OPTIONS = {
+  includeStyles: true,
+};
+
 module.exports = {
   name: require('./package').name,
 
@@ -11,10 +15,20 @@ module.exports = {
     this._super.included.apply(this, arguments);
     // support for nested addon
     // see: https://github.com/ember-cli/ember-cli/issues/3718
-    var target = parentAddon || app;
+    const target = parentAddon || app;
+
     if (!this.app && target.app) {
       this.app = target.app;
     }
+
+    const options = {
+      ...DEFAULT_OPTIONS,
+      ...this.app.options[this.name],
+    };
+
+    if (options.includeStyles === true) {
+      this.app.import('vendor/ember-freestyle.css');
+    }
   },
 
   setupPreprocessorRegistry(type, registry) {

package.json

@@ -14,6 +14,7 @@
   },
   "scripts": {
     "build": "ember build --environment=production",
+    "compile-styles": "node ./script/compile-styles.js",
     "lint": "npm-run-all --aggregate-output --continue-on-error --parallel \"lint:!(fix)\"",
     "lint:css": "stylelint \"./**/*.scss\"",
     "lint:css:fix": "stylelint \"./**/*.scss\" --fix",
@@ -22,6 +23,7 @@
     "lint:hbs:fix": "ember-template-lint . --fix",
     "lint:js": "eslint . --cache",
     "lint:js:fix": "eslint . --fix",
+    "prepare": "husky install",
     "start": "ember serve",
     "test": "npm-run-all lint test:*",
     "test:ember": "ember test",
@@ -39,13 +41,11 @@
     "ember-auto-import": "^1.11.3",
     "ember-cli-babel": "^7.26.6",
     "ember-cli-htmlbars": "^6.0.0",
-    "ember-cli-sass": "^10.0.0",
     "ember-modifier": "^2.1.2",
     "ember-named-blocks-polyfill": "^0.2.4",
     "ember-truth-helpers": "^3.0.0",
     "json-formatter-js": "^2.3.4",
     "macro-decorators": "^0.1.2",
-    "sass": "^1.43.3",
     "strip-indent": "^3.0.0"
   },
   "devDependencies": {
@@ -62,6 +62,7 @@
     "ember-cli-deploy-build": "^2.0.0",
     "ember-cli-deploy-git": "^1.3.4",
     "ember-cli-inject-live-reload": "^2.1.0",
+    "ember-cli-sass": "^10.0.0",
     "ember-cli-showdown": "^6.0.0",
     "ember-cli-sri": "^2.1.0",
     "ember-cli-terser": "^4.0.2",
@@ -83,12 +84,14 @@
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-qunit": "^7.0.0",
+    "husky": "^7.0.4",
     "loader.js": "^4.7.0",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.3.2",
     "qunit": "^2.16.0",
     "qunit-dom": "^2.0.0",
     "remarkable": "^2.0.0",
+    "sass": "^1.43.3",
     "standard-version": "^9.3.2",
     "stylelint": "^13.13.1",
     "stylelint-config-prettier": "^9.0.3",

script/compile-styles.js

@@ -0,0 +1,14 @@
+'use strict';
+
+const fs = require('fs');
+const path = require('path');
+const sass = require('sass');
+
+const inputFile = path.join(__dirname, '../app/styles/ember-freestyle.scss');
+const outputFile = path.join(__dirname, '../vendor/ember-freestyle.css');
+
+const { css } = sass.renderSync({
+  file: inputFile,
+});
+
+fs.writeFileSync(outputFile, css);

tests/dummy/app/styles/app.scss

@@ -1,3 +1,5 @@
+@import 'ember-freestyle';
+
 html,
 body {
   font-family: sans-serif;