From 4abc7f40d1e7ac9c43178aeabad2bd8fbd8adde8 Mon Sep 17 00:00:00 2001
From: Jake Archibald <jaffathecake@gmail.com>
Date: Thu, 26 Nov 2020 16:08:43 +0000
Subject: [PATCH] More CSS optimisation

---
 src/client/lazy-app/Compress/Output/style.css |  6 +--
 .../lazy-app/Compress/Results/style.css       |  2 +-
 src/shared/prerendered-app/Intro/style.css    | 10 ++---
 src/shared/prerendered-app/util.css           | 38 ++++++++++---------
 4 files changed, 29 insertions(+), 27 deletions(-)

diff --git a/src/client/lazy-app/Compress/Output/style.css b/src/client/lazy-app/Compress/Output/style.css
index ba3f6f70..269a04a0 100644
--- a/src/client/lazy-app/Compress/Output/style.css
+++ b/src/client/lazy-app/Compress/Output/style.css
@@ -1,5 +1,5 @@
 .output {
-  composes: abs-fill from '../../../../shared/prerendered-app/util.css';
+  composes: abs-fill from global;
 
   &::before {
     content: '';
@@ -19,12 +19,12 @@
 }
 
 .two-up {
-  composes: abs-fill from '../../../../shared/prerendered-app/util.css';
+  composes: abs-fill from global;
   --accent-color: var(--button-fg);
 }
 
 .pinch-zoom {
-  composes: abs-fill from '../../../../shared/prerendered-app/util.css';
+  composes: abs-fill from global;
   outline: none;
   display: flex;
   justify-content: center;
diff --git a/src/client/lazy-app/Compress/Results/style.css b/src/client/lazy-app/Compress/Results/style.css
index f3c8e68e..8d56f36f 100644
--- a/src/client/lazy-app/Compress/Results/style.css
+++ b/src/client/lazy-app/Compress/Results/style.css
@@ -124,7 +124,7 @@
 .copy-to-other {
   grid-row: 1;
   grid-column: copy-button;
-  composes: unbutton from '../../../../shared/prerendered-app/util.css';
+  composes: unbutton from global;
   composes: download;
 
   background: #656565;
diff --git a/src/shared/prerendered-app/Intro/style.css b/src/shared/prerendered-app/Intro/style.css
index 014a6b7d..5cb929f1 100644
--- a/src/shared/prerendered-app/Intro/style.css
+++ b/src/shared/prerendered-app/Intro/style.css
@@ -1,5 +1,5 @@
 .intro {
-  composes: abs-fill from '../util.css';
+  composes: abs-fill from global;
   -webkit-overflow-scrolling: touch;
   overflow: auto;
   overscroll-behavior: contain;
@@ -10,7 +10,7 @@
 }
 
 .blob-canvas {
-  composes: abs-fill from '../util.css';
+  composes: abs-fill from global;
   width: 100%;
   height: 100%;
 }
@@ -47,7 +47,7 @@
 }
 
 .blob-svg {
-  composes: abs-fill from '../util.css';
+  composes: abs-fill from global;
   width: 100%;
   height: 100%;
   fill: var(--blob-pink);
@@ -70,7 +70,7 @@
 }
 
 .load-btn {
-  composes: unbutton from '../util.css';
+  composes: unbutton from global;
 }
 
 .load-icon {
@@ -82,7 +82,7 @@
 }
 
 .paste-btn {
-  composes: unbutton from '../util.css';
+  composes: unbutton from global;
   text-decoration: underline;
   font: inherit;
   color: inherit;
diff --git a/src/shared/prerendered-app/util.css b/src/shared/prerendered-app/util.css
index b8c7ba48..fc48b374 100644
--- a/src/shared/prerendered-app/util.css
+++ b/src/shared/prerendered-app/util.css
@@ -1,22 +1,24 @@
-.abs-fill {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  box-sizing: border-box;
-  contain: strict;
-}
+:global {
+  .abs-fill {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    contain: strict;
+  }
 
-.unbutton {
-  cursor: pointer;
-  background: none;
-  border: none;
-  font: inherit;
-  padding: 0;
-  margin: 0;
+  .unbutton {
+    cursor: pointer;
+    background: none;
+    border: none;
+    font: inherit;
+    padding: 0;
+    margin: 0;
 
-  &:focus {
-    outline: none;
+    &:focus {
+      outline: none;
+    }
   }
 }