From ab6e0d2df51e171aa080621ae3a13ae7f45a59e4 Mon Sep 17 00:00:00 2001 From: Oliver Davies Date: Sun, 6 Oct 2019 22:29:11 +0100 Subject: [PATCH] Add and use sugarss --- assets/css/base.css | 23 ++++++---------- assets/css/components.css | 20 +++++++------- assets/css/components/button.css | 11 +++----- assets/css/components/container.css | 3 +-- assets/css/components/lead.css | 6 ++--- assets/css/components/markup.css | 41 ++++++++++------------------- assets/css/components/note.css | 16 +++++------ assets/css/components/table.css | 23 +++++++--------- assets/css/components/video.css | 10 +++---- assets/css/components/widget.css | 3 +-- assets/css/components/wrap.css | 8 +++--- assets/css/tailwind.css | 12 ++++----- assets/css/utilities.css | 5 ++-- package-lock.json | 9 +++++++ package.json | 1 + postcss.config.js | 1 + 16 files changed, 81 insertions(+), 111 deletions(-) diff --git a/assets/css/base.css b/assets/css/base.css index 3e8b186d..f70cde45 100644 --- a/assets/css/base.css +++ b/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 { - @apply text-blue-700 no-underline; +a + @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 -} diff --git a/assets/css/components.css b/assets/css/components.css index 9694ef7a..464fb5ea 100644 --- a/assets/css/components.css +++ b/assets/css/components.css @@ -1,11 +1,11 @@ -@import 'highlightjs/styles/github-gist'; +@import 'highlightjs/styles/github-gist' -@import './components/button.css'; -@import './components/container.css'; -@import './components/lead.css'; -@import './components/markup.css'; -@import './components/note.css'; -@import './components/table.css'; -@import './components/video.css'; -@import './components/widget.css'; -@import './components/wrap.css'; +@import './components/button.css' +@import './components/container.css' +@import './components/lead.css' +@import './components/markup.css' +@import './components/note.css' +@import './components/table.css' +@import './components/video.css' +@import './components/widget.css' +@import './components/wrap.css' diff --git a/assets/css/components/button.css b/assets/css/components/button.css index 33e1b668..66c4719e 100644 --- a/assets/css/components/button.css +++ b/assets/css/components/button.css @@ -1,13 +1,10 @@ -.button { - @apply bg-blue-600 border-blue-600 border inline-block text-white no-underline py-2 px-3 rounded text-sm; +.button + @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 - } -} diff --git a/assets/css/components/container.css b/assets/css/components/container.css index b2096cca..2f10bdcd 100644 --- a/assets/css/components/container.css +++ b/assets/css/components/container.css @@ -1,3 +1,2 @@ -.container { +.container @apply w-full max-w-5xl px-4 mx-auto -} diff --git a/assets/css/components/lead.css b/assets/css/components/lead.css index 7805fa41..73254254 100644 --- a/assets/css/components/lead.css +++ b/assets/css/components/lead.css @@ -1,5 +1,3 @@ -p.lead { - @screen md { +p.lead + @screen md @apply text-lg - } -} diff --git a/assets/css/components/markup.css b/assets/css/components/markup.css index 3b3e0ee4..9dbdb6f0 100644 --- a/assets/css/components/markup.css +++ b/assets/css/components/markup.css @@ -1,19 +1,16 @@ -.markup { - @apply leading-normal; +.markup + @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] { - &:not(:last-child) { + [v-pre] + &: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 { - code { + li + 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 - } -} diff --git a/assets/css/components/note.css b/assets/css/components/note.css index 7f9909cd..e2087816 100644 --- a/assets/css/components/note.css +++ b/assets/css/components/note.css @@ -1,15 +1,11 @@ -.note { - @apply bg-blue-200 border-blue-600 border-l-4 mb-4 p-4 rounded; +.note + @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 { - @apply text-black underline; + p a + @apply text-black underline - &:hover { + &:hover @apply no-underline - } - } -} diff --git a/assets/css/components/table.css b/assets/css/components/table.css index fccae0d9..002410ef 100644 --- a/assets/css/components/table.css +++ b/assets/css/components/table.css @@ -1,18 +1,13 @@ -.table { - @apply w-full; +.table + @apply w-full - th { - @apply bg-gray-200 text-left; - } + th + @apply bg-gray-200 text-left th, - td { - @apply px-4 py-2 border border-solid border-gray-300; - } -} + td + @apply px-4 py-2 border border-solid border-gray-300 -table.is-striped { - tbody > tr:not(:nth-child(odd)) td { - @apply bg-gray-100; - } -} +table.is-striped + tbody > tr:not(:nth-child(odd)) td + @apply bg-gray-100 diff --git a/assets/css/components/video.css b/assets/css/components/video.css index b03da98f..1f5ca9c1 100644 --- a/assets/css/components/video.css +++ b/assets/css/components/video.css @@ -1,9 +1,7 @@ -.video-full { - @apply w-full relative; - padding-top: 56.25%; +.video-full + @apply w-full relative + padding-top: 56.25% iframe, - embed { + embed @apply absolute h-full left-0 top-0 w-full - } -} diff --git a/assets/css/components/widget.css b/assets/css/components/widget.css index fdcc356b..faca0ca6 100644 --- a/assets/css/components/widget.css +++ b/assets/css/components/widget.css @@ -1,3 +1,2 @@ -.widget { +.widget @apply block mb-6 -} diff --git a/assets/css/components/wrap.css b/assets/css/components/wrap.css index 9fe5fde9..a7c56720 100644 --- a/assets/css/components/wrap.css +++ b/assets/css/components/wrap.css @@ -1,7 +1,5 @@ -.wrap { - @apply w-full max-w-3xl mx-auto; +.wrap + @apply w-full max-w-3xl mx-auto - &.is-wide { + &.is-wide @apply max-w-5xl - } -} diff --git a/assets/css/tailwind.css b/assets/css/tailwind.css index a257dc60..52ec4d40 100644 --- a/assets/css/tailwind.css +++ b/assets/css/tailwind.css @@ -1,8 +1,8 @@ -@import 'tailwindcss/base'; -@import './base.css'; +@import 'tailwindcss/base' +@import './base.css' -@import 'tailwindcss/components'; -@import './components.css'; +@import 'tailwindcss/components' +@import './components.css' -@import 'tailwindcss/utilities'; -@import './utilities.css'; +@import 'tailwindcss/utilities' +@import './utilities.css' diff --git a/assets/css/utilities.css b/assets/css/utilities.css index f786b0da..26e8d2e2 100644 --- a/assets/css/utilities.css +++ b/assets/css/utilities.css @@ -1,3 +1,2 @@ -.no-js .js-hidden { - display: none; -} +.no-js .js-hidden + display: none diff --git a/package-lock.json b/package-lock.json index c944a209..a77fb195 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index c92b6cae..d47475ae 100644 --- a/package.json +++ b/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" } diff --git a/postcss.config.js b/postcss.config.js index 62550eb0..7ba1e461 100644 --- a/postcss.config.js +++ b/postcss.config.js @@ -1,4 +1,5 @@ module.exports = { + parser: 'sugarss', plugins: [ require('postcss-import'), require('tailwindcss'),