initial

.github/workflows/docs.yml

@@ -0,0 +1,54 @@
+name: Deploy Rspress site to Pages
+
+on:
+  push:
+    branches: [master]
+
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: pages
+  cancel-in-progress: false
+
+jobs:
+  # Build job
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0 # Not needed if lastUpdated is not enabled
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
+      - name: Setup Pages
+        uses: actions/configure-pages@v5
+      - name: Install dependencies
+        run: corepack enable && yarn
+      - name: Build with Rspress
+        run: |
+          yarn docs-build
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: doc_build
+
+  # Deployment job
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    needs: build
+    runs-on: ubuntu-latest
+    name: Deploy
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

.gitignore

@@ -0,0 +1,26 @@
+# IDE folders
+.idea
+.vscode
+
+# Vim swap files
+.s[a-z][a-z]
+.*.s[a-z][a-z]
+
+# Mac OS X Finder
+.DS_Store
+
+# Node dependencies
+node_modules
+
+# npm-debug log
+npm-debug.*
+
+# yarn
+yarn-error.log
+.yarn
+
+# GH_TOKEN and NPM_TOKEN in .env for 'auto' releases
+.env
+
+# documentation
+doc_build

.yarnrc.yml

@@ -0,0 +1 @@
+nodeLinker: node-modules

README.md

