Separate config from source

Author: nousantx

app/packages/config/index.js

@@ -0,0 +1,13 @@
+import { property } from './lib/properties'
+import { values } from './lib/values'
+import { classes } from './lib/classes'
+
+const config = {
+  property,
+  values,
+  classes,
+  attributify: true
+}
+
+export { config, property, values, classes }
+export default { config, property, values, classes }

app/src/styles/lib/classes.js app/packages/config/lib/classes.js

@@ -10,20 +10,17 @@ export const color = {
   amber: '#f49c09',
   gold: '#ffd700',
   yellow: '#f1c230',
-
   chartreuse: '#7fff00',
   lime: '#91e411',
   green: '#15e05f',
   emerald: '#13cb8e',
   teal: '#12c39f',
   aquamarine: '#7fffd4',
-
   turquoise: '#40e0d0',
   cyan: '#21d2f1',
   sky: '#0ea5e9',
   blue: '#3d82f2',
   navy: '#0000a8',
-
   indigo: '#6f72f7',
   violet: '#7844f0',
   purple: '#a855f7',
@@ -32,12 +29,10 @@ export const color = {
   fuchsia: '#d642ec',
   pink: '#f32d8f',
   rose: '#eb3756',
-
   slate: '#636c7c',
   zinc: '#71757a',
   gray: '#696a6a',
   neutral: '#737373',
-
   olive: '#e2e200',
   beige: '#f5f5dc',
   khaki: '#c3b091',
@@ -49,9 +44,6 @@ export const color = {
 }
 
 export const colors = generateColors({
-  option: {
-    format: 'object2',
-    output: 'rgb-only'
-  },
+  option: { format: 'object2', output: 'rgb-only' },
   color
 })

app/src/styles/lib/color.js app/packages/config/lib/color.js

@@ -1,4 +1,5 @@
 export const globalStyles = `
+(*): family-sans;
 (body): fw-500 bg-neutral-50 text-neutral-950;
 (.btn): [all]-unset h-40px d-inline-flex flex-parent-center px-12px [cursor]-pointer bg-neutral-900 hover:bg-neutral-800 tr-time-300ms text-neutral-50 br-8px fs-14px fw-500;
 (.btn.btn-icon): box-40px p-0;

app/src/styles/lib/global.js app/packages/config/lib/global.js

@@ -1,8 +1,8 @@
+import fs from 'node:fs'
+import path from 'node:path'
 import resolve from '@rollup/plugin-node-resolve'
 import commonjs from '@rollup/plugin-commonjs'
 import terser from '@rollup/plugin-terser'
-import fs from 'node:fs'
-import path from 'node:path'
 
 const packageJson = JSON.parse(fs.readFileSync(path.resolve('package.json'), 'utf-8'))
 
@@ -14,7 +14,7 @@ const banner = `/*!
  *
  * Built Date: ${new Date().toString()}
  */`
-console.log(banner)
+
 const terserConfig = {
   format: {
     comments: false,
@@ -27,31 +27,28 @@ const terserConfig = {
 }
 
 const config = {
-  input: './src/styles/lib/config.js',
+  input: './packages/config/index.js',
   output: [
     {
       file: 'plugin/index.cjs',
       format: 'cjs',
       exports: 'named',
-      banner,
-      plugins: [terser(terserConfig)]
+      banner
     },
     {
       file: 'plugin/index.umd.js',
       format: 'umd',
       name,
       banner,
-      exports: 'named',
-      plugins: [terser(terserConfig)]
+      exports: 'named'
     },
     {
       file: 'plugin/index.esm.js',
       format: 'es',
-      banner,
-      plugins: [terser(terserConfig)]
+      banner
     }
   ],
-  plugins: [resolve(), commonjs()]
+  plugins: [resolve(), commonjs(), terser(terserConfig)]
 }
 
 export default config

app/src/styles/lib/properties.js app/packages/config/lib/properties.js

@@ -1,7 +1,7 @@
 import { useLayoutEffect } from 'preact/hooks'
 import { MakeTenoxUI } from '@tenoxui/core/full'
-import { globalStyles } from './lib/global'
-import { tenoxuiConfig as config } from './lib/config'
+import { globalStyles } from '@app/packages/config/lib/global'
+import { config } from '@app/packages/config'
 
 export function init() {
   useLayoutEffect(() => {
@@ -12,4 +12,4 @@ export function init() {
   }, [])
 }
 
-export { tenoxuiConfig } from './lib/config'
+export { config } from '@app/packages/config'