From 9633b980d5a870c7f496a60f5449d60652068630 Mon Sep 17 00:00:00 2001 From: Oliver Davies Date: Thu, 25 Oct 2018 00:24:22 +0100 Subject: [PATCH] Replace Sass with PostCSS, include imports and nesting --- assets/css/app.css | 10 ++++++ assets/css/base/base.css | 43 ++++++++++++++++++++++++++ assets/css/base/images.css | 17 ++++++++++ assets/css/base/vue.css | 27 ++++++++++++++++ assets/css/components/blockquote.css | 3 ++ assets/css/components/button.css | 8 +++++ assets/css/components/link.css | 3 ++ assets/css/components/listing.css | 11 +++++++ assets/css/components/markdown.css | 28 +++++++++++++++++ assets/css/components/note.css | 11 +++++++ assets/css/components/slides.css | 22 +++++++++++++ assets/css/components/table.css | 27 ++++++++++++++++ assets/css/components/talk/video.css | 6 ++++ assets/css/components/widget.css | 3 ++ assets/css/custom-components.css | 10 ++++++ assets/css/custom-preflight.css | 3 ++ assets/css/tailwind-components.css | 1 + assets/css/tailwind-preflight.css | 1 + assets/css/tailwind-utilities.css | 1 + assets/sass/app.sass | 23 -------------- assets/sass/base/base.sass | 36 --------------------- assets/sass/base/images.sass | 12 ------- assets/sass/base/vue.sass | 20 ------------ assets/sass/components/blockquote.sass | 2 -- assets/sass/components/button.sass | 6 ---- assets/sass/components/link.sass | 2 -- assets/sass/components/listing.sass | 8 ----- assets/sass/components/markdown.sass | 21 ------------- assets/sass/components/note.sass | 9 ------ assets/sass/components/slides.sass | 15 --------- assets/sass/components/table.sass | 20 ------------ assets/sass/components/talk/video.sass | 4 --- assets/sass/components/widget.sass | 2 -- package.json | 4 +++ webpack.mix.js | 9 +++++- yarn.lock | 35 +++++++++++++++++++-- 36 files changed, 279 insertions(+), 184 deletions(-) create mode 100644 assets/css/app.css create mode 100644 assets/css/base/base.css create mode 100644 assets/css/base/images.css create mode 100644 assets/css/base/vue.css create mode 100644 assets/css/components/blockquote.css create mode 100644 assets/css/components/button.css create mode 100644 assets/css/components/link.css create mode 100644 assets/css/components/listing.css create mode 100644 assets/css/components/markdown.css create mode 100644 assets/css/components/note.css create mode 100644 assets/css/components/slides.css create mode 100644 assets/css/components/table.css create mode 100644 assets/css/components/talk/video.css create mode 100644 assets/css/components/widget.css create mode 100644 assets/css/custom-components.css create mode 100644 assets/css/custom-preflight.css create mode 100644 assets/css/tailwind-components.css create mode 100644 assets/css/tailwind-preflight.css create mode 100644 assets/css/tailwind-utilities.css delete mode 100644 assets/sass/app.sass delete mode 100644 assets/sass/base/base.sass delete mode 100644 assets/sass/base/images.sass delete mode 100644 assets/sass/base/vue.sass delete mode 100644 assets/sass/components/blockquote.sass delete mode 100644 assets/sass/components/button.sass delete mode 100644 assets/sass/components/link.sass delete mode 100644 assets/sass/components/listing.sass delete mode 100644 assets/sass/components/markdown.sass delete mode 100644 assets/sass/components/note.sass delete mode 100644 assets/sass/components/slides.sass delete mode 100644 assets/sass/components/table.sass delete mode 100644 assets/sass/components/talk/video.sass delete mode 100644 assets/sass/components/widget.sass diff --git a/assets/css/app.css b/assets/css/app.css new file mode 100644 index 00000000..8d1889e9 --- /dev/null +++ b/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'; diff --git a/assets/css/base/base.css b/assets/css/base/base.css new file mode 100644 index 00000000..1b08f0d1 --- /dev/null +++ b/assets/css/base/base.css @@ -0,0 +1,43 @@ +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; +} + +.element-invisible { + @apply absolute overflow-hidden break-normal; + clip: rect(1px, 1px, 1px, 1px); + height: 1px; + width: 1px; +} diff --git a/assets/css/base/images.css b/assets/css/base/images.css new file mode 100644 index 00000000..542fc188 --- /dev/null +++ b/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; +} diff --git a/assets/css/base/vue.css b/assets/css/base/vue.css new file mode 100644 index 00000000..1be9003d --- /dev/null +++ b/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; +} diff --git a/assets/css/components/blockquote.css b/assets/css/components/blockquote.css new file mode 100644 index 00000000..7de15389 --- /dev/null +++ b/assets/css/components/blockquote.css @@ -0,0 +1,3 @@ +blockquote { + @apply border-l-4 border-blue pl-4 px-6 py-2; +} diff --git a/assets/css/components/button.css b/assets/css/components/button.css new file mode 100644 index 00000000..9e700c04 --- /dev/null +++ b/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; + } +} diff --git a/assets/css/components/link.css b/assets/css/components/link.css new file mode 100644 index 00000000..16fd48d3 --- /dev/null +++ b/assets/css/components/link.css @@ -0,0 +1,3 @@ +.link { + @apply text-blue; +} diff --git a/assets/css/components/listing.css b/assets/css/components/listing.css new file mode 100644 index 00000000..a92e7595 --- /dev/null +++ b/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; + } +} diff --git a/assets/css/components/markdown.css b/assets/css/components/markdown.css new file mode 100644 index 00000000..2a82547f --- /dev/null +++ b/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; +} diff --git a/assets/css/components/note.css b/assets/css/components/note.css new file mode 100644 index 00000000..f15b3f97 --- /dev/null +++ b/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; + } +} diff --git a/assets/css/components/slides.css b/assets/css/components/slides.css new file mode 100644 index 00000000..bb16d150 --- /dev/null +++ b/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; + } + } +} diff --git a/assets/css/components/table.css b/assets/css/components/table.css new file mode 100644 index 00000000..107c17ce --- /dev/null +++ b/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; + } +} diff --git a/assets/css/components/talk/video.css b/assets/css/components/talk/video.css new file mode 100644 index 00000000..f851b8b2 --- /dev/null +++ b/assets/css/components/talk/video.css @@ -0,0 +1,6 @@ +.talk-video { + iframe, + embed { + @apply absolute h-full pin-l pin-t w-full; + } +} diff --git a/assets/css/components/widget.css b/assets/css/components/widget.css new file mode 100644 index 00000000..7fe6d405 --- /dev/null +++ b/assets/css/components/widget.css @@ -0,0 +1,3 @@ +.widget { + @apply mb-6 block; +} diff --git a/assets/css/custom-components.css b/assets/css/custom-components.css new file mode 100644 index 00000000..537379af --- /dev/null +++ b/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'; diff --git a/assets/css/custom-preflight.css b/assets/css/custom-preflight.css new file mode 100644 index 00000000..319884f7 --- /dev/null +++ b/assets/css/custom-preflight.css @@ -0,0 +1,3 @@ +@import 'base/base'; +@import 'base/images'; +@import 'base/vue'; diff --git a/assets/css/tailwind-components.css b/assets/css/tailwind-components.css new file mode 100644 index 00000000..020aabaf --- /dev/null +++ b/assets/css/tailwind-components.css @@ -0,0 +1 @@ +@tailwind components; diff --git a/assets/css/tailwind-preflight.css b/assets/css/tailwind-preflight.css new file mode 100644 index 00000000..f58c35ef --- /dev/null +++ b/assets/css/tailwind-preflight.css @@ -0,0 +1 @@ +@tailwind preflight; diff --git a/assets/css/tailwind-utilities.css b/assets/css/tailwind-utilities.css new file mode 100644 index 00000000..65dd5f63 --- /dev/null +++ b/assets/css/tailwind-utilities.css @@ -0,0 +1 @@ +@tailwind utilities; diff --git a/assets/sass/app.sass b/assets/sass/app.sass deleted file mode 100644 index b7a6740c..00000000 --- a/assets/sass/app.sass +++ /dev/null @@ -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 diff --git a/assets/sass/base/base.sass b/assets/sass/base/base.sass deleted file mode 100644 index f4060d44..00000000 --- a/assets/sass/base/base.sass +++ /dev/null @@ -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 diff --git a/assets/sass/base/images.sass b/assets/sass/base/images.sass deleted file mode 100644 index f46537f4..00000000 --- a/assets/sass/base/images.sass +++ /dev/null @@ -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 diff --git a/assets/sass/base/vue.sass b/assets/sass/base/vue.sass deleted file mode 100644 index 8548f077..00000000 --- a/assets/sass/base/vue.sass +++ /dev/null @@ -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 diff --git a/assets/sass/components/blockquote.sass b/assets/sass/components/blockquote.sass deleted file mode 100644 index 56e12b0b..00000000 --- a/assets/sass/components/blockquote.sass +++ /dev/null @@ -1,2 +0,0 @@ -blockquote - @apply border-l-4 border-blue pl-4 px-6 py-2 diff --git a/assets/sass/components/button.sass b/assets/sass/components/button.sass deleted file mode 100644 index 318dac97..00000000 --- a/assets/sass/components/button.sass +++ /dev/null @@ -1,6 +0,0 @@ -.button - @apply bg-blue inline-block rounded text-white px-4 py-2 - - &:active, - &:hover - @apply bg-blue-dark diff --git a/assets/sass/components/link.sass b/assets/sass/components/link.sass deleted file mode 100644 index 5090ca45..00000000 --- a/assets/sass/components/link.sass +++ /dev/null @@ -1,2 +0,0 @@ -.link - @apply text-blue diff --git a/assets/sass/components/listing.sass b/assets/sass/components/listing.sass deleted file mode 100644 index e6553913..00000000 --- a/assets/sass/components/listing.sass +++ /dev/null @@ -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 diff --git a/assets/sass/components/markdown.sass b/assets/sass/components/markdown.sass deleted file mode 100644 index 8922481e..00000000 --- a/assets/sass/components/markdown.sass +++ /dev/null @@ -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 diff --git a/assets/sass/components/note.sass b/assets/sass/components/note.sass deleted file mode 100644 index d10b0bbb..00000000 --- a/assets/sass/components/note.sass +++ /dev/null @@ -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 diff --git a/assets/sass/components/slides.sass b/assets/sass/components/slides.sass deleted file mode 100644 index 14b50b43..00000000 --- a/assets/sass/components/slides.sass +++ /dev/null @@ -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 diff --git a/assets/sass/components/table.sass b/assets/sass/components/table.sass deleted file mode 100644 index 1a9636e5..00000000 --- a/assets/sass/components/table.sass +++ /dev/null @@ -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 diff --git a/assets/sass/components/talk/video.sass b/assets/sass/components/talk/video.sass deleted file mode 100644 index 97a47e1d..00000000 --- a/assets/sass/components/talk/video.sass +++ /dev/null @@ -1,4 +0,0 @@ -.talk-video - iframe, - embed - @apply absolute h-full pin-l pin-t w-full diff --git a/assets/sass/components/widget.sass b/assets/sass/components/widget.sass deleted file mode 100644 index 12f3f3b9..00000000 --- a/assets/sass/components/widget.sass +++ /dev/null @@ -1,2 +0,0 @@ -.widget - @apply mb-6 block diff --git a/package.json b/package.json index 2df34d21..9e302eee 100644 --- a/package.json +++ b/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" } } diff --git a/webpack.mix.js b/webpack.mix.js index c8e4173f..198d64df 100644 --- a/webpack.mix.js +++ b/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, }); diff --git a/yarn.lock b/yarn.lock index c74ad864..07aac5d5 100644 --- a/yarn.lock +++ b/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: