Merge branch 'postcss-import'

assets/css/app.css

@@ -0,0 +1,10 @@
+@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

@@ -0,0 +1,36 @@
+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

@@ -0,0 +1,17 @@
+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

@@ -0,0 +1,27 @@
+[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

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

assets/css/components/button.css

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

assets/css/components/link.css

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

assets/css/components/listing.css

@@ -0,0 +1,11 @@
+.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

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

assets/css/components/note.css

@@ -0,0 +1,11 @@
+.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

@@ -0,0 +1,22 @@
+.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

@@ -0,0 +1,27 @@
+.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

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

assets/css/components/widget.css

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

assets/css/custom-components.css

@@ -0,0 +1,10 @@
+@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

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

assets/css/tailwind-components.css

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

assets/css/tailwind-preflight.css

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

assets/css/tailwind-utilities.css

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

assets/sass/app.sass

@@ -1,23 +0,0 @@
-@import '~font-awesome/css/font-awesome.css'
-@import '~highlightjs/styles/github-gist.css'
-
-@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

@@ -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,
-  h3
-    @apply mt-6
-
-p,
-ul,
-ol,
-blockquote,
-table,
-pre
-  @apply mb-6
-
-.element-invisible
-  @apply absolute overflow-hidden break-normal
-  clip: rect(1px, 1px, 1px, 1px)
-  height: 1px
-  width: 1px

assets/sass/base/images.sass

@@ -1,12 +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/sass/base/vue.sass

@@ -1,20 +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-block
-  @apply hidden

assets/sass/components/blockquote.sass

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

assets/sass/components/button.sass

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

assets/sass/components/link.sass

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

assets/sass/components/listing.sass

@@ -1,8 +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/sass/components/markdown.sass

@@ -1,21 +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 leading-loose overflow-x-scroll p-6 rounded text-sm

assets/sass/components/note.sass

@@ -1,9 +0,0 @@
-.note
-  @apply bg-blue-lighter
-  @apply 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

@@ -1,15 +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/sass/components/table.sass

@@ -1,20 +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/sass/components/talk/video.sass

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

assets/sass/components/widget.sass

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

package.json

@@ -16,5 +16,9 @@
     "tailwindcss": "^0.6",
     "tailwindcss-visuallyhidden": "^1.0.1",
     "vue": "^2.5.17"
+  },
+  "dependencies": {
+    "postcss-import": "^12.0.1",
+    "postcss-nesting": "^7.0.0"
   }
 }

source/_partials/post/tags.html.twig

@@ -1,5 +1,5 @@
 {% if page.tags %}
-    <h2 class="element-invisible">Tags</h2>
+    <h2 class="visuallyhidden">Tags</h2>
 
     <ul class="list-reset flex flex-wrap">
         {% for tag in page.tags|sort %}

webpack.mix.js

@@ -4,7 +4,7 @@ require('laravel-mix-purgecss');
 require('laravel-mix-tailwind');
 
 mix.disableNotifications()
-    .sass('assets/sass/app.sass', 'source/dist/css')
+    .postCss('assets/css/app.css', 'source/dist/css')
     .js([
         // 'node_modules/highlightjs/highlight.pack.js',
         'node_modules/jquery/dist/jquery.js',
@@ -19,4 +19,11 @@ mix.disableNotifications()
         ],
         whitelistPatterns: [/language/, /hljs/],
         whitelistPatternsChildren: [/^markdown$/]
+    })
+    .options({
+        postCss: [
+            require('postcss-import')(),
+            require('postcss-nesting')(),
+        ],
+        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.0.0, pify@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
 
@@ -4442,6 +4442,15 @@ 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"
@@ -4583,6 +4592,12 @@ postcss-nested@^3.0.0:
     postcss "^6.0.14"
     postcss-selector-parser "^3.1.1"
 
+postcss-nesting@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-nesting/-/postcss-nesting-7.0.0.tgz#6e26a770a0c8fcba33782a6b6f350845e1a448f6"
+  dependencies:
+    postcss "^7.0.2"
+
 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"
@@ -4711,6 +4726,14 @@ 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"
@@ -4886,6 +4909,12 @@ 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"
@@ -5152,7 +5181,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.4.0:
+resolve@^1.1.7, resolve@^1.4.0:
   version "1.8.1"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.8.1.tgz#82f1ec19a423ac1fbd080b0bab06ba36e84a7a26"
   dependencies:
@@ -5701,7 +5730,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.1.0, supports-color@^5.3.0, supports-color@^5.4.0, supports-color@^5.5.0:
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
   dependencies: