From 7319a7a940031a55cb8d82a1f9bf0ce1248acd52 Mon Sep 17 00:00:00 2001
From: Oliver Davies <oliver@oliverdavies.uk>
Date: Mon, 8 Jul 2019 20:41:58 +0100
Subject: [PATCH] Use SugarSS

---
 package.json                                  |  3 +-
 postcss.config.js                             |  4 ++
 resources/css/app.css                         |  8 ----
 resources/css/app.sss                         |  8 ++++
 .../css/components/{button.css => button.sss} | 11 ++---
 .../{container.css => container.sss}          |  3 +-
 resources/css/components/lead.css             |  5 ---
 resources/css/components/lead.sss             |  3 ++
 .../css/components/{markup.css => markup.sss} | 41 +++++++------------
 .../css/components/{note.css => note.sss}     | 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.css => widget.sss} |  3 +-
 resources/css/components/wrap.css             |  7 ----
 resources/css/components/wrap.sss             |  5 +++
 .../css/{custom-base.css => custom-base.sss}  | 23 ++++-------
 resources/css/custom-components.css           |  9 ----
 resources/css/custom-components.sss           |  9 ++++
 webpack.mix.js                                | 13 +++++-
 yarn.lock                                     |  9 +++-
 22 files changed, 105 insertions(+), 122 deletions(-)
 create mode 100644 postcss.config.js
 delete mode 100644 resources/css/app.css
 create mode 100644 resources/css/app.sss
 rename resources/css/components/{button.css => button.sss} (62%)
 rename resources/css/components/{container.css => container.sss} (72%)
 delete mode 100644 resources/css/components/lead.css
 create mode 100644 resources/css/components/lead.sss
 rename resources/css/components/{markup.css => markup.sss} (69%)
 rename resources/css/components/{note.css => note.sss} (50%)
 delete mode 100644 resources/css/components/table.css
 create mode 100644 resources/css/components/table.sss
 delete mode 100644 resources/css/components/video.css
 create mode 100644 resources/css/components/video.sss
 rename resources/css/components/{widget.css => widget.sss} (62%)
 delete mode 100644 resources/css/components/wrap.css
 create mode 100644 resources/css/components/wrap.sss
 rename resources/css/{custom-base.css => custom-base.sss} (59%)
 delete mode 100644 resources/css/custom-components.css
 create mode 100644 resources/css/custom-components.sss

diff --git a/package.json b/package.json
index db81d84e..0195dfcc 100644
--- a/package.json
+++ b/package.json
@@ -31,6 +31,7 @@
     "vue": "^2.5.17"
   },
   "dependencies": {
-    "postcss-import": "^12.0.1"
+    "postcss-import": "^12.0.1",
+    "sugarss": "^2.0.0"
   }
 }
diff --git a/postcss.config.js b/postcss.config.js
new file mode 100644
index 00000000..2a959b66
--- /dev/null
+++ b/postcss.config.js
@@ -0,0 +1,4 @@
+module.exports = {
+  "parser": "sugarss",
+  "plugins": {}
+}
diff --git a/resources/css/app.css b/resources/css/app.css
deleted file mode 100644
index 4b2aa713..00000000
--- a/resources/css/app.css
+++ /dev/null
@@ -1,8 +0,0 @@
-@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
new file mode 100644
index 00000000..403654a7
--- /dev/null
+++ b/resources/css/app.sss
@@ -0,0 +1,8 @@
+@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.css b/resources/css/components/button.sss
similarity index 62%
rename from resources/css/components/button.css
rename to resources/css/components/button.sss
index 33e1b668..66c4719e 100644
--- a/resources/css/components/button.css
+++ b/resources/css/components/button.sss
@@ -1,13 +1,10 @@
-.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.css b/resources/css/components/container.sss
similarity index 72%
rename from resources/css/components/container.css
rename to resources/css/components/container.sss
index b2096cca..2f10bdcd 100644
--- a/resources/css/components/container.css
+++ b/resources/css/components/container.sss
@@ -1,3 +1,2 @@
-.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
deleted file mode 100644
index 7805fa41..00000000
--- a/resources/css/components/lead.css
+++ /dev/null
@@ -1,5 +0,0 @@
-p.lead {
-  @screen md {
-    @apply text-lg
-  }
-}
diff --git a/resources/css/components/lead.sss b/resources/css/components/lead.sss
new file mode 100644
index 00000000..73254254
--- /dev/null
+++ b/resources/css/components/lead.sss
@@ -0,0 +1,3 @@
+p.lead
+  @screen md
+    @apply text-lg
diff --git a/resources/css/components/markup.css b/resources/css/components/markup.sss
similarity index 69%
rename from resources/css/components/markup.css
rename to resources/css/components/markup.sss
index 3b3e0ee4..9dbdb6f0 100644
--- a/resources/css/components/markup.css
+++ b/resources/css/components/markup.sss
@@ -1,19 +1,16 @@
-.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,
@@ -22,38 +19,28 @@
   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.css b/resources/css/components/note.sss
