From baf9ac5809a37daf687292f1e2d6c58173e1a354 Mon Sep 17 00:00:00 2001
From: Oliver Davies <oliver@oliverdavies.uk>
Date: Mon, 15 Jul 2019 12:31:50 +0100
Subject: [PATCH] Revert "Use SugarSS"

This reverts commit 7319a7a940031a55cb8d82a1f9bf0ce1248acd52.
---
 postcss.config.js                             |  4 --
 resources/css/app.css                         |  8 ++++
 resources/css/app.sss                         |  8 ----
 .../css/components/{button.sss => button.css} | 11 +++--
 .../{container.sss => container.css}          |  3 +-
 resources/css/components/lead.css             |  5 +++
 resources/css/components/lead.sss             |  3 --
 .../css/components/{markup.sss => markup.css} | 41 ++++++++++++-------
 .../css/components/{note.sss => note.css}     | 16 +++++---
 resources/css/components/table.css            | 18 ++++++++
 resources/css/components/table.sss            | 13 ------
 resources/css/components/video.css            |  9 ++++
 resources/css/components/video.sss            |  7 ----
 .../css/components/{widget.sss => widget.css} |  3 +-
 resources/css/components/wrap.css             |  7 ++++
 resources/css/components/wrap.sss             |  5 ---
 .../css/{custom-base.sss => custom-base.css}  | 23 +++++++----
 resources/css/custom-components.css           |  9 ++++
 resources/css/custom-components.sss           |  9 ----
 webpack.mix.js                                | 13 +-----
 20 files changed, 120 insertions(+), 95 deletions(-)
 delete mode 100644 postcss.config.js
 create mode 100644 resources/css/app.css
 delete mode 100644 resources/css/app.sss
 rename resources/css/components/{button.sss => button.css} (62%)
 rename resources/css/components/{container.sss => container.css} (72%)
 create mode 100644 resources/css/components/lead.css
 delete mode 100644 resources/css/components/lead.sss
 rename resources/css/components/{markup.sss => markup.css} (69%)
 rename resources/css/components/{note.sss => note.css} (50%)
 create mode 100644 resources/css/components/table.css
 delete mode 100644 resources/css/components/table.sss
 create mode 100644 resources/css/components/video.css
 delete mode 100644 resources/css/components/video.sss
 rename resources/css/components/{widget.sss => widget.css} (62%)
 create mode 100644 resources/css/components/wrap.css
 delete mode 100644 resources/css/components/wrap.sss
 rename resources/css/{custom-base.sss => custom-base.css} (59%)
 create mode 100644 resources/css/custom-components.css
 delete mode 100644 resources/css/custom-components.sss

