Merge branch 'sass'

assets/css/app.css

@@ -1,10 +0,0 @@
-@import 'font-awesome/css/font-awesome';
-@import 'highlightjs/styles/github-gist';
-
-@import 'tailwind-preflight';
-@import 'custom-preflight';
-
-@import 'tailwind-components';
-@import 'custom-components';
-
-@import 'tailwind-utilities';

assets/css/base/base.css

@@ -1,36 +0,0 @@
-a {
-    color: inherit;
-    text-decoration: none;
-
-    &:focus,
-    &:hover {
-        text-decoration: underline;
-    }
-}
-
-main a {
-    text-decoration: underline;
-
-    &:focus,
-    &:hover {
-        text-decoration: none;
-    }
-}
-
-h1, h2, h3 {
-    @apply mb-2;
-}
-
-.content h2,
-.content h3 {
-    @apply mt-6;
-}
-
-p,
-ul,
-ol,
-blockquote,
-table,
-pre {
-    @apply mb-6;
-}

assets/css/base/images.css

@@ -1,17 +0,0 @@
-img {
-    &.with-border {
-        @apply border border-solid border-grey-light;
-    }
-
-    &.with-padding {
-        @apply p-1;
-    }
-
-    &.avatar {
-        @apply border p-1 rounded-full;
-    }
-}
-
-svg {
-    fill: currentColor;
-}

assets/css/base/vue.css

@@ -1,27 +0,0 @@
-[v-cloak] {
-    .v-cloak-block {
-        @apply block;
-    }
-
-    .v-cloak-inline {
-        @apply inline;
-    }
-
-    .v-cloak-inline-block {
-        @apply inline-block;
-    }
-
-    .v-cloak-hidden {
-        @apply hidden;
-    }
-
-    .v-cloak-invisible {
-        @apply invisible;
-    }
-}
-
-.v-cloak-block,
-.v-cloak-inline,
-.v-cloak-inline-b {
-    @apply hidden;
-}

assets/css/components/blockquote.css

@@ -1,3 +0,0 @@
-blockquote {
-    @apply border-l-4 border-blue pl-4 px-6 py-2;
-}

assets/css/components/button.css

@@ -1,8 +0,0 @@
-.button {
-    @apply bg-blue inline-block rounded text-white px-4 py-2;
-
-    &:active,
-    &:hover {
-        @apply bg-blue-dark;
-    }
-}

assets/css/components/link.css

@@ -1,3 +0,0 @@
-.link {
-    @apply text-blue;
-}

assets/css/components/listing.css

@@ -1,11 +0,0 @@
-.listing {
-    @apply pl-0;
-}
-
-.listing-item {
-    @apply overflow-hidden pb-8;
-
-    &:not(:last-child) {
-        @apply border-b border-grey-light mb-8;
-    }
-}

assets/css/components/markdown.css

@@ -1,30 +0,0 @@
-.markdown {
-    h2 {
-        @apply mt-8 mb-3 text-black;
-    }
-
-    h2, h3 {
-      @apply text-black;
-    }
-
-    p,
-    li {
-        a {
-            @apply link;
-        }
-
-        code {
-            @apply bg-grey-lighter inline-block font-mono text-sm px-1 py-px;
-        }
-    }
-
-    p:last-child {
-        @apply mb-0;
-    }
-
-    pre code,
-    .hljs {
-        @apply bg-grey-lighter block border-grey-dark border-l-4 font-mono;
-        @apply leading-loose overflow-x-scroll p-6 rounded text-sm;
-    }
-}

assets/css/components/note.css

@@ -1,11 +0,0 @@
-.note {
-    @apply bg-blue-lighter border-blue border-l-4 mb-4 p-4 rounded;
-
-    > *:last-child {
-        @apply mb-0;
-    }
-
-    p a {
-        @apply text-black;
-    }
-}

assets/css/components/slides.css

