Auto merge of #2372 - Turbo87:bye-bye-sass, r=locks

Use regular CSS with `postcss-nested` instead of SASS

SASS support with CSS modules is a little hard to reason about and less well supported by some of the build tooling like embroider. With `postcss-nested` we can achieve everything that we are still using SASS for, so it is easier for us to switch to regular CSS instead of keeping SASS around.

r? @locks

Author: bors

app/components/api-token-row.module.scss renamed to app/components/api-token-row.module.css

@@ -38,7 +38,7 @@
 
 .created-at,
 .last-used-at {
-    composes: small from '../styles/shared/typography.module.scss';
+    composes: small from '../styles/shared/typography.module.css';
     line-height: 1.15rem;
 }
 
@@ -49,11 +49,11 @@
 }
 
 .save-button {
-    composes: yellow-button small from '../styles/shared/buttons.module.scss';
+    composes: yellow-button small from '../styles/shared/buttons.module.css';
 }
 
 .revoke-button {
-    composes: tan-button small from '../styles/shared/buttons.module.scss';
+    composes: tan-button small from '../styles/shared/buttons.module.css';
 }
 
 .new-token {

app/components/crate-downloads-list.module.scss renamed to app/components/crate-downloads-list.module.css

@@ -22,7 +22,7 @@
 }
 
 .description {
-    composes: small from '../styles/shared/typography.module.scss';
+    composes: small from '../styles/shared/typography.module.css';
     margin-top: 8px;
 }
 

app/components/crate-row.module.scss renamed to app/components/crate-row.module.css

