Merge pull request #900 from ember-learn/update-auto-import

update node-sass and ember-auto-import

app/services/algolia.js

@@ -1,27 +1,20 @@
 import Service from '@ember/service';
 import algoliasearch from 'algoliasearch';
 import config from 'ember-api-docs/config/environment';
-import { denodeify } from 'rsvp';
 
 export default class AlgoliaService extends Service {
-  _search(query, params, callback) {
-    if (!callback) {
-      callback = params;
-      params = undefined;
-    }
+  async search(query, params) {
     if (query) {
       if (Array.isArray(query) && !params) {
         // if multiple indices
-        this._client.search(query, callback);
+        return this._client.search(query);
       } else if (!params) {
         // if no params
-        this.accessIndex(query.indexName).search(query.query, callback);
+        return this.accessIndex(query.indexName).search(query.query);
       } else {
         // if params and callback
-        this.accessIndex(query.indexName).search(query.query, params, callback);
+        return this.accessIndex(query.indexName).search(query.query, params);
       }
-    } else {
-      callback(new Error(`Could not search algolia for query "${query}"`));
     }
   }
 
@@ -39,6 +32,5 @@ export default class AlgoliaService extends Service {
       config.algolia.algoliaKey
     );
     this._indices = {};
-    this.search = denodeify(this._search.bind(this));
   }
 }

app/styles/base/_forms.scss

@@ -1,9 +1,7 @@
-@use "sass:math";
-
 fieldset {
   background-color: lighten($base-border-color, 10%);
   border: $base-border;
-  margin: 0 0 $small-spacing;
+  margin: 0 0 var(--small-spacing);
   padding: $base-spacing;
 }
 
