From d0edc0267a5395cff546d35b2f939e229dccfd9f Mon Sep 17 00:00:00 2001 From: Steven Vandevelde Date: Mon, 3 Aug 2020 17:30:34 +0200 Subject: [PATCH] Remove css nesting, causes issues with purgecss --- Justfile | 8 +--- package.json | 1 - src/Css/About.css | 17 ++++----- src/Css/Application.css | 18 ++------- src/Css/Equalizer.css | 78 +++++++++++++++++++++------------------ src/Css/Notifications.css | 41 ++++++++++---------- yarn.lock | 9 +---- 7 files changed, 77 insertions(+), 95 deletions(-) diff --git a/Justfile b/Justfile index 9f8912ef..13a32fee 100644 --- a/Justfile +++ b/Justfile @@ -33,8 +33,7 @@ default: dev --output {{BUILD_DIR}}/about.css \ \ --post-plugin-before postcss-import \ - --post-plugin-after postcss-custom-properties \ - --post-plugin-after postcss-nesting + --post-plugin-after postcss-custom-properties {{NPM_DIR}}/.bin/etc {{SRC_DIR}}/Css/Application.css \ --config {{SYSTEM_DIR}}/Css/Tailwind.js \ @@ -43,8 +42,7 @@ default: dev --output {{BUILD_DIR}}/application.css \ \ --post-plugin-before postcss-import \ - --post-plugin-after postcss-custom-properties \ - --post-plugin-after postcss-nesting + --post-plugin-after postcss-custom-properties @css-prod: @@ -56,7 +54,6 @@ default: dev \ --post-plugin-before postcss-import \ --post-plugin-after postcss-custom-properties \ - --post-plugin-after postcss-nesting \ \ --purge-content {{BUILD_DIR}}/about/**/*.html @@ -66,7 +63,6 @@ default: dev \ --post-plugin-before postcss-import \ --post-plugin-after postcss-custom-properties \ - --post-plugin-after postcss-nesting \ \ --purge-content {{BUILD_DIR}}/ui.elm.js \ --purge-content {{BUILD_DIR}}/index.html \ diff --git a/package.json b/package.json index e984af24..6b7f74d0 100644 --- a/package.json +++ b/package.json @@ -7,7 +7,6 @@ "eslint": "^7.6.0", "postcss-custom-properties": "^9.1.1", "postcss-import": "^12.0.1", - "postcss-nesting": "^7.0.1", "tailwindcss": "^1.6.0", "tailwindcss-animations": "^2.0.0", "tailwindcss-interaction-variants": "^4.0.0", diff --git a/src/Css/About.css b/src/Css/About.css index ffbd3194..9d0aac13 100644 --- a/src/Css/About.css +++ b/src/Css/About.css @@ -97,20 +97,17 @@ h5 + p a { /* Lists ----- */ -ul, ol { - @apply leading-relaxed ml-3; - - & li { @apply mb-1 } -} +ul, ol { @apply leading-relaxed ml-3 } +ul li, ol li { @apply mb-1 } ol { counter-reset: ol; +} - & li::before { - @apply pr-3 inline-block text-base06; - counter-increment: ol; - content: counters(ol, ".") "."; - } +ol li::before { + @apply pr-3 inline-block text-base06; + counter-increment: ol; + content: counters(ol, ".") "."; } ul li::before { diff --git a/src/Css/Application.css b/src/Css/Application.css index 3da54872..b3ff4868 100644 --- a/src/Css/Application.css +++ b/src/Css/Application.css @@ -24,7 +24,6 @@ html, body { overscroll-behavior: none; } - body { @apply text-base01; @@ -36,24 +35,20 @@ body { text-rendering: optimizeLegibility; } - button { color: inherit; font-family: inherit; } - *:active { outline: none; } - .align-sub { vertical-align: sub } .all-small-caps { font-variant-caps: all-small-caps } .flex-basis-0 { flex-basis: 0 } .smooth-scrolling { scroll-behavior: smooth } - @screen dark { body { @apply text-gray-600; } } @@ -66,7 +61,10 @@ button { .dragging-something { @apply select-none; cursor: grabbing; - & * { cursor: grabbing !important } +} + +.dragging-something * { + cursor: grabbing !important } @@ -80,26 +78,22 @@ textarea::placeholder { opacity: 1; } - input:invalid, textarea:invalid { box-shadow: none; outline: none; } - input[changed]:invalid, textarea[changed]:invalid { @apply border-base08; } - select:-moz-focusring { color: transparent; text-shadow: 0 0 0 rgb(63, 63, 63); } - @screen dark { input::placeholder, textarea::placeholder { @@ -122,7 +116,6 @@ select:-moz-focusring { animation: loading-rotator 2s linear infinite; } - .loading-animation__circle { animation: loading-dash 1.5s ease-in-out infinite, loading-colors 6s ease-in-out infinite; @@ -131,13 +124,11 @@ select:-moz-focusring { transform-origin: center; } - @keyframes loading-rotator { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } - @keyframes loading-colors { 0% { stroke: rgb(248, 164, 167); } 25% { stroke: rgb(254, 196, 24); } @@ -146,7 +137,6 @@ select:-moz-focusring { 100% { stroke: rgb(248, 164, 167); } } - @keyframes loading-dash { 0% { stroke-dasharray: 1, 86.25; diff --git a/src/Css/Equalizer.css b/src/Css/Equalizer.css index 16d1e80d..6a43abc2 100644 --- a/src/Css/Equalizer.css +++ b/src/Css/Equalizer.css @@ -3,50 +3,58 @@ } -.equalizer { - & .knob { - box-shadow: inset 0 0 5px 1px rgba(119, 119, 119, 0.35); - height: var(--knob-size); - width: var(--knob-size); +/* Knob + ---- */ - & svg { - height: calc(100% - 8px); - margin-top: 4px; - stroke: rgba(119, 119, 119, 0.7); - width: calc(100% - 8px); - } +.equalizer .knob { + box-shadow: inset 0 0 5px 1px rgba(119, 119, 119, 0.35); + height: var(--knob-size); + width: var(--knob-size); +} + +.equalizer .knob svg { + height: calc(100% - 8px); + margin-top: 4px; + stroke: rgba(119, 119, 119, 0.7); + width: calc(100% - 8px); +} + +.equalizer .knob .layer-a { + box-shadow: 0 0 6px 1px rgba(119, 119, 119, 1); + margin: 8px; +} - & .layer-a { - box-shadow: 0 0 6px 1px rgba(119, 119, 119, 1); - margin: 8px; - } +.equalizer .knob .layer-b { + background-color: rgba(119, 119, 119, 0.8); + height: 9px; + width: 2px; +} - & .layer-b { - background-color: rgba(119, 119, 119, 0.8); - height: 9px; - width: 2px; - } - } - & .knob-label { - font-size: 9.5px; - } +/* Knob Label + ---------- */ +.equalizer .knob-label { + font-size: 9.5px; +} - & .knob-lines { - top: calc(var(--knob-size) / -4.5); - width: var(--knob-size); - & > div { - background-color: rgba(119, 119, 119, 0.8); - height: 9px; - width: 1px; - } - & > div:first-child { transform: rotate(45deg) } - & > div:last-child { transform: rotate(-45deg) } - } +/* Knob Lines + ---------- */ +.equalizer .knob-lines { + top: calc(var(--knob-size) / -4.5); + width: var(--knob-size); } + +.equalizer .knob-lines > div { + background-color: rgba(119, 119, 119, 0.8); + height: 9px; + width: 1px; +} + +.equalizer .knob-lines > div:first-child { transform: rotate(45deg) } +.equalizer .knob-lines > div:last-child { transform: rotate(-45deg) } diff --git a/src/Css/Notifications.css b/src/Css/Notifications.css index fd1e21e4..303fdc96 100644 --- a/src/Css/Notifications.css +++ b/src/Css/Notifications.css @@ -1,30 +1,29 @@ .notifications { font-size: 13px; line-height: 1.35; +} - & a, - & em { - border-bottom: 1px solid rgba(255, 255, 255, 0.45); - display: inline-block; - } - - & a { - color: inherit; - font-weight: 600; - text-decoration: none; - } +.notifications a, +.notifications em { + border-bottom: 1px solid rgba(255, 255, 255, 0.45); + display: inline-block; +} - & p { - margin: 0; - padding: 0; - } +.notifications a { + color: inherit; + font-weight: 600; + text-decoration: none; +} - & em { - font-weight: inherit; - } +.notifications p { + margin: 0; + padding: 0; +} - & strong { - font-weight: 600; - } +.notifications em { + font-weight: inherit; +} +.notifications strong { + font-weight: 600; } diff --git a/yarn.lock b/yarn.lock index 370a3f05..b9800c95 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3788,13 +3788,6 @@ postcss-nested@^4.1.1: postcss "^7.0.21" postcss-selector-parser "^6.0.2" -postcss-nesting@^7.0.1: - version "7.0.1" - resolved "https://registry.yarnpkg.com/postcss-nesting/-/postcss-nesting-7.0.1.tgz#b50ad7b7f0173e5b5e3880c3501344703e04c052" - integrity sha512-FrorPb0H3nuVq0Sff7W2rnc3SmIcruVC6YwpcS+k687VxyxO33iE1amna7wHuRVzM8vfiYofXSBHNAZ3QhLvYg== - dependencies: - postcss "^7.0.2" - postcss-selector-parser@^6.0.0, postcss-selector-parser@^6.0.2: version "6.0.2" resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.2.tgz#934cf799d016c83411859e09dcecade01286ec5c" @@ -3847,7 +3840,7 @@ postcss@^6.0.9: source-map "^0.6.1" supports-color "^5.4.0" -postcss@^7.0.1, postcss@^7.0.2: +postcss@^7.0.1: version "7.0.21" resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.21.tgz#06bb07824c19c2021c5d056d5b10c35b989f7e17" integrity sha512-uIFtJElxJo29QC753JzhidoAhvp/e/Exezkdhfmt8AymWT6/5B7W1WmponYWkHk2eg6sONyTch0A3nkMPun3SQ== -- 2.51.2