add parameter call style styled component declaration for solid

packages/builder-react-native/rn-build-inline-style-widget/rn-inline-style-module-builder.ts

@@ -4,6 +4,7 @@ import {
   reactnative as reactnative_config,
 } from "@designto/config";
 import type { JsxWidget } from "@web-builder/core";
+import { Framework } from "@grida/builder-platform-types";
 import {
   react_imports,
   ReactWidgetModuleExportable,
@@ -66,10 +67,14 @@ export class ReactNativeInlineStyleBuilder {
       ReservedKeywordPlatformPresets.react
     );
 
-    this.stylesMapper = new StylesConfigMapBuilder(entry, {
-      namer: this.namer,
-      rename_tag: false,
-    });
+    this.stylesMapper = new StylesConfigMapBuilder(
+      entry,
+      {
+        namer: this.namer,
+        rename_tag: false,
+      },
+      Framework.reactnative
+    );
   }
 
   private stylesConfig(

packages/builder-react-native/rn-build-styled-component-widget/rn-styled-components-module-builder.ts

@@ -25,6 +25,7 @@ import {
   create_duplication_reduction_map,
 } from "@web-builder/styled";
 import { makeEsWidgetModuleFile } from "@web-builder/module-es";
+import { Framework } from "@grida/builder-platform-types";
 
 export class ReactNativeStyledComponentsModuleBuilder {
   private readonly entry: JsxWidget;
@@ -48,10 +49,14 @@ export class ReactNativeStyledComponentsModuleBuilder {
       ReservedKeywordPlatformPresets.react
     );
 
-    this.stylesMapper = new StylesConfigMapBuilder(entry, {
-      namer: this.namer,
-      rename_tag: true /** styled component tag shoule be renamed */,
-    });
+    this.stylesMapper = new StylesConfigMapBuilder(
+      entry,
+      {
+        namer: this.namer,
+        rename_tag: true /** styled component tag shoule be renamed */,
+      },
+      Framework.reactnative
+    );
 
     this.stylesRepository = new StylesRepository(
       this.stylesMapper.map,

packages/builder-react-native/rn-build-stylesheet-widget/rn-style-sheet-module-builder.ts

@@ -30,6 +30,7 @@ import { reactnative_imports } from "../rn-import-specifications";
 import { StyleSheetDeclaration } from "../rn-style-sheet";
 import { create_duplication_reduction_map } from "@web-builder/styled";
 import { makeEsWidgetModuleFile } from "@web-builder/module-es";
+import { Framework } from "@grida/builder-platform-types";
 
 export class ReactNativeStyleSheetModuleBuilder {
   private readonly entry: JsxWidget;
@@ -53,10 +54,14 @@ export class ReactNativeStyleSheetModuleBuilder {
       ReservedKeywordPlatformPresets.react
     );
 
-    this.stylesMapper = new StylesConfigMapBuilder(entry, {
-      namer: this.namer,
-      rename_tag: false /** rn StyleSheet tag shoule not be renamed */,
-    });
+    this.stylesMapper = new StylesConfigMapBuilder(
+      entry,
+      {
+        namer: this.namer,
+        rename_tag: false /** rn StyleSheet tag shoule not be renamed */,
+      },
+      Framework.reactnative
+    );
 
     this.stylesRepository = new StylesRepository(
       this.stylesMapper.map,

packages/builder-web-core/builders/build-style-map.ts

@@ -3,6 +3,7 @@ import { WidgetKeyId, StylableJsxWidget, JsxWidget } from "@web-builder/core";
 import { JSXAttributes, JSXIdentifier, ScopedVariableNamer } from "coli";
 import { buildStyledComponentConfig } from "@web-builder/styled";
 import assert from "assert";
+import { Framework } from "@grida/builder-platform-types";
 
 export interface JSXWithStyleElementConfig {
   id: string;
@@ -46,14 +47,13 @@ interface StylesConfigMapBuilderPreference {
  * optimizer can be passed here to reduce the output size of the config map.
  */
 export class StylesConfigMapBuilder {
-  readonly root: JsxWidget;
-  readonly preferences: StylesConfigMapBuilderPreference;
   private _map: WidgetStyleConfigMap = new Map();
 
-  constructor(root: JsxWidget, preferences: StylesConfigMapBuilderPreference) {
-    this.root = root;
-    this.preferences = preferences;
-
+  constructor(
+    readonly root: JsxWidget,
+    readonly preferences: StylesConfigMapBuilderPreference,
+    readonly framework: Framework
+  ) {
     this._mapper(this.root);
   }
 
@@ -75,6 +75,7 @@ export class StylesConfigMapBuilder {
         context: {
           root: isRoot,
         },
+        framework: this.framework,
       });
 
       // set to map

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

@@ -25,6 +25,7 @@ import {
 import { react as react_config } from "@designto/config";
 import { create_duplication_reduction_map } from "@web-builder/styled";
 import { makeEsWidgetModuleFile } from "@web-builder/module-es";
+import { Framework } from "@grida/builder-platform-types";
 
 /**
  * CSS Module Builder for React Framework
@@ -54,10 +55,14 @@ export class ReactCssModuleBuilder {
       ReservedKeywordPlatformPresets.react
     );
 
-    this.stylesMapper = new StylesConfigMapBuilder(entry, {
-      namer: this.namer,
-      rename_tag: false /** css-module tag shoule not be renamed */,
-    });
+    this.stylesMapper = new StylesConfigMapBuilder(
+      entry,
+      {
+        namer: this.namer,
+        rename_tag: false /** css-module tag shoule not be renamed */,
+      },
+      Framework.react
+    );
     this.stylesRepository = new StylesRepository(
       this.stylesMapper.map,
       create_duplication_reduction_map

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

@@ -26,6 +26,7 @@ import {
 import { cssToJson } from "@web-builder/styles/_utils";
 import { CSSProperties } from "@coli.codes/css";
 import { makeEsWidgetModuleFile } from "@web-builder/module-es";
+import { Framework } from "@grida/builder-platform-types";
 
 /**
  * InlineCss Style builder for React Framework
@@ -61,10 +62,14 @@ export class ReactInlineCssBuilder {
       ReservedKeywordPlatformPresets.react
     );
 
-    this.stylesMapper = new StylesConfigMapBuilder(entry, {
-      namer: this.namer,
-      rename_tag: false,
-    });
+    this.stylesMapper = new StylesConfigMapBuilder(
+      entry,
+      {
+        namer: this.namer,
+        rename_tag: false,
+      },
+      Framework.react
+    );
   }
 
   private stylesConfig(

packages/builder-web-react/react-styled-component-widget/react-styled-components-module-builder.ts

@@ -25,6 +25,7 @@ import {
   create_duplication_reduction_map,
 } from "@web-builder/styled";
 import { makeEsWidgetModuleFile } from "@web-builder/module-es";
+import { Framework } from "@grida/builder-platform-types";
 
 export class ReactStyledComponentsBuilder {
   private readonly entry: JsxWidget;
@@ -48,10 +49,14 @@ export class ReactStyledComponentsBuilder {
       ReservedKeywordPlatformPresets.react
     );
 
-    this.stylesMapper = new StylesConfigMapBuilder(entry, {
-      namer: this.namer,
-      rename_tag: true /** styled component tag shoule be renamed */,
-    });
+    this.stylesMapper = new StylesConfigMapBuilder(
+      entry,
+      {
+        namer: this.namer,
+        rename_tag: true /** styled component tag shoule be renamed */,
+      },
+      Framework.react
+    );
 
     this.stylesRepository = new StylesRepository(
       this.stylesMapper.map,

packages/builder-web-solid/solid-styled-component-widget/solid-styled-components-module-builder.ts

@@ -24,6 +24,7 @@ import {
   EsWidgetModuleExportable,
   makeEsWidgetModuleFile,
 } from "@web-builder/module-es";
+import { Framework } from "@grida/builder-platform-types";
 
 export class SolidStyledComponentsBuilder {
   private readonly entry: JsxWidget;
@@ -47,10 +48,14 @@ export class SolidStyledComponentsBuilder {
       ReservedKeywordPlatformPresets.react
     );
 
-    this.stylesMapper = new StylesConfigMapBuilder(entry, {
-      namer: this.namer,
-      rename_tag: true /** styled component tag shoule be renamed */,
-    });
+    this.stylesMapper = new StylesConfigMapBuilder(
+      entry,
+      {
+        namer: this.namer,
+        rename_tag: true /** styled component tag shoule be renamed */,
+      },
+      Framework.solid
+    );
 
     this.stylesRepository = new StylesRepository(
       this.stylesMapper.map,

packages/builder-web-styled-components/core/compose-styled-component-declaration.ts

@@ -4,11 +4,13 @@ import type { NamePreference } from "./types";
 import { handle } from "@coli.codes/builder";
 import { StyledComponentDeclaration } from "./styled-component-declaration";
 import type { Html5IdentifierNames } from "@coli.codes/jsx-core";
+import { Framework } from "@grida/builder-platform-types";
 
 export function composeStyledComponentVariableDeclaration(
   widgetConfig: WidgetWithStyle,
   preferences: {
     name?: NamePreference;
+    framework?: Framework;
   }
 ): StyledComponentDeclaration {
   const jsxconfg = widgetConfig.jsxConfig() as StylableJSXElementConfig;
@@ -36,6 +38,10 @@ export function composeStyledComponentVariableDeclaration(
   const should_be_styled = style_data !== null;
   if (should_be_styled) {
     return new StyledComponentDeclaration(varname, {
+      type:
+        preferences.framework == Framework.solid
+          ? "parameter-call"
+          : "tagged-template",
       style: style_data,
       identifier: handle(jsxconfg.tag).name as Html5IdentifierNames,
     });

packages/builder-web-styled-components/core/styled-component-declaration.ts

@@ -1,7 +1,10 @@
 import {
+  CallExpression,
+  HTML5IDENTIFIERNAMES,
   Html5IdentifierNames,
   Identifier,
   PropertyAccessExpression,
+  StringLiteral,
   TaggedTemplateExpression,
   TemplateLiteral,
   VariableDeclaration,
@@ -10,32 +13,46 @@ import { SyntaxKind } from "@coli.codes/core-syntax-kind";
 import { CSSProperties, buildCSSStyleData } from "@coli.codes/css";
 import { formatStyledTempplateString } from "../formatter";
 
+type StyledComponentDeclarationInitializerIdentifierOption<T extends string> =
+  | {
+      type: "tagged-template";
+      identifier: T;
+    }
+  | {
+      type: "parameter-call";
+      identifier: Html5IdentifierNames;
+    };
+
+/**
+ * taggged template - styled.div`${style}`
+ * parameter call - styled("div")`${style(props)}` (only sting)
+ */
+export type StyledComponentDeclarationInitializer<
+  T extends string = Html5IdentifierNames
+> = {
+  style: CSSProperties;
+} & StyledComponentDeclarationInitializerIdentifierOption<T>;
+
 export class StyledComponentDeclaration extends VariableDeclaration {
   static styledIdentifier = new Identifier("styled");
-
-  styledAccessorIdentifier: Html5IdentifierNames;
+  private initialization: StyledComponentDeclarationInitializer;
   constructor(
     readonly name: string,
-    params: {
-      style: CSSProperties;
-      identifier: Html5IdentifierNames;
-    }
+    initializer: StyledComponentDeclarationInitializer
   ) {
     super(name, {
       initializer: StyledComponentDeclaration.makeinitializer(
-        params.style,
-        params.identifier
+        initializer.style,
+        initializer.identifier,
+        initializer.type
       ),
       kind: SyntaxKind.ConstKeyword,
     });
 
-    this.styledAccessorIdentifier = params.identifier;
+    this.initialization = initializer;
   }
 
-  static makeinitializer(
-    style: CSSProperties,
-    html5tag: Html5IdentifierNames
-  ): TaggedTemplateExpression {
+  static makeStyleBody(style: CSSProperties) {
     const { main, pseudo } = buildCSSStyleData(style);
 
     const pseudos = Object.keys(pseudo).map((k) => {
@@ -49,14 +66,46 @@ export class StyledComponentDeclaration extends VariableDeclaration {
     const body = [main, ...pseudos].join("\n");
 
     const _fmted_body = formatStyledTempplateString(body);
-    return new TaggedTemplateExpression(
-      new PropertyAccessExpression(
-        StyledComponentDeclaration.styledIdentifier,
-        html5tag
-      ),
-      {
-        template: new TemplateLiteral(`\n${_fmted_body}\n`),
+
+    return _fmted_body;
+  }
+
+  static makeinitializer(
+    style: CSSProperties,
+    identifier: string,
+    type: StyledComponentDeclarationInitializerIdentifierOption<any>["type"] = "tagged-template"
+  ): TaggedTemplateExpression {
+    let tag;
+    switch (type) {
+      // styled("div")`${style}`
+      // styled(Container)`${style}`
+      case "parameter-call": {
+        // check if the identifier is a html5 identifier. if not, then do not make it a string literal.
+        let arg;
+        if (HTML5IDENTIFIERNAMES.includes(identifier)) {
+          arg = new StringLiteral(identifier);
+        } else {
+          arg = new Identifier(identifier);
+        }
+
+        tag = new CallExpression(
+          StyledComponentDeclaration.styledIdentifier,
+          arg
+        );
+        break;
+      }
+      // styled.div`${style}`
+      case "tagged-template": {
+        tag = new PropertyAccessExpression(
+          StyledComponentDeclaration.styledIdentifier,
+          identifier
+        );
+        break;
       }
-    );
+    }
+
+    return new TaggedTemplateExpression(tag, {
+      template: new TemplateLiteral(`\n${this.makeStyleBody(style)}\n`),
+    });
   }
 }

packages/builder-web-styled-components/main.ts

@@ -1,5 +1,6 @@
 import { handle } from "@coli.codes/builder";
 import { ScopedVariableNamer } from "@coli.codes/naming";
+import { Framework } from "@grida/builder-platform-types";
 import { WidgetWithStyle } from "@web-builder/core";
 import { JSXIdentifier } from "coli";
 import {
@@ -35,6 +36,7 @@ export function buildStyledComponentConfig(
        */
       root: boolean;
     };
+    framework: Framework;
   }
 ): StyledComponentJSXElementConfig | NoStyleJSXElementConfig {
   const config = widget.jsxConfig() as StyledComponentJSXElementConfig;
@@ -49,6 +51,7 @@ export function buildStyledComponentConfig(
 
   const styledVar = composeStyledComponentVariableDeclaration(widget, {
     name: namePref,
+    framework: preferences.framework,
   });
 
   if (styledVar) {