add initial support for inline css object support for react

Author: softmarshmallow

packages/builder-css-styles/_utils/css-json.ts

@@ -0,0 +1,34 @@
+///
+/// css to js transformer
+/// reference:
+/// - https://github.com/postcss/postcss-js/blob/main/objectifier.js
+///
+import { CSSProperties } from "@coli.codes/css";
+import camel from "camelcase-css";
+
+/**
+ * convertes standard css object to react acceptable camel case object
+ *
+ *
+ * ```js
+ * // from
+ * {
+ *    "background-color": "red",
+ * }
+ * // to
+ * {
+ *    backgroundColor: "red",
+ * }
+ * ```
+ * @param payload
+ */
+export function cssToJson(payload: CSSProperties) {
+  const obj = Object.keys(payload).reduce(function (previous, key) {
+    const camelkey = camel(key);
+    return {
+      ...previous,
+      [camelkey]: payload[key],
+    };
+  }, {});
+  return JSON.parse(JSON.stringify(obj));
+}

packages/builder-css-styles/index.ts

@@ -34,3 +34,6 @@ export * from "./ellipse";
 // export * from "./polygon"; // WIP
 export * from "./path";
 // --------------------------------------------------------------------------------
+
+// utils
+export * as utils from "./_utils";

packages/builder-css-styles/package.json

@@ -1,4 +1,10 @@
 {
     "name": "@web-builder/styles",
-    "version": "0.0.0"
+    "version": "0.0.0",
+    "dependencies": {
+        "camelcase-css": "^2.0.1"
+    },
+    "devDependencies": {
+        "@types/camelcase-css": "^2.0.0"
+    }
 }

packages/builder-web-core/builders/build-jsx-tree.ts

@@ -80,18 +80,22 @@ export function buildJsx(
      * required for id based styling strategy
      */
     idTransformer?: (jsx, id: string) => void;
+    preprocess?: (jsx: JSXElementConfig) => JSXElementConfig;
   },
   options: {
     self_closing_if_possible?: boolean;
   }
 ): JSXChildLike {
   const force_dont_self_close = options.self_closing_if_possible === false;
   const mapper = (widget: JsxWidget) => {
-    const _jsxcfg = widget.jsxConfig();
+    let _jsxcfg = widget.jsxConfig();
     if (_jsxcfg.type === "static-tree") {
       return _jsxcfg.tree;
     }
 
+    // preprocess
+    _jsxcfg = repository.preprocess?.(_jsxcfg) ?? _jsxcfg;
+
     const children = widget.children?.map(mapper);
 
     if (widget instanceof StylableJsxWidget) {

packages/builder-web-react/react-inline-css-widget/react-inline-css-module-builder.ts

@@ -1,6 +1,6 @@
 import { ReservedKeywordPlatformPresets } from "@coli.codes/naming/reserved";
 import { react as react_config } from "@designto/config";
-import type { JsxWidget } from "@web-builder/core";
+import type { JSXElementConfig, JsxWidget } from "@web-builder/core";
 import {
   buildJsx,
   getWidgetStylesConfigMap,
@@ -10,15 +10,22 @@ import {
 } from "@web-builder/core/builders";
 import {
   BlockStatement,
+  Identifier,
   ImportDeclaration,
   JSXAttribute,
+  Literal,
+  ObjectLiteralExpression,
+  PropertyAssignment,
   Return,
   ScopedVariableNamer,
+  StringLiteral,
 } from "coli";
 import * as css from "@web-builder/styles";
 import { react_imports } from "../react-import-specifications";
 import { ReactWidgetModuleExportable } from "../react-module";
 import { makeReactModuleFile, ReactModuleFile } from "../react-module-file";
+import { cssToJson } from "@web-builder/styles/_utils";
+import { CSSProperties } from "@coli.codes/css";
 
 /**
  * CSS In JS Style builder for React Framework
@@ -66,17 +73,57 @@ export class ReactCssInJSBuilder {
   }
 
   private jsxBuilder(widget: JsxWidget) {
-    // TODO: add attributes transformer, inject style={{ ...}}
-
-    // const transformer = (style: string) => {
-    //   const styleobj = css.utils.cssToJson(style);
-    //   new JSXAttribute("style", styleobj);
-    // };
-
     return buildJsx(
       widget,
       {
-        styledConfig: (id) => this.styledConfig(id),
+        styledConfig: (id) => {
+          const cfg = this.styledConfig(id);
+          const _default_attr = cfg.attributes;
+
+          const existingstyleattr = _default_attr?.find(
+            // where style refers to react's jsx style attribute
+            (a) => a.name.name === "style"
+          );
+
+          let style: JSXAttribute;
+          if (existingstyleattr) {
+            // ignore this case. (element already with style attriibute may be svg element)
+            // this case is not supported. (should supported if the logic changes)
+          } else {
+            //
+            const styledata: CSSProperties =
+              (cfg as JSXWithStyleElementConfig).style ?? {};
+            const reactStyleData = cssToJson(styledata);
+            const properties: PropertyAssignment[] = Object.keys(
+              reactStyleData
+            ).map(
+              (key) =>
+                new PropertyAssignment({
+                  name: key as unknown as Identifier,
+                  initializer: new StringLiteral(reactStyleData[key]),
+                })
+            );
+
+            style = new JSXAttribute(
+              "style",
+              new BlockStatement(
+                new ObjectLiteralExpression({
+                  properties: properties,
+                })
+              )
+            );
+          }
+
+          const newattributes = [
+            ...(_default_attr ?? []),
+            //
+            style,
+          ];
+
+          cfg.attributes = newattributes;
+
+          return cfg;
+        },
       },
       {
         self_closing_if_possible: true,

yarn.lock

@@ -6104,6 +6104,11 @@
     "@types/connect" "*"
     "@types/node" "*"
 
+"@types/camelcase-css@^2.0.0":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/@types/camelcase-css/-/camelcase-css-2.0.0.tgz#9604ffb754861b348e1f361c40fbf4d94d43b890"
+  integrity sha512-HSD3U+7+1BneOuIcvn3SUJHmEhPZGM6h5wUBQ3L7LL8VAIx2THIlN8HMH2ylxF4yuxu93UAFTcmeb+MT2Dozkg==
+
 "@types/clone@2.1.1":
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/@types/clone/-/clone-2.1.1.tgz#9b880d0ce9b1f209b5e0bd6d9caa38209db34024"
@@ -8174,7 +8179,7 @@ camel-case@^4.1.1:
     pascal-case "^3.1.2"
     tslib "^2.0.3"
 
-camelcase-css@2.0.1:
+camelcase-css@2.0.1, camelcase-css@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/camelcase-css/-/camelcase-css-2.0.1.tgz#ee978f6947914cc30c6b44741b6ed1df7f043fd5"
   integrity sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==