SenangStart CSS

English

Bahasa Melayu

English

Bahasa Melayu

Appearance

CLI Build ​

Use the CLI for production-ready builds with optimized output.

Installation ​

bash
# Install globally
npm install -g @bookklik/senangstart-css

# Or use npx (no install)
npx @bookklik/senangstart-css init

Commands ​

senangstart init ​

Create a configuration file:

bash
senangstart init

This creates senangstart.config.js in your project root with sensible defaults.

senangstart build ​

Compile CSS from your source files:

bash
senangstart build

Options:

OptionDescription
--minifyMinify the output CSS
--config <path>Path to config file
-o, --output <path>Override the output CSS file path
--no-preflightExclude Preflight base styles
--ignore-invalidWarn instead of failing on invalid tokens
bash
# Production build with minification
senangstart build --minify

# Use custom config
senangstart build --config ./custom.config.js

# Custom output path
senangstart build -o ./dist/styles.css

Invalid Token Handling ​

By default, the build fails with exit code 1 when invalid tokens are found (e.g. unknown utilities or malformed values). Each invalid token is listed with its attribute type:

bash
$ senangstart build
✖ 1 error(s) found in source:
  • invalid_layout_token (rule_generation): No rule generated
...
✖ Build failed: 1 invalid token(s). Fix the errors above or pass --ignore-invalid.

To keep building despite errors (useful during migration), either pass the flag:

bash
senangstart build --ignore-invalid

or set it in your config:

js
// senangstart.config.js
export default {
  build: {
    ignoreInvalid: true
  }
}

In watch mode (senangstart dev), the process stays alive and logs invalid tokens without exiting.

senangstart dev ​

Watch mode for development:

bash
senangstart dev

This watches your source files and rebuilds automatically on changes.

Output Files ​

The CLI generates three files:

FileDescription
public/senangstart.cssCompiled stylesheet
.cursorrulesAI context file for LLMs
types/senang.d.tsTypeScript definitions

Project Setup ​

1. Initialize ​

bash
cd your-project
npm init -y
npm i @bookklik/senangstart-css
npx senangstart init

2. Add HTML ​

html
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="./public/senangstart.css">
</head>
<body>
  <div
    layout="flex col center"
    space="p:big"
    visual="bg:primary text:white rounded:big"
  >
    Hello SenangStart!
  </div>
</body>
</html>

3. Build ​

bash
npx senangstart build

4. Develop ​

bash
npx senangstart dev

Package.json Scripts ​

Add these scripts to your package.json:

json
{
  "scripts": {
    "build:css": "senangstart build --minify",
    "dev:css": "senangstart dev"
  }
}

Integration with Frameworks ​

Vite / React / Vue ​

Add to your build process:

json
{
  "scripts": {
    "dev": "concurrently \"vite\" \"senangstart dev\"",
    "build": "senangstart build --minify && vite build"
  }
}

Next.js ​

Import the generated CSS in _app.js:

jsx
import '../public/senangstart.css'

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp

CI/CD Integration ​

Add to your build pipeline:

yaml
# GitHub Actions example
- name: Build CSS
  run: npx senangstart build --minify

CDN vs CLI Comparison ​

FeatureCDN JITCLI Build
SetupZero configRequires npm
Build StepNoneRequired
PerformanceRuntime overheadPre-compiled
File Size~333KB JS (60KB gzipped)Only CSS used
Use CasePrototypingProduction
Dynamic Content✅ AutomaticRequires rebuild