Skip to content

Commit 6756cac

Browse files
cray0000cray0000
committed
initial
0 parents  commit 6756cac

26 files changed

+15547
-0
lines changed

‎.github/workflows/docs.yml

+54
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
name: Deploy Rspress site to Pages
2+
3+
on:
4+
push:
5+
branches: [master]
6+
7+
workflow_dispatch:
8+
9+
permissions:
10+
contents: read
11+
pages: write
12+
id-token: write
13+
14+
concurrency:
15+
group: pages
16+
cancel-in-progress: false
17+
18+
jobs:
19+
# Build job
20+
build:
21+
runs-on: ubuntu-latest
22+
steps:
23+
- name: Checkout
24+
uses: actions/checkout@v4
25+
with:
26+
fetch-depth: 0 # Not needed if lastUpdated is not enabled
27+
- name: Setup Node
28+
uses: actions/setup-node@v4
29+
with:
30+
node-version: 22
31+
- name: Setup Pages
32+
uses: actions/configure-pages@v5
33+
- name: Install dependencies
34+
run: corepack enable && yarn
35+
- name: Build with Rspress
36+
run: |
37+
yarn docs-build
38+
- name: Upload artifact
39+
uses: actions/upload-pages-artifact@v3
40+
with:
41+
path: doc_build
42+
43+
# Deployment job
44+
deploy:
45+
environment:
46+
name: github-pages
47+
url: ${{ steps.deployment.outputs.page_url }}
48+
needs: build
49+
runs-on: ubuntu-latest
50+
name: Deploy
51+
steps:
52+
- name: Deploy to GitHub Pages
53+
id: deployment
54+
uses: actions/deploy-pages@v4

‎.gitignore

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
# IDE folders
2+
.idea
3+
.vscode
4+
5+
# Vim swap files
6+
.s[a-z][a-z]
7+
.*.s[a-z][a-z]
8+
9+
# Mac OS X Finder
10+
.DS_Store
11+
12+
# Node dependencies
13+
node_modules
14+
15+
# npm-debug log
16+
npm-debug.*
17+
18+
# yarn
19+
yarn-error.log
20+
.yarn
21+
22+
# GH_TOKEN and NPM_TOKEN in .env for 'auto' releases
23+
.env
24+
25+
# documentation
26+
doc_build

‎.yarnrc.yml

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
nodeLinker: node-modules

