@bhooai/nexus-postcss 0.1.3

package/README.md

@@ -0,0 +1,62 @@
+# @bhooai/nexus-postcss
+
+Opinionated PostCSS preset for BhooAI Nexus apps — Tailwind, nesting, future CSS, autoprefixing, and minification in one curated pipeline.
+
+## Install
+
+Already included when you scaffold a project with `nexus init`. To add manually:
+
+```bash
+npm install @bhooai/nexus-postcss
+```
+
+## Usage
+
+### `postcss.config.js` (default)
+
+```js
+import { createPreset } from '@bhooai/nexus-postcss';
+export default createPreset();
+```
+
+### With options
+
+```js
+import { createPreset } from '@bhooai/nexus-postcss';
+export default createPreset({
+  extraContent: ['../../packages/nexus-admin/src/**/*.{ts,tsx}'],
+  minify: true,
+});
+```
+
+## Plugin chain (in order)
+
+1. **postcss-import** — resolve `@import` statements
+2. **tailwindcss/nesting** (postcss-nested) — native CSS nesting before `@apply`
+3. **tailwindcss** — base/components/utilities + content scanning
+4. **postcss-preset-env** (stage 2) — future CSS features today
+5. **autoprefixer** — vendor prefixes
+6. **cssnano** — minification (only when `NODE_ENV=production` or `minify: true`)
+
+## Options
+
+| Option | Type | Default | Description |
+| --- | --- | --- | --- |
+| `content` | `string[]` | `['./index.html', './src/**/*.{ts,tsx}']` | Tailwind content scan paths |
+| `extraContent` | `string[]` | `[]` | Additional content paths to merge |
+| `theme` | `object` | `{}` | Tailwind theme extensions |
+| `tailwindPlugins` | `array` | `[]` | Tailwind plugins |
+| `import` | `boolean` | `true` | Enable postcss-import |
+| `nested` | `boolean` | `true` | Enable postcss-nested |
+| `presetEnv` | `boolean \| 'stage2' \| 'stage3' \| 'stage4'` | `true` (stage2) | Enable postcss-preset-env |
+| `autoprefixer` | `boolean \| object` | `true` | Enable autoprefixer (or pass options) |
+| `minify` | `boolean` | `NODE_ENV === 'production'` | Enable cssnano |
+| `plugins` | `Array<[string, any] \| string>` | `[]` | Custom PostCSS plugins to append |
+
+## Tailwind config
+
+`tailwind.config.js` is kept in each app — the preset only injects `content` paths and the plugin chain. Theme extensions and Tailwind plugins stay in your `tailwind.config.js`.
+
+## License
+
+MIT

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@bhooai/nexus-postcss",
+  "version": "0.1.3",
+  "description": "Opinionated PostCSS preset for BhooAI Nexus apps — Tailwind, nesting, future CSS, autoprefixing, and minification in one curated pipeline.",
+  "type": "module",
+  "main": "./src/index.js",
+  "types": "./src/index.js",
+  "exports": {
+    ".": "./src/index.js",
+    "./theme.css": "./src/theme.css",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "src"
+  ],
+  "scripts": {
+    "build": "tsc -p tsconfig.json",
+    "test": "vitest run"
+  },
+  "dependencies": {
+    "autoprefixer": "^10.4.20",
+    "cssnano": "^7.0.6",
+    "postcss": "^8.4.47",
+    "postcss-import": "^16.1.0",
+    "postcss-nested": "^6.2.0",
+    "postcss-preset-env": "^9.6.0",
+    "tailwindcss": "^3.4.13"
+  },
+  "devDependencies": {
+    "@types/node": "^22.5.0",
+    "typescript": "^5.6.2",
+    "vitest": "^2.1.1"
+  }
+}

package/src/index.js

@@ -0,0 +1 @@
+export { createPreset } from './plugins.js';

package/src/plugins.js

