anubis-ui 1.1.0 → 1.2.1

package/README.md

@@ -146,18 +146,28 @@ For every config you want to change, add the corresponding section in your confi
   // colors.config.json
   "colors": ["primary", "secondary"],
 
-  // selectors.config.json
-  "selectors": {
-    "states": ["hover"],
-    "prefixes": ["bg", "text"]
-  },
+  // states.config.json
+  "states": ["hover"],
+
+  // qol.config.json
+  "qol": [
+    {
+      "prefix": "bg",
+      "declaration": "background: ${color}"
+    }
+  ],
 
   // presets.config.json
-  "presets": {
-    "border": [
-      { "default": "4px" }
-    ]
-  }
+  "presets": [
+    {
+      "prefix": "border",
+      "declaration": "border-width: ${value} !important; border-color: ${color} !important; border-style: solid;",
+      "variations": {
+        "default": "4px",
+        "thin": "2px"
+      }
+    }
+  ]
 }
 ```
 <sup>anubis.config.json (example)</sup>
@@ -212,65 +222,125 @@ Configure common style presets
 <summary>Default config</summary>
 
 ```json
-{
-  "border": [
-    { "default": "4px" },
-    { "thinest": "1px" },
-    { "thiner": "2px" },
-    { "thin": "3px" },
-    { "thick": "6px" },
-    { "thicker": "8px" },
-    { "thickest": "10px" },
-  ],
-
-  "innerBorder": [
-    { "default": "4px" },
-    { "thinest": "1px" },
-    { "thiner": "2px" },
-    { "thin": "3px" },
-    { "thick": "6px" },
-    { "thicker": "8px" },
-    { "thickest": "10px" },
-  ],
-
-  "shadow": [
-    { "default": "0px 0px 7px 1px" },
-    { "densest": "0px 0px 3px 1px" },
-    { "denser": "0px 0px 5px 1px" },
-    { "dense": "0px 0px 5px 1px" },
-    { "wide": "0px 0px 10px 1px" },
-    { "wider": "0px 0px 15px 1px" },
-    { "widest": "0px 0px 20px 1px" }
-  ]
-}
+[
+  {
+    "prefix": "bg",
+    "declaration": "background: ${color}"
+  },
+  {
+    "prefix": "border",
+    "declaration": "border-width: ${value} !important; border-color: ${color} !important; border-style: solid;",
+    "variations": {
+      "default": "4px",
+      "thinest": "1px",
+      "thiner": "2px",
+      "thin": "3px",
+      "thick": "6px",
+      "thicker": "8px",
+      "thickest": "10px",
+      "node": "0.2rem"
+    }
+  },
+  {
+    "prefix": "inner-border",
+    "declaration": "box-shadow: inset 0px 0px 0px ${value} ${color}",
+    "variations": {
+      "default": "4px",
+      "thinest": "1px",
+      "thiner": "2px",
+      "thin": "3px",
+      "thick": "6px",
+      "thicker": "8px",
+      "thickest": "10px",
+      "node": "0.2rem"
+    }
+  },
+  {
+    "prefix": "shadow",
+    "declaration": "box-shadow: ${value} ${color}",
+    "variations": {
+      "default": "0px 0px 7px 1px",
+      "densest": "0px 0px 3px 1px",
+      "denser": "0px 0px 5px 1px",
+      "dense": "0px 0px 5px 1px",
+      "wide": "0px 0px 10px 1px",
+      "wider": "0px 0px 15px 1px",
+      "widest": "0px 0px 20px 1px"
+    }
+  }
+]
 ```
 </details>
 
-
 ---
-### Selectors (`selectors.config.json`)
-Define available states and style prefixes
-
+### Quality of Life (`qol.config.json`)
+Define simple style rules that can have variations but don't require color values. These are CSS declarations that work independently.
 <details>
 <summary>Default config</summary>
 
 ```json
