Get Vanilla Extract working, upgrade deps, go full ESM

.gitignore

@@ -1,25 +1,9 @@
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
 pnpm-debug.log*
 lerna-debug.log*
 
 node_modules
 dist
 dist-ssr
-*.local
 
-# Editor directories and files
-.vscode/*
-!.vscode/extensions.json
-.idea
 .DS_Store
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw?
-.turbo
+.eslintcache

package.json

@@ -6,32 +6,26 @@
   "repository": {
     "url": "https://github.com/askoufis/askoufis.github.io"
   },
-  "engines": {
-    "node": "16"
-  },
   "scripts": {
     "build:site": "pnpm --filter 'site' build",
     "dev": "pnpm --filter 'site' dev",
     "preview": "pnpm --filter 'site' preview",
     "deploy:site": "pnpm --filter 'site' run deploy",
-    "eslint": "eslint .",
+    "eslint": "eslint --cache .",
     "lint": "pnpm run tsc && pnpm run eslint && pnpm format:check",
-    "format": "eslint . --fix && prettier --write .",
-    "format:check": "prettier --list-different .",
+    "format": "eslint --cache . --fix && prettier --cache --write .",
+    "format:check": "prettier --cache --list-different .",
     "test": "echo 'no tests yet'",
     "tsc": "tsc"
   },
   "devDependencies": {
-    "@typescript-eslint/eslint-plugin": "^5.37.0",
-    "@typescript-eslint/parser": "^5.37.0",
-    "gh-pages": "^4.0.0",
     "eslint": "^8.23.1",
-    "eslint-config-seek": "^10.0.0",
-    "prettier": "^2.7.1",
-    "typescript": "^4.8.4"
+    "eslint-config-seek": "^11.3.1",
+    "prettier": "^2.8.8",
+    "typescript": "^5.1.6"
   },
-  "packageManager": "pnpm@7.11.0",
+  "packageManager": "pnpm@8.6.10",
   "volta": {
-    "node": "16.17.0"
+    "node": "18.17.0"
   }
 }

packages/system/package.json

@@ -1,9 +1,15 @@
 {
-  "name": "system",
+  "name": "@askoufis/system",
   "private": true,
-  "main": "src/index.ts",
+  "type": "module",
+  "exports": {
+    ".": "./src/index.ts",
+    "./css": "./src/css/index.ts"
+  },
   "dependencies": {
     "@types/react": "^18.0.17",
+    "@vanilla-extract/css": "^1.12.0",
+    "@vanilla-extract/sprinkles": "^1.6.1",
     "react": "^18.2.0"
   }
 }

packages/system/src/css/index.ts

@@ -0,0 +1 @@
+export { sprinkles } from './sprinkles.css';

packages/system/src/css/reset.css.ts

@@ -0,0 +1,84 @@
+import { style } from '@vanilla-extract/css';
+
+export const base = style({
+  margin: 0,
+  padding: 0,
+  border: 0,
+  minWidth: 0,
+  boxSizing: 'border-box',
+  fontSize: '100%',
+  font: 'inherit',
+  verticalAlign: 'baseline',
+});
+
+export const button = style({
+  background: 0,
+  border: 0,
+  WebkitTapHighlightColor: 'rgba(0, 0, 0, 0)',
+});
+
+// HTML5 display-role reset for older browsers
+const block = style({
+  display: 'block',
+});
+
+const body = style({
+  lineHeight: 1,
+});
+
+const list = style({
+  listStyle: 'none',
+});
+
+const quote = style({
+  quotes: 'none',
+  selectors: {
+    '&:before, &:after': {
+      content: "''",
+    },
+  },
+});
+
+const table = style({
+  borderCollapse: 'collapse',
+  borderSpacing: 0,
+});
+
+// Custom reset rules
+const mark = style({
+  backgroundColor: 'transparent',
+  color: 'inherit',
+});
+
+const select = style({
+  appearance: 'none',
+  selectors: {
+    '&::-ms-expand': {
+      display: 'none',
+    },
+  },
+});
+
+export const element = {
+  article: block,
+  aside: block,
+  button,
+  details: block,
+  figcaption: block,
+  figure: block,
+  footer: block,
+  header: block,
+  hgroup: block,
+  menu: block,
+  nav: block,
+  section: block,
+  textarea: block,
+  ul: list,
+  ol: list,
+  blockquote: quote,
+  q: quote,
+  body,
+  table,
+  mark,
+  select,
+};

packages/system/src/css/sprinkles.css.ts

@@ -0,0 +1,72 @@
+import { defineProperties, createSprinkles } from '@vanilla-extract/sprinkles';
+
+const space = {
+  none: 0,
+  xsmall: '4px',
+  small: '8px',
+  large: '16px',
+  xlarge: '32px',
+};
+
+const responsiveProperties = defineProperties({
+  conditions: {
+    mobile: {},
+    tablet: { '@media': 'screen and (min-width: 768px)' },
+    desktop: { '@media': 'screen and (min-width: 1024px)' },
+  },
+  defaultCondition: 'mobile',
+  properties: {
+    display: ['none', 'flex', 'block', 'inline'],
+    flexDirection: ['row', 'column'],
+    justifyContent: [
+      'stretch',
+      'flex-start',
+      'center',
+      'flex-end',
+      'space-around',
+      'space-between',
+    ],
+    alignItems: ['stretch', 'flex-start', 'center', 'flex-end'],
+    paddingTop: space,
+    paddingBottom: space,
+    paddingLeft: space,
+    paddingRight: space,
+    marginTop: space,
+    marginBottom: space,
+    marginLeft: space,
+    marginRight: space,
+  },
+  shorthands: {
+    padding: ['paddingTop', 'paddingBottom', 'paddingLeft', 'paddingRight'],
+    paddingX: ['paddingLeft', 'paddingRight'],
+    paddingY: ['paddingTop', 'paddingBottom'],
+    placeItems: ['justifyContent', 'alignItems'],
+  },
+});
+
+const colors = {
+  'blue-50': '#e3f2fd',
+  'blue-100': '#dbeafe',
+  'blue-200': '#bfdbfe',
+  'gray-700': '#374151',
+  'gray-800': '#1f2937',
+  'gray-900': '#111827',
+  // etc.
+};
+
+const colorProperties = defineProperties({
+  conditions: {
+    lightMode: {},
+    darkMode: { '@media': '(prefers-color-scheme: dark)' },
+  },
+  defaultCondition: 'lightMode',
+  properties: {
+    color: colors,
+    background: colors,
+    // etc.
+  },
+});
+
+export const sprinkles = createSprinkles(responsiveProperties, colorProperties);
+
+export type Sprinkles = Parameters<typeof sprinkles>[0];