@@ -1,22 +0,0 @@
-.slides {
-    background: url("../images/loading.gif") center no-repeat;
-    min-height: 275px;
-
-    @screen md {
-      & {
-        min-height: 375px;
-      }
-    }
-
-    @screen lg {
-      & {
-        min-height: 450px;
-      }
-    }
-
-    @screen xl {
-      & {
-        min-height: 560px;
-      }
-    }
-}

assets/css/components/table.css

@@ -1,27 +0,0 @@
-.table-collapse {
-    @apply border-collapse;
-}
-
-.table-responsive {
-    @apply mb-4 border w-full overflow-x-auto overflow-y-hidden;
-
-    table {
-        @apply mb-0 border-0 whitespace-no-wrap;
-    }
-}
-
-.table {
-    @apply w-full table-collapse;
-
-    & tr:nth-child(odd) {
-        @apply bg-grey-lighter;
-    }
-
-    & tr th {
-        @apply text-left p-3 bg-white;
-    }
-
-    & td {
-        @apply p-3 border-t;
-    }
-}

assets/css/components/talk/video.css

@@ -1,6 +0,0 @@
-.talk-video {
-    iframe,
-    embed {
-        @apply absolute h-full pin-l pin-t w-full;
-    }
-}

assets/css/components/widget.css

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

assets/css/custom-components.css

@@ -1,10 +0,0 @@
-@import 'components/blockquote';
-@import 'components/button';
-@import 'components/link';
-@import 'components/listing';
-@import 'components/markdown';
-@import 'components/note';
-@import 'components/slides';
-@import 'components/table';
-@import 'components/talk/video';
-@import 'components/widget';

assets/css/custom-preflight.css

@@ -1,3 +0,0 @@
-@import 'base/base';
-@import 'base/images';
-@import 'base/vue';

assets/css/tailwind-components.css

@@ -1 +0,0 @@
-@tailwind components;

assets/css/tailwind-preflight.css

@@ -1 +0,0 @@
-@tailwind preflight;

assets/css/tailwind-utilities.css

@@ -1 +0,0 @@
-@tailwind utilities;

assets/sass/app.sass

@@ -0,0 +1,23 @@
+@import '~font-awesome/css/font-awesome'
+@import '~highlightjs/styles/github-gist'
+
+@tailwind preflight
+
+@import 'base/base'
+@import 'base/images'
+@import 'base/vue'
+
+@tailwind components
+
+@import 'components/blockquote'
+@import 'components/button'
+@import 'components/link'
+@import 'components/listing'
+@import 'components/markdown'
+@import 'components/note'
+@import 'components/slides'
+@import 'components/table'
+@import 'components/talk/video'
+@import 'components/widget'
+
+@tailwind utilities

assets/sass/base/base.sass

@@ -0,0 +1,29 @@
+a
+    color: inherit
+    text-decoration: none
+
+    &:focus,
+    &:hover
+        text-decoration: underline
+
+main a
+    text-decoration: underline
+
+    &:focus,
+    &:hover
+        text-decoration: none
+
+h1, h2, h3
+    @apply mb-2
+
+.content h2,
+.content h3
+    @apply mt-6
+
+p,
+ul,
+ol,
+blockquote,
+table,
+pre
+    @apply mb-6

assets/sass/base/images.sass

@@ -0,0 +1,12 @@
+img
+    &.with-border
+        @apply border border-solid border-grey-light
+
+    &.with-padding
+        @apply p-1
+
+    &.avatar
+        @apply border p-1 rounded-full
+
+svg
+    fill: currentColor

assets/sass/base/vue.sass

@@ -0,0 +1,19 @@
+[v-cloak]
+    .v-cloak-block
+        @apply block
+
+    .v-cloak-inline
+        @apply inline
+
+    .v-cloak-inline-block
+        @apply inline-block
+
+    .v-cloak-hidden
+        @apply hidden
+
+    .v-cloak-invisible
+        @apply invisible
+
+.v-cloak-block,
+.v-cloak-inline,
+    @apply hidden

assets/sass/components/blockquote.sass

@@ -0,0 +1,2 @@
+blockquote
+    @apply border-l-4 border-blue pl-4 px-6 py-2

assets/sass/components/button.sass

@@ -0,0 +1,6 @@
+.button
+    @apply bg-blue inline-block rounded text-white px-4 py-2
+
+    &:active,
+    &:hover
+        @apply bg-blue-dark

assets/sass/components/link.sass

@@ -0,0 +1,2 @@
+.link
+    @apply text-blue

assets/sass/components/listing.sass

@@ -0,0 +1,8 @@
+.listing
+    @apply pl-0
+
+.listing-item
+    @apply overflow-hidden pb-8
+
+    &:not(:last-child)
+        @apply border-b border-grey-light mb-8

assets/sass/components/markdown.sass

@@ -0,0 +1,22 @@
+.markdown
+    h2
+        @apply mt-8 mb-3 text-black
+
+    h2, h3
+      @apply text-black
+
+    p,
+    li
+        a
+            @apply link
+
+        code
+            @apply bg-grey-lighter inline-block font-mono text-sm px-1 py-px
+
+    p:last-child
+        @apply mb-0
+
+    pre code,
+    .hljs
+        @apply bg-grey-lighter block border-grey-dark border-l-4 font-mono
+        @apply leading-loose overflow-x-scroll p-6 rounded text-sm

assets/sass/components/note.sass

@@ -0,0 +1,8 @@
+.note
+    @apply bg-blue-lighter border-blue border-l-4 mb-4 p-4 rounded
+
+    > *:last-child
+        @apply mb-0
+
+    p a
+        @apply text-black

assets/sass/components/slides.sass

@@ -0,0 +1,15 @@
+.slides
+    background: url("../images/loading.gif") center no-repeat
+    min-height: 275px
+
+    @screen md
+      &
+        min-height: 375px
+
+    @screen lg
+      &
+        min-height: 450px
+
+    @screen xl
+      &
+        min-height: 560px

assets/sass/components/table.sass

@@ -0,0 +1,20 @@
+.table-collapse
+    @apply border-collapse
+
+.table-responsive
+    @apply mb-4 border w-full overflow-x-auto overflow-y-hidden
+
+    table
+        @apply mb-0 border-0 whitespace-no-wrap
+
+.table
+    @apply w-full table-collapse
+
+    & tr:nth-child(odd)
+        @apply bg-grey-lighter
+
+    & tr th
+        @apply text-left p-3 bg-white
+
+    & td
+        @apply p-3 border-t

assets/sass/components/talk/video.sass

@@ -0,0 +1,4 @@
+.talk-video
+    iframe,
+    embed
+        @apply absolute h-full pin-l pin-t w-full

assets/sass/components/widget.sass

@@ -0,0 +1,2 @@
+.widget
+    @apply mb-6 block

package.json

@@ -1,9 +1,11 @@
 {
   "private": true,
   "scripts": {
-    "dev": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
+    "dev": "npm run development",
+    "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
     "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
-    "prod": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
+    "prod": "npm run production",
+    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
   },
   "devDependencies": {
     "cross-env": "^5.1.5",
@@ -16,9 +18,5 @@
     "tailwindcss": "^0.6",
     "tailwindcss-visuallyhidden": "^1.0.1",
     "vue": "^2.5.17"
-  },
-  "dependencies": {
-    "postcss-import": "^12.0.1",
-    "postcss-nested": "^4.1.0"
   }
 }

webpack.mix.js

@@ -4,9 +4,8 @@ require('laravel-mix-purgecss');
 require('laravel-mix-tailwind');
 
 mix.disableNotifications()
-    .postCss('assets/css/app.css', 'source/css')
+    .sass('assets/sass/app.sass', 'source/css')
     .js([
-        // 'node_modules/highlightjs/highlight.pack.js',
         'node_modules/jquery/src/jquery.js',
         'assets/js/app.js',
     ], 'source/js/all.js')
