Move preflight to unocss

thetarnav · Jul 26, 2023 · d6c838e · d6c838e
1 parent 0778b3f
commit d6c838e
Show file tree

Hide file tree

Showing 6 changed files with 73 additions and 192 deletions.
diff --git a/packages/extension/src/index.tsx b/packages/extension/src/index.tsx
@@ -4,7 +4,7 @@ import { createSignal } from 'solid-js'
 import { render } from 'solid-js/web'
 import { ConnectionName, createPortMessanger, once, Versions } from './bridge'
 
-import '@solid-devtools/frontend/dist/index.css'
+import '@solid-devtools/frontend/dist/styles.css'
 
 const port = chrome.runtime.connect({ name: ConnectionName.Panel })
 const { postPortMessage: toBackground, onPortMessage: fromBackground } = createPortMessanger<

diff --git a/packages/frontend/package.json b/packages/frontend/package.json
@@ -32,7 +32,7 @@
         "dev": "pnpm run build --watch",
         "build": "pnpm run --filter frontend --parallel /build:.*/",
         "build:code": "tsup",
-        "build:css": "unocss \"src/**/*.tsx\" -o dist/uno.css",
+        "build:css": "unocss \"src/**/*.tsx\" -o dist/styles.css",
         "test": "vitest",
         "typecheck": "tsc --noEmit"
     },

diff --git a/packages/frontend/src/ui/index.ts b/packages/frontend/src/ui/index.ts
@@ -1,5 +1,3 @@
-import './reset.css'
-
 export * as theme from '../../../../configs/theme'
 export * as styles from './styles'
 

diff --git a/packages/frontend/src/ui/reset.css b/packages/frontend/src/ui/reset.css
diff --git a/packages/overlay/src/index.tsx b/packages/overlay/src/index.tsx
@@ -18,8 +18,7 @@ import {
 import { Dynamic, Portal } from 'solid-js/web'
 import { Devtools } from './controller'
 
-import frontendStyles from '@solid-devtools/frontend/dist/index.css'
-import frontendUnoStyles from '@solid-devtools/frontend/dist/uno.css'
+import frontendStyles from '@solid-devtools/frontend/dist/styles.css'
 import overlayStyles from './styles.css'
 
 export function attachDevtoolsOverlay(props: ComponentProps<typeof Overlay> = {}): VoidFunction {
@@ -106,7 +105,6 @@ const Overlay: Component<{
             </div>
             <MountIcons />
             <style>{frontendStyles}</style>
-            <style>{frontendUnoStyles}</style>
             <style>{overlayStyles}</style>
         </Portal>
     )

diff --git a/uno.config.ts b/uno.config.ts
@@ -32,4 +32,74 @@ export default defineConfig({
     shortcuts: {
         'center-child': 'flex items-center justify-center',
     },
+    preflights: [{ getCSS: () => reset }],
 }) as any
+
+/* http://meyerweb.com/eric/tools/css/reset/
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+const reset = /*css*/ `
+html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font-size: 100%;
+    font: inherit;
+    vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
+    display: block;
+}
+body {
+    line-height: 1;
+}
+ol,ul {
+    list-style: none;
+}
+blockquote,q {
+    quotes: none;
+}
+blockquote:before,blockquote:after,q:before,q:after {
+    content: '';
+    content: none;
+}
+table {
+    border-collapse: collapse;
+    border-spacing: 0;
+}
+button {
+    padding: 0;
+    border: none;
+    border-width: 0;
+    background: transparent;
+    cursor: pointer;
+    color: inherit;
+    font-family: inherit;
+    font-size: inherit;
+}
+input {
+    font-size: inherit;
+    font-family: inherit;
+}
+input[type='checkbox'] {
+    margin: 0;
+}
+input[type='text'] {
+    outline: unset;
+    background: unset;
+    border: unset;
+    color: inherit;
+}
+*,*::before,*::after {
+    box-sizing: border-box;
+}
+
+@media screen and (prefers-color-scheme: dark) {
+    * {
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+    }
+}
+`