@just-web/css 0.3.0 → 0.4.0

package/cjs/css-properties/to_dom_style.d.ts

@@ -0,0 +1,19 @@
+import type { CSSProperties } from './css-properties.ts';
+/**
+ * Converts React-style CSS properties to DOM style properties.
+ * This function handles both standard CSS properties and custom properties,
+ * ensuring proper formatting for DOM style application.
+ *
+ * @param style - React-style CSS properties object
+ * @returns CSSStyleDeclaration compatible object for DOM style application
+ *
+ * @example
+ * ```ts
+ * const domStyle = toDOMStyle({
+ *   backgroundColor: 'red',
+ *   '--custom-color': '#ff0000'
+ * })
+ * element.style = domStyle
+ * ```
+ */
+export declare function toDOMStyle(style: CSSProperties | undefined): Partial<CSSStyleDeclaration> | undefined;

package/cjs/css-properties/to_dom_style.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.toDOMStyle = toDOMStyle;
+function toDOMStyle(style) {
+  if (style === void 0) return void 0;
+  const result = {};
+  for (const [key, value] of Object.entries(style)) {
+    result[key.startsWith("--") ? key : key.replace(/[A-Z]/g, match => `-${match.toLowerCase()}`)] = value;
+  }
+  return result;
+}

package/cjs/index.d.ts

@@ -1,4 +1,5 @@
 export * from './css-properties/css-properties.ts';
+export * from './css-properties/to_dom_style.ts';
 export * from './props/class-name.ts';
 export * from './props/style.ts';
 export * from './theme/class-name.ts';

package/cjs/index.js

@@ -14,6 +14,17 @@ Object.keys(_cssProperties).forEach(function (key) {
     }
   });
 });
+var _to_dom_style = require("./css-properties/to_dom_style.ts");
+Object.keys(_to_dom_style).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _to_dom_style[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _to_dom_style[key];
+    }
+  });
+});
 var _className = require("./props/class-name.ts");
 Object.keys(_className).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/esm/css-properties/to_dom_style.d.ts

@@ -0,0 +1,20 @@
+import type { CSSProperties } from './css-properties.ts';
+/**
+ * Converts React-style CSS properties to DOM style properties.
+ * This function handles both standard CSS properties and custom properties,
+ * ensuring proper formatting for DOM style application.
+ *
+ * @param style - React-style CSS properties object
+ * @returns CSSStyleDeclaration compatible object for DOM style application
+ *
+ * @example
+ * ```ts
+ * const domStyle = toDOMStyle({
+ *   backgroundColor: 'red',
+ *   '--custom-color': '#ff0000'
+ * })
+ * element.style = domStyle
+ * ```
+ */
+export declare function toDOMStyle(style: CSSProperties | undefined): Partial<CSSStyleDeclaration> | undefined;
+//# sourceMappingURL=to_dom_style.d.ts.map

package/esm/css-properties/to_dom_style.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"to_dom_style.d.ts","sourceRoot":"","sources":["../../src/css-properties/to_dom_style.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAA;AAExD;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,aAAa,GAAG,SAAS,GAAG,OAAO,CAAC,mBAAmB,CAAC,GAAG,SAAS,CAUrG"}

package/esm/css-properties/to_dom_style.js

