anubis-ui 1.2.5 → 1.2.7

package/README.md

@@ -7,9 +7,7 @@ AnubisUI (Autonomous Nominative Utility Based Intuitive Styler) is a Vite plugin
 > <br />
 > Classes must be EXPLICITY written in the code to allow the extraction to work correctly, dynamic classes will not work
 > <br />
-> In the future, some config will allow to generate a bunch of specified classes even if not present in the code
-> <br />
-> Until then, you can create a decoy .vue file filled with the dynamic classes you want
+> You can use the `force` configuration to generate specific classes even if they're not present in the code
 > <br />
 
 ## Table of Contents
@@ -167,6 +165,13 @@ For every config you want to change, add the corresponding section in your confi
         "thin": "2px"
       }
     }
+  ],
+
+  // force.config.json
+  "force": [
+    "bg-primary-10",
+    "bg-primary-20",
+    "bg-primary-30"
   ]
 }
 ```
@@ -342,6 +347,29 @@ Example usage:
 <div class="rounded smooth" /> <!-- Works because these are standalone -->
 ```
 
+### Force (`force.config.json`)
+Force the generation of specific CSS classes even if they're not found in your code. This is particularly useful for dynamic classes that can't be detected during the extraction process.
+
+<details>
+<summary>Default config</summary>
+
+```json
+[]
+```
+</details>
+
+Example usage:
+```json
+{
+  "force": [
+    "bg-primary-10",
+    "bg-primary-20",
+    "bg-primary-30",
+    "hover:bg-secondary-50"
+  ]
+}
+```
+
 ## Available Utility Classes
 #### Colors
 - `bg-{color}` - Background color

package/index.js

@@ -1,6 +1,6 @@
 "use strict";
 
-const { init: initConfig, config } = require('./dist/config/config.tool');
+const { init: initConfig, config } = require('./dist/tools/config.tool');
 const { log, logPrefix, logo } = require('./dist/tools/logger');
 const { init: initClassExtraction } = require('./dist/tools/extraction/extractClasses');
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "anubis-ui",
-  "version": "1.2.5",
+  "version": "1.2.7",
   "description": "Class-based css generator",
   "main": "index.js",
   "keywords": [
@@ -15,7 +15,7 @@
     "vue"
   ],
   "scripts": {
-    "dev": "npm run preinstall; node src/manual/build.js",
+    "dev": "rm -rf dist; npm run preinstall; node src/manual/build.js",
     "build": "tsc",
     "preinstall": "npm run build"
   },

package/src/interfaces/config.interface.ts

@@ -10,6 +10,9 @@ export interface IEnvConfig {
   presets: IPreset[],
   files: IFilePatterns,
 
+  /** User-given classes to force the css rule creation */
+  force: string[],
+
   colors: string[],
   states: string[],
   [key: string]: any

package/src/{config → tools}/config.tool.ts

@@ -1,6 +1,6 @@
 import { IEnvConfig } from "../interfaces/config.interface";
-import { readUserConfigFile, userConfig } from "../tools/fileStuff/configFile"
-import { log } from "../tools/logger"
+import { readUserConfigFile, userConfig } from "./fileStuff/configFile"
+import { log } from "./logger"
 
 const fs = require('fs')
 const path = require('path')
@@ -18,6 +18,8 @@ const config = {
   qol: [],
   presets: [],
 
+  force: [],
+
   files: { targets: [], ignore: [] },
   colors: [],
   states: [],
@@ -37,6 +39,7 @@ const init = () => {
     } else {
       const filePath = path.join(anubisConfigFolder, `${file}.config.json`)
       const configContent = fs.readFileSync(filePath, { encoding: 'utf-8' })
+      if (!configContent) { continue }
 
       configToUse = JSON.parse(configContent)
     }
@@ -44,6 +47,14 @@ const init = () => {
     config[file as keyof typeof config] = configToUse
   }
 
+  const forceClasses = userConfig?.['force']
+  console.log({ forceClasses })
+
+  if (forceClasses?.length) {
+    log(`Forcing the creation of ${forceClasses?.length} classes`)
+    config.force = userConfig['force']
+  }
+
   return config
 }
 
@@ -53,7 +64,7 @@ const checkUserConfig = () => {
   // todo - also check values
   const userConfigKeys = Object.keys(userConfig)
 
-  const unknownKeys = userConfigKeys?.filter(key => !anubisConfigFiles.includes(key))
+  const unknownKeys = userConfigKeys?.filter(key => !anubisConfigFiles.includes(key) && key !== 'force')
   if (!unknownKeys?.length) { return }
 
   log(`${unknownKeys?.length} unknown config keys found in user config file`)

package/src/tools/extraction/extractClasses.ts

@@ -1,7 +1,7 @@
 import { getFiles } from "../fileStuff/file.tools"
 import { mapClassesIntoRules } from "../mapping/mapClassIntoRule"
 import { buildCssRuleFile } from "../fileStuff/cssFile"
-import { config } from "../../config/config.tool"
+import { config } from "../config.tool"
 
 const fs = require('fs')
 
@@ -22,9 +22,10 @@ const getUniqueClasses = async (files: string[]): Promise<string[]> => {
     files.map(async file => extractClasses(file))
   ))
   ?.flat()
-  ?.sort()
 
-  const uniqueClasses = Array.from(new Set(extractedClasses))
+  const classes = [...extractedClasses, ...config.force]?.sort()
+
+  const uniqueClasses = Array.from(new Set(classes))
   return uniqueClasses
 }
 

package/src/tools/mapping/mapClassIntoRule.ts

@@ -1,4 +1,4 @@
-import { config } from "../../config/config.tool"
+import { config } from "../config.tool"
 import { IPreset } from "../../interfaces/preset.interface"
 import { log } from "../logger"