@@ -19,11 +18,4 @@ mix.disableNotifications()
         ],
         whitelistPatterns: [/language/, /hljs/],
         whitelistPatternsChildren: [/^markdown$/]
-    })
-    .options({
-        postCss: [
-            require('postcss-import')(),
-            require('postcss-nested')(),
-        ],
-        processCssUrls: false,
     });

yarn.lock

@@ -4337,7 +4337,7 @@ performance-now@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
 
-pify@^2.0.0, pify@^2.3.0:
+pify@^2.0.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
 
@@ -4442,15 +4442,6 @@ postcss-functions@^3.0.0:
     postcss "^6.0.9"
     postcss-value-parser "^3.3.0"
 
-postcss-import@^12.0.1:
-  version "12.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-import/-/postcss-import-12.0.1.tgz#cf8c7ab0b5ccab5649024536e565f841928b7153"
-  dependencies:
-    postcss "^7.0.1"
-    postcss-value-parser "^3.2.3"
-    read-cache "^1.0.0"
-    resolve "^1.1.7"
-
 postcss-js@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/postcss-js/-/postcss-js-1.0.1.tgz#ffaf29226e399ea74b5dce02cab1729d7addbc7b"
@@ -4592,13 +4583,6 @@ postcss-nested@^3.0.0:
     postcss "^6.0.14"
     postcss-selector-parser "^3.1.1"
 
-postcss-nested@^4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/postcss-nested/-/postcss-nested-4.1.0.tgz#271da8a047f2ee378139410ae2400b1c67d0bf30"
-  dependencies:
-    postcss "^7.0.2"
-    postcss-selector-parser "^3.1.1"
-
 postcss-normalize-charset@^1.1.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/postcss-normalize-charset/-/postcss-normalize-charset-1.1.1.tgz#ef9ee71212d7fe759c78ed162f61ed62b5cb93f1"
@@ -4727,14 +4711,6 @@ postcss@^7.0.0:
     source-map "^0.6.1"
     supports-color "^5.4.0"
 
-postcss@^7.0.1, postcss@^7.0.2:
-  version "7.0.5"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.5.tgz#70e6443e36a6d520b0fd4e7593fcca3635ee9f55"
-  dependencies:
-    chalk "^2.4.1"
-    source-map "^0.6.1"
-    supports-color "^5.5.0"
-
 prepend-http@^1.0.0:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-1.0.4.tgz#d4f4562b0ce3696e41ac52d0e002e57a635dc6dc"
@@ -4910,12 +4886,6 @@ rc@^1.2.7:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
-read-cache@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/read-cache/-/read-cache-1.0.0.tgz#e664ef31161166c9751cdbe8dbcf86b5fb58f774"
-  dependencies:
-    pify "^2.3.0"
-
 read-file-stdin@^0.2.0:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/read-file-stdin/-/read-file-stdin-0.2.1.tgz#25eccff3a153b6809afacb23ee15387db9e0ee61"
@@ -5182,7 +5152,7 @@ resolve-url@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/resolve-url/-/resolve-url-0.2.1.tgz#2c637fe77c893afd2a663fe21aa9080068e2052a"
 
-resolve@^1.1.7, resolve@^1.4.0:
+resolve@^1.4.0:
   version "1.8.1"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.8.1.tgz#82f1ec19a423ac1fbd080b0bab06ba36e84a7a26"
   dependencies:
@@ -5731,7 +5701,7 @@ supports-color@^4.2.1:
   dependencies:
     has-flag "^2.0.0"
 
-supports-color@^5.1.0, supports-color@^5.3.0, supports-color@^5.4.0, supports-color@^5.5.0:
+supports-color@^5.1.0, supports-color@^5.3.0, supports-color@^5.4.0:
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
   dependencies: