diff --git a/src/webparts/palettePicker/PalettePickerWebPart.tsx b/src/webparts/palettePicker/PalettePickerWebPart.tsx
index b24da0926..d03ad9513 100644
--- a/src/webparts/palettePicker/PalettePickerWebPart.tsx
+++ b/src/webparts/palettePicker/PalettePickerWebPart.tsx
@@ -16,7 +16,8 @@ import { PropertyPaneHost } from 'property-pane-portal';
 import { update } from '@microsoft/sp-lodash-subset';
 
 export interface IPalettePickerWebPartProps {
-  cssObjectText;
+  //cssObjectText: string;
+  //colorObject: any;
 }
 
 
@@ -54,13 +55,13 @@ export default class PalettePickerWebPart extends BaseClientSideWebPart<IPalette
 
 
 
-  public updateWebPartProperty(property, value, isObj) {
+  public updateWebPartProperty(property, value) {
 
-    if(isObj != true) {
+   // if(isObj != true) {
     update(this.properties, property, () => value);
-    } else {
-      update(this.properties, property, () => JSON.stringify(value));
-    }
+   // } else {
+   //   update(this.properties, property, () => JSON.stringify(value));
+   // }
     this.render();
   
   }
@@ -98,6 +99,7 @@ export default class PalettePickerWebPart extends BaseClientSideWebPart<IPalette
                 
                 }),
                 PropertyPaneHost('fieldSetDisplay', hostProperties),
+                //TODO: get the text of the object here, or otherwise somehow send the object up the line for use in the web part
                 PropertyPaneTextField('cssObjectText', {
                   label: "CSS Object",
                   disabled: false,
diff --git a/src/webparts/palettePicker/components/Colors.tsx b/src/webparts/palettePicker/components/Colors.tsx
index 52e944513..5fb05a533 100644
--- a/src/webparts/palettePicker/components/Colors.tsx
+++ b/src/webparts/palettePicker/components/Colors.tsx
@@ -13,6 +13,7 @@ export const Colors: React.FC<IColorsProps> = (props) => {
 
     return (
         <div>
+            <div>:root &#123;</div>
         {
                Object.keys(props.colorObject).map((key) => {
                 return (
@@ -22,6 +23,8 @@ export const Colors: React.FC<IColorsProps> = (props) => {
                }) 
             }
 
+            <div>&#125;</div>
+
         </div>
     );
 };
\ No newline at end of file
diff --git a/src/webparts/palettePicker/components/CustomPropertyPane.tsx b/src/webparts/palettePicker/components/CustomPropertyPane.tsx
index 8b7901eb3..a4fec5727 100644
--- a/src/webparts/palettePicker/components/CustomPropertyPane.tsx
+++ b/src/webparts/palettePicker/components/CustomPropertyPane.tsx
@@ -5,6 +5,7 @@ import styles from './CustomPropertyPane.module.scss';
 import { Range } from 'react-range';
 import { composeComponentAs } from 'office-ui-fabric-react';
 import { Colors } from './Colors';
+import { escape } from '@microsoft/sp-lodash-subset';
 
 
 /*
@@ -49,26 +50,10 @@ const getCode = (hue, saturation, lightness, shades) => {
     } catch(ex) {console.log("obj problems"); }
    // console.log("RESULT:", RESULT);
    //console.log("color obj:", obj);
-    return [obj, JSON.stringify(obj).replace(/['"]+/g, '')];
+    return obj; //, JSON.stringify(obj)];// .replace(/['"]+/g, '')];
   }
 
- const cssStyles = (obj) => {
-    //console.log("OBJ:", obj);
-   // let cssText:string = ":root {";
-    let cssText:string = "";
 
-  Object.keys(obj).map((key) => {
-                console.log(key + ":" + obj[key]);
-                let txt = key + ":" + obj[key];
-                cssText += txt + "; "  ;
-            });
-
-           // cssText += "}";
-
-
-        return cssText;
-
-  }
 
 export const CustomPropertyPane: React.FunctionComponent<ICustomPropertyPaneProps> = (props) => {
 
@@ -82,7 +67,8 @@ export const CustomPropertyPane: React.FunctionComponent<ICustomPropertyPaneProp
             setColorObj(cssObject(props.properties["fieldSetHue"], props.properties["fieldSetSat"],props.properties["fieldSetLight"],props.properties["fieldSetShades"][0]));
             console.log("COBJ:",colorObj);
            // props.updateWebPartProperty("cssObjectText", JSON.stringify(colorObj[0]));
-            props.updateWebPartProperty("cssObjectText", colorObj[0], true);
+           // props.updateWebPartProperty("cssObjectText", JSON.stringify(colorObj));
+            props.updateWebPartProperty("cssObjectText", "some text");
         }
         catch(ex) {
             console.log("color issues");
@@ -109,8 +95,8 @@ export const CustomPropertyPane: React.FunctionComponent<ICustomPropertyPaneProp
                                 props.updateWebPartProperty("fieldSetHue", values);
                                 setColorObj(cssObject(props.properties["fieldSetHue"], props.properties["fieldSetSat"],props.properties["fieldSetLight"],props.properties["fieldSetShades"][0]));
                                 //props.updateWebPartProperty("cssObjectText", cssStyles(colorObj));
-                                console.log(colorObj);
-                                props.updateWebPartProperty("cssObjectText", colorObj[0], true); //JSON.stringify(colorObj).replace(/['"]+/g, ''));
+                                console.log(escape(JSON.stringify(colorObj)));
+                                props.updateWebPartProperty("cssObjectText", escape(JSON.stringify(colorObj))); //JSON.stringify(colorObj).replace(/['"]+/g, ''));
 
                         }}
                 renderTrack={({ props, children }) => (
@@ -271,7 +257,7 @@ export const CustomPropertyPane: React.FunctionComponent<ICustomPropertyPaneProp
             </fieldset>
             <fieldset data-property="fieldSetDisplay" className={styles.CustomPropertyPane} >
             <Colors
-            colorObject = {colorObj[0]}
+            colorObject = {colorObj}
             fontColor = {props.properties["fontColor"]}
             context = {props.context}
             ></Colors>