diff --git a/postcss.config.js b/postcss.config.js
deleted file mode 100644
index 2a959b66..00000000
--- a/postcss.config.js
+++ /dev/null
@@ -1,4 +0,0 @@
-module.exports = {
-  "parser": "sugarss",
-  "plugins": {}
-}
diff --git a/resources/css/app.css b/resources/css/app.css
new file mode 100644
index 00000000..4b2aa713
--- /dev/null
+++ b/resources/css/app.css
@@ -0,0 +1,8 @@
+@import 'tailwindcss/base';
+@import 'custom-base';
+
+@import 'tailwindcss/components';
+@import 'highlightjs/styles/github-gist';
+@import 'custom-components';
+
+@import 'tailwindcss/utilities';
diff --git a/resources/css/app.sss b/resources/css/app.sss
deleted file mode 100644
index 403654a7..00000000
--- a/resources/css/app.sss
+++ /dev/null
@@ -1,8 +0,0 @@
-@import 'tailwindcss/base'
-@import 'custom-base.sss'
-
-@import 'tailwindcss/components'
-@import 'highlightjs/styles/github-gist'
-@import 'custom-components.sss'
-
-@import 'tailwindcss/utilities'
diff --git a/resources/css/components/button.sss b/resources/css/components/button.css
similarity index 62%
rename from resources/css/components/button.sss
rename to resources/css/components/button.css
index 66c4719e..33e1b668 100644
--- a/resources/css/components/button.sss
+++ b/resources/css/components/button.css
@@ -1,10 +1,13 @@
-.button
-  @apply bg-blue-600 border-blue-600 border inline-block text-white no-underline py-2 px-3 rounded text-sm
+.button {
+  @apply bg-blue-600 border-blue-600 border inline-block text-white no-underline py-2 px-3 rounded text-sm;
 
-  &:focus
+  &:focus {
     @apply py-2 px-3 m-0
+  }
 
   &:active,
   &:focus,
-  &:hover
+  &:hover {
     @apply bg-white text-blue-600
+  }
+}
diff --git a/resources/css/components/container.sss b/resources/css/components/container.css
similarity index 72%
rename from resources/css/components/container.sss
rename to resources/css/components/container.css
index 2f10bdcd..b2096cca 100644
--- a/resources/css/components/container.sss
+++ b/resources/css/components/container.css
@@ -1,2 +1,3 @@
-.container
+.container {
   @apply w-full max-w-5xl px-4 mx-auto
+}
diff --git a/resources/css/components/lead.css b/resources/css/components/lead.css
new file mode 100644
index 00000000..7805fa41
--- /dev/null
+++ b/resources/css/components/lead.css
@@ -0,0 +1,5 @@
+p.lead {
+  @screen md {
+    @apply text-lg
+  }
+}
diff --git a/resources/css/components/lead.sss b/resources/css/components/lead.sss
deleted file mode 100644
index 73254254..00000000
--- a/resources/css/components/lead.sss
+++ /dev/null
@@ -1,3 +0,0 @@
-p.lead
-  @screen md
-    @apply text-lg
diff --git a/resources/css/components/markup.sss b/resources/css/components/markup.css
similarity index 69%
rename from resources/css/components/markup.sss
rename to resources/css/components/markup.css
index 9dbdb6f0..3b3e0ee4 100644
--- a/resources/css/components/markup.sss
+++ b/resources/css/components/markup.css
@@ -1,16 +1,19 @@
-.markup
-  @apply leading-normal
+.markup {
+  @apply leading-normal;
 
   h2,
   h3,
-  h4
+  h4 {
     @apply text-black font-bold mb-3
+  }
 
-  h2
+  h2 {
     @apply mt-8 mb-3
+  }
 
-  h3
+  h3 {
     @apply text-lg mt-8
+  }
 
   p,
   ul,
@@ -19,28 +22,38 @@
   table,
   figure,
   pre,
-  [v-pre]
-    &:not(:last-child)
+  [v-pre] {
+    &:not(:last-child) {
       @apply mb-6
+    }
+  }
 
-  ul
+  ul {
     @apply list-disc ml-5
+  }
 
-  code
+  code {
     @apply bg-gray-200 font-mono text-sm
+  }
 
   p,
-  li
-    code
+  li {
+    code {
       @apply inline-block border border-gray-300 font-bold mx-px p-1 leading-none
+    }
+  }
 
   pre code,
-  .hljs
+  .hljs {
     @apply block leading-loose overflow-x-scroll p-6
+  }
 
   figure,
-  img
+  img {
     @apply block
+  }
 
-  figcaption
+  figcaption {
     @apply italic text-sm text-gray-800 text-center mb-0 mt-1
+  }
+}
diff --git a/resources/css/components/note.sss b/resources/css/components/note.css
similarity index 50%
rename from resources/css/components/note.sss
rename to resources/css/components/note.css
index e2087816..7f9909cd 100644
--- a/resources/css/components/note.sss
+++ b/resources/css/components/note.css
@@ -1,11 +1,15 @@
-.note
-  @apply bg-blue-200 border-blue-600 border-l-4 mb-4 p-4 rounded
+.note {
+  @apply bg-blue-200 border-blue-600 border-l-4 mb-4 p-4 rounded;
 
-  > *:not(:first-child)
+  > *:not(:first-child) {
     @apply mt-6
+  }
 
-  p a
-    @apply text-black underline
+  p a {
+    @apply text-black underline;
 
-    &:hover
+    &:hover {
       @apply no-underline
+    }
+  }
+}
diff --git a/resources/css/components/table.css b/resources/css/components/table.css
new file mode 100644
index 00000000..fccae0d9
--- /dev/null
+++ b/resources/css/components/table.css
@@ -0,0 +1,18 @@
+.table {
+  @apply w-full;
+
+  th {
+    @apply bg-gray-200 text-left;
+  }
+
+  th,
+  td {
+    @apply px-4 py-2 border border-solid border-gray-300;
+  }
+}
+
+table.is-striped {
+  tbody > tr:not(:nth-child(odd)) td {
+    @apply bg-gray-100;
+  }
+}
diff --git a/resources/css/components/table.sss b/resources/css/components/table.sss
deleted file mode 100644
index 002410ef..00000000
--- a/resources/css/components/table.sss
+++ /dev/null
@@ -1,13 +0,0 @@
-.table
-  @apply w-full
-
-  th
-    @apply bg-gray-200 text-left
-
-  th,
-  td
-    @apply px-4 py-2 border border-solid border-gray-300
-
-table.is-striped
-  tbody > tr:not(:nth-child(odd)) td
-    @apply bg-gray-100
diff --git a/resources/css/components/video.css b/resources/css/components/video.css
new file mode 100644
index 00000000..b03da98f
--- /dev/null
+++ b/resources/css/components/video.css
@@ -0,0 +1,9 @@
+.video-full {
+  @apply w-full relative;
+  padding-top: 56.25%;
+
+  iframe,
+  embed {
+    @apply absolute h-full left-0 top-0 w-full
+  }
+}
diff --git a/resources/css/components/video.sss b/resources/css/components/video.sss
deleted file mode 100644
index 1f5ca9c1..00000000
--- a/resources/css/components/video.sss
+++ /dev/null
@@ -1,7 +0,0 @@
-.video-full
-  @apply w-full relative
-  padding-top: 56.25%
-
-  iframe,
-  embed
-    @apply absolute h-full left-0 top-0 w-full
diff --git a/resources/css/components/widget.sss b/resources/css/components/widget.css
similarity index 62%
rename from resources/css/components/widget.sss
rename to resources/css/components/widget.css
index faca0ca6..fdcc356b 100644
--- a/resources/css/components/widget.sss
+++ b/resources/css/components/widget.css
@@ -1,2 +1,3 @@
-.widget
+.widget {
   @apply block mb-6
+}
diff --git a/resources/css/components/wrap.css b/resources/css/components/wrap.css
new file mode 100644
index 00000000..9fe5fde9
--- /dev/null
+++ b/resources/css/components/wrap.css
@@ -0,0 +1,7 @@
+.wrap {
+  @apply w-full max-w-3xl mx-auto;
+
+  &.is-wide {
+    @apply max-w-5xl
+  }
+}
diff --git a/resources/css/components/wrap.sss b/resources/css/components/wrap.sss
deleted file mode 100644
index a7c56720..00000000
--- a/resources/css/components/wrap.sss
+++ /dev/null
@@ -1,5 +0,0 @@
-.wrap
-  @apply w-full max-w-3xl mx-auto
-
-  &.is-wide
-    @apply max-w-5xl
diff --git a/resources/css/custom-base.sss b/resources/css/custom-base.css
similarity index 59%
rename from resources/css/custom-base.sss
rename to resources/css/custom-base.css
index 8fb459da..0456432a 100644
--- a/resources/css/custom-base.sss
+++ b/resources/css/custom-base.css
@@ -1,20 +1,27 @@
-h1, h2, h3
+h1, h2, h3 {
   @apply font-bold
+}
 
