Let Expo/Webpack handle CSS assets (#3942)

* chore: handle built css assets

* chore: let prettier handle css code

* refactor: let webpack build css assets

* chore: prettier on bskyembed

* chore: touch empty.txt on css directory

* chore: do the same to the workflow

2 files changed, 404 insertions, 0 deletions

diff --git a/src/App.web.tsx b/src/App.web.tsx
index c81ed10d3..7d98737a3 100644
--- a/src/App.web.tsx
+++ b/src/App.web.tsx
@@ -1,5 +1,6 @@
 import 'lib/sentry' // must be near top
 import 'view/icons'
+import './style.css'
 
 import React, {useEffect, useState} from 'react'
 import {KeyboardProvider} from 'react-native-keyboard-controller'
diff --git a/src/style.css b/src/style.css
new file mode 100644
index 000000000..29e9770e3
--- /dev/null
+++ b/src/style.css
@@ -0,0 +1,403 @@
+@font-face {
+  font-family: 'Inter-Regular';
+  src: local('Inter-Regular'),
+    url(/static/media/Inter-Regular.1f5ed03b6dd9fd1f9982.otf) format('font/otf');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Inter-Italic';
+  src: local('Inter-Italic'),
+    url(/static/media/Inter-Italic.95778eb0c75dc956257e.otf) format('font/otf');
+  font-weight: 400;
+  font-style: italic;
+  font-display: swap;
+}
+/*
+@font-face {
+  font-family: "Inter-Medium";
+  src: local("Inter-Medium"), url(/static/media/Inter-Medium.296aa2d65964269836b3.otf) format("font/otf");
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Inter-MediumItalic";
+  src: local("Inter-MediumItalic"), url(/static/media/Inter-MediumItalic.0e57e17a6311368e2114.otf) format("font/otf");
+  font-weight: 500;
+  font-style: italic;
+  font-display: swap;
+}
+*/
+@font-face {
+  font-family: 'Inter-SemiBold';
+  src: local('Inter-SemiBold'),
+    url(/static/media/Inter-SemiBold.2277990330981b8409bb.otf)
+      format('font/otf');
+  font-weight: 600;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Inter-SemiBoldItalic';
+  src: local('Inter-SemiBoldItalic'),
+    url(/static/media/Inter-SemiBoldItalic.f62fea3df3a521d6c8a7.otf)
+      format('font/otf');
+  font-weight: 600;
+  font-style: italic;
+  font-display: swap;
+}
+/*
+@font-face {
+  font-family: "Inter-Bold";
+  src: local("Inter-Bold"), url(/static/media/Inter-Bold.8d330503e1d034ad68de.otf) format("font/otf");
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Inter-BoldItalic";
+  src: local("Inter-BoldItalic"), url(/static/media/Inter-BoldItalic.bb17e63f9baa0d861a20.otf) format("font/otf");
+  font-weight: 700;
+  font-style: italic;
+  font-display: swap;
+}
+*/
+@font-face {
+  font-family: 'Inter-ExtraBold';
+  src: local('Inter-ExtraBold'),
+    url(/static/media/Inter-ExtraBold.ff2581a193bf6b7e0b06.otf)
+      format('font/otf');
+  font-weight: 800;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Inter-ExtraBoldItalic';
+  src: local('Inter-ExtraBoldItalic'),
+    url(/static/media/Inter-ExtraBoldItalic.0e50b40728d24d40fdf4.otf)
+      format('font/otf');
+  font-weight: 800;
+  font-style: italic;
+  font-display: swap;
+}
+/*
+@font-face {
+  font-family: "Inter-Black";
+  src: local("Inter-Black"), url(/static/media/Inter-Black.66e9a87f1c921e844ed4.otf) format("font/otf");
+  font-weight: 900;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Inter-BlackItalic";
+  src: local("Inter-BlackItalic"), url(/static/media/Inter-BlackItalic.27b9f0ad06fd13a7b9da.otf) format("font/otf");
+  font-weight: 900;
+  font-style: italic;
+  font-display: swap;
+}
+*/
+
+/**
+ * Extend the react-native-web reset:
+ * https://github.com/necolas/react-native-web/blob/master/packages/react-native-web/src/exports/StyleSheet/initialRules.js
+ */
+html,
+body,
+#root {
+  width: 100%;
+  /* To smooth any scrolling behavior */
+  -webkit-overflow-scrolling: touch;
+  margin: 0px;
+  padding: 0px;
+  /* Allows content to fill the viewport and go beyond the bottom */
+  min-height: 100%;
+}
+#root {
+  flex-shrink: 0;
+  flex-basis: auto;
+  flex-grow: 1;
+  display: flex;
+  flex: 1;
+}
+
+html {
+  /* Prevent text size change on orientation change https://gist.github.com/tfausak/2222823#file-ios-8-web-app-html-L138 */
+  -webkit-text-size-adjust: 100%;
+  height: calc(100% + env(safe-area-inset-top));
+  scrollbar-gutter: stable both-edges;
+}
+html,
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    'Liberation Sans', Helvetica, Arial, sans-serif;
+}
+
+#preload {
+  width: 100px;
+  position: fixed;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+
+/* Buttons and inputs have a font set by UA, so we'll have to reset that */
+button,
+input,
+textarea {
+  font: inherit;
+  line-height: inherit;
+}
+
+/* Color theming */
+/* Default will always be white */
+:root {
+  --text: black;
+  --background: white;
+  --backgroundLight: hsl(211, 20%, 95%);
+}
+/* This gives us a black background when system is dark and we have not loaded the theme/color scheme values in JS */
+@media (prefers-color-scheme: dark) {
+  :root {
+    --text: white;
+    --background: black;
+    --backgroundLight: hsl(211, 20%, 20%);
+    color-scheme: dark;
+  }
+}
+
+/* Overwrite those preferences with the selected theme */
+html.theme--light {
+  --text: black;
+  --background: white;
+  --backgroundLight: hsl(211, 20%, 95%);
+}
+html.theme--dark {
+  --text: white;
+  --background: black;
+  --backgroundLight: hsl(211, 20%, 20%);
+  color-scheme: dark;
+}
+html.theme--dim {
+  --text: white;
+  --background: hsl(211, 20%, 4%);
+  --backgroundLight: hsl(211, 20%, 10%);
+  color-scheme: dark;
+}
+
+/* Remove autofill styles on Webkit */
+input:autofill,
+input:-webkit-autofill,
+input:-webkit-autofill:hover,
+input:-webkit-autofill:focus,
+input:-webkit-autofill:active {
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: var(--text);
+  transition: background-color 5000s ease-in-out 0s;
+  box-shadow: inset 0 0 20px 20px var(--background);
+  background: var(--background);
+  color: var(--text);
+}
+/* Force left-align date/time inputs on iOS mobile */
+input::-webkit-date-and-time-value {
+  text-align: left;
+}
+
+body {
+  display: flex;
+  /* Allows you to scroll below the viewport; default value is visible */
+  overflow-y: auto;
+  overscroll-behavior-y: none;
+  text-rendering: optimizeLegibility;
+  background-color: var(--background);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -ms-overflow-style: scrollbar;
+  font-synthesis-weight: none;
+}
+
+/* Remove default link styling */
+a {
+  color: inherit;
+}
+a[role='link']:hover {
+  text-decoration: underline;
+}
+a[role='link'][data-no-underline='1']:hover {
+  text-decoration: none;
+}
+
+/* Styling hacks */
+*[data-word-wrap] {
+  word-break: break-word;
+}
+*[data-stable-gutters] {
+  scrollbar-gutter: stable both-edges;
+}
+
+/* ProseMirror */
+.ProseMirror {
+  font: 18px -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    'Liberation Sans', Helvetica, Arial, sans-serif;
+  min-height: 140px;
+}
+.ProseMirror-dark {
+  color: white;
+}
+.ProseMirror p {
+  margin: 0;
+}
+.ProseMirror p.is-editor-empty:first-child::before {
+  color: #8d8e96;
+  content: attr(data-placeholder);
+  float: left;
+  height: 0;
+  pointer-events: none;
+}
+.ProseMirror .mention {
+  color: #0085ff;
+}
+.ProseMirror a,
+.ProseMirror .autolink {
+  color: #0085ff;
+}
+/* OLLIE: TODO -- this is not accessible */
+/* Remove focus state on inputs */
+.ProseMirror-focused {
+  outline: 0;
+}
+textarea:focus,
+input:focus {
+  outline: 0;
+}
+.tippy-content .items {
+  width: fit-content;
+}
+
+/* Tooltips */
+[data-tooltip] {
+  position: relative;
+  z-index: 10;
+}
+[data-tooltip]::after {
+  content: attr(data-tooltip);
+  display: none;
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  transform: translateY(100%) translateY(8px) translateX(-50%);
+  padding: 4px 10px;
+  border-radius: 10px;
+  background: var(--backgroundLight);
+  color: var(--text);
+  text-align: center;
+  white-space: nowrap;
+  font-size: 12px;
+  z-index: 10;
+}
+[data-tooltip]::before {
+  content: '';
+  display: none;
+  position: absolute;
+  border-bottom: 6px solid var(--backgroundLight);
+  border-left: 6px solid transparent;
+  border-right: 6px solid transparent;
+  bottom: 0;
+  left: 50%;
+  transform: translateY(100%) translateY(2px) translateX(-50%);
+  z-index: 10;
+}
+[data-tooltip]:hover::after,
+[data-tooltip]:hover::before {
+  display: block;
+}
+
+/* NativeDropdown component */
+.radix-dropdown-item:focus,
+.nativeDropdown-item:focus {
+  outline: none;
+}
+
+/* Spinner component */
+@keyframes rotate {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+.rotate-500ms {
+  position: absolute;
+  inset: 0;
+  animation: rotate 500ms linear infinite;
+}
+
+@keyframes avatarHoverFadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes avatarHoverFadeOut {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+.force-no-clicks > *,
+.force-no-clicks * {
+  pointer-events: none !important;
+}
+
+input[type='range'][orient='vertical'] {
+  writing-mode: vertical-lr;
+  direction: rtl;
+  appearance: slider-vertical;
+  width: 16px;
+  vertical-align: bottom;
+  -webkit-appearance: none;
+  appearance: none;
+  background: transparent;
+  cursor: pointer;
+}
+
+input[type='range'][orient='vertical']::-webkit-slider-runnable-track {
+  background: white;
+  height: 100%;
+  width: 4px;
+  border-radius: 4px;
+}
+
+input[type='range'][orient='vertical']::-moz-range-track {
+  background: white;
+  height: 100%;
+  width: 4px;
+  border-radius: 4px;
+}
+
+input[type='range']::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  border-radius: 50%;
+  background-color: white;
+  height: 16px;
+  width: 16px;
+  margin-left: -6px;
+}
+
+input[type='range'][orient='vertical']::-moz-range-thumb {
+  border: none;
+  border-radius: 50%;
+  background-color: white;
+  height: 16px;
+  width: 16px;
+  margin-left: -6px;
+}