@furystack/shades 11.0.35 → 11.1.0

package/CHANGELOG.md

@@ -1,5 +1,51 @@
 # Changelog
 
+## [11.1.0] - 2026-02-01
+
+### ✨ Features
+
+### CSS Property for Component-Level Styling
+
+Added a new `css` property to `Shade()` components that enables defining component-level styles with support for pseudo-selectors and nested selectors. This provides a cleaner alternative to using `useState` for hover/focus states.
+
+**Key benefits:**
+
+- Define `:hover`, `:active`, `:focus`, and `:disabled` states declaratively
+- Support for nested selectors (e.g., `& .className`, `& > div`)
+- Styles are injected as a shared stylesheet, reducing DOM overhead
+- Type-safe with the new `CSSObject` type
+
+**Usage:**
+
+```typescript
+const Button = Shade({
+  shadowDomName: 'my-button',
+  css: {
+    padding: '12px 24px',
+    backgroundColor: 'blue',
+    cursor: 'pointer',
+    '&:hover': { backgroundColor: 'darkblue' },
+    '&:disabled': { opacity: '0.5', cursor: 'not-allowed' },
+    '& .icon': { marginRight: '8px' }
+  },
+  render: ({ children }) => <button>{children}</button>
+})
+```
+
+- Added `CSSObject` type - type definition for CSS styles with nested selector support
+- Added `StyleManager` - singleton that manages CSS injection and deduplication for components
+- Added `generateCSS()` - utility function to convert `CSSObject` to CSS strings
+- Extended support for customized built-in elements (e.g., `a[is="my-link"]` selectors)
+
+### 📚 Documentation
+
+- Updated README with documentation for the new `css` property and styling patterns
+
+### 🧪 Tests
+
+- Added tests for `generateCSS()` covering camelCase conversion, pseudo-selectors, and nested selectors
+- Added tests for `StyleManager` covering component registration, deduplication, and customized built-in elements
+
 ## [11.0.35] - 2026-01-26
 
 ### 🔧 Chores

package/README.md

@@ -24,6 +24,92 @@ A shade (component) can be constructed from the following properties:
 - `constructed: (options: RenderOptions)=>void` – Optional callback executed after component construction. It can return a cleanup method (e.g., free up resources, dispose value observers, etc.).
 - `onAttach: (options: RenderOptions)=>void` – Executed when the component is attached to the DOM.
 - `onDetach: (options: RenderOptions)=>void` – Executed when the component is detached from the DOM.
+- `style` – Optional inline styles applied to each component instance. Use for per-instance overrides.
+- `css` – Optional CSS styles injected as a stylesheet during component registration. Supports pseudo-selectors and nested selectors.
+
+### Styling
+
+Shades provides two complementary approaches to styling components:
+
+#### `style` Property (Inline Styles)
+
+The `style` property applies inline styles to each component instance. Use this for:
+
+- Per-instance style overrides
+- Dynamic styles that change based on props/state
+- Quick prototyping
+
+```typescript
+const MyComponent = Shade({
+  shadowDomName: 'my-component',
+  style: {
+    display: 'flex',
+    padding: '16px',
+  },
+  render: () => <div>Content</div>,
+})
+
+// Override styles on specific instances
+<MyComponent style={{ marginTop: '20px' }} />
+```
+
+#### `css` Property (Stylesheet Injection)
+
+The `css` property injects CSS rules into a stylesheet once per component type. Use this for:
+
+- Component-level default styles
+- Pseudo-selectors (`:hover`, `:active`, `:focus`, `:disabled`, etc.)
+- Nested selectors (child elements, class names)
+- Better performance (styles injected once, not per-instance)
+
+```typescript
+const Button = Shade({
+  shadowDomName: 'my-button',
+  css: {
+    padding: '12px 24px',
+    backgroundColor: 'blue',
+    color: 'white',
+    border: 'none',
+    cursor: 'pointer',
+    transition: 'all 0.2s ease',
+
+    '&:hover': {
+      backgroundColor: 'darkblue',
+    },
+
+    '&:active': {
+      transform: 'scale(0.98)',
+    },
+
+    '&:disabled': {
+      opacity: '0.5',
+      cursor: 'not-allowed',
+    },
+
+    '& .icon': {
+      marginRight: '8px',
+    },
+  },
+  render: ({ props }) => (
+    <button disabled={props.disabled}>
+      {props.icon && <span className="icon">{props.icon}</span>}
+      {props.children}
+    </button>
+  ),
+})
+```
+
+#### When to Use Which
+
+| Use Case                  | `style` | `css` |
+| ------------------------- | ------- | ----- |
+| Hover/focus/active states | ❌      | ✅    |
+| Per-instance overrides    | ✅      | ❌    |
+| Nested element styling    | ❌      | ✅    |
+| Dynamic values from props | ✅      | ❌    |
+| Component defaults        | ⚠️      | ✅    |
+
+Both properties can be used together. Inline `style` will override `css` due to CSS specificity rules.
 
 ### Render Options
 

package/esm/compile-route.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=compile-route.spec.d.ts.map

package/esm/compile-route.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"compile-route.spec.d.ts","sourceRoot":"","sources":["../src/compile-route.spec.ts"],"names":[],"mappings":""}

package/esm/compile-route.spec.js

@@ -0,0 +1,34 @@
+import { describe, expect, it } from 'vitest';
+import { compileRoute } from './compile-route.js';
+describe('compile-route', () => {
+    describe('compileRoute', () => {
+        it('should compile route with string params', () => {
+            const result = compileRoute('/users/:id', { id: 'abc123' });
+            expect(result).toBe('/users/abc123');
+        });
+        it('should compile route with numeric params (stringified)', () => {
+            const result = compileRoute('/users/:id', { id: 42 });
+            expect(result).toBe('/users/42');
+        });
+        it('should compile route with multiple params', () => {
+            const result = compileRoute('/users/:userId/posts/:postId', {
+                userId: 'user1',
+                postId: 'post2',
+            });
+            expect(result).toBe('/users/user1/posts/post2');
+        });
+        it('should handle empty params object for static routes', () => {
+            const result = compileRoute('/home', {});
+            expect(result).toBe('/home');
+        });
+        it('should handle params with special characters', () => {
+            const result = compileRoute('/search/:query', { query: 'hello-world' });
+            expect(result).toBe('/search/hello-world');
+        });
+        it('should handle boolean params (stringified)', () => {
+            const result = compileRoute('/feature/:enabled', { enabled: true });
+            expect(result).toBe('/feature/true');
+        });
+    });
+});
+//# sourceMappingURL=compile-route.spec.js.map

