Add and use sugarss

assets/css/base.css

@@ -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 {
+a
-  @apply text-blue-700 no-underline;
+  @apply text-blue-700 no-underline
 
-  &:hover {
+  &:hover
     @apply underline
-  }
-}
 
-blockquote {
+blockquote
   @apply border-l-4 border-blue-600 pl-4 px-6 py-2
-}

assets/css/components.css

@@ -1,11 +1,11 @@
-@import 'highlightjs/styles/github-gist';
+@import 'highlightjs/styles/github-gist'
 
-@import './components/button.css';
+@import './components/button.css'
-@import './components/container.css';
+@import './components/container.css'
-@import './components/lead.css';
+@import './components/lead.css'
-@import './components/markup.css';
+@import './components/markup.css'
-@import './components/note.css';
+@import './components/note.css'
-@import './components/table.css';
+@import './components/table.css'
-@import './components/video.css';
+@import './components/video.css'
-@import './components/widget.css';
+@import './components/widget.css'
-@import './components/wrap.css';
+@import './components/wrap.css'

assets/css/components/button.css

@@ -1,13 +1,10 @@
-.button {
+.button
-  @apply bg-blue-600 border-blue-600 border inline-block text-white no-underline py-2 px-3 rounded text-sm;
+  @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
-  }
-}

assets/css/components/container.css

@@ -1,3 +1,2 @@
-.container {
+.container
   @apply w-full max-w-5xl px-4 mx-auto
-}

assets/css/components/lead.css

@@ -1,5 +1,3 @@
-p.lead {
+p.lead
-  @screen md {
+  @screen md
     @apply text-lg
-  }
-}

assets/css/components/markup.css

@@ -1,19 +1,16 @@
-.markup {
+.markup
-  @apply leading-normal;
+  @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] {
+  [v-pre]
-    &:not(:last-child) {
+    &: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 {
+  li
-    code {
+    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
-  }
-}

assets/css/components/note.css

@@ -1,15 +1,11 @@
-.note {
+.note
-  @apply bg-blue-200 border-blue-600 border-l-4 mb-4 p-4 rounded;
+  @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 {
+  p a
-    @apply text-black underline;
+    @apply text-black underline
 
-    &:hover {
+    &:hover
       @apply no-underline
-    }
-  }
-}

assets/css/components/table.css

@@ -1,18 +1,13 @@
-.table {
+.table
-  @apply w-full;
+  @apply w-full
 
-  th {
+  th
-    @apply bg-gray-200 text-left;
+    @apply bg-gray-200 text-left
-  }
 
   th,
-  td {
+  td
-    @apply px-4 py-2 border border-solid border-gray-300;
+    @apply px-4 py-2 border border-solid border-gray-300
-  }
-}
 
-table.is-striped {
+table.is-striped
-  tbody > tr:not(:nth-child(odd)) td {
+  tbody > tr:not(:nth-child(odd)) td
-    @apply bg-gray-100;
+    @apply bg-gray-100
-  }
-}

assets/css/components/video.css

@@ -1,9 +1,7 @@
-.video-full {
+.video-full
-  @apply w-full relative;
+  @apply w-full relative
-  padding-top: 56.25%;
+  padding-top: 56.25%
 
   iframe,
-  embed {
+  embed
     @apply absolute h-full left-0 top-0 w-full
-  }
-}

assets/css/components/widget.css

@@ -1,3 +1,2 @@
-.widget {
+.widget
   @apply block mb-6
-}

assets/css/components/wrap.css

@@ -1,7 +1,5 @@
-.wrap {
+.wrap
-  @apply w-full max-w-3xl mx-auto;
+  @apply w-full max-w-3xl mx-auto
 
-  &.is-wide {
+  &.is-wide
     @apply max-w-5xl
-  }
-}

assets/css/tailwind.css

@@ -1,8 +1,8 @@
-@import 'tailwindcss/base';
+@import 'tailwindcss/base'
-@import './base.css';
+@import './base.css'
 
-@import 'tailwindcss/components';
+@import 'tailwindcss/components'
-@import './components.css';
+@import './components.css'
 
-@import 'tailwindcss/utilities';
+@import 'tailwindcss/utilities'
-@import './utilities.css';
+@import './utilities.css'

assets/css/utilities.css

@@ -1,3 +1,2 @@
-.no-js .js-hidden {
+.no-js .js-hidden
-  display: none;
+  display: none
-}

package-lock.json

@@ -7379,6 +7379,15 @@
         }
       }
     },
+    "sugarss": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/sugarss/-/sugarss-2.0.0.tgz",
+      "integrity": "sha512-WfxjozUk0UVA4jm+U1d736AUpzSrNsQcIbyOkoE364GrtWmIrFdk5lksEupgWMD4VaT/0kVx1dobpiDumSgmJQ==",
+      "dev": true,
+      "requires": {
+        "postcss": "^7.0.2"
+      }
+    },
     "supports-color": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",

package.json

@@ -22,6 +22,7 @@
     "glob-all": "^3.1.0",
     "postcss-loader": "^3.0.0",
     "purgecss-webpack-plugin": "^1.6.0",
+    "sugarss": "^2.0.0",
     "vue-loader": "^15.7.1",
     "vue-template-compiler": "^2.6.10"
   }

postcss.config.js

@@ -1,4 +1,5 @@
 module.exports = {
+  parser: 'sugarss',
   plugins: [
     require('postcss-import'),
     require('tailwindcss'),