@@ -0,0 +1,27 @@
+/**
+ * Converts React-style CSS properties to DOM style properties.
+ * This function handles both standard CSS properties and custom properties,
+ * ensuring proper formatting for DOM style application.
+ *
+ * @param style - React-style CSS properties object
+ * @returns CSSStyleDeclaration compatible object for DOM style application
+ *
+ * @example
+ * ```ts
+ * const domStyle = toDOMStyle({
+ *   backgroundColor: 'red',
+ *   '--custom-color': '#ff0000'
+ * })
+ * element.style = domStyle
+ * ```
+ */
+export function toDOMStyle(style) {
+    if (style === undefined)
+        return undefined;
+    const result = {};
+    for (const [key, value] of Object.entries(style)) {
+        result[key.startsWith('--') ? key : key.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`)] = value;
+    }
+    return result;
+}
+//# sourceMappingURL=to_dom_style.js.map

package/esm/css-properties/to_dom_style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"to_dom_style.js","sourceRoot":"","sources":["../../src/css-properties/to_dom_style.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,UAAU,UAAU,CAAC,KAAgC;IAC1D,IAAI,KAAK,KAAK,SAAS;QAAE,OAAO,SAAS,CAAA;IAEzC,MAAM,MAAM,GAAG,EAAS,CAAA;IAExB,KAAK,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC;QAClD,MAAM,CAAC,GAAG,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,OAAO,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,IAAI,KAAK,CAAC,WAAW,EAAE,EAAE,CAAC,CAAC,GAAG,KAAK,CAAA;IACzG,CAAC;IAED,OAAO,MAAM,CAAA;AACd,CAAC"}

package/esm/index.d.ts

@@ -1,4 +1,5 @@
 export * from './css-properties/css-properties.ts';
+export * from './css-properties/to_dom_style.ts';
 export * from './props/class-name.ts';
 export * from './props/style.ts';
 export * from './theme/class-name.ts';

package/esm/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,oCAAoC,CAAA;AAClD,cAAc,uBAAuB,CAAA;AACrC,cAAc,kBAAkB,CAAA;AAChC,cAAc,uBAAuB,CAAA;AACrC,cAAc,2BAA2B,CAAA;AACzC,cAAc,sBAAsB,CAAA;AACpC,cAAc,2BAA2B,CAAA;AACzC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,iCAAiC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,oCAAoC,CAAA;AAClD,cAAc,kCAAkC,CAAA;AAChD,cAAc,uBAAuB,CAAA;AACrC,cAAc,kBAAkB,CAAA;AAChC,cAAc,uBAAuB,CAAA;AACrC,cAAc,2BAA2B,CAAA;AACzC,cAAc,sBAAsB,CAAA;AACpC,cAAc,2BAA2B,CAAA;AACzC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,iCAAiC,CAAA"}

package/esm/index.js

@@ -1,4 +1,5 @@
 export * from "./css-properties/css-properties.js";
+export * from "./css-properties/to_dom_style.js";
 export * from "./props/class-name.js";
 export * from "./props/style.js";
 export * from "./theme/class-name.js";

package/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,oCAAoC,CAAA;AAClD,cAAc,uBAAuB,CAAA;AACrC,cAAc,kBAAkB,CAAA;AAChC,cAAc,uBAAuB,CAAA;AACrC,cAAc,2BAA2B,CAAA;AACzC,cAAc,sBAAsB,CAAA;AACpC,cAAc,2BAA2B,CAAA;AACzC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,iCAAiC,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,oCAAoC,CAAA;AAClD,cAAc,kCAAkC,CAAA;AAChD,cAAc,uBAAuB,CAAA;AACrC,cAAc,kBAAkB,CAAA;AAChC,cAAc,uBAAuB,CAAA;AACrC,cAAc,2BAA2B,CAAA;AACzC,cAAc,sBAAsB,CAAA;AACpC,cAAc,2BAA2B,CAAA;AACzC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,iCAAiC,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@just-web/css",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "CSS types and utilities",
   "type": "module",
   "exports": {

package/src/css-properties/to_dom_style.ts

@@ -0,0 +1,30 @@
+import type { CSSProperties } from './css-properties.ts'
+
+/**
+ * Converts React-style CSS properties to DOM style properties.
+ * This function handles both standard CSS properties and custom properties,
+ * ensuring proper formatting for DOM style application.
+ *
+ * @param style - React-style CSS properties object
+ * @returns CSSStyleDeclaration compatible object for DOM style application
+ *
+ * @example
+ * ```ts
+ * const domStyle = toDOMStyle({
+ *   backgroundColor: 'red',
+ *   '--custom-color': '#ff0000'
+ * })
+ * element.style = domStyle
+ * ```
+ */
+export function toDOMStyle(style: CSSProperties | undefined): Partial<CSSStyleDeclaration> | undefined {
+	if (style === undefined) return undefined
+
+	const result = {} as any
+
+	for (const [key, value] of Object.entries(style)) {
+		result[key.startsWith('--') ? key : key.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`)] = value
+	}
+
+	return result
+}

package/src/index.ts

@@ -1,4 +1,5 @@
 export * from './css-properties/css-properties.ts'
+export * from './css-properties/to_dom_style.ts'
 export * from './props/class-name.ts'
 export * from './props/style.ts'
 export * from './theme/class-name.ts'