package/esm/compile-route.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"compile-route.spec.js","sourceRoot":"","sources":["../src/compile-route.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,QAAQ,CAAA;AAC7C,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAA;AAEjD,QAAQ,CAAC,eAAe,EAAE,GAAG,EAAE;IAC7B,QAAQ,CAAC,cAAc,EAAE,GAAG,EAAE;QAC5B,EAAE,CAAC,yCAAyC,EAAE,GAAG,EAAE;YACjD,MAAM,MAAM,GAAG,YAAY,CAAC,YAAY,EAAE,EAAE,EAAE,EAAE,QAAQ,EAAE,CAAC,CAAA;YAC3D,MAAM,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,eAAe,CAAC,CAAA;QACtC,CAAC,CAAC,CAAA;QAEF,EAAE,CAAC,wDAAwD,EAAE,GAAG,EAAE;YAChE,MAAM,MAAM,GAAG,YAAY,CAAC,YAAY,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,CAAA;YACrD,MAAM,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAAA;QAClC,CAAC,CAAC,CAAA;QAEF,EAAE,CAAC,2CAA2C,EAAE,GAAG,EAAE;YACnD,MAAM,MAAM,GAAG,YAAY,CAAC,8BAA8B,EAAE;gBAC1D,MAAM,EAAE,OAAO;gBACf,MAAM,EAAE,OAAO;aAChB,CAAC,CAAA;YACF,MAAM,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,0BAA0B,CAAC,CAAA;QACjD,CAAC,CAAC,CAAA;QAEF,EAAE,CAAC,qDAAqD,EAAE,GAAG,EAAE;YAC7D,MAAM,MAAM,GAAG,YAAY,CAAC,OAAO,EAAE,EAAE,CAAC,CAAA;YACxC,MAAM,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;QAC9B,CAAC,CAAC,CAAA;QAEF,EAAE,CAAC,8CAA8C,EAAE,GAAG,EAAE;YACtD,MAAM,MAAM,GAAG,YAAY,CAAC,gBAAgB,EAAE,EAAE,KAAK,EAAE,aAAa,EAAE,CAAC,CAAA;YACvE,MAAM,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAA;QAC5C,CAAC,CAAC,CAAA;QAEF,EAAE,CAAC,4CAA4C,EAAE,GAAG,EAAE;YACpD,MAAM,MAAM,GAAG,YAAY,CAAC,mBAAmB,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAA;YACnE,MAAM,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,eAAe,CAAC,CAAA;QACtC,CAAC,CAAC,CAAA;IACJ,CAAC,CAAC,CAAA;AACJ,CAAC,CAAC,CAAA"}

