Purge all references to _css prop or saving stylesheets

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

@@ -83,8 +83,7 @@ export const getFrontendStore = () => {
       },
     },
     screens: {
-      select: async screenId => {
-        let promise
+      select: screenId => {
         store.update(state => {
           const screens = get(allScreens)
           let selectedScreen = screens.find(screen => screen._id === screenId)
@@ -94,11 +93,9 @@ export const getFrontendStore = () => {
           state.currentFrontEndType = FrontendTypes.SCREEN
           state.currentAssetId = selectedScreen._id
           state.currentView = "detail"
-          promise = store.actions.screens.regenerateCss(selectedScreen)
           state.selectedComponentId = selectedScreen.props._id
           return state
         })
-        await promise
       },
       create: async screen => {
         screen = await store.actions.screens.save(screen)
@@ -136,16 +133,6 @@ export const getFrontendStore = () => {
         })
         return screen
       },
-      regenerateCss: async asset => {
-        const response = await api.post("/api/css/generate", asset)
-        asset._css = (await response.json())?.css
-      },
-      regenerateCssForCurrentScreen: async () => {
-        const asset = get(currentAsset)
-        if (asset) {
-          await store.actions.screens.regenerateCss(asset)
-        }
-      },
       delete: async screens => {
         const screensToDelete = Array.isArray(screens) ? screens : [screens]
 
@@ -179,29 +166,18 @@ export const getFrontendStore = () => {
       },
     },
     layouts: {
-      select: async layoutId => {
+      select: layoutId => {
         store.update(state => {
           const layout = store.actions.layouts.find(layoutId)
-
           state.currentFrontEndType = FrontendTypes.LAYOUT
           state.currentView = "detail"
-
           state.currentAssetId = layout._id
           state.selectedComponentId = layout.props._id
-
           return state
         })
-        let cssPromises = []
-        cssPromises.push(store.actions.screens.regenerateCssForCurrentScreen())
-
-        for (let screen of get(allScreens)) {
-          cssPromises.push(store.actions.screens.regenerateCss(screen))
-        }
-        await Promise.all(cssPromises)
       },
       save: async layout => {
         const layoutToSave = cloneDeep(layout)
-        delete layoutToSave._css
 
         const response = await api.post(`/api/layouts`, layoutToSave)
 
@@ -371,7 +347,6 @@ export const getFrontendStore = () => {
           const index = mode === "above" ? targetIndex : targetIndex + 1
           parent._children.splice(index, 0, cloneDeep(componentToPaste))
 
-          promises.push(store.actions.screens.regenerateCssForCurrentScreen())
           promises.push(store.actions.preview.saveSelected())
           store.actions.components.select(componentToPaste)
 
@@ -389,8 +364,6 @@ export const getFrontendStore = () => {
           }
           selected._styles[type][name] = value
 
-          promises.push(store.actions.screens.regenerateCssForCurrentScreen())
-
           // save without messing with the store
           promises.push(store.actions.preview.saveSelected())
           return state
@@ -475,13 +448,9 @@ export const getFrontendStore = () => {
                 }).props
               }
 
-              // Save layout and regenerate all CSS because otherwise weird things happen
+              // Save layout
               nav._children = [...nav._children, newLink]
               state.currentAssetId = layout._id
-              promises.push(store.actions.screens.regenerateCss(layout))
-              for (let screen of get(allScreens)) {
-                promises.push(store.actions.screens.regenerateCss(screen))
-              }
               promises.push(store.actions.layouts.save(layout))
             }
             return state