Use sugarss

package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "postcss-nested": "^4.1.2",
+    "sugarss": "^2.0.0",
     "tailwindcss": "^1.0.1",
     "tailwindcss-spaced-items": "^0.1.0",
     "tailwindcss-visuallyhidden": "^1.0.2",

postcss.config.js

@@ -1,4 +1,5 @@
 module.exports = {
+  parser: 'sugarss',
   plugins: {
     'postcss-import': {},
     tailwindcss: './tailwind.config.js',

src/assets/css/components/button.css

@@ -1,18 +1,13 @@
-.btn {
+.btn
-  @apply text-sm font-thin antialiased text-white px-4 py-3 no-underline rounded mx-1 bg-blue-300;
+  @apply text-sm font-thin antialiased text-white px-4 py-3 no-underline rounded mx-1 bg-blue-300
 
   &:hover,
-  &:focus {
+  &:focus
     @apply bg-blue-400
-  }
-}
 
-.btn.is-secondary {
+.btn.is-secondary
-  @apply bg-gray-500;
+  @apply bg-gray-500
 
   &:hover,
-  &:focus {
+  &:focus
     @apply bg-gray-600
-  }
-}
-

src/assets/css/custom-base.css

@@ -1,12 +1,9 @@
-html {
+html
-  line-height: 1.15;
+  line-height: 1.15
-}
 
 h1,
-h2 {
+h2
   @apply font-bold
-}
 
-h2 {
+h2
   @apply text-2xl
-}

src/assets/css/custom-components.css

@@ -1 +1 @@
-@import 'components/button';
+@import 'components/button'

src/assets/css/tailwind.css

@@ -1,9 +1,7 @@
-@import 'tailwindcss/base';
+@import 'tailwindcss/base'
+@import 'custom-base'
 
-@import 'custom-base';
+@import 'tailwindcss/components'
+@import 'custom-components'
 
-@import 'tailwindcss/components';
+@import 'tailwindcss/utilities'
-
-@import 'custom-components';
-
-@import 'tailwindcss/utilities';

src/components/Application/ApplicationCard.vue

@@ -60,7 +60,7 @@ export default {
   props: {
     application: Object,
     display: String,
-    id: Number
+    id: String
   },
 
   data () {

src/components/Environment/ActionCard.vue

@@ -39,7 +39,6 @@ export default {
 </script>
 
 <style scoped>
-svg {
+svg
   @apply h-8 w-8 fill-current text-teal
-}
 </style>

src/components/Environment/ActionCardButton.vue

@@ -14,7 +14,6 @@ export default {
 </script>
 
 <style scoped>
-  svg {
+svg
   @apply h-6 w-6 fill-current mb-2
-  }
 </style>

src/components/Environment/TaskLog/TaskLogItem.vue

@@ -80,16 +80,12 @@ export default {
 </script>
 
 <style scoped>
-.rotates {
+.rotates
   animation: rotation 1s infinite linear
-}
 
-@-webkit-keyframes rotation {
+@-webkit-keyframes rotation
-  from {
+  from
     -webkit-transform: rotate(0deg)
-  }
+  to
-  to {
     -webkit-transform: rotate(-359deg)
-  }
-}
 </style>

yarn.lock

@@ -8436,6 +8436,15 @@ postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.11, postcss@^7.0.14, postcss@^7.0.5
     source-map "^0.6.1"
     supports-color "^6.1.0"
 
+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==
+  dependencies:
+    chalk "^2.4.2"
+    source-map "^0.6.1"
+    supports-color "^6.1.0"
+
 prelude-ls@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"
@@ -9818,6 +9827,13 @@ stylehacks@^4.0.0:
     postcss "^7.0.0"
     postcss-selector-parser "^3.0.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"