StyleSheet component (#41)

* stylesheet component

* add changeset

.changeset/spotty-dragons-run.md

@@ -0,0 +1,5 @@
+---
+"@embellish/react": minor
+---
+
+Replaced the `styleSheet` function with a `StyleSheet` component.

packages/react/src/index.d.ts → packages/react/src/component.d.ts

@@ -1,38 +1,15 @@
 import type {
   Condition,
   Conditions,
-  Digit,
-  Letter,
-  OnlyChars,
-  UppercaseLetter,
   ValidConditionName,
 } from "@embellish/core";
-import type {
-  Component,
-  ComponentProps,
-  CSSProperties,
-  ElementType,
-  PropsWithoutRef,
-  PropsWithRef,
-  RefAttributes,
-} from "react";
-
-export { createHooks, createConditions } from "@embellish/core";
-
-export type ValidComponentDisplayName<Name> =
-  Name extends `${UppercaseLetter}${infer Tail}`
-    ? OnlyChars<Letter | Digit, Tail>
-    : never;
+import type React, { CSSProperties } from "react";
 
-export type ValidStylePropName<Name> = Name extends `${Letter}${infer Tail}`
-  ? OnlyChars<Letter | Digit, Tail>
-  : never;
-
-export type ComponentPropsWithRef<C extends ElementType> = PropsWithRef<
-  C extends new (props: infer P) => Component<unknown, unknown>
-    ? PropsWithoutRef<P> & RefAttributes<InstanceType<C>>
-    : ComponentProps<C>
->;
+import type {
+  ComponentPropsWithRef,
+  ValidComponentDisplayName,
+  ValidStylePropName,
+} from "./types";
 
 export function createComponent<
   const DisplayName extends string,

packages/react/src/index.js → packages/react/src/component.js

@@ -1,8 +1,6 @@
 import { createLocalConditions } from "@embellish/core";
 import { createElement, forwardRef } from "react";
 
-export { createHooks, createConditions } from "@embellish/core";
-
 const unitlessNumbers = new Set([
   "animationIterationCount",
   "aspectRatio",

packages/react/src/hooks.tsx

@@ -0,0 +1,17 @@
+import type { HookId, Selector } from "@embellish/core";
+import { createHooks as createHooksImpl } from "@embellish/core";
+
+export function createHooks<Hooks extends Selector[]>(
+  hooks: Hooks,
+): {
+  StyleSheet(): JSX.Element;
+  hooks: { [Hook in Hooks[number]]: HookId };
+} {
+  const { styleSheet, ...rest } = createHooksImpl(hooks);
+  return {
+    ...rest,
+    StyleSheet() {
+      return <style dangerouslySetInnerHTML={{ __html: styleSheet() }} />;
+    },
+  };
+}

packages/react/src/index.ts

@@ -0,0 +1,3 @@
+export { createHooks } from "./hooks.js";
+export { createConditions } from "@embellish/core";
+export { createComponent } from "./component.js";

packages/react/src/types.ts

@@ -0,0 +1,28 @@
+import type {
+  Digit,
+  Letter,
+  OnlyChars,
+  UppercaseLetter,
+} from "@embellish/core";
+import type {
+  Component,
+  ComponentProps,
+  ElementType,
+  PropsWithRef,
+  RefAttributes,
+} from "react";
+
+export type ValidComponentDisplayName<Name> =
+  Name extends `${UppercaseLetter}${infer Tail}`
+    ? OnlyChars<Letter | Digit, Tail>
+    : never;
+
+export type ValidStylePropName<Name> = Name extends `${Letter}${infer Tail}`
+  ? OnlyChars<Letter | Digit, Tail>
+  : never;
+
+export type ComponentPropsWithRef<C extends ElementType> = PropsWithRef<
+  C extends new (props: infer P) => Component<unknown, unknown>
+    ? PropsWithRef<P> & RefAttributes<InstanceType<C>>
+    : ComponentProps<C>
+>;

packages/react/tsconfig.json

@@ -1,8 +1,11 @@
 {
   "extends": "@tsconfig/strictest",
   "compilerOptions": {
+    "module": "ES2015",
+    "moduleResolution": "Node",
     "noEmit": true,
-    "checkJs": false
+    "checkJs": false,
+    "jsx": "react-jsx"
   },
   "include": ["src"]
 }

packages/react/vite.config.ts

@@ -12,11 +12,11 @@ export default defineConfig({
   build: {
     minify: false,
     lib: {
-      entry: resolve(__dirname, "src", "index.js"),
+      entry: resolve(__dirname, "src", "index.ts"),
       formats: ["es"],
     },
     rollupOptions: {
-      external: ["react"],
+      external: ["react", "react/jsx-runtime"],
       output: {
         preserveModules: true,
         preserveModulesRoot: "src",