Allow custom CSS to be bindable and allow overriding via conditional UI

packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ConditionalUIDrawer.svelte

@@ -57,8 +57,8 @@
 
   let dragDisabled = true
   $: settings = getComponentSettings($selectedComponent?._component)?.concat({
-    label: "CSS",
+    label: "Custom CSS",
-    key: "css",
+    key: "_css",
     type: "text",
   })
   $: settingOptions = settings.map(setting => ({

packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/CustomStylesSection.svelte

@@ -1,30 +1,41 @@
 <script>
   import {
-    TextArea,
     DetailSummary,
     ActionButton,
     Drawer,
-    DrawerContent,
-    Layout,
-    Body,
     Button,
     notifications,
   } from "@budibase/bbui"
-  import { store } from "builderStore"
+  import { selectedScreen, store } from "builderStore"
+  import ClientBindingPanel from "components/common/bindings/ClientBindingPanel.svelte"
+  import {
+    getBindableProperties,
+    readableToRuntimeBinding,
+    runtimeToReadableBinding,
+  } from "builderStore/dataBinding"
 
   export let componentInstance
 
   let tempValue
   let drawer
 
+  $: bindings = getBindableProperties(
+    $selectedScreen,
+    $store.selectedComponentId
+  )
+
   const openDrawer = () => {
-    tempValue = componentInstance?._styles?.custom
+    tempValue = runtimeToReadableBinding(
+      bindings,
+      componentInstance?._styles?.custom
+    )
     drawer.show()
   }
 
   const save = async () => {
     try {
-      await store.actions.components.updateCustomStyle(tempValue)
+      const value = readableToRuntimeBinding(bindings, tempValue)
+      await store.actions.components.updateCustomStyle(value)
     } catch (error) {
       notifications.error("Error updating custom style")
     }
@@ -42,26 +53,17 @@
 </DetailSummary>
 {#key componentInstance?._id}
   <Drawer bind:this={drawer} title="Custom CSS">
+    <svelte:fragment slot="description">
+      Custom CSS overrides all other component styles.
+    </svelte:fragment>
     <Button cta slot="buttons" on:click={save}>Save</Button>
-    <DrawerContent slot="body">
+    <svelte:component
-      <div class="content">
+      this={ClientBindingPanel}
-        <Layout gap="S" noPadding>
+      slot="body"
-          <Body size="S">Custom CSS overrides all other component styles.</Body>
+      value={tempValue}
-          <TextArea bind:value={tempValue} placeholder="Enter some CSS..." />
+      on:change={event => (tempValue = event.detail)}
-        </Layout>
+      allowJS
-      </div>
+      {bindings}
-    </DrawerContent>
+    />
   </Drawer>
 {/key}
-
-<style>
-  .content {
-    max-width: 800px;
-    margin: 0 auto;
-  }
-  .content :global(textarea) {
-    font-family: monospace;
-    min-height: 240px !important;
-    font-size: var(--font-size-s);
-  }
-</style>

packages/client/src/components/Component.svelte

@@ -142,6 +142,10 @@
   // Determine and apply settings to the component
   $: applySettings(staticSettings, enrichedSettings, conditionalSettings)
 
+  // Determine custom css.
+  // Broken out as a separate variable to minimize reactivity updates.
+  $: customCSS = cachedSettings?._css
+
   // Scroll the selected element into view
   $: selected && scrollIntoView()
 
@@ -151,6 +155,7 @@
     children: children.length,
     styles: {
       ...instance._styles,
+      custom: customCSS,
       id,
       empty: emptyState,
       interactive,
@@ -259,14 +264,18 @@
     // Get raw settings
     let settings = {}
     Object.entries(instance)
-      .filter(([name]) => name === "_conditions" || !name.startsWith("_"))
+      .filter(([name]) => !name.startsWith("_"))
       .forEach(([key, value]) => {
         settings[key] = value
       })
-
-    // Derive static, dynamic and nested settings if the instance changed
     let newStaticSettings = { ...settings }
     let newDynamicSettings = { ...settings }
+
+    // Attach some internal properties
+    newDynamicSettings["_conditions"] = instance._conditions
+    newDynamicSettings["_css"] = instance._styles?.custom
+
+    // Derive static, dynamic and nested settings if the instance changed
     settingsDefinition?.forEach(setting => {
       if (setting.nested) {
         delete newDynamicSettings[setting.key]
@@ -372,6 +381,10 @@
       initialSettings = cachedSettings
     } else {
       Object.keys(allSettings).forEach(key => {
+        if (key === "_css") {
+          console.log(enrichedSettings._css)
+        }
+
         const same = propsAreSame(allSettings[key], cachedSettings[key])
         if (!same) {
           // Updated cachedSettings (which is assigned by reference to
@@ -379,8 +392,10 @@
           // initial props are up to date. By setting it this way rather than
           // setting it on initialSettings directly, we avoid a double render.
           cachedSettings[key] = allSettings[key]
-          if (key === "css") {
+
-            instance._styles.custom = cachedSettings[key]
+          // Don't update components for internal properties
+          if (key.startsWith("_")) {
+            return
           }
 
           if (ref?.$$set) {