anubis-ui 1.2.5 → 1.2.6

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/package.json

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

package/src/config/config.tool.ts

@@ -9,6 +9,7 @@ const anubisConfigFolder = path.join(__dirname, '..', '..', 'src', 'config');
 const anubisConfigFiles = [
   'qol',
   'files',
+  'force',
   'colors',
   'states',
   'presets',
@@ -18,6 +19,9 @@ const config = {
   qol: [],
   presets: [],
 
+  /** User-given classes to force the css rule creation */
+  force: [],
+
   files: { targets: [], ignore: [] },
   colors: [],
   states: [],
@@ -37,6 +41,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)
     }

package/src/tools/extraction/extractClasses.ts

@@ -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
 }