From d6c838e838cd63a2f73de086961d459a8ab6a1f0 Mon Sep 17 00:00:00 2001 From: Damian Tarnawski Date: Wed, 26 Jul 2023 20:43:56 +0200 Subject: [PATCH] Move preflight to unocss --- packages/extension/src/index.tsx | 2 +- packages/frontend/package.json | 2 +- packages/frontend/src/ui/index.ts | 2 - packages/frontend/src/ui/reset.css | 185 ----------------------------- packages/overlay/src/index.tsx | 4 +- uno.config.ts | 70 +++++++++++ 6 files changed, 73 insertions(+), 192 deletions(-) delete mode 100644 packages/frontend/src/ui/reset.css diff --git a/packages/extension/src/index.tsx b/packages/extension/src/index.tsx index d4043bfd..139ae7af 100644 --- 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 index 83eb733a..7c8fcd2a 100644 --- 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 index f3187518..d4bb5d9e 100644 --- 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 deleted file mode 100644 index c5216b44..00000000 --- a/packages/frontend/src/ui/reset.css +++ /dev/null @@ -1,185 +0,0 @@ -/* http://meyerweb.com/eric/tools/css/reset/ - v2.0 | 20110126 - License: none (public domain) -*/ - -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; -} - -.sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border-width: 0; -} - -.fade-enter, -.fade-exit-to { - opacity: 0; -} -.fade-enter-active, -.fade-exit-active { - transition: opacity 0.3s ease; -} - -@media screen and (prefers-color-scheme: dark) { - * { - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - } -} diff --git a/packages/overlay/src/index.tsx b/packages/overlay/src/index.tsx index d4162564..96310c91 100644 --- 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 = {}): VoidFunction { @@ -106,7 +105,6 @@ const Overlay: Component<{ - ) diff --git a/uno.config.ts b/uno.config.ts index cf073e3f..51d11ec8 100644 --- 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; + } +} +`