@@ -0,0 +1,22 @@
+# CSSX
+
+> CSS-in-JS with actual CSS syntax
+
+Features:
+
+- Write CSS inside JS files using the actual CSS syntax
+- Supports both Web and React Native
+- Override styles of parts of the component from the outside using [`:part()`](https://developer.mozilla.org/en-US/docs/Web/CSS/::part)
+- Dynamic CSS Variables (`var(--foo-bar)`)
+- Automatic styles caching (prevents unnecessary re-renderings)
+- [Stylus](https://stylus-lang.com) support
+- Theming
+- Customizable style system based on Material Design guidelines (8px grid)
+
+## Installation
+
+For installation and documentation see [cssx.dev](https://cssx.dev)
+
+## License
+
+MIT

docs/api/cssx.md

@@ -0,0 +1,3 @@
+# cssx() Function
+
+TODO

docs/examples/index.md

@@ -0,0 +1,3 @@
+# Simple example
+
+TODO

docs/guide/index.md

@@ -0,0 +1,3 @@
+# Introduction
+
+TODO

docs/guide/installation.mdx

@@ -0,0 +1,7 @@
+# Installation
+
+import { PackageManagerTabs } from '@theme'
+
+<PackageManagerTabs command="install @startupjs/cssx" />
+
+TODO

docs/guide/react-integration.md

@@ -0,0 +1,3 @@
+# React Integration
+
+TODO

docs/guide/usage.md

@@ -0,0 +1,3 @@
+# Usage
+
+TODO

docs/index.md

@@ -0,0 +1,41 @@
+---
+pageType: home
+
+hero:
+  name: CSSX
+  text: CSS-in-JS with actual CSS
+  tagline: Write CSS using... CSS!
+  actions:
+    - theme: brand
+      text: Introduction
+      link: /guide/index
+    - theme: alt
+      text: Quick Start
+      link: /guide/installation
+
+features:
+  - title: True CSS Syntax
+    details: Write CSS directly inside JS files using familiar CSS syntax
+    icon: 🎨
+  - title: React Native + Web
+    details: Compatible with both Web and React Native for unified styling
+    icon: 🌍
+  - title: Scoped Styling
+    details: Use `:part()` to override styles in isolated component parts
+    icon: 🧩
+  - title: Dynamic Variables
+    details: Integrate dynamic CSS variables like `var(--foo-bar)` for adaptable designs
+    icon: ⚙️
+  - title: Efficient Caching
+    details: Automatic style caching to avoid unnecessary re-rendering and enhance performance
+    icon: 🚀
+  - title: Stylus Integration
+    details: Supports Stylus for streamlined and versatile CSS pre-processing
+    icon: 🖌️
+  - title: Theming
+    details: Built-in theming capabilities for consistent look and feel
+    icon: 🎨
+  - title: Customizable Design System
+    details: Adheres to Material Design guidelines with an 8px grid for precise layout control
+    icon: 🧱
+---

example/.gitignore

@@ -0,0 +1,20 @@
+# IDE folders
+.idea
+.vscode
+
+# Vim swap files
+.s[a-z][a-z]
+.*.s[a-z][a-z]
+
+# Mac OS X Finder
+.DS_Store
+
+# Node dependencies
+node_modules
+
+# npm-debug log
+npm-debug.*
+
+# yarn
+yarn-error.log
+.yarn

example/README.md

@@ -0,0 +1,16 @@
+# cssx app example
+
+## Installation
+
+1. Copy the `example` folder somewhere and go into it.
+2. Run it:
+
+    ```
+    npm i && npm start
+    ```
+
+3. Open [localhost:3000](http://localhost:3000) in a browser.
+
+## License
+
+MIT

example/_serveClient.js

@@ -0,0 +1,48 @@
+// simple bundler for client.js with live reload
+import esbuild from 'esbuild'
+import { watch } from 'fs'
+
+let cache
+const reloadClients = new Set()
+
+export default function serveClient (server) {
+  server.on('request', async (req, res) => {
+    if (req.url === '/client.js') {
+      res.setHeader('Content-Type', 'application/javascript')
+      res.end(await bundleClientJs())
+    } else if (req.url === '/reload') {
+      res.setHeader('Content-Type', 'text/event-stream')
+      res.setHeader('Cache-Control', 'no-cache')
+      res.setHeader('Connection', 'keep-alive')
+      const reload = () => res.write('data: \n\n')
+      reloadClients.add(reload)
+      req.on('close', () => reloadClients.delete(reload))
+    } else {
+      res.setHeader('Content-Type', 'text/html')
+      res.end('<script type="module" src="/client.js"></script>')
+    }
+  })
+}
+
+async function bundleClientJs () {
+  cache ??= esbuild.build({
+    entryPoints: ['./client.js'],
+    bundle: true,
+    write: false,
+    format: 'esm',
+    jsx: 'automatic',
+    loader: { '.js': 'jsx' },
+    banner: {
+      js: `
+        var global = window;
+        (new EventSource('/reload')).onmessage = () => window.location.reload();
+      `
+    }
+  })
+  return (await cache).outputFiles[0].text
+}
+
+watch('./client.js', () => {
+  cache = undefined
+  for (const reload of reloadClients) reload()
+})

example/client.js

@@ -0,0 +1,10 @@
+import { createRoot } from 'react-dom/client'
+
+const App = () => {
+  return <div style={{ display: 'flex', gap: '16px' }}>
+    <span>TODO</span>
+  </div>
+}
+
+const container = document.body.appendChild(document.createElement('div'))
+createRoot(container).render(<App />)

example/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "example",
+  "private": true,
+  "version": "0.1.0",
+  "type": "module",
+  "scripts": {
+    "start": "node --watch server.js"
+  },
+  "dependencies": {
+    "@startupjs/cssx": "^0.1.0",
+    "esbuild": "^0.21.4",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  }
+}

example/server.js

@@ -0,0 +1,10 @@
+import http from 'http'
+import _serveClient from './_serveClient.js'
+
+const server = http.createServer()
+
+server.listen(3000, () => {
+  console.log('Server started. Open http://localhost:3000 in your browser')
+})
+
+_serveClient(server)

lerna.json

@@ -0,0 +1,8 @@
+{
+  "version": "0.1.0",
+  "npmClient": "yarn",
+  "packages": [
+    "packages/*",
+    "example"
+  ]
+}

package.json

@@ -0,0 +1,56 @@
+{
+  "private": true,
+  "engines": {
+    "node": ">=22"
+  },
+  "workspaces": [
+    "packages/*",
+    "example"
+  ],
+  "scripts": {
+    "start": "cd example && npm run start",
+    "test": "cd packages/cssx && npm run test",
+    "release-patch": "auto shipit --use-version $(node -e \"const [major, minor, patch] = require('./lerna.json').version.split('.'); console.log('' + major + '.' + minor + '.' + (parseInt(patch) + 1));\")",
+    "release-minor": "auto shipit --use-version $(node -e \"const [major, minor, patch] = require('./lerna.json').version.split('.'); console.log('' + major + '.' + (parseInt(minor) + 1) + '.' + 0);\")",
+    "docs": "rspress dev --port 3010",
+    "docs-build": "rspress build",
+    "docs-preview": "rspress preview --port 3010"
+  },
+  "devDependencies": {
+    "@auto-it/conventional-commits": "^11.1.6",
+    "@types/react": "~18.2.45",
+    "auto": "^11.1.6",
+    "eslint": "^8.56.0",
+    "eslint-config-startupjs": "^0.56.0-alpha.29",
+    "husky": "^4.3.0",
+    "lerna": "^8.1.3",
+    "lint-staged": "^15.2.2",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "rspress": "^1.25.2",
+    "ts-node": "^10.9.2",
+    "typescript": "^5.1.3"
+  },
+  "auto": {
+    "plugins": [
+      "npm",
+      "conventional-commits"
+    ]
+  },
+  "eslintConfig": {
+    "extends": [
+      "startupjs"
+    ]
+  },
+  "lint-staged": {
+    "*.{js,jsx,ts,tsx,mjs,cjs}": [
+      "eslint --fix"
+    ]
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "! grep -q '\"resolutions\":' ./package.json || (echo '\\033[0;31mError: \"resolutions\" found in package.json. Remove \"resolutions\" to proceed with commit.\\033[0m' && exit 1) && lint-staged"
+    }
+  },
+  "packageManager": "[email protected]+sha256.f3cc0eda8e5560e529c7147565b30faa43b4e472d90e8634d7134a37c7f59781"
+}

packages/cssx/.npmignore

@@ -0,0 +1,3 @@
+CHANGELOG.md
+test/
+test_client/

packages/cssx/README.md

@@ -0,0 +1,22 @@
+# CSSX
+
+> CSS-in-JS with actual CSS syntax
+
+Features:
+
+- Write CSS inside JS files using the actual CSS syntax
+- Supports both Web and React Native
+- Override styles of parts of the component from the outside using [`:part()`](https://developer.mozilla.org/en-US/docs/Web/CSS/::part)
+- Dynamic CSS Variables (`var(--foo-bar)`)
+- Automatic styles caching (prevents unnecessary re-renderings)
+- [Stylus](https://stylus-lang.com) support
+- Theming
+- Customizable style system based on Material Design guidelines (8px grid)
+
+## Installation
+
+For installation and documentation see [cssx.dev](https://cssx.dev)
+
+## License
+
+MIT

packages/cssx/index.js

@@ -0,0 +1 @@
+throw Error('TODO')