similarity index 50%
rename from resources/css/components/note.css
rename to resources/css/components/note.sss
index 7f9909cd..e2087816 100644
--- a/resources/css/components/note.css
+++ b/resources/css/components/note.sss
@@ -1,15 +1,11 @@
-.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
deleted file mode 100644
index fccae0d9..00000000
--- a/resources/css/components/table.css
+++ /dev/null
@@ -1,18 +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/table.sss b/resources/css/components/table.sss
new file mode 100644
index 00000000..002410ef
--- /dev/null
+++ b/resources/css/components/table.sss
@@ -0,0 +1,13 @@
+.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
deleted file mode 100644
index b03da98f..00000000
--- a/resources/css/components/video.css
+++ /dev/null
@@ -1,9 +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/video.sss b/resources/css/components/video.sss
new file mode 100644
index 00000000..1f5ca9c1
--- /dev/null
+++ b/resources/css/components/video.sss
@@ -0,0 +1,7 @@
+.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.css b/resources/css/components/widget.sss
similarity index 62%
rename from resources/css/components/widget.css
rename to resources/css/components/widget.sss
index fdcc356b..faca0ca6 100644
--- a/resources/css/components/widget.css
+++ b/resources/css/components/widget.sss
@@ -1,3 +1,2 @@
-.widget {
+.widget
   @apply block mb-6
-}
diff --git a/resources/css/components/wrap.css b/resources/css/components/wrap.css
deleted file mode 100644
index 9fe5fde9..00000000
--- a/resources/css/components/wrap.css
+++ /dev/null
@@ -1,7 +0,0 @@
-.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
new file mode 100644
index 00000000..a7c56720
--- /dev/null
+++ b/resources/css/components/wrap.sss
@@ -0,0 +1,5 @@
+.wrap
+  @apply w-full max-w-3xl mx-auto
+
+  &.is-wide
+    @apply max-w-5xl
diff --git a/resources/css/custom-base.css b/resources/css/custom-base.sss
similarity index 59%
rename from resources/css/custom-base.css
rename to resources/css/custom-base.sss
index 0456432a..8fb459da 100644
--- a/resources/css/custom-base.css
+++ b/resources/css/custom-base.sss
@@ -1,27 +1,20 @@
-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
deleted file mode 100644
index 972c258e..00000000
--- a/resources/css/custom-components.css
+++ /dev/null
@@ -1,9 +0,0 @@
-@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
new file mode 100644
index 00000000..a106051f
--- /dev/null
+++ b/resources/css/custom-components.sss
@@ -0,0 +1,9 @@
+@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 ee42b392..306ce026 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.css', 'source/dist/css', [
+  .postCss('resources/css/app.sss', 'source/dist/css', [
     require('postcss-import')(),
     require('tailwindcss')('tailwind.config.js'),
     require('postcss-nested')(),
@@ -23,3 +23,14 @@ mix.disableNotifications()
     whitelistPatterns: [/language/, /hljs/],
     whitelistPatternsChildren: [/^markdown$/]
   })
+
+mix.webpackConfig({
+  module: {
+    rules: [
+      {
+        test: /\.sss?$/,
+        loader: 'postcss-loader'
+      }
+    ]
+  }
+})
diff --git a/yarn.lock b/yarn.lock
index cb599a7c..ab19cfe4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5940,7 +5940,7 @@ postcss@^6.0.0, postcss@^6.0.1, postcss@^6.0.17, postcss@^6.0.8, postcss@^6.0.9:
     source-map "^0.6.1"
     supports-color "^5.4.0"
 
-postcss@^7.0.1, postcss@^7.0.11, postcss@^7.0.14, postcss@^7.0.16:
+postcss@^7.0.1, postcss@^7.0.11, postcss@^7.0.14, postcss@^7.0.16, postcss@^7.0.2:
   version "7.0.17"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.17.tgz#4da1bdff5322d4a0acaab4d87f3e782436bad31f"
   integrity sha512-546ZowA+KZ3OasvQZHsbuEpysvwTZNGJv9EfyCQdsIDltPSWHAeTQ5fQy/Npi2ZDtLI3zs7Ps/p6wThErhm9fQ==
@@ -7259,6 +7259,13 @@ style-loader@^0.18.2:
     loader-utils "^1.0.2"
     schema-utils "^0.3.0"
 
+sugarss@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/sugarss/-/sugarss-2.0.0.tgz#ddd76e0124b297d40bf3cca31c8b22ecb43bc61d"
+  integrity sha512-WfxjozUk0UVA4jm+U1d736AUpzSrNsQcIbyOkoE364GrtWmIrFdk5lksEupgWMD4VaT/0kVx1dobpiDumSgmJQ==
+  dependencies:
+    postcss "^7.0.2"
+
 supports-color@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"