Auto merge of #2111 - Turbo87:css-modules, r=locks

bors · bors · commit e9c9341fb25d · 2020-01-13T14:32:36.000Z
Use `ember-css-modules` for automatic style scoping This PR allows us to use per-component/route CSS modules from now on. More information is available at https://github.com/salsify/ember-css-modules, but the tl;dr is that these files are automatically scoped to the corresponding component/route, which reduces the potential for class name conflicts. Unfortunately, our CSS is currently a bit of a 🍝 bowl, so it will take some time to untangle this into properly scoped modules. r? @locks
diff --git a/app/components/flash-message.hbs b/app/components/flash-message.hbs
@@ -1,3 +1,3 @@
-<p id="flash" class={{if this.message "shown"}} data-test-flash-message ...attributes>
+<p local-class="flash {{if this.message "shown"}}" data-test-flash-message ...attributes>
   {{this.message}}
 </p>
diff --git a/app/components/flash-message.module.scss b/app/components/flash-message.module.scss
@@ -1,4 +1,4 @@
-#flash {
+.flash {
     display: none;
     font-weight: bold;
     font-size: 110%;
diff --git a/app/components/pagination.hbs b/app/components/pagination.hbs
@@ -1,5 +1,5 @@
-<nav class='pagination' aria-label="Pagination navigation">
-  <LinkTo @query={{hash page=@prevPage}} class="prev" @rel="prev" @title="previous page" data-test-pagination-prev>
+<nav local-class='pagination' aria-label="Pagination navigation">
+  <LinkTo @query={{hash page=@prevPage}} local-class="prev" @rel="prev" @title="previous page" data-test-pagination-prev>
     {{svg-jar "left-pag"}}
   </LinkTo>
   <ol>
@@ -11,7 +11,7 @@
       </li>
     {{/each}}
   </ol>
-  <LinkTo @query={{hash page=@nextPage}} class="next" @rel="next" @title="next page" data-test-pagination-next>
+  <LinkTo @query={{hash page=@nextPage}} local-class="next" @rel="next" @title="next page" data-test-pagination-next>
     {{svg-jar "right-pag"}}
   </LinkTo>
 </nav>
diff --git a/app/components/pagination.module.scss b/app/components/pagination.module.scss
diff --git a/app/styles/app.scss b/app/styles/app.scss
@@ -12,18 +12,14 @@ $link-color: rgb(0, 172, 91);
 
 @import "application";
 @import "home";
-@import "catch-all";
 @import "category-slugs";
 @import "crate";
 @import "crate/version";
 @import "components/crate-toml-copy";
-@import "components/flash-message";
-@import "components/pagination";
 @import "dashboard";
-@import "index";
-@import "loading";
 @import "me";
-@import "search";
+
+@import "modules";
 
 * {
   box-sizing: border-box;
diff --git a/app/styles/catch-all.module.scss b/app/styles/catch-all.module.scss
@@ -0,0 +1,9 @@
+.p404 {
+    font-size: 120%;
+    line-height: 3em;
+}
+
+.search-field {
+    width: 100%;
+    padding: 5px;
+}
diff --git a/app/styles/catch-all.scss b/app/styles/catch-all.scss
diff --git a/app/styles/crate/versions.module.scss b/app/styles/crate/versions.module.scss
@@ -1,7 +1,11 @@
-#crate-all-versions {
+.list {
     margin-top: 10px;
 
-    .small { margin-left: 20px; display: inline-block; }
+    :global(.small) {
+        margin-left: 20px;
+        display: inline-block;
+    }
+
     a.arrow {
         display: inline-block;
         float: right;
diff --git a/app/styles/index.module.scss b/app/styles/index.module.scss
@@ -1,4 +1,4 @@
-#title-header {
+.title-header {
     text-align: center;
     border-bottom: 5px solid $gray-border;
     padding-bottom: 40px;
@@ -19,13 +19,13 @@
     }
 }
 
-#blurb {
+.blurb {
     margin: 30px 0 40px 0;
     display: flex;
 
-    #intro { flex: 6; line-height: 25px; padding: 10px;}
+    .intro { flex: 6; line-height: 25px; padding: 10px;}
 
-    #stats {
+    .stats {
         flex: 4;
         display: flex;
         flex-direction: column;
@@ -47,7 +47,7 @@
 
     @media only screen and (max-width: 530px) {
         flex-direction: column;
-        #stats {
+        .stats {
             border: none;
             margin: auto;
         }
@@ -57,19 +57,19 @@
     }
 }
 
-#home-crates {
+.lists {
     flex-wrap: wrap;
     justify-content: left;
 
     > section {
-      margin: 0;
-      padding: 0 15px;
-      width: 33.33%;
-      @media only screen and (max-width: 750px) {
-        width: 50%;
-      }
-      @media only screen and (max-width: 550px) {
-        width: 100%;
-      }
+        margin: 0;
+        padding: 0 15px;
+        width: 33.33%;
+        @media only screen and (max-width: 750px) {
+            width: 50%;
+        }
+        @media only screen and (max-width: 550px) {
+            width: 100%;
+        }
     }
 }
diff --git a/app/styles/loading.module.scss b/app/styles/loading.module.scss
@@ -1,9 +1,10 @@
-div.loading-state {
+.loading-state {
     text-align: center;
     height: 65vh;
     padding-top: 30vh;
 }
-span.loading {
+
+.loading {
     display: inline-block;
     width: 16px;
     height: 16px;
diff --git a/app/styles/search.module.scss b/app/styles/search.module.scss
@@ -0,0 +1,3 @@
+.loading-spinner {
+    margin: 0 15px;
+}
diff --git a/app/styles/search.scss b/app/styles/search.scss
diff --git a/app/templates/catch-all.hbs b/app/templates/catch-all.hbs
@@ -1,10 +1,11 @@
 <FlashMessage @message="Oops, that route doesn't exist!" />
 
-<p id='p404'>
+<p local-class='p404'>
   Perhaps a search of the site may help?
 
   <Input
     @type="text"
+    local-class="search-field"
     class="search"
     placeholder="Search"
     @value={{this.search}}
diff --git a/app/templates/crate/versions.hbs b/app/templates/crate/versions.hbs
@@ -10,7 +10,7 @@
   </span>
 </div>
 
-<div id='crate-all-versions' class='white-rows'>
+<div local-class='list' class='white-rows'>
   {{#each this.model.versions as |version|}}
     <div class='row'>
       <div>
diff --git a/app/templates/index.hbs b/app/templates/index.hbs
@@ -1,7 +1,7 @@
-<div id='title-header'>
+<div local-class='title-header'>
   <h1>The Rust community&rsquo;s crate registry</h1>
 
-  <div class='links'>
+  <div local-class='links'>
     <a href="https://doc.rust-lang.org/cargo/getting-started/installation.html" class='yellow-button' data-test-install-cargo-link>
       {{svg-jar "button-download"}}
       Install Cargo
@@ -14,28 +14,28 @@
   </div>
 </div>
 
-<div id='blurb'>
-  <div id='intro'>
+<div local-class='blurb'>
+  <div local-class='intro'>
     Instantly publish your crates and install them. Use the API to
     interact and find out more information about available crates. Become
     a contributor and enhance the site with your work.
   </div>
 
-  <div id='stats'>
-    <div class='downloads'>
+  <div local-class='stats'>
+    <div local-class='downloads'>
       {{svg-jar "download"}}
-      <span class='num' data-test-total-downloads>{{if this.hasData (format-num this.model.num_downloads) "---,---,---"}}</span>
+      <span local-class='num' data-test-total-downloads>{{if this.hasData (format-num this.model.num_downloads) "---,---,---"}}</span>
       <span class='desc small'>Downloads</span>
     </div>
-    <div class='crates'>
+    <div local-class='crates'>
       {{svg-jar "crate"}}
-      <span class='num' data-test-total-crates>{{if this.hasData (format-num this.model.num_crates) "---,---"}}</span>
+      <span local-class='num' data-test-total-crates>{{if this.hasData (format-num this.model.num_crates) "---,---"}}</span>
       <span class='desc small'>Crates in stock</span>
     </div>
   </div>
 </div>
 
-<div id='home-crates' class='crate-lists'>
+<div local-class='lists' class='crate-lists'>
   <section id='new-crates' data-test-new-crates aria-busy="{{this.dataTask.isRunning}}">
     <h2>New Crates</h2>
     <CrateListNewest @crates={{this.model.new_crates}} />
diff --git a/app/templates/loading.hbs b/app/templates/loading.hbs
@@ -1,3 +1,3 @@
-<div class="loading-state">
-  <span class="loading"></span> Loading...
+<div local-class="loading-state">
+  <span local-class="loading"></span> Loading...
 </div>
diff --git a/app/templates/search.hbs b/app/templates/search.hbs
@@ -9,7 +9,7 @@
     <h2>for '{{ this.q }}'</h2>
   {{/if}}
 
-  {{#if this.dataTask.isRunning}}<img src="/assets/ajax-loader.gif" class="loading-spinner">{{/if}}
+  {{#if this.dataTask.isRunning}}<img src="/assets/ajax-loader.gif" local-class="loading-spinner">{{/if}}
 </div>
 
 {{#if this.firstResultPending}}
diff --git a/ember-cli-build.js b/ember-cli-build.js
@@ -31,6 +31,10 @@ module.exports = function(defaults) {
     sassOptions: {
       includePaths: ['node_modules/normalize.css'],
     },
+    cssModules: {
+      extension: 'module.scss',
+      intermediateOutputPath: 'app/styles/_modules.scss',
+    },
     fingerprint: {
       extensions: ['js', 'css', 'png', 'jpg', 'gif', 'map', 'svg', 'ttf', 'woff', 'woff2'],
     },
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
diff --git a/tests/acceptance/login-test.js b/tests/acceptance/login-test.js

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-#flash {`
	`1`	`+.flash {`
`2`	`2`	`display: none;`
`3`	`3`	`font-weight: bold;`
`4`	`4`	`font-size: 110%;`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+.loading-spinner {`
	`2`	`+ margin: 0 15px;`
	`3`	`+}`