evikit 2.13.0 → 2.14.0

package/README.md

@@ -59,6 +59,7 @@ Our language will be standard modern JavaScript as supported by Node.js directly
     - [File upload](#file-upload)
 - [Translation](#translation)
 - [Styling](#styling)
+  - [EviKit CSS](#evikit-css)
 - _TODO_ [Testing](#testing)
 - [Linting](#linting)
 - [esbuild](#esbuild)
@@ -881,7 +882,9 @@ export function acceptLanguages() {
 
 ### Styling
 
-EviKit is decoupled from styling, it's up to you how to design your app. I've had good experience with [daisyUI](https://daisyui.com/). Let's see how to set it up.
+#### Tailwind and daisyUI
+
+I've had good experience styling apps with [daisyUI](https://daisyui.com/). Let's see how to set it up.
 
 ```sh
 npm i -D @tailwindcss/vite daisyui
@@ -925,6 +928,126 @@ Change your `index.html` like this:
 
 Style your app however you like.
 
+#### EviKit CSS
+
+There's a stylesheet with a CSS reset and a small number of utility classes named like Tailwind and daisyUI. I use it to build my EviKit-based apps [with esbuild](#esbuild) and no plugins:
+
+- [EviKit's own landing page](https://codeberg.org/nykula/create-evikit)
+- [Lanquiz trivia game](https://codeberg.org/nykula/lanquiz)
+- [Yoself container monitoring tool](https://codeberg.org/nykula/yoself)
+
+The styles are written from scratch and aren't meant to replicate Tailwind exactly, just make apps look acceptable. In particular, they use a different palette, [X11 colors](https://www.w3.org/TR/css-color-3/) as provided by CSS itself; think late 90s, not web3.
+
+To try them, import EviKit in `index.css`:
+
+```css
+@import "evikit/css";
+```
+
+And change your `index.html` like in the above instructions for Tailwind.
+
+Margin:
+
+- m-8
+- mb-2 mb-4 sm:mb-4 -mb-4 mb-6 mb-8
+- mt-0 mt-2 mt-4 -mt-4 mt-6
+- mx-0 mx-auto
+- my-2 my-4 my-8
+
+Padding:
+
+- p-4 p-6 p-8 lg:p-8
+- pb-8
+
+Gap:
+
+- gap-2 gap-4 gap-8
+- gap-x-4
+- gap-y-6
+
+Width:
+
+- max-w-full sm:max-w-sm max-w-lg max-w-2xl max-w-5xl
+- w-32 w-auto w-fit w-full
+
+Height:
+
+- h-auto
+- min-h-screen
+
+Font:
+
+- font-thin font-semibold font-bold
+- tabular-nums
+- text-base
+- text-sm lg:text-sm
+- text-lg
+- text-xl lg:text-xl
+- text-2xl
+- lg:text-3xl
+- text-4xl lg:text-4xl
+- tracking-wider
+- uppercase
+- whitespace-nowrap
+
+Image:
+
+- bg-center
+- bg-cover
+- object-contain
+
+Layout:
+
+- absolute right-2 top-2
+- contents
+- flex flex-col flex-wrap
+- grid
+- grid-cols-1
+- grid-cols-2 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-2
+- lg:grid-cols-3
+- lg:grid-cols-4
+- 2xl:grid-cols-6
+- hidden lg:hidden
+- items-center justify-center
+- overflow-auto overflow-hidden
+- row-span-2
+- text-center sm:text-center md:text-center
+
+Border:
+
+- border lg:border
+- border-b
+- !border-none lg:border-none
+- rounded-lg lg:rounded-lg
+- rounded-xl
+- shadow-sm lg:shadow-sm
+
+Component:
+
+- badge badge-info
+- btn btn-ghost btn-disabled
+- fieldset fieldset-legend label input
+- link
+- lg:table table-zebra
+
+Color:
+
+- opacity-0 opacity-50
+- bg-gray-50 bg-gray-100
+- !bg-transparent
+- border-gray-100
+- text-green-400
+- text-orange-400
+- text-red-400
+- fill-amber-300/[50%] stroke-amber-500 text-amber-400
+- fill-cyan-300/[50%] stroke-cyan-500 text-cyan-400
+- fill-fuchsia-300/[50%] stroke-fuchsia-500 text-fuchsia-400
+- fill-indigo-300/[50%] stroke-indigo-500 text-indigo-400
+- fill-lime-300/[50%] stroke-lime-500 text-lime-400
+- fill-purple-300/[50%] stroke-purple-500 text-purple-400
+- fill-teal-300/[50%] stroke-teal-500 text-teal-400
+- fill-yellow-300/[50%] stroke-yellow-500 text-yellow-400
+
 ### Background worker
 
 You can run something repeatedly in main process, not in listeners for each CPU core. In development, it will restart whenever you edit api routes.
@@ -1007,7 +1130,7 @@ You can add these commands (without npx) as `format` and `lint` scripts in your
 
 ## esbuild
 
-If you don't need Tailwind (e.g. `index.css` is enough for you) or bundle analyzer, and are ok with full-page refresh instead of hot module replacement, you can have EviKit use [esbuild](https://esbuild.github.io/) as a smaller alternative to Vite.
+If you don't need Tailwind (e.g. [EviKit CSS](#evikit-css) is enough for you) or bundle analyzer, and are ok with full-page refresh instead of hot module replacement, you can have EviKit use [esbuild](https://esbuild.github.io/) as a smaller alternative to Vite.
 
 ```sh
 npm i -D esbuild

package/index.css

@@ -0,0 +1,717 @@
+* {
+  color: inherit;
+  font: inherit;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  text-align: inherit;
+  text-decoration: none;
+}
+
+html {
+  font-family: system-ui, sans-serif;
+  line-height: 1.5rem;
+}
+
+b {
+  font-weight: bold;
+}
+
+code {
+  font-family: monospace;
+}
+
+pre {
+  font-family: monospace;
+  font-size: 1rem;
+}
+
+summary {
+  list-style: revert;
+}
+
+/* Margin. */
+
+.m-8 {
+  margin: 2rem;
+}
+
+.mb-2 {
+  margin-bottom: 0.5rem;
+}
+
+.mb-4 {
+  margin-bottom: 1rem;
+}
+
+@media (min-width: 640px) {
+  .sm\:mb-4 {
+    margin-bottom: 1rem;
+  }
+}
+
+.\-mb-4 {
+  margin-bottom: -1rem;
+}
+
+.mb-6 {
+  margin-bottom: 1.5rem;
+}
+
+.mb-8 {
+  margin-bottom: 2rem;
+}
+
+.mt-0 {
+  margin-top: 0;
+}
+
+.mt-2 {
+  margin-top: 0.5rem;
+}
+
+.mt-4 {
+  margin-top: 1rem;
+}
+
+.-mt-4 {
+  margin-top: -1rem;
+}
+
+.mt-6 {
+  margin-top: 1.5rem;
+}
+
+.mx-0 {
+  margin-left: 0;
+  margin-right: 0;
+}
+
+.mx-auto {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.my-2 {
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+}
+
+.my-4 {
+  margin-bottom: 1rem;
+  margin-top: 1rem;
+}
+
+.my-8 {
+  margin-bottom: 2rem;
+  margin-top: 2rem;
+}
+
+/* Padding. */
+
+.p-4 {
+  padding: 1rem;
+}
+
+.p-6 {
+  padding: 1.5rem;
+}
+
+.p-8 {
+  padding: 2rem;
+}
+
+@media (min-width: 992px) {
+  .lg\:p-8 {
+    padding: 2rem;
+  }
+}
+
+.pb-8 {
+  padding-bottom: 2rem;
+}
+
+/* Gap. */
+
+.gap-2 {
+  gap: 0.5rem;
+}
+
+.gap-4 {
+  gap: 1rem;
+}
+
+.gap-8 {
+  gap: 2rem;
+}
+
+.gap-x-4 {
+  column-gap: 1rem;
+}
+
+.gap-y-6 {
+  row-gap: 1.5rem;
+}
+
+/* Width. */
+
+.max-w-full {
+  max-width: 100%;
+}
+
+@media (min-width: 640px) {
+  .sm\:max-w-sm {
+    max-width: 22rem;
+  }
+}
+
+.max-w-lg {
+  max-width: 32rem;
+}
+
+.max-w-2xl {
+  max-width: 40rem;
+}
+
+.max-w-5xl {
+  max-width: 60rem;
+}
+
+.w-32 {
+  width: 8rem;
+}
+
+.w-auto {
+  width: auto;
+}
+
+.w-fit {
+  width: fit-content;
+}
+
+.w-full {
+  width: 100%;
+}
+
+/* Height. */
+
+.h-auto {
+  height: auto;
+}
+
+.min-h-screen {
+  min-height: 100vh;
+}
+
+/* Font. */
+
+.font-thin {
+  font-weight: 300;
+}
+
+.font-semibold {
+  font-weight: 600;
+}
+
+.font-bold {
+  font-weight: 700;
+}
+
+.tabular-nums {
+  font-variant-numeric: tabular-nums;
+}
+
+.text-base {
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
+
+.text-sm {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+
+@media (min-width: 992px) {
+  .lg\:text-sm {
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+  }
+}
+
+.text-lg {
+  font-size: 1.125rem;
+  line-height: 1.625rem;
+}
+
+.text-xl {
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+}
+
+@media (min-width: 992px) {
+  .lg\:text-xl {
+    font-size: 1.25rem;
+    line-height: 1.75rem;
+  }
+}
+
+.text-2xl {
+  font-size: 1.5rem;
+  line-height: 2.125rem;
+}
+
+@media (min-width: 992px) {
+  .lg\:text-3xl {
+    font-size: 1.875rem;
+    line-height: 2.25rem;
+  }
+}
+
+.text-4xl {
+  font-size: 2.25rem;
+  line-height: 2.75rem;
+}
+
+@media (min-width: 992px) {
+  .lg\:text-4xl {
+    font-size: 2.25rem;
+    line-height: 2.75rem;
+  }
+}
+
+.tracking-wider {
+  letter-spacing: 0.05rem;
+}
+
+.uppercase {
+  text-transform: uppercase;
+}
+
+.whitespace-nowrap {
+  white-space: nowrap;
+}
+
+/* Image. */
+
+.bg-center {
+  background-position: center;
+}
+
+.bg-cover {
+  background-size: cover;
+}
+
+.object-contain {
+  object-fit: contain;
+}
+
+/* Layout. */
+
+.absolute {
+  position: absolute;
+}
+
+.contents {
+  display: contents;
+}
+
+.flex {
+  display: flex;
+}
+
+.flex-col {
+  flex-direction: column;
+}
+
+.flex-wrap {
+  flex-wrap: wrap;
+}
+
+.grid {
+  display: grid;
+}
+
+.grid-cols-1 {
+  grid-template-columns: 1fr;
+}
+
+.grid-cols-2 {
+  grid-template-columns: 1fr 1fr;
+}
+
+@media (min-width: 640px) {
+  .sm\:grid-cols-2 {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+@media (min-width: 768px) {
+  .md\:grid-cols-2 {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+@media (min-width: 992px) {
+  .lg\:grid-cols-2 {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+@media (min-width: 992px) {
+  .lg\:grid-cols-3 {
+    grid-template-columns: 1fr 1fr 1fr;
+  }
+}
+
+@media (min-width: 992px) {
+  .lg\:grid-cols-4 {
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+  }
+}
+
+@media (min-width: 1200px) {
+  .\2xl\:grid-cols-6 {
+    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
+  }
+}
+
+.hidden {
+  display: none;
+}
+
+@media (min-width: 992px) {
+  .lg\:hidden {
+    display: none;
+  }
+}
+
+.items-center {
+  align-items: center;
+}
+
+.justify-center {
+  justify-content: center;
+}
+
+.overflow-auto {
+  overflow: auto;
+}
+
+.overflow-hidden {
+  overflow: hidden;
+}
+
+.right-2 {
+  right: 0.5rem;
+}
+
+.row-span-2 {
+  grid-row: 2;
+}
+
+.text-center {
+  text-align: center;
+}
+
+@media (min-width: 640px) {
+  .sm\:text-center {
+    text-align: center;
+  }
+}
+
+@media (min-width: 768px) {
+  .md\:text-center {
+    text-align: center;
+  }
+}
+
+.top-2 {
+  top: 0.5rem;
+}
+
+/* Border. */
+
+.border {
+  border: 1px solid;
+}
+
+@media (min-width: 992px) {
+  .lg\:border {
+    border: 1px solid;
+  }
+}
+
+.border-b {
+  border-bottom: 1px solid;
+}
+
+.\!border-none {
+  border: none !important;
+}
+
+@media (min-width: 992px) {
+  .lg\:border-none {
+    border: none;
+  }
+}
+
+.rounded-lg {
+  border-radius: 0.5rem;
+}
+
+@media (min-width: 992px) {
+  .lg\:rounded-lg {
+    border-radius: 0.5rem;
+  }
+}
+
+.rounded-xl {
+  border-radius: 1rem;
+}
+
+.shadow-sm {
+  box-shadow: 0 0.125em 0.25em rgba(0, 0, 0, 0.1);
+}
+
+@media (min-width: 992px) {
+  .lg\:shadow-sm {
+    box-shadow: 0 0.125em 0.25em rgba(0, 0, 0, 0.1);
+  }
+}
+
+/* Component. */
+
+.badge {
+  border-radius: 0.5rem;
+  display: inline-flex;
+  gap: 0.5rem;
+  font-size: 0.875rem;
+  padding: 0.0625rem 0.75rem;
+}
+
+.badge-info {
+  background-color: color-mix(in srgb, darkturquoise 6.25%, transparent);
+}
+
+.btn {
+  background-color: rgba(0, 0, 0, 0.03125);
+  border: 1px solid rgba(0, 0, 0, 0.0625);
+  border-radius: 0.25rem;
+  cursor: pointer;
+  font-size: 0.875rem;
+  font-weight: 600;
+  padding: 0.5rem 1rem;
+}
+
+.btn:focus,
+.btn:hover {
+  background-color: rgba(0, 0, 0, 0.125);
+}
+
+.btn-ghost:not(:focus):not(:hover) {
+  background-color: transparent;
+  border-color: transparent;
+}
+
+.btn-disabled {
+  background-color: rgba(0, 0, 0, 0.03125);
+  border-color: rgba(0, 0, 0, 0.03125);
+}
+
+.fieldset {
+  border: none;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  padding-bottom: 0.25rem;
+  padding-top: 0.25rem;
+}
+
+.fieldset-legend {
+  font-size: 0.75rem;
+  font-weight: bold;
+}
+
+.label {
+  display: table;
+  font-size: 0.75rem;
+}
+
+.input {
+  border: 1px solid rgba(0, 0, 0, 0.25);
+  border-radius: 0.25rem;
+  font-size: 0.875rem;
+  max-width: 100%;
+  padding: 0.5rem 0.75rem;
+  width: 20rem;
+}
+
+.link {
+  text-decoration: underline;
+}
+
+.lg\:table {
+  border-collapse: collapse;
+  font-size: 0.875rem;
+  width: 100%;
+}
+
+@media (min-width: 992px) {
+  .lg\:table {
+    display: table;
+  }
+}
+
+.lg\:table thead th {
+  font-weight: 700;
+  opacity: 0.5;
+}
+
+.lg\:table tr > * {
+  padding: 0.75rem;
+}
+
+.table-zebra tr:nth-child(even) {
+  background-color: rgba(0, 0, 0, 0.025);
+  border-bottom: 1px solid rgba(0, 0, 0, 0.075);
+}
+
+@media (prefers-color-scheme: dark) {
+  .table-zebra tr:nth-child(even) {
+    background-color: rgba(255, 255, 255, 0.05);
+  }
+}
+
+/* Color. */
+
+.opacity-0 {
+  opacity: 0;
+}
+
+.opacity-50 {
+  opacity: 0.5;
+}
+
+.bg-gray-50 {
+  background-color: rgba(0, 0, 0, 0.015625);
+}
+
+.bg-gray-100 {
+  background-color: rgba(0, 0, 0, 0.03125);
+}
+
+.\!bg-transparent {
+  background-color: transparent !important;
+}
+
+.border-gray-100 {
+  border-color: rgba(0, 0, 0, 0.03125);
+}
+
+.fill-amber-300\/\[50\%\] {
+  fill: color-mix(in srgb, chocolate 25%, transparent);
+}
+
+.fill-cyan-300\/\[50\%\] {
+  fill: color-mix(in srgb, darkcyan 25%, transparent);
+}
+
+.fill-fuchsia-300\/\[50\%\] {
+  fill: color-mix(in srgb, palevioletred 25%, transparent);
+}
+
+.fill-indigo-300\/\[50\%\] {
+  fill: color-mix(in srgb, darkolivegreen 25%, transparent);
+}
+
+.fill-lime-300\/\[50\%\] {
+  fill: color-mix(in srgb, green 25%, transparent);
+}
+
+.fill-purple-300\/\[50\%\] {
+  fill: color-mix(in srgb, darkorchid 25%, transparent);
+}
+
+.fill-teal-300\/\[50\%\] {
+  fill: color-mix(in srgb, darkturquoise 25%, transparent);
+}
+
+.fill-yellow-300\/\[50\%\] {
+  fill: color-mix(in srgb, yellowgreen 25%, transparent);
+}
+
+.stroke-amber-500 {
+  stroke: chocolate;
+}
+
+.stroke-cyan-500 {
+  stroke: darkcyan;
+}
+
+.stroke-fuchsia-500 {
+  stroke: palevioletred;
+}
+
+.stroke-indigo-500 {
+  stroke: darkolivegreen;
+}
+
+.stroke-lime-500 {
+  stroke: green;
+}
+
+.stroke-purple-500 {
+  stroke: darkorchid;
+}
+
+.stroke-teal-500 {
+  stroke: darkturquoise;
+}
+
+.stroke-yellow-500 {
+  stroke: yellowgreen;
+}
+
+.text-amber-400 {
+  color: chocolate;
+}
+
+.text-cyan-400 {
+  color: darkcyan;
+}
+
+.text-fuchsia-400 {
+  color: palevioletred;
+}
+
+.text-green-400 {
+  color: limegreen;
+}
+
+.text-indigo-400 {
+  color: darkolivegreen;
+}
+
+.text-lime-400 {
+  color: green;
+}
+
+.text-orange-400 {
+  color: orange;
+}
+
+.text-purple-400 {
+  color: darkorchid;
+}
+
+.text-red-400 {
+  color: red;
+}
+
+.text-teal-400 {
+  color: darkturquoise;
+}
+
+.text-yellow-400 {
+  color: yellowgreen;
+}

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "evikit",
   "description": "Preact/SQLite SSR framework for small web apps",
-  "version": "2.13.0",
+  "version": "2.14.0",
   "type": "module",
   "exports": {
     ".": "./index.js",
+    "./css": "./index.css",
     "./db": "./db.js",
     "./server": "./server.js",
-    "./sqlite": "./sqlite.js",
-    "./testing": "./testing.js"
+    "./sqlite": "./sqlite.js"
   },
   "bin": {
     "evikit-extract": "bin/evikit-extract.js"

package/real-world-classes.js

@@ -0,0 +1,55 @@
+import { readFile } from "node:fs/promises";
+
+const html = await Promise.all(
+  [
+    "https://evikit.js.org",
+    "https://evikit.js.org/todo",
+    "https://yoself.nykula.com",
+    "https://yoself.nykula.com/404",
+  ].map(async (url) => await (await fetch(url)).text()),
+);
+const classes = [
+  ...new Set([
+    ...html.flatMap((html) =>
+      [...html.matchAll(/class=(?:"([^"]+)"|'([^']+)'|([^ ]+))/g)].flatMap(
+        ([, double, single, none]) =>
+          (double || single || none || "").split(" "),
+      ),
+    ),
+    ...(
+      await (
+        await fetch(
+          "https://codeberg.org/nykula/lanquiz/raw/branch/main/classes.log",
+        )
+      ).text()
+    )
+      .split("\n")
+      .filter(Boolean),
+  ]),
+]
+  .map((className) => ({
+    base: className.split(/[:!]|^!?-/).at(-1) || "",
+    className,
+    selector: `.${className.replace(/(\[|\]|[:/#!%])/g, "\\$1")}`,
+  }))
+  .filter(({ base }) => base)
+  .sort((a, b) => a.base.localeCompare(b.base));
+const css = await readFile("./index.css", "utf-8");
+const missing = classes
+  .filter(({ selector }) => !css.includes(selector))
+  .map(({ className }) => className)
+  .join("\n");
+const extra = [...css.matchAll(/\n *(\.[^ ,]+)/g)]
+  .map(([, selector]) => (selector || "").replace(/:focus|:hover/, ""))
+  .filter((selector) => !classes.some((c) => c.selector == selector))
+  .map((selector) => selector?.replace(/[.\\]/g, ""))
+  .join("\n");
+if (missing) {
+  console.log(`Missing:\n${missing}`);
+}
+if (missing && extra) {
+  console.log();
+}
+if (extra) {
+  console.log(`Extra:\n${extra}`);
+}