package/esm/components/route-link.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"route-link.d.ts","sourceRoot":"","sources":["../../src/components/route-link.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAA;AAIlE,MAAM,MAAM,cAAc,GAAG,cAAc,CAAC,IAAI,CAAC,iBAAiB,EAAE,SAAS,CAAC,CAAC,CAAA;AAE/E,eAAO,MAAM,SAAS;;sGAoBpB,CAAA"}
+{"version":3,"file":"route-link.d.ts","sourceRoot":"","sources":["../../src/components/route-link.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAA;AAIlE,MAAM,MAAM,cAAc,GAAG,cAAc,CAAC,IAAI,CAAC,iBAAiB,EAAE,SAAS,CAAC,CAAC,CAAA;AAE/E,eAAO,MAAM,SAAS;;sGAmBpB,CAAA"}

package/esm/components/route-link.js

@@ -5,14 +5,13 @@ export const RouteLink = Shade({
     shadowDomName: 'route-link',
     elementBase: HTMLAnchorElement,
     elementBaseName: 'a',
+    css: {
+        color: 'inherit',
+        textDecoration: 'inherit',
+    },
     render: ({ children, props, injector, element }) => {
         attachProps(element, {
             ...props,
-            style: {
-                color: 'inherit',
-                textDecoration: 'inherit',
-                ...props.style,
-            },
             onclick: (ev) => {
                 ev.preventDefault();
                 history.pushState('', props.title || '', props.href);

package/esm/components/route-link.js.map

@@ -1 +1 @@
-{"version":3,"file":"route-link.js","sourceRoot":"","sources":["../../src/components/route-link.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAA;AAEnC,OAAO,EAAE,eAAe,EAAE,MAAM,iCAAiC,CAAA;AACjE,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAA;AAIpE,MAAM,CAAC,MAAM,SAAS,GAAG,KAAK,CAAiB;IAC7C,aAAa,EAAE,YAAY;IAC3B,WAAW,EAAE,iBAAiB;IAC9B,eAAe,EAAE,GAAG;IACpB,MAAM,EAAE,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,EAAE;QACjD,WAAW,CAAC,OAAO,EAAE;YACnB,GAAG,KAAK;YACR,KAAK,EAAE;gBACL,KAAK,EAAE,SAAS;gBAChB,cAAc,EAAE,SAAS;gBACzB,GAAG,KAAK,CAAC,KAAK;aACf;YACD,OAAO,EAAE,CAAC,EAAc,EAAE,EAAE;gBAC1B,EAAE,CAAC,cAAc,EAAE,CAAA;gBACnB,OAAO,CAAC,SAAS,CAAC,EAAE,EAAE,KAAK,CAAC,KAAK,IAAI,EAAE,EAAE,KAAK,CAAC,IAAI,CAAC,CAAA;gBACpD,QAAQ,CAAC,WAAW,CAAC,eAAe,CAAC,CAAC,WAAW,EAAE,CAAA;YACrD,CAAC;SACF,CAAC,CAAA;QACF,OAAO,uCAAG,QAAQ,CAAI,CAAA;IACxB,CAAC;CACF,CAAC,CAAA"}
+{"version":3,"file":"route-link.js","sourceRoot":"","sources":["../../src/components/route-link.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAA;AAEnC,OAAO,EAAE,eAAe,EAAE,MAAM,iCAAiC,CAAA;AACjE,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAA;AAIpE,MAAM,CAAC,MAAM,SAAS,GAAG,KAAK,CAAiB;IAC7C,aAAa,EAAE,YAAY;IAC3B,WAAW,EAAE,iBAAiB;IAC9B,eAAe,EAAE,GAAG;IACpB,GAAG,EAAE;QACH,KAAK,EAAE,SAAS;QAChB,cAAc,EAAE,SAAS;KAC1B;IACD,MAAM,EAAE,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,EAAE;QACjD,WAAW,CAAC,OAAO,EAAE;YACnB,GAAG,KAAK;YACR,OAAO,EAAE,CAAC,EAAc,EAAE,EAAE;gBAC1B,EAAE,CAAC,cAAc,EAAE,CAAA;gBACnB,OAAO,CAAC,SAAS,CAAC,EAAE,EAAE,KAAK,CAAC,KAAK,IAAI,EAAE,EAAE,KAAK,CAAC,IAAI,CAAC,CAAA;gBACpD,QAAQ,CAAC,WAAW,CAAC,eAAe,CAAC,CAAC,WAAW,EAAE,CAAA;YACrD,CAAC;SACF,CAAC,CAAA;QACF,OAAO,uCAAG,QAAQ,CAAI,CAAA;IACxB,CAAC;CACF,CAAC,CAAA"}

package/esm/components/route-link.spec.js

@@ -21,7 +21,7 @@ describe('RouteLink', () => {
             rootElement,
             jsxElement: (createComponent(RouteLink, { id: "route", href: "/subroute" }, "Link")),
         });
-        expect(document.body.innerHTML).toMatchInlineSnapshot(`"<div id="root"><a is="route-link" id="route" href="/subroute" style="color: inherit; text-decoration: inherit;">Link</a></div>"`);
+        expect(document.body.innerHTML).toMatchInlineSnapshot(`"<div id="root"><a is="route-link" id="route" href="/subroute">Link</a></div>"`);
         expect(onRouteChange).not.toBeCalled();
         document.getElementById('route')?.click();
         expect(onRouteChange).toBeCalledTimes(1);

package/esm/components/route-link.spec.js.map

@@ -1 +1 @@
-{"version":3,"file":"route-link.spec.js","sourceRoot":"","sources":["../../src/components/route-link.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAC5C,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,EAAE,MAAM,QAAQ,CAAA;AACxE,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAA;AACtD,OAAO,EAAE,eAAe,EAAE,MAAM,iCAAiC,CAAA;AACjE,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAA;AACvD,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAE3C,QAAQ,CAAC,WAAW,EAAE,GAAG,EAAE;IACzB,UAAU,CAAC,GAAG,EAAE;QACd,QAAQ,CAAC,IAAI,CAAC,SAAS,GAAG,uBAAuB,CAAA;IACnD,CAAC,CAAC,CAAA;IACF,SAAS,CAAC,GAAG,EAAE;QACb,QAAQ,CAAC,IAAI,CAAC,SAAS,GAAG,EAAE,CAAA;IAC9B,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,8CAA8C,EAAE,KAAK,IAAI,EAAE;QAC5D,MAAM,QAAQ,GAAG,IAAI,QAAQ,EAAE,CAAA;QAC/B,MAAM,WAAW,GAAG,QAAQ,CAAC,cAAc,CAAC,MAAM,CAAmB,CAAA;QAErE,MAAM,aAAa,GAAG,EAAE,CAAC,EAAE,EAAE,CAAA;QAE7B,QAAQ,CAAC,WAAW,CAAC,eAAe,CAAC,CAAC,qBAAqB,CAAC,SAAS,CAAC,aAAa,CAAC,CAAA;QAEpF,mBAAmB,CAAC;YAClB,QAAQ;YACR,WAAW;YACX,UAAU,EAAE,CACV,gBAAC,SAAS,IAAC,EAAE,EAAC,OAAO,EAAC,IAAI,EAAC,WAAW,WAE1B,CACb;SACF,CAAC,CAAA;QACF,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,qBAAqB,CACnD,kIAAkI,CACnI,CAAA;QACD,MAAM,CAAC,aAAa,CAAC,CAAC,GAAG,CAAC,UAAU,EAAE,CAAA;QACtC,QAAQ,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,KAAK,EAAE,CAAA;QACzC,MAAM,CAAC,aAAa,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,CAAA;IAC1C,CAAC,CAAC,CAAA;AACJ,CAAC,CAAC,CAAA"}
+{"version":3,"file":"route-link.spec.js","sourceRoot":"","sources":["../../src/components/route-link.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAC5C,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,EAAE,MAAM,QAAQ,CAAA;AACxE,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAA;AACtD,OAAO,EAAE,eAAe,EAAE,MAAM,iCAAiC,CAAA;AACjE,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAA;AACvD,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAE3C,QAAQ,CAAC,WAAW,EAAE,GAAG,EAAE;IACzB,UAAU,CAAC,GAAG,EAAE;QACd,QAAQ,CAAC,IAAI,CAAC,SAAS,GAAG,uBAAuB,CAAA;IACnD,CAAC,CAAC,CAAA;IACF,SAAS,CAAC,GAAG,EAAE;QACb,QAAQ,CAAC,IAAI,CAAC,SAAS,GAAG,EAAE,CAAA;IAC9B,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,8CAA8C,EAAE,KAAK,IAAI,EAAE;QAC5D,MAAM,QAAQ,GAAG,IAAI,QAAQ,EAAE,CAAA;QAC/B,MAAM,WAAW,GAAG,QAAQ,CAAC,cAAc,CAAC,MAAM,CAAmB,CAAA;QAErE,MAAM,aAAa,GAAG,EAAE,CAAC,EAAE,EAAE,CAAA;QAE7B,QAAQ,CAAC,WAAW,CAAC,eAAe,CAAC,CAAC,qBAAqB,CAAC,SAAS,CAAC,aAAa,CAAC,CAAA;QAEpF,mBAAmB,CAAC;YAClB,QAAQ;YACR,WAAW;YACX,UAAU,EAAE,CACV,gBAAC,SAAS,IAAC,EAAE,EAAC,OAAO,EAAC,IAAI,EAAC,WAAW,WAE1B,CACb;SACF,CAAC,CAAA;QACF,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,qBAAqB,CACnD,gFAAgF,CACjF,CAAA;QACD,MAAM,CAAC,aAAa,CAAC,CAAC,GAAG,CAAC,UAAU,EAAE,CAAA;QACtC,QAAQ,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,KAAK,EAAE,CAAA;QACzC,MAAM,CAAC,aAAa,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,CAAA;IAC1C,CAAC,CAAC,CAAA;AACJ,CAAC,CAAC,CAAA"}

package/esm/css-generator.d.ts

@@ -0,0 +1,50 @@
+import type { CSSObject, CSSProperties } from './models/css-object.js';
+/**
+ * Converts a camelCase string to kebab-case
+ * @param str - The camelCase string to convert
+ * @returns The kebab-case string
+ * @example
+ * camelToKebab('backgroundColor') // 'background-color'
+ * camelToKebab('fontSize') // 'font-size'
+ */
+export declare const camelToKebab: (str: string) => string;
+/**
+ * Checks if a key is a selector key (starts with '&')
+ * @param key - The key to check
+ * @returns True if the key is a selector key
+ */
+export declare const isSelectorKey: (key: string) => boolean;
+/**
+ * Converts CSS properties to a CSS declaration string
+ * @param properties - The CSS properties object
+ * @returns A CSS declaration string (e.g., "color: red; padding: 10px;")
+ */
+export declare const propertiesToCSSString: (properties: CSSProperties) => string;
+/**
+ * Generates a CSS rule string from a selector and properties
+ * @param selector - The CSS selector
+ * @param properties - The CSS properties object
+ * @returns A complete CSS rule string (e.g., "selector { color: red; }")
+ */
+export declare const generateCSSRule: (selector: string, properties: CSSProperties) => string;
+/**
+ * Generates complete CSS from a CSSObject for a given component selector
+ * @param selector - The base selector (typically the shadowDomName)
+ * @param cssObject - The CSSObject containing styles and nested selectors
+ * @returns A complete CSS string with all rules
+ *
+ * @example
+ * ```typescript
+ * generateCSS('my-component', {
+ *   color: 'red',
+ *   '&:hover': { color: 'blue' },
+ *   '& .inner': { fontWeight: 'bold' }
+ * })
+ * // Returns:
+ * // "my-component { color: red; }
+ * //  my-component:hover { color: blue; }
+ * //  my-component .inner { font-weight: bold; }"
+ * ```
+ */
+export declare const generateCSS: (selector: string, cssObject: CSSObject) => string;
+//# sourceMappingURL=css-generator.d.ts.map

package/esm/css-generator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"css-generator.d.ts","sourceRoot":"","sources":["../src/css-generator.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAA;AAEtE;;;;;;;GAOG;AACH,eAAO,MAAM,YAAY,GAAI,KAAK,MAAM,KAAG,MAE1C,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,aAAa,GAAI,KAAK,MAAM,KAAG,OAE3C,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,qBAAqB,GAAI,YAAY,aAAa,KAAG,MAajE,CAAA;AAED;;;;;GAKG;AACH,eAAO,MAAM,eAAe,GAAI,UAAU,MAAM,EAAE,YAAY,aAAa,KAAG,MAM7E,CAAA;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,WAAW,GAAI,UAAU,MAAM,EAAE,WAAW,SAAS,KAAG,MAwCpE,CAAA"}

package/esm/css-generator.js

@@ -0,0 +1,107 @@
+/**
+ * Converts a camelCase string to kebab-case
+ * @param str - The camelCase string to convert
+ * @returns The kebab-case string
+ * @example
+ * camelToKebab('backgroundColor') // 'background-color'
+ * camelToKebab('fontSize') // 'font-size'
+ */
+export const camelToKebab = (str) => {
+    return str.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
+};
+/**
+ * Checks if a key is a selector key (starts with '&')
+ * @param key - The key to check
+ * @returns True if the key is a selector key
+ */
+export const isSelectorKey = (key) => {
+    return key.startsWith('&');
+};
+/**
+ * Converts CSS properties to a CSS declaration string
+ * @param properties - The CSS properties object
+ * @returns A CSS declaration string (e.g., "color: red; padding: 10px;")
+ */
+export const propertiesToCSSString = (properties) => {
+    const declarations = [];
+    for (const key in properties) {
+        if (Object.prototype.hasOwnProperty.call(properties, key) && !isSelectorKey(key)) {
+            const value = properties[key];
+            if (value !== undefined && value !== null && value !== '' && typeof value === 'string') {
+                declarations.push(`${camelToKebab(key)}: ${value}`);
+            }
+        }
+    }
+    return declarations.join('; ');
+};
+/**
+ * Generates a CSS rule string from a selector and properties
+ * @param selector - The CSS selector
+ * @param properties - The CSS properties object
+ * @returns A complete CSS rule string (e.g., "selector { color: red; }")
+ */
+export const generateCSSRule = (selector, properties) => {
+    const cssString = propertiesToCSSString(properties);
+    if (!cssString) {
+        return '';
+    }
+    return `${selector} { ${cssString}; }`;
+};
+/**
+ * Generates complete CSS from a CSSObject for a given component selector
+ * @param selector - The base selector (typically the shadowDomName)
+ * @param cssObject - The CSSObject containing styles and nested selectors
+ * @returns A complete CSS string with all rules
+ *
+ * @example
+ * ```typescript
+ * generateCSS('my-component', {
+ *   color: 'red',
+ *   '&:hover': { color: 'blue' },
+ *   '& .inner': { fontWeight: 'bold' }
+ * })
+ * // Returns:
+ * // "my-component { color: red; }
+ * //  my-component:hover { color: blue; }
+ * //  my-component .inner { font-weight: bold; }"
+ * ```
+ */
+export const generateCSS = (selector, cssObject) => {
+    const rules = [];
+    // Extract base properties (non-selector keys)
+    const baseProperties = {};
+    const selectorRules = [];
+    for (const key in cssObject) {
+        if (Object.prototype.hasOwnProperty.call(cssObject, key)) {
+            if (isSelectorKey(key)) {
+                const properties = cssObject[key];
+                if (properties && typeof properties === 'object') {
+                    selectorRules.push({ selectorKey: key, properties: properties });
+                }
+            }
+            else {
+                const value = cssObject[key];
+                if (typeof value !== 'object') {
+                    ;
+                    baseProperties[key] = value;
+                }
+            }
+        }
+    }
+    // Generate base rule
+    const baseRule = generateCSSRule(selector, baseProperties);
+    if (baseRule) {
+        rules.push(baseRule);
+    }
+    // Generate selector rules
+    for (const { selectorKey, properties } of selectorRules) {
+        // Replace '&' with the base selector
+        const fullSelector = selectorKey.replace(/&/g, selector);
+        const rule = generateCSSRule(fullSelector, properties);
+        if (rule) {
+            rules.push(rule);
+        }
+    }
+    return rules.join('\n');
+};
+//# sourceMappingURL=css-generator.js.map

package/esm/css-generator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"css-generator.js","sourceRoot":"","sources":["../src/css-generator.ts"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,GAAW,EAAU,EAAE;IAClD,OAAO,GAAG,CAAC,OAAO,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,IAAI,KAAK,CAAC,WAAW,EAAE,EAAE,CAAC,CAAA;AACpE,CAAC,CAAA;AAED;;;;GAIG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,GAAW,EAAW,EAAE;IACpD,OAAO,GAAG,CAAC,UAAU,CAAC,GAAG,CAAC,CAAA;AAC5B,CAAC,CAAA;AAED;;;;GAIG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,UAAyB,EAAU,EAAE;IACzE,MAAM,YAAY,GAAa,EAAE,CAAA;IAEjC,KAAK,MAAM,GAAG,IAAI,UAAU,EAAE,CAAC;QAC7B,IAAI,MAAM,CAAC,SAAS,CAAC,cAAc,CAAC,IAAI,CAAC,UAAU,EAAE,GAAG,CAAC,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,EAAE,CAAC;YACjF,MAAM,KAAK,GAAG,UAAU,CAAC,GAA0B,CAAC,CAAA;YACpD,IAAI,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,KAAK,EAAE,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;gBACvF,YAAY,CAAC,IAAI,CAAC,GAAG,YAAY,CAAC,GAAG,CAAC,KAAK,KAAK,EAAE,CAAC,CAAA;YACrD,CAAC;QACH,CAAC;IACH,CAAC;IAED,OAAO,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;AAChC,CAAC,CAAA;AAED;;;;;GAKG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,QAAgB,EAAE,UAAyB,EAAU,EAAE;IACrF,MAAM,SAAS,GAAG,qBAAqB,CAAC,UAAU,CAAC,CAAA;IACnD,IAAI,CAAC,SAAS,EAAE,CAAC;QACf,OAAO,EAAE,CAAA;IACX,CAAC;IACD,OAAO,GAAG,QAAQ,MAAM,SAAS,KAAK,CAAA;AACxC,CAAC,CAAA;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,QAAgB,EAAE,SAAoB,EAAU,EAAE;IAC5E,MAAM,KAAK,GAAa,EAAE,CAAA;IAE1B,8CAA8C;IAC9C,MAAM,cAAc,GAAkB,EAAE,CAAA;IACxC,MAAM,aAAa,GAA8D,EAAE,CAAA;IAEnF,KAAK,MAAM,GAAG,IAAI,SAAS,EAAE,CAAC;QAC5B,IAAI,MAAM,CAAC,SAAS,CAAC,cAAc,CAAC,IAAI,CAAC,SAAS,EAAE,GAAG,CAAC,EAAE,CAAC;YACzD,IAAI,aAAa,CAAC,GAAG,CAAC,EAAE,CAAC;gBACvB,MAAM,UAAU,GAAG,SAAS,CAAC,GAAsB,CAAC,CAAA;gBACpD,IAAI,UAAU,IAAI,OAAO,UAAU,KAAK,QAAQ,EAAE,CAAC;oBACjD,aAAa,CAAC,IAAI,CAAC,EAAE,WAAW,EAAE,GAAG,EAAE,UAAU,EAAE,UAA2B,EAAE,CAAC,CAAA;gBACnF,CAAC;YACH,CAAC;iBAAM,CAAC;gBACN,MAAM,KAAK,GAAG,SAAS,CAAC,GAAsB,CAAC,CAAA;gBAC/C,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;oBAC9B,CAAC;oBAAC,cAA0C,CAAC,GAAG,CAAC,GAAG,KAAK,CAAA;gBAC3D,CAAC;YACH,CAAC;QACH,CAAC;IACH,CAAC;IAED,qBAAqB;IACrB,MAAM,QAAQ,GAAG,eAAe,CAAC,QAAQ,EAAE,cAAc,CAAC,CAAA;IAC1D,IAAI,QAAQ,EAAE,CAAC;QACb,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;IACtB,CAAC;IAED,0BAA0B;IAC1B,KAAK,MAAM,EAAE,WAAW,EAAE,UAAU,EAAE,IAAI,aAAa,EAAE,CAAC;QACxD,qCAAqC;QACrC,MAAM,YAAY,GAAG,WAAW,CAAC,OAAO,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAA;QACxD,MAAM,IAAI,GAAG,eAAe,CAAC,YAAY,EAAE,UAAU,CAAC,CAAA;QACtD,IAAI,IAAI,EAAE,CAAC;YACT,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;QAClB,CAAC;IACH,CAAC;IAED,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;AACzB,CAAC,CAAA"}

package/esm/css-generator.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=css-generator.spec.d.ts.map

package/esm/css-generator.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"css-generator.spec.d.ts","sourceRoot":"","sources":["../src/css-generator.spec.ts"],"names":[],"mappings":""}

package/esm/css-generator.spec.js

@@ -0,0 +1,162 @@
+import { describe, expect, it } from 'vitest';
+import { camelToKebab, generateCSS, generateCSSRule, isSelectorKey, propertiesToCSSString } from './css-generator.js';
+describe('css-generator', () => {
+    describe('camelToKebab', () => {
+        it('should convert camelCase to kebab-case', () => {
+            expect(camelToKebab('backgroundColor')).toBe('background-color');
+            expect(camelToKebab('fontSize')).toBe('font-size');
+            expect(camelToKebab('borderTopLeftRadius')).toBe('border-top-left-radius');
+        });
+        it('should handle single word properties', () => {
+            expect(camelToKebab('color')).toBe('color');
+            expect(camelToKebab('margin')).toBe('margin');
+        });
+        it('should handle empty string', () => {
+            expect(camelToKebab('')).toBe('');
+        });
+    });
+    describe('isSelectorKey', () => {
+        it('should return true for selector keys starting with &', () => {
+            expect(isSelectorKey('&:hover')).toBe(true);
+            expect(isSelectorKey('&:active')).toBe(true);
+            expect(isSelectorKey('& .className')).toBe(true);
+            expect(isSelectorKey('& > div')).toBe(true);
+        });
+        it('should return false for regular CSS property keys', () => {
+            expect(isSelectorKey('color')).toBe(false);
+            expect(isSelectorKey('backgroundColor')).toBe(false);
+            expect(isSelectorKey('fontSize')).toBe(false);
+        });
+    });
+    describe('propertiesToCSSString', () => {
+        it('should convert CSS properties object to CSS string', () => {
+            const result = propertiesToCSSString({
+                color: 'red',
+                backgroundColor: 'blue',
+            });
+            expect(result).toBe('color: red; background-color: blue');
+        });
+        it('should skip undefined and null values', () => {
+            const result = propertiesToCSSString({
+                color: 'red',
+                backgroundColor: undefined,
+            });
+            expect(result).toBe('color: red');
+        });
+        it('should skip empty string values', () => {
+            const result = propertiesToCSSString({
+                color: 'red',
+                backgroundColor: '',
+            });
+            expect(result).toBe('color: red');
+        });
+        it('should return empty string for empty object', () => {
+            const result = propertiesToCSSString({});
+            expect(result).toBe('');
+        });
+        it('should ignore selector keys', () => {
+            // Type assertion needed to test mixed object with selectors
+            const mixedObject = {
+                color: 'red',
+                '&:hover': { color: 'blue' },
+            };
+            const result = propertiesToCSSString(mixedObject);
+            expect(result).toBe('color: red');
+        });
+        it('should filter out non-string values', () => {
+            // Type assertion to test edge case with non-string values
+            const mixedObject = {
+                color: 'red',
+                opacity: 0.5, // number - should be filtered
+                display: 'flex',
+                hidden: true, // boolean - should be filtered
+            };
+            const result = propertiesToCSSString(mixedObject);
+            expect(result).toBe('color: red; display: flex');
+        });
+    });
+    describe('generateCSSRule', () => {
+        it('should generate a complete CSS rule', () => {
+            const result = generateCSSRule('my-component', {
+                color: 'red',
+                padding: '10px',
+            });
+            expect(result).toBe('my-component { color: red; padding: 10px; }');
+        });
+        it('should return empty string for empty properties', () => {
+            const result = generateCSSRule('my-component', {});
+            expect(result).toBe('');
+        });
+    });
+    describe('generateCSS', () => {
+        it('should generate CSS for base properties only', () => {
+            const result = generateCSS('my-component', {
+                color: 'red',
+                padding: '10px',
+            });
+            expect(result).toBe('my-component { color: red; padding: 10px; }');
+        });
+        it('should generate CSS with pseudo-selectors', () => {
+            const result = generateCSS('my-component', {
+                color: 'red',
+                '&:hover': { color: 'blue' },
+            });
+            expect(result).toContain('my-component { color: red; }');
+            expect(result).toContain('my-component:hover { color: blue; }');
+        });
+        it('should generate CSS with nested class selectors', () => {
+            const result = generateCSS('my-component', {
+                padding: '10px',
+                '& .inner': { fontWeight: 'bold' },
+            });
+            expect(result).toContain('my-component { padding: 10px; }');
+            expect(result).toContain('my-component .inner { font-weight: bold; }');
+        });
+        it('should generate CSS with child selectors', () => {
+            const result = generateCSS('my-component', {
+                display: 'flex',
+                '& > div': { margin: '5px' },
+            });
+            expect(result).toContain('my-component { display: flex; }');
+            expect(result).toContain('my-component > div { margin: 5px; }');
+        });
+        it('should handle multiple pseudo-selectors', () => {
+            const result = generateCSS('my-button', {
+                backgroundColor: 'blue',
+                '&:hover': { backgroundColor: 'darkblue' },
+                '&:active': { backgroundColor: 'navy' },
+                '&:disabled': { opacity: '0.5' },
+            });
+            expect(result).toContain('my-button { background-color: blue; }');
+            expect(result).toContain('my-button:hover { background-color: darkblue; }');
+            expect(result).toContain('my-button:active { background-color: navy; }');
+            expect(result).toContain('my-button:disabled { opacity: 0.5; }');
+        });
+        it('should handle empty css object', () => {
+            const result = generateCSS('my-component', {});
+            expect(result).toBe('');
+        });
+        it('should handle css object with only selectors', () => {
+            const result = generateCSS('my-component', {
+                '&:hover': { color: 'blue' },
+            });
+            expect(result).toBe('my-component:hover { color: blue; }');
+        });
+        it('should skip selector keys with non-object values', () => {
+            // Type assertion to test edge case with invalid selector values
+            const cssObject = {
+                color: 'red',
+                '&:hover': 'invalid', // string instead of object - should be skipped
+                '&:active': null, // null - should be skipped
+                '&:focus': { backgroundColor: 'blue' }, // valid - should be included
+            };
+            const result = generateCSS('my-component', cssObject);
+            expect(result).toContain('my-component { color: red; }');
+            expect(result).toContain('my-component:focus { background-color: blue; }');
+            expect(result).not.toContain('invalid');
+            expect(result).not.toContain(':hover');
+            expect(result).not.toContain(':active');
+        });
+    });
+});
+//# sourceMappingURL=css-generator.spec.js.map

package/esm/css-generator.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"css-generator.spec.js","sourceRoot":"","sources":["../src/css-generator.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,QAAQ,CAAA;AAC7C,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,eAAe,EAAE,aAAa,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAA;AAGrH,QAAQ,CAAC,eAAe,EAAE,GAAG,EAAE;IAC7B,QAAQ,CAAC,cAAc,EAAE,GAAG,EAAE;QAC5B,EAAE,CAAC,wCAAwC,EAAE,GAAG,EAAE;YAChD,MAAM,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAAC,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAA;YAChE,MAAM,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAAA;YAClD,MAAM,CAAC,YAAY,CAAC,qBAAqB,CAAC,CAAC,CAAC,IAAI,CAAC,wBAAwB,CAAC,CAAA;QAC5E,CAAC,CAAC,CAAA;QAEF,EAAE,CAAC,sCAAsC,EAAE,GAAG,EAAE;YAC9C,MAAM,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;YAC3C,MAAM,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;QAC/C,CAAC,CAAC,CAAA;QAEF,EAAE,CAAC,4BAA4B,EAAE,GAAG,EAAE;YACpC,MAAM,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;QACnC,CAAC,CAAC,CAAA;IACJ,CAAC,CAAC,CAAA;IAEF,QAAQ,CAAC,eAAe,EAAE,GAAG,EAAE;QAC7B,EAAE,CAAC,sDAAsD,EAAE,GAAG,EAAE;YAC9D,MAAM,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;YAC3C,MAAM,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;YAC5C,MAAM,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;YAChD,MAAM,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;QAC7C,CAAC,CAAC,CAAA;QAEF,EAAE,CAAC,mDAAmD,EAAE,GAAG,EAAE;YAC3D,MAAM,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;YAC1C,MAAM,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;YACpD,MAAM,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;QAC/C,CAAC,CAAC,CAAA;IACJ,CAAC,CAAC,CAAA;IAEF,QAAQ,CAAC,uBAAuB,EAAE,GAAG,EAAE;QACrC,EAAE,CAAC,oDAAoD,EAAE,GAAG,EAAE;YAC5D,MAAM,MAAM,GAAG,qBAAqB,CAAC;gBACnC,KAAK,EAAE,KAAK;gBACZ,eAAe,EAAE,MAAM;aACxB,CAAC,CAAA;YACF,MAAM,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,oCAAoC,CAAC,CAAA;QAC3D,CAAC,CAAC,CAAA;QAEF,EAAE,CAAC,uCAAuC,EAAE,GAAG,EAAE;YAC/C,MAAM,MAAM,GAAG,qBAAqB,CAAC;gBACnC,KAAK,EAAE,KAAK;gBACZ,eAAe,EAAE,SAAS;aAC3B,CAAC,CAAA;YACF,MAAM,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,CAAA;QACnC,CAAC,CAAC,CAAA;QAEF,EAAE,CAAC,iCAAiC,EAAE,GAAG,EAAE;YACzC,MAAM,MAAM,GAAG,qBAAqB,CAAC;gBACnC,KAAK,EAAE,KAAK;gBACZ,eAAe,EAAE,EAAE;aACpB,CAAC,CAAA;YACF,MAAM,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,CAAA;QACnC,CAAC,CAAC,CAAA;QAEF,EAAE,CAAC,6CAA6C,EAAE,GAAG,EAAE;YACrD,MAAM,MAAM,GAAG,qBAAqB,CAAC,EAAE,CAAC,CAAA;YACxC,MAAM,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;QACzB,CAAC,CAAC,CAAA;QAEF,EAAE,CAAC,6BAA6B,EAAE,GAAG,EAAE;YACrC,4DAA4D;YAC5D,MAAM,WAAW,GAAG;gBAClB,KAAK,EAAE,KAAK;gBACZ,SAAS,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE;aAC7B,CAAA;YACD,MAAM,MAAM,GAAG,qBAAqB,CAAC,WAAuC,CAAC,CAAA;YAC7E,MAAM,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,CAAA;QACnC,CAAC,CAAC,CAAA;QAEF,EAAE,CAAC,qCAAqC,EAAE,GAAG,EAAE;YAC7C,0DAA0D;YAC1D,MAAM,WAAW,GAAG;gBAClB,KAAK,EAAE,KAAK;gBACZ,OAAO,EAAE,GAAG,EAAE,8BAA8B;gBAC5C,OAAO,EAAE,MAAM;gBACf,MAAM,EAAE,IAAI,EAAE,+BAA+B;aAC9C,CAAA;YACD,MAAM,MAAM,GAAG,qBAAqB,CAAC,WAAuC,CAAC,CAAA;YAC7E,MAAM,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,2BAA2B,CAAC,CAAA;QAClD,CAAC,CAAC,CAAA;IACJ,CAAC,CAAC,CAAA;IAEF,QAAQ,CAAC,iBAAiB,EAAE,GAAG,EAAE;QAC/B,EAAE,CAAC,qCAAqC,EAAE,GAAG,EAAE;YAC7C,MAAM,MAAM,GAAG,eAAe,CAAC,cAAc,EAAE;gBAC7C,KAAK,EAAE,KAAK;gBACZ,OAAO,EAAE,MAAM;aAChB,CAAC,CAAA;YACF,MAAM,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,6CAA6C,CAAC,CAAA;QACpE,CAAC,CAAC,CAAA;QAEF,EAAE,CAAC,iDAAiD,EAAE,GAAG,EAAE;YACzD,MAAM,MAAM,GAAG,eAAe,CAAC,cAAc,EAAE,EAAE,CAAC,CAAA;YAClD,MAAM,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;QACzB,CAAC,CAAC,CAAA;IACJ,CAAC,CAAC,CAAA;IAEF,QAAQ,CAAC,aAAa,EAAE,GAAG,EAAE;QAC3B,EAAE,CAAC,8CAA8C,EAAE,GAAG,EAAE;YACtD,MAAM,MAAM,GAAG,WAAW,CAAC,cAAc,EAAE;gBACzC,KAAK,EAAE,KAAK;gBACZ,OAAO,EAAE,MAAM;aAChB,CAAC,CAAA;YACF,MAAM,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,6CAA6C,CAAC,CAAA;QACpE,CAAC,CAAC,CAAA;QAEF,EAAE,CAAC,2CAA2C,EAAE,GAAG,EAAE;YACnD,MAAM,MAAM,GAAG,WAAW,CAAC,cAAc,EAAE;gBACzC,KAAK,EAAE,KAAK;gBACZ,SAAS,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE;aAC7B,CAAC,CAAA;YACF,MAAM,CAAC,MAAM,CAAC,CAAC,SAAS,CAAC,8BAA8B,CAAC,CAAA;YACxD,MAAM,CAAC,MAAM,CAAC,CAAC,SAAS,CAAC,qCAAqC,CAAC,CAAA;QACjE,CAAC,CAAC,CAAA;QAEF,EAAE,CAAC,iDAAiD,EAAE,GAAG,EAAE;YACzD,MAAM,MAAM,GAAG,WAAW,CAAC,cAAc,EAAE;gBACzC,OAAO,EAAE,MAAM;gBACf,UAAU,EAAE,EAAE,UAAU,EAAE,MAAM,EAAE;aACnC,CAAC,CAAA;YACF,MAAM,CAAC,MAAM,CAAC,CAAC,SAAS,CAAC,iCAAiC,CAAC,CAAA;YAC3D,MAAM,CAAC,MAAM,CAAC,CAAC,SAAS,CAAC,4CAA4C,CAAC,CAAA;QACxE,CAAC,CAAC,CAAA;QAEF,EAAE,CAAC,0CAA0C,EAAE,GAAG,EAAE;YAClD,MAAM,MAAM,GAAG,WAAW,CAAC,cAAc,EAAE;gBACzC,OAAO,EAAE,MAAM;gBACf,SAAS,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE;aAC7B,CAAC,CAAA;YACF,MAAM,CAAC,MAAM,CAAC,CAAC,SAAS,CAAC,iCAAiC,CAAC,CAAA;YAC3D,MAAM,CAAC,MAAM,CAAC,CAAC,SAAS,CAAC,qCAAqC,CAAC,CAAA;QACjE,CAAC,CAAC,CAAA;QAEF,EAAE,CAAC,yCAAyC,EAAE,GAAG,EAAE;YACjD,MAAM,MAAM,GAAG,WAAW,CAAC,WAAW,EAAE;gBACtC,eAAe,EAAE,MAAM;gBACvB,SAAS,EAAE,EAAE,eAAe,EAAE,UAAU,EAAE;gBAC1C,UAAU,EAAE,EAAE,eAAe,EAAE,MAAM,EAAE;gBACvC,YAAY,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;aACjC,CAAC,CAAA;YACF,MAAM,CAAC,MAAM,CAAC,CAAC,SAAS,CAAC,uCAAuC,CAAC,CAAA;YACjE,MAAM,CAAC,MAAM,CAAC,CAAC,SAAS,CAAC,iDAAiD,CAAC,CAAA;YAC3E,MAAM,CAAC,MAAM,CAAC,CAAC,SAAS,CAAC,8CAA8C,CAAC,CAAA;YACxE,MAAM,CAAC,MAAM,CAAC,CAAC,SAAS,CAAC,sCAAsC,CAAC,CAAA;QAClE,CAAC,CAAC,CAAA;QAEF,EAAE,CAAC,gCAAgC,EAAE,GAAG,EAAE;YACxC,MAAM,MAAM,GAAG,WAAW,CAAC,cAAc,EAAE,EAAE,CAAC,CAAA;YAC9C,MAAM,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;QACzB,CAAC,CAAC,CAAA;QAEF,EAAE,CAAC,8CAA8C,EAAE,GAAG,EAAE;YACtD,MAAM,MAAM,GAAG,WAAW,CAAC,cAAc,EAAE;gBACzC,SAAS,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE;aAC7B,CAAC,CAAA;YACF,MAAM,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,qCAAqC,CAAC,CAAA;QAC5D,CAAC,CAAC,CAAA;QAEF,EAAE,CAAC,kDAAkD,EAAE,GAAG,EAAE;YAC1D,gEAAgE;YAChE,MAAM,SAAS,GAAG;gBAChB,KAAK,EAAE,KAAK;gBACZ,SAAS,EAAE,SAAS,EAAE,+CAA+C;gBACrE,UAAU,EAAE,IAAI,EAAE,2BAA2B;gBAC7C,SAAS,EAAE,EAAE,eAAe,EAAE,MAAM,EAAE,EAAE,6BAA6B;aACtE,CAAA;YACD,MAAM,MAAM,GAAG,WAAW,CAAC,cAAc,EAAE,SAAyD,CAAC,CAAA;YACrG,MAAM,CAAC,MAAM,CAAC,CAAC,SAAS,CAAC,8BAA8B,CAAC,CAAA;YACxD,MAAM,CAAC,MAAM,CAAC,CAAC,SAAS,CAAC,gDAAgD,CAAC,CAAA;YAC1E,MAAM,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,SAAS,CAAC,SAAS,CAAC,CAAA;YACvC,MAAM,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAA;YACtC,MAAM,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,SAAS,CAAC,SAAS,CAAC,CAAA;QACzC,CAAC,CAAC,CAAA;IACJ,CAAC,CAAC,CAAA;AACJ,CAAC,CAAC,CAAA"}

package/esm/index.d.ts

@@ -1,10 +1,12 @@
 export * from './compile-route.js';
 export * from './components/index.js';
+export * from './css-generator.js';
 export * from './initialize.js';
 export * from './models/index.js';
 export * from './services/index.js';
 export * from './shade-component.js';
 export * from './shade.js';
+export * from './style-manager.js';
 export * from './styled-element.js';
 export * from './styled-shade.js';
 import './jsx.js';

package/esm/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAA;AAClC,cAAc,uBAAuB,CAAA;AACrC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,mBAAmB,CAAA;AACjC,cAAc,qBAAqB,CAAA;AACnC,cAAc,sBAAsB,CAAA;AACpC,cAAc,YAAY,CAAA;AAC1B,cAAc,qBAAqB,CAAA;AACnC,cAAc,mBAAmB,CAAA;AACjC,OAAO,UAAU,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAA;AAClC,cAAc,uBAAuB,CAAA;AACrC,cAAc,oBAAoB,CAAA;AAClC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,mBAAmB,CAAA;AACjC,cAAc,qBAAqB,CAAA;AACnC,cAAc,sBAAsB,CAAA;AACpC,cAAc,YAAY,CAAA;AAC1B,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,mBAAmB,CAAA;AACjC,OAAO,UAAU,CAAA"}

package/esm/index.js

@@ -1,10 +1,12 @@
 export * from './compile-route.js';
 export * from './components/index.js';
+export * from './css-generator.js';
 export * from './initialize.js';
 export * from './models/index.js';
 export * from './services/index.js';
 export * from './shade-component.js';
 export * from './shade.js';
+export * from './style-manager.js';
 export * from './styled-element.js';
 export * from './styled-shade.js';
 import './jsx.js';

package/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAA;AAClC,cAAc,uBAAuB,CAAA;AACrC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,mBAAmB,CAAA;AACjC,cAAc,qBAAqB,CAAA;AACnC,cAAc,sBAAsB,CAAA;AACpC,cAAc,YAAY,CAAA;AAC1B,cAAc,qBAAqB,CAAA;AACnC,cAAc,mBAAmB,CAAA;AACjC,OAAO,UAAU,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAA;AAClC,cAAc,uBAAuB,CAAA;AACrC,cAAc,oBAAoB,CAAA;AAClC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,mBAAmB,CAAA;AACjC,cAAc,qBAAqB,CAAA;AACnC,cAAc,sBAAsB,CAAA;AACpC,cAAc,YAAY,CAAA;AAC1B,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,mBAAmB,CAAA;AACjC,OAAO,UAAU,CAAA"}