Output class namespace if defined in config

Author: rogden

server/index.js

@@ -15,7 +15,7 @@ router.get('/config', (ctx) => {
   // delete the require cache of tailwind config so we can pick up new changes
   delete require.cache[tailwindConfigPath]
   const tailwindConfig = require(tailwindConfigPath)
-  ctx.body = resolveConfig(tailwindConfig).theme
+  ctx.body = resolveConfig(tailwindConfig)
 })
 
 app

src/components/Canvas/Canvas.vue

@@ -50,6 +50,12 @@ export default {
     Spacing
   },
 
+  provide () {
+    return {
+      prefixClassName: this.prefixClassName
+    }
+  },
+
   data () {
     return {
       config: null,
@@ -58,10 +64,14 @@ export default {
   },
 
   methods: {
-    sectionComponent: (component) => {
+    sectionComponent (component) {
       return require(`./Sections/${component}.vue`).default
     },
 
+    prefixClassName (className) {
+      return this.config.prefix ? `${this.config.prefix}-${className}` : className
+    },
+
     fileSelected (e) {
       const fr = new FileReader()
       fr.onload = (e) => {
@@ -76,7 +86,7 @@ export default {
     const config = await fetch('/config')
     this.config = await config.json()
     console.log(this.config)
-    this.configTransformed = themeComponentMapper(this.config)
+    this.configTransformed = themeComponentMapper(this.config.theme)
   }
 }
 </script>

src/components/Canvas/CanvasBlockLabel.vue

@@ -13,7 +13,7 @@
       "
       readonly
       ref="label"
-      :value="label"
+      :value="prefixClassName(label)"
       @click="copy"
       @mouseover="showCopy"
       @mouseout="hideCopy"
@@ -26,11 +26,16 @@
 
 <script>
 export default {
+  inject: [
+    'prefixClassName'
+  ],
+
   props: {
     label: {
       type: String,
       required: true
     },
+
     value: {
       type: String,
       required: true