Use postcss for sass, convert to angle brackets, update highlight.js (#668)

* Bump deps, remove sass, update highlight.js

* Convert to angle brackets

* Install postcss

* Fix postcss setup

* Fix some tests

Author: RobbieTheWagner

.prettierrc.js

@@ -2,6 +2,7 @@
 
 module.exports = {
   singleQuote: true,
+  trailingComma: 'none',
   overrides: [
     {
       files: '**/*.hbs',

addon/components/api/x-class/template.hbs

@@ -4,41 +4,37 @@
 <div data-test-class-description>{{{class.description}}}</div>
 
 {{#if (or (and class.exportType showImportPaths) hasToggles)}}
-  {{#api/x-meta-panel as |panel|}}
+  <Api::XMetaPanel as |panel|>
     {{#if class.exportType}}
-      {{#panel.header}}
+      <panel.header>
         Import Path
-      {{/panel.header}}
+      </panel.header>
 
-      {{api/x-import-path item=class}}
+      <Api::XImportPath @item={{class}} />
     {{/if}}
 
     {{#if hasToggles}}
-      {{#panel.header}}
+      <panel.header>
         Show
-      {{/panel.header}}
+      </panel.header>
 
       {{#if hasToggles}}
-        {{api/x-toggles
-          toggles=(hash
+        <Api::XToggles @toggles={{hash
             inherited=(if class.hasInherited showInherited)
             protected=(if class.hasProtected showProtected)
             private=(if class.hasPrivate showPrivate)
             deprecated=(if class.hasDeprecated showDeprecated)
-          )
-        }}
+          }} />
       {{/if}}
     {{/if}}
-  {{/api/x-meta-panel}}
+  </Api::XMetaPanel>
 {{/if}}
 
 {{#if hasContents}}
-  {{api/x-sections
-    sections=(hash
+  <Api::XSections @sections={{hash
       constructors=class.constructors
       fields=class.fields
       accessors=class.accessors
       methods=class.methods
-    )
-  }}
+    }} />
 {{/if}}

addon/components/api/x-component/template.hbs

@@ -1,40 +1,34 @@
-<h1 class="docs-h1" data-test-component-name>{{component.name}}</h1>
+<h1 class="docs-h1" data-test-component-name>{{@component.name}}</h1>
 
 {{! wrapping in a div seems to work around https://github.com/ember-learn/ember-cli-addon-docs/issues/7 }}
-<div data-test-component-name>{{{component.description}}}</div>
+<div data-test-component-name>{{{@component.description}}}</div>
 
 {{#if hasToggles}}
-  {{#api/x-meta-panel as |panel|}}
-    {{#panel.header}}
+  <Api::XMetaPanel as |panel|>
+    <panel.header>
       Show
-    {{/panel.header}}
+    </panel.header>
 
     {{#if hasToggles}}
-      {{api/x-toggles
-        toggles=(hash
+      <Api::XToggles @toggles={{hash
           inherited=(if component.hasInherited showInherited)
           internal=(if component.hasInternal showInternal)
           protected=(if component.hasProtected showProtected)
           private=(if component.hasPrivate showPrivate)
           deprecated=(if component.hasDeprecated showDeprecated)
-        )
-
-        onToggle=(action "updateFilter")
-      }}
+        }} @onToggle={{action "updateFilter"}} />
     {{/if}}
-  {{/api/x-meta-panel}}
+  </Api::XMetaPanel>
 {{/if}}
 
 
 {{#if hasContents}}
-  {{api/x-sections
-    sections=(hash
+  <Api::XSections @sections={{hash
       constructors=constructors
       yields=yields
       arguments=arguments
       fields=fields
       accessors=accessors
       methods=methods
-    )
-  }}
+    }} />
 {{/if}}

addon/components/api/x-module/template.hbs

@@ -1,8 +1,6 @@
-{{api/x-sections
-  sections=(hash
+<Api::XSections @sections={{hash
     classes=module.classes
     components=module.components
     functions=module.functions
     variables=module.variables
-  )
-}}
+  }} />

addon/components/api/x-section/template.hbs

@@ -12,9 +12,9 @@
     {{/if}}
 
     {{#if (or item.isClass item.isComponent)}}
-      {{#link-to "docs.api.item" (concat "modules/" item.id) class="hover:underline"}}
+      <LinkTo @route="docs.api.item" @model={{concat "modules/" item.id}} class="hover:underline">
         <strong>{{item.name}}</strong>
-      {{/link-to}}
+      </LinkTo>
     {{else}}
       <a href="#{{item.name}}" class="heading-anchor">
         {{type-signature item}}
@@ -27,19 +27,19 @@
   </p>
 
   {{#if (or (and item.exportType showImportPaths) shouldDisplayParams)}}
-    {{#api/x-meta-panel as |panel|}}
+    <Api::XMetaPanel as |panel|>
       {{#if item.exportType}}
-        {{#panel.header}}
+        <panel.header>
           Import Path
-        {{/panel.header}}
+        </panel.header>
 
-        {{api/x-import-path item=item}}
+        <Api::XImportPath @item={{item}} />
       {{/if}}
 
       {{#if shouldDisplayParams}}
-        {{#panel.header}}
+        <panel.header>
           Params
-        {{/panel.header}}
+        </panel.header>
 
         <table class="docs-mb-6" data-test-item-params>
           <tbody>
@@ -53,6 +53,6 @@
           </tbody>
         </table>
       {{/if}}
-    {{/api/x-meta-panel}}
+    </Api::XMetaPanel>
   {{/if}}
 </div>

addon/components/docs-code-highlight/component.js

@@ -1,6 +1,6 @@
 import Component from '@ember/component';
 import layout from './template';
-import hljs from 'highlight.js/lib/highlight';
+import hljs from 'highlight.js/lib/core';
 
 // Installed languages
 import javascript from 'highlight.js/lib/languages/javascript';

addon/components/docs-demo/template.hbs

@@ -34,7 +34,7 @@
         <div class="
           docs-demo__snippet-wrapper docs-bg-code-base docs-rounded-b
         ">
-          {{docs-snippet name=snippet.name unindent=true language=snippet.language}}
+          <DocsSnippet @name={{snippet.name}} @unindent={{true}} @language={{snippet.language}} />
         </div>
       {{/if}}
     {{/each}}

addon/components/docs-header/link/template.hbs

@@ -25,21 +25,9 @@
 
 {{else}}
 
-  {{#link-to route
-    class=(concat
-      "docs-px-4 docs-py-5 docs-transition docs-uppercase docs-text-xxs
-      docs-font-bold docs-no-underline "
-      (if (not (eq route "index"))
-        (if isActive
-          "docs-text-brand"
-          "docs-text-grey-darkest hover:docs-text-brand"
-        )
-        "docs-text-grey-darkest"
-      )
-    )
-    data-test-id=data-test-id
-  }}
+  <LinkTo @route={{route}} class={{concat "docs-px-4 docs-py-5 docs-transition docs-uppercase docs-text-xxs
+      docs-font-bold docs-no-underline " (if (not (eq route "index")) (if isActive "docs-text-brand" "docs-text-grey-darkest hover:docs-text-brand") "docs-text-grey-darkest")}} data-test-id={{data-test-id}}>
     {{yield}}
-  {{/link-to}}
+  </LinkTo>
 
 {{/if}}

addon/components/docs-header/search-results/template.hbs

@@ -1,21 +1,10 @@
 {{#if (and trimmedQuery search.isIdle)}}
-  {{#modal-dialog
-    tetherTarget="[data-search-box]"
-    attachment="top left"
-    clickOutsideToClose=true
-    onClose=(action "clearSearch")
-    targetAttachment="bottom left"
-    constraints=(array (hash to="window" attachment="together" pin=true))}}
+  <ModalDialog @tetherTarget="[data-search-box]" @attachment="top left" @clickOutsideToClose={{true}} @onClose={{action "clearSearch"}} @targetAttachment="bottom left" @constraints={{array (hash to="window" attachment="together" pin=true)}}>
 
     <ul class="docs-w-76 docs-bg-white docs-shadow-md" data-test-search-result-list>
       {{#each (take 5 searchResults) as |result index|}}
         <li>
-          {{docs-header/search-result
-            result=result
-            query=query
-            selected=(eq index selectedIndex)
-            onMouseEnter=(action "selectResult" index)
-            onClick=(action "clearSearch")}}
+          <DocsHeader::SearchResult @result={{result}} @query={{query}} @selected={{eq index selectedIndex}} @onMouseEnter={{action "selectResult" index}} @onClick={{action "clearSearch"}} />
         </li>
       {{else}}
         <li class="docs-block docs-py-1 docs-px-3 docs-text-grey-dark docs-no-underline">
@@ -24,5 +13,5 @@
       {{/each}}
     </ul>
 
-  {{/modal-dialog}}
+  </ModalDialog>
 {{/if}}

addon/components/docs-header/template.hbs

@@ -21,9 +21,9 @@
         link=(component "docs-header/link")
       )}}
 
-      {{docs-header/search-box query=query on-input=(action (mut query))}}
+      <DocsHeader::SearchBox @query={{query}} @on-input={{action (mut query)}} />
 
-      {{#docs-header/link on-click=(action (toggle "isShowingVersionSelector" this))}}
+      <DocsHeader::Link @on-click={{action (toggle "isShowingVersionSelector" this)}}>
         <span data-test-id="current-version" data-version-selector class="docs-flex docs-items-center">
 
           {{#if (eq currentVersion.key latestVersionName)}}
@@ -38,14 +38,14 @@
 
           {{svg-jar "caret" height=12 width=12}}
         </span>
-      {{/docs-header/link}}
+      </DocsHeader::Link>
 
       {{#if projectHref}}
-        {{#docs-header/link href=projectHref}}
+        <DocsHeader::Link @href={{projectHref}}>
           <span class="docs-flex">
             {{svg-jar "github" width=24 height=24}}
           </span>
-        {{/docs-header/link}}
+        </DocsHeader::Link>
       {{/if}}
 
       {{!-- Something to take up space on mobile, so the scrolling nav isn't hugging the edge --}}
@@ -55,9 +55,9 @@
 </header>
 
 {{#if query}}
-  {{docs-header/search-results query=query on-visit=(action "didVisitPage")}}
+  <DocsHeader::SearchResults @query={{query}} @on-visit={{action "didVisitPage"}} />
 {{/if}}
 
 {{#if isShowingVersionSelector}}
-  {{docs-header/version-selector on-close=(action (mut isShowingVersionSelector false))}}
+  <DocsHeader::VersionSelector @on-close={{action (mut isShowingVersionSelector false)}} />
 {{/if}}