fix: ensure CSS is built on app creation

packages/builder/src/builderStore/store/index.js

@@ -24,6 +24,7 @@ import {
   saveCurrentPreviewItem as _saveCurrentPreviewItem,
   saveScreenApi as _saveScreenApi,
   regenerateCssForCurrentScreen,
+  regenerateCssForScreen,
   generateNewIdsForComponent,
   getComponentDefinition,
 } from "../storeUtils"
@@ -98,6 +99,29 @@ const setPackage = (store, initial) => async pkg => {
     },
   }
 
+  // if the app has just been created
+  // we need to build the CSS and save
+  if (pkg.justCreated) {
+    const generateInitialPageCss = async name => {
+      const page = pkg.pages[name]
+      regenerateCssForScreen(page)
+      for (let screen of page._screens) {
+        regenerateCssForScreen(screen)
+      }
+
+      await api.post(`/_builder/api/${pkg.application._id}/pages/${name}`, {
+        page: {
+          componentLibraries: pkg.application.componentLibraries,
+          ...page,
+        },
+        screens: page._screens,
+      })
+    }
+    generateInitialPageCss("main")
+    generateInitialPageCss("unauthenticated")
+    pkg.justCreated = false
+  }
+
   initial.libraries = pkg.application.componentLibraries
   initial.components = await fetchComponentLibDefinitions(pkg.application._id)
   initial.name = pkg.application.name

packages/builder/src/builderStore/storeUtils.js

@@ -79,10 +79,12 @@ export const walkProps = (props, action, cancelToken = null) => {
   }
 }
 
+export const regenerateCssForScreen = screen => {
+  screen._css = generate_screen_css([screen.props])
+}
+
 export const regenerateCssForCurrentScreen = state => {
-  state.currentPreviewItem._css = generate_screen_css([
-    state.currentPreviewItem.props,
-  ])
+  regenerateCssForScreen(state.currentPreviewItem)
   return state
 }
 

packages/builder/src/components/start/CreateAppModal.svelte

@@ -154,6 +154,7 @@
       const pkg = await applicationPkg.json()
       if (applicationPkg.ok) {
         backendUiStore.actions.reset()
+        pkg.justCreated = true
         await store.setPackage(pkg)
         automationStore.actions.fetch()
       } else {