‎README.md

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
# CSSX
2+
3+
> CSS-in-JS with actual CSS syntax
4+
5+
Features:
6+
7+
- Write CSS inside JS files using the actual CSS syntax
8+
- Supports both Web and React Native
9+
- Override styles of parts of the component from the outside using [`:part()`](https://developer.mozilla.org/en-US/docs/Web/CSS/::part)
10+
- Dynamic CSS Variables (`var(--foo-bar)`)
11+
- Automatic styles caching (prevents unnecessary re-renderings)
12+
- [Stylus](https://stylus-lang.com) support
13+
- Theming
14+
- Customizable style system based on Material Design guidelines (8px grid)
15+
16+
## Installation
17+
18+
For installation and documentation see [cssx.dev](https://cssx.dev)
19+
20+
## License
21+
22+
MIT

‎docs/api/cssx.md

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# cssx() Function
2+
3+
TODO

‎docs/examples/index.md

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# Simple example
2+
3+
TODO

‎docs/guide/index.md

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# Introduction
2+
3+
TODO

‎docs/guide/installation.mdx

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
# Installation
2+
3+
import { PackageManagerTabs } from '@theme'
4+
5+
<PackageManagerTabs command="install @startupjs/cssx" />
6+
7+
TODO

‎docs/guide/react-integration.md

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# React Integration
2+
3+
TODO

‎docs/guide/usage.md

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# Usage
2+
3+
TODO

‎docs/index.md

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
---
2+
pageType: home
3+
4+
hero:
5+
name: CSSX
6+
text: CSS-in-JS with actual CSS
7+
tagline: Write CSS using... CSS!
8+
actions:
9+
- theme: brand
10+
text: Introduction
11+
link: /guide/index
12+
- theme: alt
13+
text: Quick Start
14+
link: /guide/installation
15+
16+
features:
17+
- title: True CSS Syntax
18+
details: Write CSS directly inside JS files using familiar CSS syntax
19+
icon: 🎨
20+
- title: React Native + Web
21+
details: Compatible with both Web and React Native for unified styling
22+
icon: 🌍
23+
- title: Scoped Styling
24+
details: Use `:part()` to override styles in isolated component parts
25+
icon: 🧩
26+
- title: Dynamic Variables
27+
details: Integrate dynamic CSS variables like `var(--foo-bar)` for adaptable designs
28+
icon: ⚙️
29+
- title: Efficient Caching
30+
details: Automatic style caching to avoid unnecessary re-rendering and enhance performance
31+
icon: 🚀
32+
- title: Stylus Integration
33+
details: Supports Stylus for streamlined and versatile CSS pre-processing
34+
icon: 🖌️
35+
- title: Theming
36+
details: Built-in theming capabilities for consistent look and feel
37+
icon: 🎨
38+
- title: Customizable Design System
39+
details: Adheres to Material Design guidelines with an 8px grid for precise layout control
40+
icon: 🧱
41+
---

‎example/.gitignore

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
# IDE folders
2+
.idea
3+
.vscode
4+
5+
# Vim swap files
6+
.s[a-z][a-z]
7+
.*.s[a-z][a-z]
8+
9+
# Mac OS X Finder
10+
.DS_Store
11+
12+
# Node dependencies
13+
node_modules
14+
15+
# npm-debug log
16+
npm-debug.*
17+
18+
# yarn
19+
yarn-error.log
20+
.yarn

‎example/README.md

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
# cssx app example
2+
3+
## Installation
4+
5+
1. Copy the `example` folder somewhere and go into it.
6+
2. Run it:
7+
8+
```
9+
npm i && npm start
10+
```
11+
12+
3. Open [localhost:3000](http://localhost:3000) in a browser.
13+
14+
## License
15+
16+
MIT

‎example/_serveClient.js

+48
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
// simple bundler for client.js with live reload
2+
import esbuild from 'esbuild'
3+
import { watch } from 'fs'
4+
5+
let cache
6+
const reloadClients = new Set()
7+
8+
export default function serveClient (server) {
9+
server.on('request', async (req, res) => {
10+
if (req.url === '/client.js') {
11+
res.setHeader('Content-Type', 'application/javascript')
12+
res.end(await bundleClientJs())
13+
} else if (req.url === '/reload') {
14+
res.setHeader('Content-Type', 'text/event-stream')
15+
res.setHeader('Cache-Control', 'no-cache')
16+
res.setHeader('Connection', 'keep-alive')
17+
const reload = () => res.write('data: \n\n')
18+
reloadClients.add(reload)
19+
req.on('close', () => reloadClients.delete(reload))
20+
} else {
21+
res.setHeader('Content-Type', 'text/html')
22+
res.end('<script type="module" src="/client.js"></script>')
23+
}
24+
})
25+
}
26+
27+
async function bundleClientJs () {
28+
cache ??= esbuild.build({
29+
entryPoints: ['./client.js'],
30+
bundle: true,
31+
write: false,
32+
format: 'esm',
33+
jsx: 'automatic',
34+
loader: { '.js': 'jsx' },
35+
banner: {
36+
js: `
37+
var global = window;
38+
(new EventSource('/reload')).onmessage = () => window.location.reload();
39+
`
40+
}
41+
})
42+
return (await cache).outputFiles[0].text
43+
}
44+
45+
watch('./client.js', () => {
46+
cache = undefined
47+
for (const reload of reloadClients) reload()
48+
})

‎example/client.js

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { createRoot } from 'react-dom/client'
2+
3+
const App = () => {
4+
return <div style={{ display: 'flex', gap: '16px' }}>
5+
<span>TODO</span>
6+
</div>
7+
}
8+
9+
const container = document.body.appendChild(document.createElement('div'))
10+
createRoot(container).render(<App />)

‎example/package.json

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{
2+
"name": "example",
3+
"private": true,
4+
"version": "0.1.0",
5+
"type": "module",
6+
"scripts": {
7+
"start": "node --watch server.js"
8+
},
9+
"dependencies": {
10+
"@startupjs/cssx": "^0.1.0",
11+
"esbuild": "^0.21.4",
12+
"react": "^18.3.1",
13+
"react-dom": "^18.3.1"
14+
}
15+
}

‎example/server.js

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import http from 'http'
2+
import _serveClient from './_serveClient.js'
3+
4+
const server = http.createServer()
5+
6+
server.listen(3000, () => {
7+
console.log('Server started. Open http://localhost:3000 in your browser')
8+
})
9+
10+
_serveClient(server)

‎lerna.json

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"version": "0.1.0",
3+
"npmClient": "yarn",
4+
"packages": [
5+
"packages/*",
6+
"example"
7+
]
8+
}

‎package.json

+56
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
{
2+
"private": true,
3+
"engines": {
4+
"node": ">=22"
5+
},
6+
"workspaces": [
7+
"packages/*",
8+
"example"
9+
],
10+
"scripts": {
11+
"start": "cd example && npm run start",
12+
"test": "cd packages/cssx && npm run test",
13+
"release-patch": "auto shipit --use-version $(node -e \"const [major, minor, patch] = require('./lerna.json').version.split('.'); console.log('' + major + '.' + minor + '.' + (parseInt(patch) + 1));\")",
14+
"release-minor": "auto shipit --use-version $(node -e \"const [major, minor, patch] = require('./lerna.json').version.split('.'); console.log('' + major + '.' + (parseInt(minor) + 1) + '.' + 0);\")",
15+
"docs": "rspress dev --port 3010",
16+
"docs-build": "rspress build",
17+
"docs-preview": "rspress preview --port 3010"
18+
},
19+
"devDependencies": {
20+
"@auto-it/conventional-commits": "^11.1.6",
21+
"@types/react": "~18.2.45",
22+
"auto": "^11.1.6",
23+
"eslint": "^8.56.0",
24+
"eslint-config-startupjs": "^0.56.0-alpha.29",
25+
"husky": "^4.3.0",
26+
"lerna": "^8.1.3",
27+
"lint-staged": "^15.2.2",
28+
"react": "^18.0.0",
29+
"react-dom": "^18.0.0",
30+
"rspress": "^1.25.2",
31+
"ts-node": "^10.9.2",
32+
"typescript": "^5.1.3"
33+
},
34+
"auto": {
35+
"plugins": [
36+
"npm",
37+
"conventional-commits"
38+
]
39+
},
40+
"eslintConfig": {
41+
"extends": [
42+
"startupjs"
43+
]
44+
},
45+
"lint-staged": {
46+
"*.{js,jsx,ts,tsx,mjs,cjs}": [
47+
"eslint --fix"
48+
]
49+
},
50+
"husky": {
51+
"hooks": {
52+
"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"
53+
}
54+
},
55+
"packageManager": "[email protected]+sha256.f3cc0eda8e5560e529c7147565b30faa43b4e472d90e8634d7134a37c7f59781"
56+
}

‎packages/cssx/.npmignore

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
CHANGELOG.md
2+
test/
3+
test_client/

‎packages/cssx/README.md

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
# CSSX
2+
3+
> CSS-in-JS with actual CSS syntax
4+
5+
Features:
6+
7+
- Write CSS inside JS files using the actual CSS syntax
8+
- Supports both Web and React Native
9+
- Override styles of parts of the component from the outside using [`:part()`](https://developer.mozilla.org/en-US/docs/Web/CSS/::part)
10+
- Dynamic CSS Variables (`var(--foo-bar)`)
11+
- Automatic styles caching (prevents unnecessary re-renderings)
12+
- [Stylus](https://stylus-lang.com) support
13+
- Theming
14+
- Customizable style system based on Material Design guidelines (8px grid)
15+
16+
## Installation
17+
18+
For installation and documentation see [cssx.dev](https://cssx.dev)
19+
20+
## License
21+
22+
MIT

‎packages/cssx/index.js

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
throw Error('TODO')

0 commit comments

Comments
 (0)