@@ -0,0 +1,46 @@
+import postcssImport from 'postcss-import';
+import postcssNested from 'postcss-nested';
+import tailwindcss from 'tailwindcss';
+import postcssPresetEnv from 'postcss-preset-env';
+import autoprefixer from 'autoprefixer';
+import cssnano from 'cssnano';
+
+export function createPreset(options = {}) {
+  const DEFAULT_CONTENT = ['./index.html', './src/**/*.{ts,tsx}'];
+  const PRESET_ENV_STAGES = ['stage2', 'stage3', 'stage4'];
+  const env = process.env.NODE_ENV ?? 'development';
+  const shouldMinify = options.minify ?? env === 'production';
+  const presetEnvStage = PRESET_ENV_STAGES.includes(options.presetEnv)
+    ? options.presetEnv
+    : 'stage2';
+  const enablePresetEnv = options.presetEnv !== false;
+  const enableImport = options.import ?? true;
+  const enableNested = options.nested ?? true;
+  const enableAutoprefixer = options.autoprefixer !== false;
+
+  const content = [...(options.content ?? DEFAULT_CONTENT), ...(options.extraContent ?? [])];
+  const tailwindOpts = {
+    content,
+    theme: options.theme ?? {},
+    plugins: options.tailwindPlugins ?? [],
+  };
+
+  const plugins = [];
+  if (enableImport) plugins.push(postcssImport({}));
+  if (enableNested) plugins.push(postcssNested({}));
+  plugins.push(tailwindcss(tailwindOpts));
+  if (enablePresetEnv) plugins.push(postcssPresetEnv({ stage: presetEnvStage }));
+  if (enableAutoprefixer) {
+    const apOpts = typeof options.autoprefixer === 'object' ? options.autoprefixer : {};
+    plugins.push(autoprefixer(apOpts));
+  }
+  if (shouldMinify) plugins.push(cssnano({ preset: 'default' }));
+  if (options.plugins) {
+    for (const p of options.plugins) {
+      if (typeof p === 'string') plugins.push(p);
+      else plugins.push(p[0](p[1] ?? {}));
+    }
+  }
+
+  return { plugins };
+}

package/src/theme.css

@@ -0,0 +1,64 @@
+/**
+ * @bhooai/nexus-postcss — theme.css
+ *
+ * Framework-wide design tokens for Nexus apps. Opt in with:
+ *   @import '@bhooai/nexus-postcss/theme.css';
+ *
+ * All tokens are CSS custom properties on :root so they cascade
+ * naturally and can be overridden per-app or per-component.
+ * Values target the default dark surface; override any token in
+ * your own :root block to retheme.
+ */
+
+:root {
+  /* ---- base surface ---- */
+  --nexus-bg: #050817;
+  --nexus-bg-alt: #0b0d1a;
+  --nexus-ink: #eef6ff;
+  --nexus-muted: #8496ad;
+  --nexus-surface: rgba(10, 24, 45, 0.78);
+  --nexus-surface-strong: rgba(8, 25, 48, 0.68);
+  --nexus-border: rgba(125, 174, 235, 0.2);
+  --nexus-border-bright: rgba(112, 168, 228, 0.17);
+
+  /* ---- accent palette ---- */
+  --nexus-accent: #67e8f9;
+  --nexus-accent-soft: rgba(103, 232, 249, 0.08);
+  --nexus-blue: rgba(38, 130, 225, 0.55);
+  --nexus-violet: rgba(90, 67, 183, 0.45);
+  --nexus-pink: #f43f5e;
+  --nexus-emerald: #34d399;
+
+  /* ---- geometry ---- */
+  --nexus-radius: 0.7rem;
+  --nexus-radius-lg: 1rem;
+  --nexus-shell-width: 1280px;
+
+  /* ---- ambient mesh ---- */
+  --nexus-mesh:
+    radial-gradient(54rem 42rem at 84% -12%, rgba(91, 33, 182, 0.32), transparent 67%),
+    radial-gradient(48rem 38rem at -8% 58%, rgba(8, 145, 178, 0.2), transparent 68%),
+    radial-gradient(42rem 36rem at 56% 44%, rgba(30, 64, 175, 0.16), transparent 72%);
+  --nexus-mesh-opacity: 0.27;
+
+  /* ---- selection + scrollbars ---- */
+  --nexus-selection: rgba(129, 140, 248, 0.35);
+  --nexus-scrollbar: rgba(255, 255, 255, 0.18);
+  --nexus-scrollbar-thumb: rgba(255, 255, 255, 0.14);
+
+  /* ---- aliases for existing admin consumers ---- */
+  --admin-bg: var(--nexus-bg);
+  --admin-ink: var(--nexus-ink);
+  --admin-muted: var(--nexus-muted);
+  --admin-surface: var(--nexus-surface);
+  --admin-surface-strong: var(--nexus-surface-strong);
+  --admin-border: var(--nexus-border);
+  --admin-border-bright: var(--nexus-border-bright);
+  --admin-blue: var(--nexus-blue);
+  --admin-violet: var(--nexus-violet);
+  --admin-pink: var(--nexus-pink);
+  --admin-radius: var(--nexus-radius);
+  --admin-shell-width: var(--nexus-shell-width);
+  --admin-mesh: var(--nexus-mesh);
+  --admin-mesh-opacity: var(--nexus-mesh-opacity);
+}

package/src/types.ts

@@ -0,0 +1,12 @@
+export interface NexusPostcssOptions {
+  content?: string[];
+  extraContent?: string[];
+  theme?: Record<string, any>;
+  tailwindPlugins?: any[];
+  import?: boolean;
+  nested?: boolean;
+  presetEnv?: boolean | 'stage2' | 'stage3' | 'stage4';
+  autoprefixer?: boolean | Record<string, string>;
+  minify?: boolean;
+  plugins?: Array<[string, any] | string>;
+}