css reset

README.md

@@ -79,6 +79,14 @@ export default ({ children, title }: any) => (
 
 CSS can be accessed via `/css/main.css`:
 
+```html
+<link href="/css/main.css" rel="stylesheet" />
+```
+
+### css reset
+
+`hype` includes a css reset for your convenience:
+
 ```html
 <link href="/css/reset.css" rel="stylesheet" />
 ```

src/index.tsx

@@ -6,6 +6,7 @@ import color from 'kleur'
 import { transpile } from './utils'
 
 const SHOW_HTTP_LOG = true
+const CSS_RESET = await Bun.file(join(import.meta.dir, '/reset.css')).text()
 
 export class Hype extends Hono {
   routesRegistered = false
@@ -36,6 +37,11 @@ export class Hype extends Hono {
       console.log(fn(`${c.res.status}`), `${color.bold(method)} ${c.req.url} (${end - start}ms)`)
     })
 
+    // css reset
+    this.get('/css/reset.css', async c => new Response(CSS_RESET, {
+      headers: { 'Content-Type': 'text/css' }
+    }))
+
     // serve transpiled js
     this.on('GET', ['/js/:path{.+}', '/shared/:path{.+}'], async c => {
       let path = './src/' + c.req.path.replace('..', '.')

src/reset.css

@@ -0,0 +1,78 @@
+/* https://www.joshwcomeau.com/css/custom-css-reset/ */
+
+/* 1. Use a more-intuitive box-sizing model */
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+}
+
+/* 2. Remove default margin */
+* {
+    margin: 0;
+}
+
+/* 3. Enable keyword animations */
+@media (prefers-reduced-motion: no-preference) {
+    html {
+        interpolate-size: allow-keywords;
+    }
+}
+
+body {
+    /* 4. Add accessible line-height */
+    line-height: 1.5;
+    /* 5. Improve text rendering */
+    -webkit-font-smoothing: antialiased;
+}
+
+/* 6. Improve media defaults */
+img,
+picture,
+video,
+canvas,
+svg {
+    display: block;
+    max-width: 100%;
+}
+
+/* 7. Inherit fonts for form controls */
+input,
+button,
+textarea,
+select {
+    font: inherit;
+}
+
+/* 8. Avoid text overflows */
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    overflow-wrap: break-word;
+}
+
+/* 9. Improve line wrapping */
+p {
+    text-wrap: pretty;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    text-wrap: balance;
+}
+
+/*
+    10. Create a root stacking context
+  */
+#root,
+#__next {
+    isolation: isolate;
+}