styleframe 1.0.0 → 1.0.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Alex Grozav
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,171 @@
+<div align="center">
+  <img src="https://www.styleframe.dev/_vercel/image?url=%2Flogotype-light.svg&w=1536&q=100" alt="Styleframe" width="320" height="120">
+
+**Type-safe, Composable CSS in TypeScript**
+
+Write type-safe, composable, future-proof Design Systems code using styleframe's powerful TypeScript CSS API.
+
+[![npm version](https://img.shields.io/npm/v/styleframe.svg)](https://www.npmjs.com/package/styleframe)
+[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://github.com/styleframe-dev/styleframe/blob/main/LICENSE)
+[![Discord](https://img.shields.io/discord/1395724958919032943?label=Discord&logo=discord)](https://discord.gg/KCVwuGz44M)
+
+[Homepage](https://styleframe.dev) · [Documentation](https://styleframe.dev/docs)
+
+</div>
+
+---
+
+# styleframe
+
+## ✨ Features
+
+- **🛡️ Type-safe CSS API** - Catch style bugs at compile time with full TypeScript support
+- **🧩 Composable & Modular** - Build design systems from reusable, composable functions
+- **🎨 Built-in Theming** - Create light/dark modes and custom themes effortlessly
+- **⚡ Framework Agnostic** - Works with React, Vue, Svelte, Solid, Astro, and more
+- **🔥 First-class DX** - IDE auto-complete, in-editor docs, and static analysis
+
+## 🚀 Quick Start
+
+### Installation
+
+```bash
+# npm
+npm install styleframe
+
+# pnpm
+pnpm add styleframe
+
+# yarn
+yarn add styleframe
+
+# bun
+bun add styleframe
+```
+
+### Initialization
+
+```bash
+# npm
+npx styleframe init
+
+# pnpm
+pnpx styleframe init
+
+# yarn
+yarn styleframe init
+
+# bun
+bunx styleframe init
+```
+
+Using the CLI command above, it will:
+
+- Install `styleframe` as a development dependency to your project
+- Add the `styleframe` plugin to Vite, if possible
+- Create a new `styleframe.config.ts` file
+
+## 💡 Usage
+
+```typescript
+import { styleframe } from "styleframe";
+
+const s = styleframe();
+const { variable, ref, selector, theme } = s;
+
+// Define design tokens
+const colorPrimary = variable("color--primary", "#006cff");
+const spacing = variable("spacing--md", "1rem");
+
+// Create styles
+selector(".button", {
+    backgroundColor: ref(colorPrimary),
+    padding: ref(spacing),
+    borderRadius: "4px",
+    color: "white",
+
+    "&:hover": {
+        opacity: 0.9,
+    },
+});
+
+// Add dark theme
+theme("dark", (ctx) => {
+    ctx.variable(colorPrimary, "#60a5fa");
+});
+
+export default s;
+```
+
+## 📚 Documentation
+
+Styleframe is extremely powerful and flexible. The code preview above is just a small example of what you can achieve with styleframe.
+
+Read the full documentation at [https://styleframe.dev](https://styleframe.dev).
+
+## 🎯 Why styleframe?
+
+After over 10 years of working on Design Systems for successful companies, we've learned a lot about what makes a great Design System. Styleframe is built on these learnings and is designed to help you easily build your own.
+
+[Read more](https://styleframe.dev/docs) about styleframe's philosophy and design principles.
+
+## 🔗 Framework Integration
+
+Styleframe works seamlessly with any framework:
+
+- **Vite** - Native plugin support
+- **React** - Perfect for component libraries
+- **Vue** - Full SFC compatibility
+- **Svelte** - Works out of the box
+- **Astro** - Static site ready
+- **Solid** - Reactive styling
+
+See the [installation guide](https://styleframe.dev/docs/getting-started/installation/vite) for framework-specific setup.
+
+## 📖 Documentation
+
+- **[Getting Started](https://styleframe.dev/docs/getting-started/introduction)** - Learn the basics
+- **[API Reference](https://styleframe.dev/docs/api/variables)** - Complete API documentation
+- **[Guides](https://styleframe.dev/docs/resources/guides)** - Step-by-step tutorials
+- **[Examples](https://github.com/styleframe-dev/examples)** - Real-world examples
+
+## 🤝 Community
+
+- **[Discord](https://discord.gg/KCVwuGz44M)** - Chat with the community
+- **[GitHub Issues](https://github.com/styleframe-dev/styleframe/issues)** - Report bugs or request features
+- **[Discussions](https://github.com/styleframe-dev/styleframe/discussions)** - Ask questions and share ideas
+
+## 🛠️ Development
+
+```bash
+# Clone the repository
+git clone https://github.com/styleframe-dev/styleframe.git
+
+# Install dependencies
+pnpm install
+
+# Run tests
+pnpm test
+
+# Build
+pnpm build
+```
+
+## 📝 License
+
+Styleframe is [MIT licensed](https://github.com/styleframe-dev/styleframe/blob/main/LICENSE).
+
+## 💎 Styleframe Pro
+
+Looking for advanced features? Check out [Styleframe Pro](https://styleframe.dev/pricing) for:
+
+- Premium composables and design tokens
+- Advanced theming capabilities
+- Priority support
+- Commercial licenses
+
+---
+
+<div align="center">
+  <sub>Built with ❤️ by <a href="https://github.com/styleframe-dev">Styleframe</a></sub>
+</div>

package/dist/plugin/astro.cjs

@@ -0,0 +1,8 @@
+const require_chunk = require('./chunk-CUT6urMc.cjs');
+const __styleframe_plugin_astro = require_chunk.__toESM(require("@styleframe/plugin/astro"));
+
+//#region src/plugin/astro.ts
+var astro_default = __styleframe_plugin_astro.default;
+
+//#endregion
+module.exports = astro_default;

package/dist/plugin/astro.d.cts

@@ -0,0 +1,2 @@
+import plugin from "@styleframe/plugin/astro";
+export { plugin as default };

package/dist/plugin/astro.d.ts

@@ -0,0 +1,2 @@
+import plugin from "@styleframe/plugin/astro";
+export { plugin as default };

package/dist/plugin/astro.js

@@ -0,0 +1,8 @@
+import plugin from "@styleframe/plugin/astro";
+
+//#region src/plugin/astro.ts
+var astro_default = plugin;
+
+//#endregion
+export { astro_default as default };
+//# sourceMappingURL=astro.js.map

package/dist/plugin/astro.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"astro.js","names":[],"sources":["../../src/plugin/astro.ts"],"sourcesContent":["import plugin from \"@styleframe/plugin/astro\";\n\nexport default plugin;\n"],"mappings":";;;AAEA,oBAAe"}

package/dist/plugin/chunk-CUT6urMc.cjs

@@ -0,0 +1,30 @@
+//#region rolldown:runtime
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
+		key = keys[i];
+		if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: ((k) => from[k]).bind(null, key),
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
+
+//#endregion
+
+Object.defineProperty(exports, '__toESM', {
+  enumerable: true,
+  get: function () {
+    return __toESM;
+  }
+});

package/dist/plugin/esbuild.cjs

@@ -0,0 +1,8 @@
+const require_chunk = require('./chunk-CUT6urMc.cjs');
+const __styleframe_plugin_esbuild = require_chunk.__toESM(require("@styleframe/plugin/esbuild"));
+
+//#region src/plugin/esbuild.ts
+var esbuild_default = __styleframe_plugin_esbuild.default;
+
+//#endregion
+module.exports = esbuild_default;

package/dist/plugin/esbuild.d.cts

@@ -0,0 +1,2 @@
+import plugin from "@styleframe/plugin/esbuild";
+export { plugin as default };

package/dist/plugin/esbuild.d.ts

@@ -0,0 +1,2 @@
+import plugin from "@styleframe/plugin/esbuild";
+export { plugin as default };

package/dist/plugin/esbuild.js

@@ -0,0 +1,8 @@
+import plugin from "@styleframe/plugin/esbuild";
+
+//#region src/plugin/esbuild.ts
+var esbuild_default = plugin;
+
+//#endregion
+export { esbuild_default as default };
+//# sourceMappingURL=esbuild.js.map

package/dist/plugin/esbuild.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"esbuild.js","names":[],"sources":["../../src/plugin/esbuild.ts"],"sourcesContent":["import plugin from \"@styleframe/plugin/esbuild\";\n\nexport default plugin;\n"],"mappings":";;;AAEA,sBAAe"}

package/dist/plugin/farm.cjs

@@ -0,0 +1,8 @@
+const require_chunk = require('./chunk-CUT6urMc.cjs');
+const __styleframe_plugin_farm = require_chunk.__toESM(require("@styleframe/plugin/farm"));
+
+//#region src/plugin/farm.ts
+var farm_default = __styleframe_plugin_farm.default;
+
+//#endregion
+module.exports = farm_default;

package/dist/plugin/farm.d.cts

@@ -0,0 +1,2 @@
+import plugin from "@styleframe/plugin/farm";
+export { plugin as default };

package/dist/plugin/farm.d.ts

@@ -0,0 +1,2 @@
+import plugin from "@styleframe/plugin/farm";
+export { plugin as default };

package/dist/plugin/farm.js

@@ -0,0 +1,8 @@
+import plugin from "@styleframe/plugin/farm";
+
+//#region src/plugin/farm.ts
+var farm_default = plugin;
+
+//#endregion
+export { farm_default as default };
+//# sourceMappingURL=farm.js.map

package/dist/plugin/farm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"farm.js","names":[],"sources":["../../src/plugin/farm.ts"],"sourcesContent":["import plugin from \"@styleframe/plugin/farm\";\n\nexport default plugin;\n"],"mappings":";;;AAEA,mBAAe"}

package/dist/plugin/nuxt.cjs

@@ -0,0 +1,8 @@
+const require_chunk = require('./chunk-CUT6urMc.cjs');
+const __styleframe_plugin_nuxt = require_chunk.__toESM(require("@styleframe/plugin/nuxt"));
+
+//#region src/plugin/nuxt.ts
+var nuxt_default = __styleframe_plugin_nuxt.default;
+
+//#endregion
+module.exports = nuxt_default;

package/dist/plugin/nuxt.d.cts

@@ -0,0 +1,2 @@
+import plugin from "@styleframe/plugin/nuxt";
+export { plugin as default };

package/dist/plugin/nuxt.d.ts

@@ -0,0 +1,2 @@
+import plugin from "@styleframe/plugin/nuxt";
+export { plugin as default };

package/dist/plugin/nuxt.js

@@ -0,0 +1,8 @@
+import plugin from "@styleframe/plugin/nuxt";
+
+//#region src/plugin/nuxt.ts
+var nuxt_default = plugin;
+
+//#endregion
+export { nuxt_default as default };
+//# sourceMappingURL=nuxt.js.map

package/dist/plugin/nuxt.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nuxt.js","names":[],"sources":["../../src/plugin/nuxt.ts"],"sourcesContent":["import plugin from \"@styleframe/plugin/nuxt\";\n\nexport default plugin;\n"],"mappings":";;;AAEA,mBAAe"}

package/dist/plugin/rollup.cjs

@@ -0,0 +1,8 @@
+const require_chunk = require('./chunk-CUT6urMc.cjs');
+const __styleframe_plugin_rollup = require_chunk.__toESM(require("@styleframe/plugin/rollup"));
+
+//#region src/plugin/rollup.ts
+var rollup_default = __styleframe_plugin_rollup.default;
+
+//#endregion
+module.exports = rollup_default;

package/dist/plugin/rollup.d.cts

@@ -0,0 +1,2 @@
+import plugin from "@styleframe/plugin/rollup";
+export { plugin as default };

package/dist/plugin/rollup.d.ts

@@ -0,0 +1,2 @@
+import plugin from "@styleframe/plugin/rollup";
+export { plugin as default };

package/dist/plugin/rollup.js

@@ -0,0 +1,8 @@
+import plugin from "@styleframe/plugin/rollup";
+
+//#region src/plugin/rollup.ts
+var rollup_default = plugin;
+
+//#endregion
+export { rollup_default as default };
+//# sourceMappingURL=rollup.js.map

package/dist/plugin/rollup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rollup.js","names":[],"sources":["../../src/plugin/rollup.ts"],"sourcesContent":["import plugin from \"@styleframe/plugin/rollup\";\n\nexport default plugin;\n"],"mappings":";;;AAEA,qBAAe"}

package/dist/plugin/rspack.cjs

@@ -0,0 +1,8 @@
+const require_chunk = require('./chunk-CUT6urMc.cjs');
+const __styleframe_plugin_rspack = require_chunk.__toESM(require("@styleframe/plugin/rspack"));
+
+//#region src/plugin/rspack.ts
+var rspack_default = __styleframe_plugin_rspack.default;
+
+//#endregion
+module.exports = rspack_default;

package/dist/plugin/rspack.d.cts

@@ -0,0 +1,2 @@
+import plugin from "@styleframe/plugin/rspack";
+export { plugin as default };

package/dist/plugin/rspack.d.ts

@@ -0,0 +1,2 @@
+import plugin from "@styleframe/plugin/rspack";
+export { plugin as default };

package/dist/plugin/rspack.js

@@ -0,0 +1,8 @@
+import plugin from "@styleframe/plugin/rspack";
+
+//#region src/plugin/rspack.ts
+var rspack_default = plugin;
+
+//#endregion
+export { rspack_default as default };
+//# sourceMappingURL=rspack.js.map

package/dist/plugin/rspack.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rspack.js","names":[],"sources":["../../src/plugin/rspack.ts"],"sourcesContent":["import plugin from \"@styleframe/plugin/rspack\";\n\nexport default plugin;\n"],"mappings":";;;AAEA,qBAAe"}

package/dist/plugin/vite.cjs

@@ -0,0 +1,8 @@
+const require_chunk = require('./chunk-CUT6urMc.cjs');
+const __styleframe_plugin_vite = require_chunk.__toESM(require("@styleframe/plugin/vite"));
+
+//#region src/plugin/vite.ts
+var vite_default = __styleframe_plugin_vite.default;
+
+//#endregion
+module.exports = vite_default;

package/dist/plugin/vite.d.cts

@@ -0,0 +1,2 @@
+import plugin from "@styleframe/plugin/vite";
+export { plugin as default };

package/dist/plugin/vite.d.ts

@@ -0,0 +1,2 @@
+import plugin from "@styleframe/plugin/vite";
+export { plugin as default };

package/dist/plugin/vite.js

@@ -0,0 +1,8 @@
+import plugin from "@styleframe/plugin/vite";
+
+//#region src/plugin/vite.ts
+var vite_default = plugin;
+
+//#endregion
+export { vite_default as default };
+//# sourceMappingURL=vite.js.map

package/dist/plugin/vite.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vite.js","names":[],"sources":["../../src/plugin/vite.ts"],"sourcesContent":["import plugin from \"@styleframe/plugin/vite\";\n\nexport default plugin;\n"],"mappings":";;;AAEA,mBAAe"}

package/dist/plugin/webpack.cjs

@@ -0,0 +1,8 @@
+const require_chunk = require('./chunk-CUT6urMc.cjs');
+const __styleframe_plugin_webpack = require_chunk.__toESM(require("@styleframe/plugin/webpack"));
+
+//#region src/plugin/webpack.ts
+var webpack_default = __styleframe_plugin_webpack.default;
+
+//#endregion
+module.exports = webpack_default;

package/dist/plugin/webpack.d.cts

@@ -0,0 +1,2 @@
+import plugin from "@styleframe/plugin/webpack";
+export { plugin as default };

package/dist/plugin/webpack.d.ts

@@ -0,0 +1,2 @@
+import plugin from "@styleframe/plugin/webpack";
+export { plugin as default };

package/dist/plugin/webpack.js

@@ -0,0 +1,8 @@
+import plugin from "@styleframe/plugin/webpack";
+
+//#region src/plugin/webpack.ts
+var webpack_default = plugin;
+
+//#endregion
+export { webpack_default as default };
+//# sourceMappingURL=webpack.js.map

package/dist/plugin/webpack.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"webpack.js","names":[],"sources":["../../src/plugin/webpack.ts"],"sourcesContent":["import plugin from \"@styleframe/plugin/webpack\";\n\nexport default plugin;\n"],"mappings":";;;AAEA,sBAAe"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "styleframe",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "bin": {
     "styleframe": "./dist/cli.cjs"
   },
@@ -8,8 +8,10 @@
   "type": "module",
   "license": "MIT",
   "files": [
+    "README.md",
     "dist"
   ],
+  "sideEffects": false,
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -34,24 +36,66 @@
       "import": "./dist/transpiler.js",
       "require": "./dist/transpiler.cjs"
     },
+    "./plugin/astro": {
+      "types": "./dist/plugin/astro.d.ts",
+      "import": "./dist/plugin/astro.js",
+      "require": "./dist/plugin/astro.cjs"
+    },
+    "./plugin/esbuild": {
+      "types": "./dist/plugin/esbuild.d.ts",
+      "import": "./dist/plugin/esbuild.js",
+      "require": "./dist/plugin/esbuild.cjs"
+    },
+    "./plugin/farm": {
+      "types": "./dist/plugin/farm.d.ts",
+      "import": "./dist/plugin/farm.js",
+      "require": "./dist/plugin/farm.cjs"
+    },
+    "./plugin/nuxt": {
+      "types": "./dist/plugin/nuxt.d.ts",
+      "import": "./dist/plugin/nuxt.js",
+      "require": "./dist/plugin/nuxt.cjs"
+    },
+    "./plugin/rollup": {
+      "types": "./dist/plugin/rollup.d.ts",
+      "import": "./dist/plugin/rollup.js",
+      "require": "./dist/plugin/rollup.cjs"
+    },
+    "./plugin/rspack": {
+      "types": "./dist/plugin/rspack.d.ts",
+      "import": "./dist/plugin/rspack.js",
+      "require": "./dist/plugin/rspack.cjs"
+    },
+    "./plugin/vite": {
+      "types": "./dist/plugin/vite.d.ts",
+      "import": "./dist/plugin/vite.js",
+      "require": "./dist/plugin/vite.cjs"
+    },
+    "./plugin/webpack": {
+      "types": "./dist/plugin/webpack.d.ts",
+      "import": "./dist/plugin/webpack.js",
+      "require": "./dist/plugin/webpack.cjs"
+    },
     "./package.json": "./package.json"
   },
   "publishConfig": {
     "access": "public"
   },
   "dependencies": {
-    "@styleframe/cli": "^1.0.0",
-    "@styleframe/core": "^1.0.0",
-    "@styleframe/transpiler": "^1.0.0",
-    "@styleframe/loader": "^1.0.0"
+    "@styleframe/cli": "^1.0.2",
+    "@styleframe/plugin": "^1.0.0",
+    "@styleframe/core": "^1.0.1",
+    "@styleframe/loader": "^1.0.2",
+    "@styleframe/transpiler": "^1.0.2"
   },
   "devDependencies": {
     "@types/node": "^22.15.17",
+    "@vitest/coverage-v8": "^3.2.4",
     "bumpp": "^10.1.0",
     "tsdown": "^0.11.9",
     "typescript": "^5.8.3",
     "vitest": "^3.1.3",
-    "@styleframe/config-typescript": "^1.0.0"
+    "@styleframe/config-typescript": "^1.0.1"
   },
   "homepage": "https://github.com/styleframe-dev/styleframe#readme",
   "bugs": {
@@ -62,10 +106,13 @@
     "url": "git+https://github.com/styleframe-dev/styleframe.git"
   },
   "author": "Alex Grozav <alex@styleframe.dev>",
+  "overrides": {
+    "vite": "npm:rolldown-vite@latest"
+  },
   "scripts": {
     "build": "tsdown",
     "dev": "tsdown --watch",
-    "test": "vitest",
+    "test": "vitest run --passWithNoTests",
     "typecheck": "tsc --noEmit",
     "release": "bumpp && npm publish"
   }