-{
-  "states": [
-      "hover",
-      "not-hover"
-  ],
-  "prefixes": [
-      "bg",
-      "text",
-      "border",
-      "inner-border",
-      "shadow"
-  ]
-}
+[
+  {
+    "prefix": "smooth",
+    "standalone": true,
+    "declaration": "transition-duration: ${value}",
+    "variations": {
+      "default": "0.1s",
+      "slowest": "0.5s",
+      "slower": "0.3s",
+      "slow": "0.2s",
+      "quick": "0.07s",
+      "quicker": "0.05s",
+      "quickest": "0.03s"
+    }
+  },
+  {
+    "prefix": "rounded",
+    "standalone": true,
+    "declaration": "border-radius: ${value}",
+    "variations": {
+      "default": "8px",
+      "square": "0px",
+      "xs": "2px",
+      "sm": "4px",
+      "md": "8px",
+      "lg": "12px",
+      "xl": "16px",
+      "very": "9999px",
+      "full": "50%",
+      "half": "100%"
+    }
+  },
+  {
+    "prefix": "border",
+    "declaration": "border-style: ${value}",
+    "variations": {
+      "solid": "solid",
+      "dashed": "dashed",
+      "dotted": "dotted"
+    }
+  }
+]
 ```
 </details>
 
+QoL rules can have:
+1. A prefix
+2. A declaration that uses ${value} for variations
+3. Optional variations with default values
+4. Optional `standalone` flag to allow usage without variations
+
+The `standalone` flag allows a QoL rule to be used without any variation. When set to `true`, the rule can be used:
+- With a variation: `rounded-lg`, `smooth-slow`
+- Without a variation: `rounded`, `smooth` (will use the default value)
+
+When `standalone` is `false` or not specified, the rule must always include a variation (e.g., `border-dashed`).
+
+Example usage:
+```html
+<div class="rounded-lg smooth-slow border-dashed" />
+<div class="rounded smooth" /> <!-- Works because these are standalone -->
+```
 
 ## Available Utility Classes
 #### Colors
@@ -312,11 +382,10 @@ Define available states and style prefixes
 ├── src/
 │ ├── config/ # Configuration files
 │ ├── interfaces/ # TypeScript interfaces
-│ ├── manual/ # Manually trigger anubis actions
 │ └── tools/
-│  ├── extract/ # Class extraction logic
-│  ├── declaration/ # WIP - Style declaration handlers
-│  └── mapping/ # Class to CSS rule mapping
+│   ├── extraction/ # Class extraction logic
+│   ├── fileStuff/ # File handling utilities
+│   └── mapping/ # Class to CSS rule mapping
 └── index.js # Plugin entry point
 ```
 

package/index.js

@@ -2,7 +2,7 @@
 
 const { init: initConfig } = require('./dist/config/config.tool');
 const { log, logPrefix, logo } = require('./dist/tools/logger');
-const { init: initClassExtraction } = require('./dist/tools/extract/classes');
+const { init: initClassExtraction } = require('./dist/tools/extraction/extractClasses');
 
 /** List every imported colors across the projet */
 const colors = [];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "anubis-ui",