@@ -53,7 +53,7 @@
 .cancel-button,
 .edit-button,
 .resend-button {
-    composes: yellow-button small from '../styles/shared/buttons.module.scss';
+    composes: yellow-button small from '../styles/shared/buttons.module.css';
 }
 
 .save-button {

app/components/crate-toml-copy.module.scss renamed to app/components/crate-toml-copy.module.css

@@ -0,0 +1,3 @@
+.button {
+    composes: tan-button from '../styles/shared/buttons.module.css';
+}

app/components/dropdown.module.scss renamed to app/components/dropdown.module.css

@@ -10,12 +10,12 @@
 }
 
 .date-column {
-    composes: small from '../styles/shared/typography.module.scss';
+    composes: small from '../styles/shared/typography.module.css';
 }
 
 .accept-button,
 .decline-button {
-    composes: yellow-button small from '../styles/shared/buttons.module.scss';
+    composes: yellow-button small from '../styles/shared/buttons.module.css';
 }
 
 .error-message {

app/components/dropdown/content.module.scss renamed to app/components/dropdown/content.module.css

@@ -1,5 +1,5 @@
 .results-count {
-    composes: small from '../styles/shared/typography.module.scss';
+    composes: small from '../styles/shared/typography.module.css';
 }
 
 .highlight {

app/components/dropdown/menu-item.module.scss renamed to app/components/dropdown/menu-item.module.css

@@ -8,7 +8,7 @@
 }
 
 .sort-by-label {
-    composes: small from './shared/typography.module.scss';
+    composes: small from './shared/typography.module.css';
 }
 
 .list {
@@ -26,11 +26,11 @@
 }
 
 .crate-count {
-    composes: small from './shared/typography.module.scss';
+    composes: small from './shared/typography.module.css';
 }
 
 .description {
-    composes: small from './shared/typography.module.scss';
+    composes: small from './shared/typography.module.css';
     margin-top: 4px;
     line-height: 1.2rem;
 }

app/components/dropdown/menu.module.scss renamed to app/components/dropdown/menu.module.css

@@ -24,7 +24,7 @@
 
 .crate-count,
 .category-description {
-    composes: small from '../shared/typography.module.scss';
+    composes: small from '../shared/typography.module.css';
 }
 
 .category-description {
@@ -39,7 +39,7 @@
 }
 
 .sort-by-label {
-    composes: small from '../shared/typography.module.scss';
+    composes: small from '../shared/typography.module.css';
 }
 
 .list {

app/components/dropdown/trigger.module.scss renamed to app/components/dropdown/trigger.module.css

@@ -24,7 +24,7 @@
 }
 
 .submit-button {
-    composes: small yellow-button from '../shared/buttons.module.scss';
+    composes: small yellow-button from '../shared/buttons.module.css';
 }
 
 .list {
@@ -49,5 +49,5 @@
 }
 
 .remove-button {
-    composes: small yellow-button from '../shared/buttons.module.scss';
+    composes: small yellow-button from '../shared/buttons.module.css';
 }

app/components/email-input.module.scss renamed to app/components/email-input.module.css

@@ -103,7 +103,7 @@ div.header {
 
 .last-update,
 .crate-size {
-    composes: small from '../shared/typography.module.scss';
+    composes: small from '../shared/typography.module.css';
     line-height: 25px;
 }
 
@@ -142,7 +142,7 @@ div.header {
 }
 
 .more-versions-link {
-    composes: small from '../shared/typography.module.scss';
+    composes: small from '../shared/typography.module.css';
 }
 
 .authorship {
@@ -244,7 +244,7 @@ div.header {
 }
 
 .stat-description {
-    composes: small from '../shared/typography.module.scss';
+    composes: small from '../shared/typography.module.css';
 }
 
 .graph {
@@ -268,5 +268,5 @@ div.header {
 }
 
 .yanked {
-    composes: yanked from '../shared/typography.module.scss';
+    composes: yanked from '../shared/typography.module.css';
 }

app/components/flash-message.module.scss renamed to app/components/flash-message.module.css

@@ -3,7 +3,7 @@
 }
 
 .page-description {
-    composes: small from '../shared/typography.module.scss';
+    composes: small from '../shared/typography.module.css';
 }
 
 .list {
@@ -25,13 +25,13 @@
 }
 
 .date {
-    composes: small from '../shared/typography.module.scss';
+    composes: small from '../shared/typography.module.css';
     display: inline-block;
     margin-left: 20px;
 }
 
 .yanked {
-    composes: yanked from '../shared/typography.module.scss';
+    composes: yanked from '../shared/typography.module.css';
 }
 
 .arrow {

app/components/follow-button.module.css

@@ -38,7 +38,7 @@
 }
 
 .sort-by-label {
-    composes: small from './shared/typography.module.scss';
+    composes: small from './shared/typography.module.css';
 }
 
 .list {

app/components/follow-button.module.scss

@@ -26,7 +26,7 @@
 }
 
 .stats-label {
-    composes: small from './shared/typography.module.scss';
+    composes: small from './shared/typography.module.css';
 }
 
 .my-info {
@@ -102,11 +102,11 @@
 }
 
 .feed-version {
-    composes: small from './shared/typography.module.scss';
+    composes: small from './shared/typography.module.css';
 }
 
 .feed-date {
-    composes: small from './shared/typography.module.scss';
+    composes: small from './shared/typography.module.css';
     flex-grow: 1;
     text-align: right;
 }

app/components/front-page-list.module.scss renamed to app/components/front-page-list.module.css

@@ -20,7 +20,7 @@
 }
 
 .hero-button {
-    composes: yellow-button from '../styles/shared/buttons.module.scss';
+    composes: yellow-button from '../styles/shared/buttons.module.css';
 }
 
 .blurb {
@@ -62,7 +62,7 @@
 }
 
 .stats-label {
-    composes: small from './shared/typography.module.scss';
+    composes: small from './shared/typography.module.css';
 }
 
 .lists {

app/components/front-page-list/item.module.scss renamed to app/components/front-page-list/item.module.css

@@ -6,7 +6,7 @@
 }
 
 .sort-by-label {
-    composes: small from '../shared/typography.module.scss';
+    composes: small from '../shared/typography.module.css';
 }
 
 .list {

app/components/link-to-dep.module.scss renamed to app/components/link-to-dep.module.css

@@ -6,7 +6,7 @@
 }
 
 .sort-by-label {
-    composes: small from './shared/typography.module.scss';
+    composes: small from './shared/typography.module.css';
 }
 
 .list {
@@ -25,5 +25,5 @@
 }
 
 .crate-count {
-    composes: small from './shared/typography.module.scss';
+    composes: small from './shared/typography.module.css';
 }

app/components/owned-crate-row.module.scss renamed to app/components/owned-crate-row.module.css

@@ -6,7 +6,7 @@
 }
 
 .sort-by-label {
-    composes: small from '../shared/typography.module.scss';
+    composes: small from '../shared/typography.module.css';
 }
 
 .list {

app/components/page-header.module.scss renamed to app/components/page-header.module.css

@@ -6,7 +6,7 @@
 }
 
 .sort-by-label {
-    composes: small from '../shared/typography.module.scss';
+    composes: small from '../shared/typography.module.css';
 }
 
 .list {

app/components/pagination.module.scss renamed to app/components/pagination.module.css

@@ -58,7 +58,7 @@
 
 .select-all-button,
 .deselect-all-button {
-    composes: yellow-button small from '../shared/buttons.module.scss';
+    composes: yellow-button small from '../shared/buttons.module.css';
     margin-right: 1rem;
 }
 
@@ -80,7 +80,7 @@
 
 
 .update-notifications-button {
-    composes: yellow-button from '../shared/buttons.module.scss';
+    composes: yellow-button from '../shared/buttons.module.css';
 }
 
 .me-subheading {
@@ -94,7 +94,7 @@
 }
 
 .new-token-button {
-    composes: yellow-button from '../shared/buttons.module.scss';
+    composes: yellow-button from '../shared/buttons.module.css';
 }
 
 .token-list {

app/components/pending-owner-invite-row.module.scss renamed to app/components/pending-owner-invite-row.module.css

@@ -6,7 +6,7 @@
 }
 
 .sort-by-label {
-    composes: small from './shared/typography.module.scss';
+    composes: small from './shared/typography.module.css';
 }
 
 .list {

app/components/results-count.module.scss renamed to app/components/results-count.module.css

@@ -34,7 +34,7 @@
 }
 
 .sort-by-label {
-    composes: small from './shared/typography.module.scss';
+    composes: small from './shared/typography.module.css';
 }
 
 .list {

app/components/sort-dropdown.module.scss renamed to app/components/sort-dropdown.module.css

@@ -15,7 +15,7 @@
 }
 
 .sort-by-label {
-    composes: small from './shared/typography.module.scss';
+    composes: small from './shared/typography.module.css';
 }
 
 .list {

app/styles/application.module.scss renamed to app/styles/application.module.css

@@ -29,7 +29,10 @@ module.exports = function (defaults) {
       components: highlightedLanguages,
     },
     cssModules: {
-      extension: 'module.scss',
+      extension: 'module.css',
+      plugins: {
+        before: [require('postcss-nested')],
+      },
     },
     fingerprint: {
       extensions: ['js', 'css', 'png', 'jpg', 'gif', 'map', 'svg', 'ttf', 'woff', 'woff2'],