Merge pull request #118 from gridaco/support-css-in-js

React Inline CSS Support

Author: softmarshmallow

editor-packages/editor-canvas/math/center-of.ts

@@ -55,8 +55,6 @@ export function centerOf(
     vbcenter[1] - boxcenter[1] * scale,
   ];
 
-  console.log(translate, scale);
-
   return {
     box: box,
     center: boxcenter,

editor/components/codeui-code-options-control/code-options-control.tsx

@@ -49,6 +49,11 @@ export function CodeOptionsControl(props: CodeOptionsControlProps) {
         value: "react_with_styled_components",
         description: "with styled-component",
       },
+      {
+        name: "React",
+        value: "react_with_inline_css",
+        description: "with inline-css",
+      },
       {
         name: "Flutter",
         value: "flutter_default",

editor/components/codeui-code-options-control/framework-options.ts

@@ -7,7 +7,7 @@ export enum Language {
   html = "html",
 }
 
-export type ReactStylingStrategy = "css" | "styled-components" | "css-in-jsx";
+export type ReactStylingStrategy = "css" | "styled-components" | "inline-css";
 
 export interface FlutterOption {
   framework: Framework.flutter;
@@ -38,10 +38,10 @@ export const react_presets = {
     language: Language.tsx,
     styling: "styled-components",
   },
-  react_with_css_in_jsx: <ReactOption>{
+  react_with_inline_css: <ReactOption>{
     framework: Framework.react,
     language: Language.tsx,
-    styling: "css-in-jsx",
+    styling: "inline-css",
   },
   react_with_css: <ReactOption>{
     framework: Framework.react,
@@ -74,8 +74,8 @@ export const all_preset_options__prod = [
   flutter_presets.flutter_default,
   react_presets.react_default,
   react_presets.react_with_styled_components,
+  react_presets.react_with_inline_css,
   vanilla_presets.vanilla_default,
-  // react_with_css_in_jsx // NOT ON PRODUCTION
   // react_with_css // NOT ON PRODUCTION
 ];
 
@@ -84,8 +84,8 @@ export const all_preset_options_map__prod = {
   flutter_default: flutter_presets.flutter_default,
   react_default: react_presets.react_default,
   react_with_styled_components: react_presets.react_with_styled_components,
+  react_with_inline_css: react_presets.react_with_inline_css,
   vanilla_default: vanilla_presets.vanilla_default,
-  // react_with_css_in_jsx // NOT ON PRODUCTION
   // react_with_css // NOT ON PRODUCTION
 };
 
@@ -97,7 +97,7 @@ export const lang_by_framework = {
 
 export const react_styles: ReactStylingStrategy[] = [
   "styled-components",
-  "css-in-jsx",
+  "inline-css",
   "css",
 ];
 

editor/pages/figma/to-flutter.tsx

@@ -30,9 +30,13 @@ export function get_framework_config(framework: string) {
     case "react.default":
       return react_presets.react_default;
     case "react-with-styled-components":
+    case "react_with_styled_components":
       return react_presets.react_with_styled_components;
     case "react-with-emotion-styled":
       return react_presets.react_with_emotion_styled;
+    case "react_with_inline_css":
+    case "react-with-inline-css":
+      return react_presets.react_with_inline_css;
     case "flutter":
     case "flutter_default":
     case "flutter-default":

editor/pages/figma/to-react.tsx

@@ -109,15 +109,37 @@ export function CodeSegment() {
   }, [targetted?.id, framework_config]);
 
   const { code, scaffold, name: componentName } = result ?? {};
-
   return (
     <CodeEditorContainer>
       <EditorAppbarFragments.CodeEditor />
       <CodeOptionsControl
         initialPreset={router.query.framework as string}
         fallbackPreset="react_default"
         onUseroptionChange={(o) => {
-          set_framework_config(get_framework_config(o.framework));
+          let c;
+          switch (o.framework) {
+            case "react": {
+              switch (o.styling) {
+                case "inline-css":
+                  c = get_framework_config("react-with-inline-css");
+                  break;
+                case "styled-components":
+                  c = get_framework_config("react-with-styled-components");
+                  break;
+                case "css":
+                  // TODO:
+                  break;
+              }
+              break;
+            }
+            case "flutter":
+              c = get_framework_config(o.framework);
+              break;
+            case "vanilla":
+              c = get_framework_config(o.framework);
+              break;
+          }
+          set_framework_config(c);
         }}
       />
       <CodeEditor