Migrate from ember-css-modules to ember-scoped-css

app/app.css

@@ -0,0 +1,198 @@
+@import "./css/shared/a11y.css";
+@import "./css/shared/buttons.css";
+@import "./css/shared/forms.css";
+@import "./css/shared/sort-by.css";
+@import "./css/shared/typography.css";
+
+/*
+ * The `normalize.css` file does not use CSS layers, so we need to vendor it
+ * with a layer to ensure it is applied before our global styles.
+ */
+@import "./css/normalize.css";
+
+@layer global {
+    :root, [data-theme="classic"] {
+        --violet800: hsl(252, 44%, 24%);
+        --grey900: hsl(200, 15%, 19%);
+        --grey700: hsl(200, 11%, 43%);
+        --grey600: hsl(200, 13%, 60%);
+        --grey200: hsl(200, 17%, 96%);
+        --green800: hsl(115, 31%, 31%);
+        --green900: hsl(115, 31%, 21%);
+
+        --orange-50: #fff7ed;
+        --orange-100: #ffedd5;
+        --orange-200: #fed7aa;
+        --orange-300: #fdba74;
+        --orange-400: #fb923c;
+        --orange-500: #f97316;
+        --orange-600: #ea580c;
+        --orange-700: #c2410c;
+        --orange-800: #9a3412;
+        --orange-900: #7c2d12;
+
+        --yellow100: hsl(44, 100%, 90%);
+        --yellow500: hsl(44, 100%, 60%);
+        --yellow700: hsl(44, 67%, 50%);
+        --yellow800: hsl(44, 67%, 20%);
+
+        --header-bg-color: light-dark(hsl(115, 31%, 20%), #141413);
+
+        --transition-x-slow: 1000ms;
+        --transition-slow: 500ms;
+        --transition-medium: 250ms;
+        --transition-fast: 150ms;
+        --transition-x-fast: 50ms;
+        --transition-instant: 0ms;
+
+        --font-heading: "Fira Sans", sans-serif;
+        --font-body: var(--font-heading);
+        --font-monospace: "Fira Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
+        "Courier New", monospace;
+
+        --main-color: light-dark(#383838, #f9f7ec);
+        --main-color-light: light-dark(#858585, #a6a6a6);
+        --main-shadow-color: light-dark(var(--green900), hsl(111, 10%, 8%));
+        --main-bg: light-dark(#f9f7ec, hsl(0, 1%, 19%));
+        --main-bg-dark: light-dark(#edebdd, #141413);
+        --gray-border: light-dark(#d5d3cb, #666561);
+        --link-color: rgb(0, 172, 91);
+        --link-hover-color: #007940;
+
+        --placeholder-bg: hsl(212, 7%, 57%);
+        --placeholder-bg2: hsl(213, 16%, 75%);
+
+        /* see https://utopia.fyi/space/calculator?c=320,14,1.2,1140,18,1.25,5,2,&s=0.75|0.5|0.25|0.125,1.5|2|3|4|6,s-l */
+
+        --space-4xs: clamp(0.13rem, calc(0.13rem + 0.00vw), 0.13rem);
+        --space-3xs: clamp(0.25rem, calc(0.23rem + 0.12vw), 0.31rem);
+        --space-2xs: clamp(0.44rem, calc(0.39rem + 0.24vw), 0.56rem);
+        --space-xs: clamp(0.69rem, calc(0.61rem + 0.37vw), 0.88rem);
+        --space-s: clamp(0.88rem, calc(0.78rem + 0.49vw), 1.13rem);
+        --space-m: clamp(1.31rem, calc(1.17rem + 0.73vw), 1.69rem);
+        --space-l: clamp(1.75rem, calc(1.55rem + 0.98vw), 2.25rem);
+        --space-xl: clamp(2.63rem, calc(2.33rem + 1.46vw), 3.38rem);
+        --space-2xl: clamp(3.50rem, calc(3.11rem + 1.95vw), 4.50rem);
+        --space-3xl: clamp(5.25rem, calc(4.66rem + 2.93vw), 6.75rem);
+
+        /* One-up pairs */
+        --space-4xs-3xs: clamp(0.13rem, calc(0.05rem + 0.37vw), 0.31rem);
+        --space-3xs-2xs: clamp(0.25rem, calc(0.13rem + 0.61vw), 0.56rem);
+        --space-2xs-xs: clamp(0.44rem, calc(0.27rem + 0.85vw), 0.88rem);
+        --space-xs-s: clamp(0.69rem, calc(0.52rem + 0.85vw), 1.13rem);
+        --space-s-m: clamp(0.88rem, calc(0.56rem + 1.59vw), 1.69rem);
+        --space-m-l: clamp(1.31rem, calc(0.95rem + 1.83vw), 2.25rem);
+        --space-l-xl: clamp(1.75rem, calc(1.12rem + 3.17vw), 3.38rem);
+        --space-xl-2xl: clamp(2.63rem, calc(1.89rem + 3.66vw), 4.50rem);
+        --space-2xl-3xl: clamp(3.50rem, calc(2.23rem + 6.34vw), 6.75rem);
+
+        /* Custom pairs */
+        --space-s-l: clamp(0.88rem, calc(0.34rem + 2.68vw), 2.25rem);
+
+        color-scheme: light dark;
+    }
+
+    [data-color-scheme="light"] {
+        color-scheme: light;
+    }
+
+    [data-color-scheme="dark"] {
+        color-scheme: dark;
+    }
+
+    * {
+        box-sizing: border-box;
+    }
+
+    html, body {
+        margin: 0;
+        scroll-behavior: smooth;
+    }
+
+    body {
+        background-color: var(--header-bg-color);
+        font-family: var(--font-body);
+        font-size: 16px;
+        display: flex;
+        flex-direction: column;
+        min-height: 100vh;
+    }
+
+    h1, h2, h3, h4 {
+        font-family: var(--font-heading);
+    }
+
+    h1 {
+        @media only screen and (max-width: 400px) {
+            font-size: 1.5em;
+        }
+    }
+
+    a, .link, .text--link {
+        color: var(--link-color);
+        text-decoration: none;
+        cursor: pointer;
+
+        &:hover {
+            color: var(--link-hover-color);
+        }
+    }
+
+    /* Using `:not(...)` here for specificity reasons */
+    a:not([href]) {
+        color: unset;
+        cursor: initial;
+    }
+
+    pre.terminal {
+        background: var(--main-color);
+        color: white;
+        padding: var(--space-s);
+        font-family: var(--font-monospace);
+    }
+
+    abbr[title] {
+        text-decoration: none;
+        border-bottom: 1px dotted;
+    }
+
+    noscript {
+        display: grid;
+        justify-items: center;
+        padding: var(--space-m);
+        color: white;
+    }
+
+    /* see https://github.com/twbs/bootstrap/pull/30269 */
+    ::-webkit-datetime-edit,
+    ::-webkit-datetime-edit-fields-wrapper,
+    ::-webkit-datetime-edit-text,
+    ::-webkit-datetime-edit-minute,
+    ::-webkit-datetime-edit-hour-field,
+    ::-webkit-datetime-edit-day-field,
+    ::-webkit-datetime-edit-month-field,
+    ::-webkit-datetime-edit-year-field {
+        padding: 0;
+    }
+
+    ::-webkit-calendar-picker-indicator {
+        font-size: 0.9em
+    }
+
+    .c-notification__icon {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .c-notification__content {
+        line-height: 1.5;
+    }
+
+    .width-limit {
+        width: 960px;
+        @media only screen and (max-width: 960px) {
+            width: 100%;
+        }
+    }
+}

app/app.js

@@ -6,6 +6,8 @@ import Resolver from 'ember-resolver';
 import config from './config/environment';
 import * as Sentry from './sentry';
 
+import './app.css';
+
 // eslint-disable-next-line unicorn/prefer-add-event-listener
 window.onerror = undefined;
 Sentry.init();

app/components/color-scheme-menu.hbs

@@ -1,19 +1,18 @@
-<Dropdown local-class="dropdown" data-test-dark-mode-menu ...attributes as |dd|>
-  <dd.Trigger @hideArrow={{true}} local-class="trigger" data-test-dark-mode-toggle>
-    {{svg-jar this.icon local-class="icon"}}
+<Dropdown data-test-dark-mode-menu ...attributes class="dropdown" as |dd|>
+  <dd.Trigger @hideArrow={{true}} class="trigger" data-test-dark-mode-toggle>
+    {{svg-jar this.icon class=(scoped-class "icon")}}
     <span class="sr-only">Change color scheme</span>
   </dd.Trigger>
 
-  <dd.Menu local-class="menu" as |menu|>
+  <dd.Menu class="menu" as |menu|>
     {{#each this.colorSchemes as |colorScheme|}}
       <menu.Item>
         <button
-          local-class="menu-button {{if (eq colorScheme.mode this.colorScheme.scheme) 'selected'}}"
-          class="button-reset"
+          class="menu-button button-reset {{if (eq colorScheme.mode this.colorScheme.scheme) 'selected'}}"
           type="button"
           {{on 'click' (fn this.colorScheme.set colorScheme.mode)}}
         >
-          {{svg-jar colorScheme.svg local-class="icon"}} {{colorScheme.mode}}
+          {{svg-jar colorScheme.svg class=(scoped-class "icon")}} {{colorScheme.mode}}
         </button>
       </menu.Item>
     {{/each}}

app/components/crate-downloads-list.hbs

@@ -1,9 +1,9 @@
-<ul local-class="list">
+<ul class="list">
   {{#each @crates as |crate|}}
     <li>
-      <LinkTo @route="crate" @model={{crate.id}} local-class="link">
+      <LinkTo @route="crate" @model={{crate.id}} class="link">
         {{ crate.name }} ({{ crate.max_version }})
-        {{svg-jar "download-arrow" local-class="download-icon"}}
+        {{svg-jar "download-arrow" class=(scoped-class "download-icon")}}
         {{ format-num crate.downloads }}
       </LinkTo>
     </li>

app/components/crate-header.module.css → app/components/crate-header.css

@@ -25,7 +25,7 @@
     white-space: nowrap;
     cursor: default;
 
-    svg {
+    :global(svg) {
         width: 1em;
         height: 1em;
         flex-shrink: 0;

app/components/crate-header.hbs

@@ -1,11 +1,11 @@
-<PageHeader local-class="header" data-test-heading>
-  <h1 local-class="heading">
+<PageHeader class="header" data-test-heading>
+  <h1 class="heading">
     <span data-test-crate-name>{{@crate.name}}</span>
     {{#if @version}}
       <small data-test-crate-version>v{{@version.num}}</small>
 
       {{#if @version.yanked}}
-        <span local-class="yanked-badge" data-test-yanked>
+        <span class="yanked-badge" data-test-yanked>
           {{svg-jar "trash"}}
           Yanked
 
@@ -19,29 +19,29 @@
   </h1>
 
   {{#if @crate.description}}
-    <div local-class="description">
+    <div class="description">
       {{@crate.description}}
     </div>
   {{/if}}
 
   {{#if this.keywords}}
-    <ul local-class="keywords">
+    <ul class="keywords">
       {{#each this.keywords as |keyword|}}
         <li>
           <LinkTo @route="keyword" @model={{keyword.id}} data-test-keyword={{keyword.id}}>
-            <span local-class="hash">#</span>{{keyword.id}}
+            <span class="hash">#</span>{{keyword.id}}
           </LinkTo>
         </li>
       {{/each}}
     </ul>
   {{/if}}
 
   {{#if this.session.currentUser}}
-    <FollowButton @crate={{@crate}} local-class="follow-button"/>
+    <FollowButton @crate={{@crate}} class="follow-button"/>
   {{/if}}
 </PageHeader>
 
-<NavTabs aria-label="{{@crate.name}} crate subpages" local-class="nav" as |nav|>
+<NavTabs aria-label="{{@crate.name}} crate subpages" class="nav" as |nav|>
   <nav.Tab
     @link={{if
       @versionNum

app/components/crate-list.hbs

@@ -1,6 +1,6 @@
 <div ...attributes>
   {{!-- The extra div wrapper is needed for specificity issues with `margin` --}}
-  <ol local-class="list">
+  <ol class="list">
     {{#each @crates as |crate index|}}
       <li>
         <CrateRow @crate={{crate}} data-test-crate-row={{index}} />

app/components/crate-row.module.css → app/components/crate-row.css

@@ -44,7 +44,7 @@
         }
     }
 
-    svg {
+    :global(svg) {
         vertical-align: top;
         height: 1rem;
         width: 1rem;
@@ -59,7 +59,7 @@
     & > * {
         margin-bottom: calc(var(--space-xs) / 2);
     }
-    & > :not(last-child) {
+    & > :not(:last-child) {
         margin-right: var(--space-2xs);
     }
 }
@@ -77,7 +77,7 @@
         margin-top: var(--space-xs);
     }
 
-    svg {
+    :global(svg) {
         height: 1em;
         width: 1em;
         margin-right: var(--space-xs);