-  "version": "1.1.0",
+  "version": "1.2.1",
   "description": "Class-based css generator",
   "main": "index.js",
   "keywords": [

package/src/config/config.tool.ts

@@ -1,47 +1,26 @@
-import { readUserConfigFile, userConfig } from "../tools/fileHandling/configFile"
+import { IEnvConfig } from "../interfaces/config.interface";
+import { readUserConfigFile, userConfig } from "../tools/fileStuff/configFile"
 import { log } from "../tools/logger"
 
 const fs = require('fs')
 const path = require('path')
 
-interface IPreset {
-  [key: string]: string
-}
-interface IEnvConfig {
-  files: {
-    targets: string|string[],
-    ignore: string[]
-  },
-  colors: string[],
-  selectors: {
-    states: string[],
-    prefixes: string[]
-  },
-  presets: {
-    'border': IPreset[],
-    'inner-border': IPreset[],
-    'shadow': IPreset[],
-  },
-  [key: string]: any
-}
-
 const anubisConfigFolder = path.join(__dirname, '..', '..', 'src', 'config');
 const anubisConfigFiles = [
+  'qol',
   'files',
   'colors',
+  'states',
   'presets',
-  'selectors'
 ]
 
 const config = {
+  qol: [],
+  presets: [],
+
   files: { targets: [], ignore: [] },
   colors: [],
-  selectors: { states: [], prefixes: [] },
-  presets: {
-    border: [],
-    "inner-border": [],
-    shadow: [],
-  },
+  states: [],
 } as IEnvConfig
 
 const init = () => {
@@ -69,6 +48,7 @@ const init = () => {
 }
 
 const checkUserConfig = () => {
+  if (!userConfig) { return }
 
   // todo - also check values
   const userConfigKeys = Object.keys(userConfig)

package/src/config/presets.config.json

@@ -1,33 +1,47 @@
-{
-  "border": [
-    { "default": "4px" },
-    { "thinest": "1px" },
-    { "thiner": "2px" },
-    { "thin": "3px" },
-    { "thick": "6px" },
-    { "thicker": "8px" },
-    { "thickest": "10px" },
-    { "node": "0.2rem" }
-  ],
-
-  "innerBorder": [
-    { "default": "4px" },
-    { "thinest": "1px" },
-    { "thiner": "2px" },
-    { "thin": "3px" },
-    { "thick": "6px" },
-    { "thicker": "8px" },
-    { "thickest": "10px" },
-    { "node": "0.2rem" }
-  ],
-
-  "shadow": [
-    { "default": "0px 0px 7px 1px" },
-    { "densest": "0px 0px 3px 1px" },
-    { "denser": "0px 0px 5px 1px" },
-    { "dense": "0px 0px 5px 1px" },
-    { "wide": "0px 0px 10px 1px" },
-    { "wider": "0px 0px 15px 1px" },
-    { "widest": "0px 0px 20px 1px" }
-  ]
-}
+[
+  {
+    "prefix": "bg",
+    "declaration": "background: ${color}"
+  },
+  {
+    "prefix": "border",
+    "declaration": "border-width: ${value} !important; border-color: ${color} !important; border-style: solid;",
+    "variations": {
+      "default": "4px",
+      "thinest": "1px",
+      "thiner": "2px",
+      "thin": "3px",
+      "thick": "6px",
+      "thicker": "8px",
+      "thickest": "10px",
+      "node": "0.2rem"
+    }
+  },
+  {
+    "prefix": "inner-border",
+    "declaration": "box-shadow: inset 0px 0px 0px ${value} ${color}",
+    "variations": {
+      "default": "4px" ,
+      "thinest": "1px" ,
+      "thiner": "2px" ,
+      "thin": "3px" ,
+      "thick": "6px" ,
+      "thicker": "8px" ,
+      "thickest": "10px" ,
+      "node": "0.2rem"
+    }
+  },
+  {
+    "prefix": "shadow",
+    "declaration": "box-shadow: ${value} ${color}",
+    "variations": {
+      "default": "0px 0px 7px 1px" ,
+      "densest": "0px 0px 3px 1px" ,
+      "denser": "0px 0px 5px 1px" ,
+      "dense": "0px 0px 5px 1px" ,
+      "wide": "0px 0px 10px 1px" ,
+      "wider": "0px 0px 15px 1px" ,
+      "widest": "0px 0px 20px 1px"
+    }
+  }
+]

package/src/config/qol.config.json

@@ -0,0 +1,42 @@
+[
+  {
+    "prefix": "smooth",
+    "standalone": true,
+    "declaration": "transition-duration: ${value}",
+    "variations": {
+      "default": "0.1s",
+      "slowest": "0.5s",
+      "slower": "0.3s",
+      "slow": "0.2s",
+      "quick": "0.07s",
+      "quicker": "0.05s",
+      "quickest": "0.03s"
+    }
+  },
+  {
+    "prefix": "rounded",
+    "standalone": true,
+    "declaration": "border-radius: ${value}",
+    "variations": {
+      "default": "8px",
+      "square": "0px",
+      "xs": "2px",
+      "sm": "4px",
+      "md": "8px",
+      "lg": "12px",
+      "xl": "16s",
+      "very": "9999px",
+      "full": "50%",
+      "half": "100%"
+    }
+  },
+  {
+    "prefix": "border",
+    "declaration": "border-style: ${value}",
+    "variations": {
+      "solid": "solid",
+      "dashed": "dashed",
+      "dotted": "dotted"
+    }
+  }
+]

package/src/config/states.config.json

@@ -0,0 +1,4 @@
+[
+  "hover",
+  "not-hover"
+]

package/src/interfaces/config.interface.ts

@@ -0,0 +1,16 @@
+import { IPreset } from "./preset.interface"
+
+export interface IFilePatterns {
+  targets: string|string[],
+  ignore: string[]
+}
+
+export interface IEnvConfig {
+  qol: IPreset[]
+  presets: IPreset[],
+  files: IFilePatterns,
+
+  colors: string[],
+  states: string[],
+  [key: string]: any
+}

package/src/interfaces/preset.interface.ts

@@ -0,0 +1,18 @@
+export interface IVariation {
+  [key: string]: string
+}
+
+export interface IPreset {
+  // [key: string]: string
+  prefix: string,
+  declaration: string,
+
+  /** When true, class can be called without variation, creating a rule with default variation */
+  standalone?: boolean,
+
+  /**In a quasar project (quasar.variabls.scss), will set as !default the precised key with the default variations */
+  globalVariableOverride?: string,
+
+  /** List of every possible variations */
+  variations: IVariation
+}

package/src/tools/{extract/classes/index.ts → extraction/extractClasses.ts}

@@ -1,21 +1,19 @@
-import { config } from "../../../config/config.tool"
-import { buildCssRuleFile } from "../../fileHandling/cssFile"
-import { mapClassesIntoRules } from "../../mapping/mapClassIntoRule"
-import { getFiles } from "../../fileHandling/file.tools"
+import { getFiles } from "../fileStuff/file.tools"
+import { mapClassesIntoRules } from "../mapping/mapClassIntoRule"
+import { buildCssRuleFile } from "../fileStuff/cssFile"
+import { config } from "../../config/config.tool"
 
 const fs = require('fs')
 
 /** Fetch vue file based on config target patterns */
 const init = async () => {
   const files = await getFiles(config.files)
-  // console.log({ files })
 
   const uniqueClasses = await getUniqueClasses(files)
   const mappedRules = mapClassesIntoRules(uniqueClasses)
-  // console.log({ uniqueClasses, mappedRules })
 
   const file = buildCssRuleFile(mappedRules)
-  // console.log({ file })
+  return file
 }
 
 /** Extract detected class and map into a flat set */
@@ -27,8 +25,6 @@ const getUniqueClasses = async (files: string[]): Promise<string[]> => {
   ?.sort()
 
   const uniqueClasses = Array.from(new Set(extractedClasses))
-  // log(`${uniqueClasses?.length} classes found`)
-
   return uniqueClasses
 }
 
@@ -37,16 +33,20 @@ const extractClasses = async (filePath: string): Promise<string[]> => {
   const file = await fs.promises.readFile(filePath, 'utf-8')
   if (!file) { return [] }
 
-  const { states, prefixes } = config.selectors
+  const { states, qol, presets } = config
 
-  const partialStates = `(${states?.map(s => `${s}:`)?.join('|')})`
-  const partialPrefixes = `(${prefixes?.map(p => `${p}-`)?.join('|')})`
+  const partialPrefixes = presets?.map(p => `${p.prefix}-`)
+  const partialQol = qol?.map(q => `${q.prefix}`)
 
-  const classDetectionRegex = new RegExp(`${partialStates}?${partialPrefixes}(\\w+(-+)?)+`, 'gi')
+  const mappedPrefixes = [
+    ...partialPrefixes,
+    ...partialQol
+  ]?.join('|')
+  const mappedStates = `(${states?.map(s => `${s}:`)?.join('|')})`
 
-  const matches = file.match(classDetectionRegex)
-  if (!matches?.length) { return [] }
+  const classDetectionRegex = new RegExp(`${mappedStates}?(${mappedPrefixes})(-?(\\w+(-+)?)+)?`, 'gi')
 
+  const matches = file.match(classDetectionRegex) || []
   return matches
 }
 

package/src/tools/mapping/mapClassIntoRule.ts

@@ -1,4 +1,5 @@
 import { config } from "../../config/config.tool"
+import { IPreset } from "../../interfaces/preset.interface"
 import { log } from "../logger"
 
 const mapClassesIntoRules = (classes: string[]) => {
@@ -13,31 +14,52 @@ const mapClassesIntoRules = (classes: string[]) => {
 }
 
 const mapClassIntoRule = (stringClass: string) => {
-  const colorExists = config.colors?.some(color => stringClass.includes(color))
-  if (!colorExists) { return }
-
   const params = getClassInfos(stringClass)
-  // console.log({ params })
 
-  const rule = mapIntoRule(params)
-  // console.log({ rule })
+  /**
+   * _ If no variations are found, maybe it's just a color like bg-primary
+   * _ So we need to check if the color exists to avoid useless computing
+   * */
+  if (!params.preset) {
+    const { colorExists } = checkOpacity(params.color)
+
+    if (!colorExists) {
+      return
+    }
+  }
+
+  /**
+   * _ If the current QoL isn't standalone (can be called without variation)
+   * _ no
+   */
+  if (!params.color && !params.preset?.standalone) {
+    return
+  }
 
+  const rule = mapIntoRule(params)
   return rule
 }
 
-const getClassInfos = (stringClass: string): { state?: string, prefix?: string, color: string, variation?: { key: string, value: string } } => {
+const getClassInfos = (stringClass: string) => {
   const { cleanedClass, state } = getStateInfos(stringClass)
   const { cleanedColor, prefix } = getPrefixInfos(cleanedClass)
-  const { color, variation } = getVariantInfos({ cleanedColor, prefix })
+  const { preset, variation } = getPresetInfos({ cleanedColor, prefix })
+
+  return {
+    state,
 
-  // console.log({ state, color, prefix, variation })
-  return { state, color, prefix, variation }
+    color: cleanedColor,
+    prefix,
+
+    preset,
+    variation
+  }
 }
 
 const getStateInfos = (stringClass: string) => {
   let state = undefined
 
-  for (const configState of config.selectors?.states) {
+  for (const configState of config.states) {
     if (!stringClass.startsWith(configState)) { continue }
 
     state = configState
@@ -51,62 +73,67 @@ const getStateInfos = (stringClass: string) => {
 }
 
 const getPrefixInfos = (stringClass: string): { cleanedColor: string, prefix: string } => {
-  let prefix = ''
+  const prefixes = [
+    ...config.presets?.map(q => q.prefix),
+    ...config.qol?.map(q => q.prefix)
+  ]
 
-  for (const configPrefix of config.selectors.prefixes) {
-    if (!stringClass.startsWith(configPrefix)) { continue }
+  for (const prefix of prefixes) {
+    if (!stringClass.startsWith(prefix)) { continue }
 
-    prefix = configPrefix
+    return {
+      cleanedColor: stringClass?.slice(prefix.length + 1),
+      prefix
+    }
   }
 
-  return {
-    cleanedColor: stringClass?.slice(prefix.length + 1),
-    prefix,
-  }
+  return null
 }
 
-const getVariantInfos = ({ cleanedColor, prefix }: { cleanedColor: string, prefix?: string }): { color: string, variation?: { key: string, value: string } } => {
-  // _ Handle opacity | bg-primary-10
-  const opacityDetectionRegex = new RegExp(/(?:(\w-?)+)-\d{2}$/, 'gm') // Strings that end with two digits
-  const isOpacity = opacityDetectionRegex.test(cleanedColor)
-  if (isOpacity) {
+const getPresetInfos = ({ cleanedColor, prefix }: { cleanedColor: string, prefix?: string }) => {
+  /**
+   * _ Find preset variants matching the prefix from the config
+   * _ Since a prefix can be in multiple presets and qol, filter every matching prefixes then flatten everything
+   * TODO fix first default occurence getting picked when duplicate
+  *  */
+  const possiblePresets = [...config.presets, ...config.qol]
+    ?.filter(p => p.prefix === prefix)
+    ?.flat()
+  if (!possiblePresets?.length) { return { matchingPreset: null, variation: null } }
+
+  const { colorExists } = checkOpacity(cleanedColor)
+
+  /**
+   * Find the preset where the variations exists
+   * If the color exists, it is a preset, so use the preset
+   * */
+  const matchingPreset = colorExists || !cleanedColor
+    ? possiblePresets[0]
+    : possiblePresets?.find(({ variations }) => !variations || Object.keys(variations)?.find(v => cleanedColor.endsWith(v)))
+
+  if (!matchingPreset) {
+    log(`No preset found for ${cleanedColor || prefix}`)
+
     return {
-      color: cleanedColor // Opacity is included in the color name, whoops on me for this one (and every other one tho)
-      // color: cleanedColor?.slice(0, -3),
-      // variation: {
-      //   key: 'opacity',
-      //   value: cleanedColor?.slice(-2),
-      // }
+      matchingPreset,
+      variation: null
     }
   }
 
-  // _ Find preset variants matching the prefix from the config
-  const variants = config.presets[prefix as keyof typeof config.presets]
-  if (!variants) { return { color: cleanedColor } }
-
-  // _ Map found variants into a key/value object
-  const matchingVariants = variants
-    ?.map(v => Object.entries(v))
-    ?.flat()
-    ?.map(([key, value]) => ({ key, value }))
-    // ?.filter(({ key }) => key !== 'default')
+  const possibleVariations = (matchingPreset.variations || { default: '' })
 
-  const variation = matchingVariants?.find(({ key }) => cleanedColor.endsWith(key)) || matchingVariants?.find(({ key }) => key === 'default')
-  // console.log({ variation })
+  const matchingVariation = Object.keys(possibleVariations)
+    ?.find(v => cleanedColor.endsWith(v)) || 'default'
 
-  const color = variation && variation.key !== 'default'
-    ? cleanedColor?.slice(0, variation.key.length + 1)
-    : cleanedColor
+  const variation = possibleVariations[matchingVariation]
 
   return {
-    color,
-    variation
+    preset: matchingPreset,
+    variation,
   }
 }
 
-function mapIntoRule({ state, prefix, color, variation }: { state?: string, prefix?: string, color: string, variation?: { key: string, value: string } }) {  
-  const colorVar = `var(--${color})`
-
+const mapIntoRule = ({ state, prefix, color, preset, variation }) => {
   // _ Set state selector
   let stateSelector = ''
   switch (state) {
@@ -119,50 +146,47 @@ function mapIntoRule({ state, prefix, color, variation }: { state?: string, pref
       break
   }
 
-  let declaration = ''
-
-  // _ Set prefix declaration
-  // ! Don't forget to add the prefix in the selector.config root file
-  switch (prefix) {
-    case 'bg':
-      declaration = `background: ${colorVar} !important`
-      break
-
-    case 'text':
-      declaration = `color: ${colorVar} !important`
-      break
-
-    case 'border':
-      declaration = `border-width: ${variation?.value} !important; border-color: ${colorVar} !important; border-style: solid`
-      break
-
-    case 'inner-border':
-      declaration = `box-shadow: inset ${variation?.value} ${colorVar} !important`
-      break
-
-    case 'shadow':
-      declaration = `box-shadow: ${variation?.value} ${colorVar} !important`
-      break
+  let selector = `${prefix}${color ? `-${color}` : ''}`
+  if (state) {
+    selector = `${state}\\:${selector}${stateSelector}`
+  }
 
-    default:
-      // _ custom rule from config file
-      const customDeclaration = config.customRules?.find((r: any) => r.prefix === prefix)?.declaration
-      if (!customDeclaration) { return }
+  const colorVar = `var(--${color})`
+  let declaration = preset.declaration
+    ?.replace('${value}', variation)
+    ?.replace('${color}', colorVar)
 
-      declaration = customDeclaration?.replace('${value}', color) + ' !important'
-      break
+  if (!declaration.endsWith(';')) {
+    declaration += ';'
   }
 
-  let selector = `${prefix}-${color}`
-  if (state) {
-    selector = `${state}\\:${selector}${stateSelector}`
+  if (!declaration.includes('!important')) {
+    declaration = declaration
+      ?.replace(';', ' !important;')
   }
 
   const rule = `.${selector} { ${declaration} }`
-
   return rule
 }
 
+/**
+ * _ Check if a color includes opacity (ends with 2 digits)
+ * * Opacity is included in the color name during mixin declaration
+ * */
+const checkOpacity = (color: string) => {
+  const opacityDetectionRegex = new RegExp(/(?:(\w-?)+)-\d{2}$/, 'gm') // Strings that end with two digits
+  const isOpacity = opacityDetectionRegex.test(color)
+
+  const baseColor = isOpacity ? color?.slice(0, -3) : color
+  const colorExists = config.colors?.some(configColor => configColor === baseColor)
+
+  return {
+    colorExists,
+    isOpacity,
+    baseColor
+  }
+}
+
 export {
   mapClassesIntoRules,
   mapClassIntoRule

package/src/config/selectors.config.json

@@ -1,13 +0,0 @@
-{
-  "states": [
-      "hover",
-      "not-hover"
-  ],
-  "prefixes": [
-      "bg",
-      "text",
-      "border",
-      "inner-border",
-      "shadow"
-  ]
-}

package/src/interfaces/config.presets.interface.ts

@@ -1,19 +0,0 @@
-interface IConfigDeclaration {
-  [key: string]: string,
-}
-
-export interface IConfigPresets {
-  defaultInnerBorderWidth?: string
-  innerBorderWidths?: IConfigDeclaration[]
-
-  defaultBorderWidth?: string
-  borderWidths?: IConfigDeclaration[]
-
-  defaultShadow?: string,
-  shadowWidths?: IConfigDeclaration[]
-
-  defaultBorderRadius?: string
-  borderRadiuses?: IConfigDeclaration[]
-
-  fontWeights?: IConfigDeclaration[]
-}

package/src/tools/declaration/color.ts

@@ -1,3 +0,0 @@
-import { IDeclaration } from "../../interfaces/declaration.interface";
-
-const declareColor = (options: { name: string, color: string, theme?: string }) => {}