-h1
+h1 {
   @apply text-3xl
+}
 
-h2
+h2 {
   @apply text-2xl
+}
 
-img
+img {
   @apply max-w-full h-auto
+}
 
-a
-  @apply text-blue-600 no-underline
+a {
+  @apply text-blue-600 no-underline;
 
-  &:hover
+  &:hover {
     @apply underline
+  }
+}
 
-blockquote
+blockquote {
   @apply border-l-4 border-blue-600 pl-4 px-6 py-2
+}
diff --git a/resources/css/custom-components.css b/resources/css/custom-components.css
new file mode 100644
index 00000000..972c258e
--- /dev/null
+++ b/resources/css/custom-components.css
@@ -0,0 +1,9 @@
+@import 'components/button';
+@import 'components/container';
+@import 'components/lead';
+@import 'components/markup';
+@import 'components/note';
+@import 'components/table';
+@import 'components/video';
+@import 'components/widget';
+@import 'components/wrap';
diff --git a/resources/css/custom-components.sss b/resources/css/custom-components.sss
deleted file mode 100644
index a106051f..00000000
--- a/resources/css/custom-components.sss
+++ /dev/null
@@ -1,9 +0,0 @@
-@import 'components/button.sss'
-@import 'components/container.sss'
-@import 'components/lead.sss'
-@import 'components/markup.sss'
-@import 'components/note.sss'
-@import 'components/table.sss'
-@import 'components/video.sss'
-@import 'components/widget.sss'
-@import 'components/wrap.sss'
diff --git a/webpack.mix.js b/webpack.mix.js
index 306ce026..ee42b392 100644
--- a/webpack.mix.js
+++ b/webpack.mix.js
@@ -3,7 +3,7 @@ let mix = require('laravel-mix')
 require('laravel-mix-purgecss')
 
 mix.disableNotifications()
-  .postCss('resources/css/app.sss', 'source/dist/css', [
+  .postCss('resources/css/app.css', 'source/dist/css', [
     require('postcss-import')(),
     require('tailwindcss')('tailwind.config.js'),
     require('postcss-nested')(),
@@ -23,14 +23,3 @@ mix.disableNotifications()
     whitelistPatterns: [/language/, /hljs/],
     whitelistPatternsChildren: [/^markdown$/]
   })
-
-mix.webpackConfig({
-  module: {
-    rules: [
-      {
-        test: /\.sss?$/,
-        loader: 'postcss-loader'
-      }
-    ]
-  }
-})