simplestyle-js 4.1.3 → 4.2.1-beta.0

package/dist/cjs/astro/SimpleStyleProvider.astro

@@ -0,0 +1,16 @@
+---
+import type { SimpleStyleRegistry } from '../simpleStyleRegistry';
+
+interface Props {
+  registry: SimpleStyleRegistry;
+}
+
+const { registry } = Astro.props;
+
+const cssRulesById = registry.getRulesById();
+---
+{cssRulesById.map(([ruleId, css]) => (
+  <style id={ruleId} set:html={css}></style>
+))}
+
+<slot />

package/dist/cjs/next/SimpleStyleProvider.cjs

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "SimpleStyleProvider", {
+    enumerable: true,
+    get: function() {
+        return SimpleStyleProvider;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+function SimpleStyleProvider({ children, registry }) {
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+        children: [
+            registry.getRulesById().map(([ruleId, css])=>/*#__PURE__*/ (0, _jsxruntime.jsx)("style", {
+                    id: ruleId,
+                    children: css
+                }, ruleId)),
+            children
+        ]
+    });
+}

package/dist/cjs/next/SimpleStyleProvider.d.ts

@@ -0,0 +1,12 @@
+import type { PropsWithChildren } from 'react';
+import type { SimpleStyleRegistry } from '../simpleStyleRegistry.js';
+export type SimpleStyleProviderProps = PropsWithChildren & {
+    registry: SimpleStyleRegistry;
+};
+/**
+ * Accumulates all CSS rules and writes
+ * them to your layout.
+ * Use this for Next.js or other Next.js-like frameworks
+ * that leverage React server components
+ */
+export declare function SimpleStyleProvider({ children, registry, }: SimpleStyleProviderProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/{react → next}/index.cjs

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-_export_star(require("./useCreateStyles.cjs"), exports);
+_export_star(require("./SimpleStyleProvider.cjs"), exports);
 function _export_star(from, to) {
     Object.keys(from).forEach(function(k) {
         if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {

package/dist/cjs/next/index.d.ts

@@ -0,0 +1 @@
+export * from './SimpleStyleProvider.js';

package/dist/esm/astro/SimpleStyleProvider.astro

@@ -0,0 +1,16 @@
+---
+import type { SimpleStyleRegistry } from '../simpleStyleRegistry';
+
+interface Props {
+  registry: SimpleStyleRegistry;
+}
+
+const { registry } = Astro.props;
+
+const cssRulesById = registry.getRulesById();
+---
+{cssRulesById.map(([ruleId, css]) => (
+  <style id={ruleId} set:html={css}></style>
+))}
+
+<slot />

package/dist/esm/next/SimpleStyleProvider.d.ts

@@ -0,0 +1,12 @@
+import type { PropsWithChildren } from 'react';
+import type { SimpleStyleRegistry } from '../simpleStyleRegistry.js';
+export type SimpleStyleProviderProps = PropsWithChildren & {
+    registry: SimpleStyleRegistry;
+};
+/**
+ * Accumulates all CSS rules and writes
+ * them to your layout.
+ * Use this for Next.js or other Next.js-like frameworks
+ * that leverage React server components
+ */
+export declare function SimpleStyleProvider({ children, registry, }: SimpleStyleProviderProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/next/SimpleStyleProvider.mjs

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * Accumulates all CSS rules and writes
+ * them to your layout.
+ * Use this for Next.js or other Next.js-like frameworks
+ * that leverage React server components
+ */ export function SimpleStyleProvider({ children, registry }) {
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            registry.getRulesById().map(([ruleId, css])=>/*#__PURE__*/ _jsx("style", {
+                    id: ruleId,
+                    children: css
+                }, ruleId)),
+            children
+        ]
+    });
+}

package/dist/esm/next/index.d.ts

@@ -0,0 +1 @@
+export * from './SimpleStyleProvider.js';

package/dist/esm/next/index.mjs

@@ -0,0 +1 @@
+export * from './SimpleStyleProvider.mjs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "simplestyle-js",
-  "version": "4.1.3",
+  "version": "4.2.1-beta.0",
   "description": "An incredibly straightforward and simple CSS-in-JS solution with zero runtime dependencies, and out-of-the-box TypeScript support",
   "type": "module",
   "repository": {
@@ -11,14 +11,19 @@
     "dist/**",
     "README.md"
   ],
+  "ts-duality": {
+    "extraExports": {
+      "./astro/SimpleStyleProvider": "./dist/esm/astro/SimpleStyleProvider.astro"
+    }
+  },
   "scripts": {
     "build": "bun run clean && bun run build:package",
-    "build:package": "ts-duality --clean",
+    "build:package": "bun run --bun ts-duality --clean --copyOtherFiles",
     "clean": "rm -rf ./dist",
     "coveralls": "bun run test:coverage && bun run coverage:pipe",
     "coverage:pipe": "cat ./coverage/lcov.info | coveralls",
-    "lint": "eslint './src/**/*.ts'",
-    "lint:fixall": "eslint './src/**/*.ts' --fix",
+    "lint": "biome check './src'",
+    "lint:fix": "biome check --write './src'",
     "test:coverage": "bun run --bun vitest run --coverage",
     "test": "bun run --bun vitest run",
     "test:watch": "bun run --bun vitest"
@@ -33,6 +38,7 @@
   "author": "Benjamin Duran <stratodyne@gmail.com>",
   "license": "MIT",
   "devDependencies": {
+    "astro": ">=5",
     "@better-builds/lets-version": "^1.6.0",
     "@testing-library/react": "^16.3.0",
     "@types/autoprefixer": "^10.2.4",
@@ -47,15 +53,20 @@
     "postcss": "^8.5.6",
     "react": ">=18",
     "react-dom": ">=18",
-    "@better-builds/ts-duality": "latest",
+    "@better-builds/ts-duality": "^0.6.0",
     "typescript": "^5.9.3",
     "vite": "^7.2.6",
     "vitest": "^4.0.14"
   },
   "dependencies": {
+    "@biomejs/biome": "^2.3.8",
     "csstype": "^3.2.3",
     "deepmerge": "^4.3.1"
   },
+  "optionalDependencies": {
+    "astro": ">=5",
+    "next": ">=15"
+  },
   "peerDependencies": {
     "react": ">=16.8"
   },
@@ -90,44 +101,44 @@
         "default": "./dist/esm/index.mjs"
       }
     },
-    "./numToAlpha": {
+    "./next/SimpleStyleProvider": {
       "require": {
-        "types": "./dist/cjs/numToAlpha.d.ts",
-        "default": "./dist/cjs/numToAlpha.cjs"
+        "types": "./dist/cjs/next/SimpleStyleProvider.d.ts",
+        "default": "./dist/cjs/next/SimpleStyleProvider.cjs"
       },
       "import": {
-        "types": "./dist/esm/numToAlpha.d.ts",
-        "default": "./dist/esm/numToAlpha.mjs"
+        "types": "./dist/esm/next/SimpleStyleProvider.d.ts",
+        "default": "./dist/esm/next/SimpleStyleProvider.mjs"
       }
     },
-    "./plugins": {
+    "./next": {
       "require": {
-        "types": "./dist/cjs/plugins.d.ts",
-        "default": "./dist/cjs/plugins.cjs"
+        "types": "./dist/cjs/next/index.d.ts",
+        "default": "./dist/cjs/next/index.cjs"
       },
       "import": {
-        "types": "./dist/esm/plugins.d.ts",
-        "default": "./dist/esm/plugins.mjs"
+        "types": "./dist/esm/next/index.d.ts",
+        "default": "./dist/esm/next/index.mjs"
       }
     },
-    "./react": {
+    "./numToAlpha": {
       "require": {
-        "types": "./dist/cjs/react/index.d.ts",
-        "default": "./dist/cjs/react/index.cjs"
+        "types": "./dist/cjs/numToAlpha.d.ts",
+        "default": "./dist/cjs/numToAlpha.cjs"
       },
       "import": {
-        "types": "./dist/esm/react/index.d.ts",
-        "default": "./dist/esm/react/index.mjs"
+        "types": "./dist/esm/numToAlpha.d.ts",
+        "default": "./dist/esm/numToAlpha.mjs"
       }
     },
-    "./react/useCreateStyles": {
+    "./plugins": {
       "require": {
-        "types": "./dist/cjs/react/useCreateStyles.d.ts",
-        "default": "./dist/cjs/react/useCreateStyles.cjs"
+        "types": "./dist/cjs/plugins.d.ts",
+        "default": "./dist/cjs/plugins.cjs"
       },
       "import": {
-        "types": "./dist/esm/react/useCreateStyles.d.ts",
-        "default": "./dist/esm/react/useCreateStyles.mjs"
+        "types": "./dist/esm/plugins.d.ts",
+        "default": "./dist/esm/plugins.mjs"
       }
     },
     "./simpleStyleRegistry": {
@@ -170,7 +181,8 @@
         "default": "./dist/esm/util/index.mjs"
       }
     },
-    "./package.json": "./package.json"
+    "./package.json": "./package.json",
+    "./astro/SimpleStyleProvider": "./dist/esm/astro/SimpleStyleProvider.astro"
   },
   "module": "./dist/esm/index.mjs",
   "types": "./dist/cjs/index.d.ts",

package/dist/cjs/react/index.d.ts

@@ -1 +0,0 @@
-export * from './useCreateStyles.js';

package/dist/cjs/react/useCreateStyles.cjs

@@ -1,73 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "useCreateStyles", {
-    enumerable: true,
-    get: function() {
-        return useCreateStyles;
-    }
-});
-const _react = require("react");
-const _createStyles = /*#__PURE__*/ _interop_require_default(require("../createStyles.cjs"));
-const _index = require("../util/index.cjs");
-function _interop_require_default(obj) {
-    return obj && obj.__esModule ? obj : {
-        default: obj
-    };
-}
-function useCreateStyles(ruleId, rules, options) {
-    // cache rules to compare later
-    const [cachedRules, setCachedRules] = (0, _react.useState)(()=>rules);
-    // memoize options but keep them live
-    const cachedOptions = (0, _react.useMemo)(()=>({
-            ...options
-        }), [
-        options
-    ]);
-    const didFirstWriteRef = (0, _react.useRef)(false);
-    const styleTagRef = (0, _react.useRef)(typeof document === 'undefined' ? null : document.createElement('style'));
-    // initialize styles
-    const [styleState, setStyleState] = (0, _react.useState)(()=>(0, _createStyles.default)(ruleId, rules, {
-            ...cachedOptions,
-            flush: false
-        }));
-    const { classes, stylesheet, updateSheet } = styleState;
-    // mount/unmount style tag
-    (0, _react.useEffect)(()=>{
-        if (!styleTagRef.current) return;
-        const { current: s } = styleTagRef;
-        document.head.append(s);
-        return ()=>{
-            s.remove();
-        };
-    }, []);
-    // update stylesheet when rules change
-    (0, _react.useEffect)(()=>{
-        if (!styleTagRef.current) return;
-        if (!didFirstWriteRef.current) {
-            didFirstWriteRef.current = true;
-            styleTagRef.current.innerHTML = stylesheet;
-            return;
-        }
-        if (!(0, _index.deepEqual)(rules, cachedRules)) {
-            setCachedRules(rules);
-            const updated = updateSheet(rules);
-            if (updated) {
-                styleTagRef.current.innerHTML = updated.stylesheet;
-                // use the fresh updateSheet from updated
-                // @ts-expect-error - this cast is safe and is only for us, internally, anyways
-                setStyleState({
-                    ...updated,
-                    updateSheet
-                });
-            }
-        }
-    }, [
-        cachedRules,
-        rules,
-        stylesheet,
-        updateSheet
-    ]); // only depend on rules + updater
-    return classes;
-}

package/dist/cjs/react/useCreateStyles.d.ts

@@ -1,3 +0,0 @@
-import { CreateStylesOptions } from '../createStyles.js';
-import { SimpleStyleRules } from '../types.js';
-export declare function useCreateStyles<T extends SimpleStyleRules, K extends keyof T, O extends Record<K, string>>(ruleId: string, rules: T, options?: Partial<Omit<CreateStylesOptions, 'flush'>>): O;

package/dist/esm/react/index.d.ts

@@ -1 +0,0 @@
-export * from './useCreateStyles.js';

package/dist/esm/react/index.mjs

@@ -1 +0,0 @@
-export * from './useCreateStyles.mjs';

package/dist/esm/react/useCreateStyles.d.ts

@@ -1,3 +0,0 @@
-import { CreateStylesOptions } from '../createStyles.js';
-import { SimpleStyleRules } from '../types.js';
-export declare function useCreateStyles<T extends SimpleStyleRules, K extends keyof T, O extends Record<K, string>>(ruleId: string, rules: T, options?: Partial<Omit<CreateStylesOptions, 'flush'>>): O;

package/dist/esm/react/useCreateStyles.mjs

@@ -1,58 +0,0 @@
-import { useEffect, useMemo, useRef, useState } from 'react';
-import createStyles from '../createStyles.mjs';
-import { deepEqual } from '../util/index.mjs';
-export function useCreateStyles(ruleId, rules, options) {
-    // cache rules to compare later
-    const [cachedRules, setCachedRules] = useState(()=>rules);
-    // memoize options but keep them live
-    const cachedOptions = useMemo(()=>({
-            ...options
-        }), [
-        options
-    ]);
-    const didFirstWriteRef = useRef(false);
-    const styleTagRef = useRef(typeof document === 'undefined' ? null : document.createElement('style'));
-    // initialize styles
-    const [styleState, setStyleState] = useState(()=>createStyles(ruleId, rules, {
-            ...cachedOptions,
-            flush: false
-        }));
-    const { classes, stylesheet, updateSheet } = styleState;
-    // mount/unmount style tag
-    useEffect(()=>{
-        if (!styleTagRef.current) return;
-        const { current: s } = styleTagRef;
-        document.head.append(s);
-        return ()=>{
-            s.remove();
-        };
-    }, []);
-    // update stylesheet when rules change
-    useEffect(()=>{
-        if (!styleTagRef.current) return;
-        if (!didFirstWriteRef.current) {
-            didFirstWriteRef.current = true;
-            styleTagRef.current.innerHTML = stylesheet;
-            return;
-        }
-        if (!deepEqual(rules, cachedRules)) {
-            setCachedRules(rules);
-            const updated = updateSheet(rules);
-            if (updated) {
-                styleTagRef.current.innerHTML = updated.stylesheet;
-                // use the fresh updateSheet from updated
-                // @ts-expect-error - this cast is safe and is only for us, internally, anyways
-                setStyleState({
-                    ...updated,
-                    updateSheet
-                });
-            }
-        }
-    }, [
-        cachedRules,
-        rules,
-        stylesheet,
-        updateSheet
-    ]); // only depend on rules + updater
-    return classes;
-}