@@ -30,7 +28,7 @@ select {
 
 label {
   font-weight: 600;
-  margin-bottom: math.div($small-spacing, 2);
+  margin-bottom: calc(--sass-small-spacing / 2);
 
   &.required::after {
     content: "*";
@@ -50,8 +48,8 @@ textarea {
   box-sizing: border-box;
   font-family: $base-font-family;
   font-size: $base-font-size;
-  margin-bottom: math.div($base-spacing, 2);
-  padding: math.div($base-spacing, 3);
+  margin-bottom: calc($base-spacing / 2);
+  padding: calc($base-spacing / 3);
   transition: border-color;
   width: 100%;
 
@@ -74,10 +72,10 @@ textarea {
 input[type="checkbox"],
 input[type="radio"] {
   display: inline;
-  margin-right: math.div($small-spacing, 2);
+  margin-right: calc(--small-spacing / 2);
 }
 
 input[type="file"] {
-  padding-bottom: $small-spacing;
+  padding-bottom: var(--small-spacing);
   width: 100%;
 }

app/styles/base/_lists.scss

@@ -6,7 +6,7 @@ ol {
 
   &%default-ul {
     list-style-type: disc;
-    margin-bottom: $small-spacing;
+    margin-bottom: var(--small-spacing);
     padding-left: $base-spacing;
 
     @media (max-width: $mobile-portrait-screen){
@@ -21,12 +21,12 @@ ol {
     > li {
       counter-increment: customlistcounter;
       clear: both;
-      padding: $small-spacing 0 $small-spacing 2em;
+      padding: var(--small-spacing) 0 var(--small-spacing) 2em;
       position: relative;
       z-index: 1;
 
       &::before {
-        @include position(absolute, ($small-spacing + 0.5em) null null 0);
+        @include position(absolute, (var(--small-spacing) + 0.5em) null null 0);
         @include size(2em);
         content: counter(customlistcounter) " ";
         border: 2px solid $base-border-color;
@@ -47,11 +47,11 @@ ol {
 }
 
 dl {
-  margin-bottom: $small-spacing;
+  margin-bottom: var(--small-spacing);
 
   dt {
     font-weight: bold;
-    margin-top: $small-spacing;
+    margin-top: var(--small-spacing);
   }
 
   dd {

app/styles/base/_tables.scss

@@ -1,7 +1,7 @@
 table {
   font-feature-settings: "kern", "liga", "tnum";
   border-collapse: collapse;
-  margin: $small-spacing 0;
+  margin: var(--small-spacing) 0;
   table-layout: fixed;
   width: 100%;
   position: relative;
@@ -23,7 +23,7 @@ td {
 }
 
 th, td {
-  padding: $small-spacing;
+  padding: var(--small-spacing);
 }
 
 tr,

app/styles/base/_typography.scss

@@ -20,7 +20,7 @@ h6 {
   font-family: $heading-font-family;
   font-size: $base-font-size;
   line-height: $heading-line-height;
-  margin: 0 0 $small-spacing;
+  margin: 0 0 var(--small-spacing);
   font-weight: bold;
 
   code {
@@ -43,7 +43,7 @@ h2 {
 }
 
 p {
-  margin: 1.5em 0 $small-spacing;
+  margin: 1.5em 0 var(--small-spacing);
   line-height: 1.5em;
 }
 

app/styles/base/_variables.scss

@@ -1,5 +1,3 @@
-@use "sass:math";
-
 // Typography
 $base-font-family: 'Source Sans Pro', sans-serif;
 $heading-font-family: $base-font-family;
@@ -15,9 +13,14 @@ $large-font-size: 1.5rem;
 $base-line-height: 1.5;
 $heading-line-height: 1.2;
 
+:root {
+  --base-line-height: 1.5;
+  --base-spacing: calc(var(--base-line-height) * 1em);
+  --small-spacing: calc(var(--base-spacing) / 2);
+}
+
 // Spacing
 $base-spacing: $base-line-height * 1em;
-$small-spacing: math.div($base-spacing, 2);
 $large-spacing: $base-spacing * 2;
 $top-spacing: $base-spacing * 3.333; // 80px
 

app/styles/components/_article.scss

@@ -1,8 +1,8 @@
 article {
-  padding: $large-spacing $small-spacing;
+  padding: $large-spacing var(--small-spacing);
 
   @media (min-width: $medium-screen){
-    padding: $small-spacing;
+    padding: var(--small-spacing);
   }
 
   .edit-page {

app/styles/components/_class-field-desc.scss

@@ -1,5 +1,5 @@
 .chapter li {
-  margin: $small-spacing 0;
+  margin: var(--small-spacing) 0;
 
   @media (max-width: $mobile-portrait-screen) {
     margin: 0;

app/styles/components/_highlight.scss

@@ -5,7 +5,7 @@
   font-family: $monospace-font-family;
   font-size: 0.8em;
   line-height: 1.5em;
-  margin: $small-spacing 0 $large-spacing;
+  margin: var(--small-spacing) 0 $large-spacing;
   overflow: hidden;
   position: relative;
   font-variant-ligatures: none;
@@ -28,7 +28,7 @@
       }
     }
   }
-  
+
   .scroller {
     overflow: auto;
   }

app/styles/components/_sidebar.scss

@@ -3,7 +3,7 @@
   border-bottom: $base-border;
   position: relative;
   z-index: 1;
-  padding: $small-spacing 0;
+  padding: var(--small-spacing) 0;
 
   @include media($large-screen-up) {
     // fixed sidebar, full height
@@ -12,7 +12,7 @@
     width: 19em;
     border-bottom: 0;
     border-right: $base-border;
-    padding: $small-spacing $base-spacing $base-spacing * 1.5;
+    padding: var(--small-spacing) $base-spacing $base-spacing * 1.5;
 
     &::before {
       @include position(absolute, 0 0 0 -100vw);
@@ -123,14 +123,14 @@ ol.toc-level-1 {
   font-size: $base-font-size * 0.9;
   transition: max-height 0.5s ease;
 
-  &.selected{ 
+  &.selected{
     max-height: 3000px;
   }
 
   &:not(.selected) {
     overflow: hidden;
     max-height: 0;
-  } 
+  }
 
   li {
     border-left: 3px solid transparent;
@@ -148,6 +148,6 @@ ol.toc-level-1 {
   }
 
   a {
-    padding-left: $small-spacing;
+    padding-left: var(--small-spacing);
   }
 }

ember-cli-build.js

@@ -5,6 +5,7 @@ const Funnel = require('broccoli-funnel');
 const mergeTrees = require('broccoli-merge-trees');
 const envIsProduction = process.env.EMBER_ENV === 'production';
 const premberUrls = require('./prember-urls');
+const nodeSass = require('node-sass');
 
 module.exports = function (defaults) {
   let app = new EmberApp(defaults, {
@@ -25,20 +26,14 @@ module.exports = function (defaults) {
       generateAssetMap: true,
     },
     sassOptions: {
+      implementation: nodeSass,
       sourceMapEmbed: !envIsProduction,
       includePaths: [
         'app/styles',
         'node_modules/bourbon-neat/app/assets/stylesheets',
         'node_modules/normalize.css',
       ],
     },
-    autoImport: {
-      webpack: {
-        node: {
-          process: 'mock',
-        },
-      },
-    },
     autoprefixer: {
       enabled: true,
       cascade: true,