anubis-ui 1.2.4 → 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.4",
+  "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/config/qol.config.json

@@ -24,7 +24,7 @@
       "sm": "4px",
       "md": "8px",
       "lg": "12px",
-      "xl": "16s",
+      "xl": "16px",
       "very": "9999px",
       "full": "50%",
       "half": "100%"

package/src/manual/build.js

@@ -1,3 +1,4 @@
 const AnubisUI = require('../../index')
 
-AnubisUI()?.buildStart()
+AnubisUI.plugin.buildStart()
+

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
 }
 

package/src/tools/mapping/mapClassIntoRule.ts

@@ -43,16 +43,17 @@ const mapClassIntoRule = (stringClass: string) => {
 const getClassInfos = (stringClass: string) => {
   const { cleanedClass, state } = getStateInfos(stringClass)
   const { cleanedColor, prefix } = getPrefixInfos(cleanedClass)
-  const { preset, variation } = getPresetInfos({ cleanedColor, prefix })
+  const { baseColor, preset, variation, variationName } = getPresetInfos({ cleanedColor, prefix })
 
   return {
     state,
 
-    color: cleanedColor,
+    color: baseColor,
     prefix,
 
     preset,
-    variation
+    variation,
+    variationName
   }
 }
 
@@ -122,18 +123,24 @@ const getPresetInfos = ({ cleanedColor, prefix }: { cleanedColor: string, prefix
 
   const possibleVariations = (matchingPreset.variations || { default: '' })
 
+  const defaultVariation = 'default'
   const matchingVariation = Object.keys(possibleVariations)
-    ?.find(v => cleanedColor.endsWith(v)) || 'default'
+    ?.find(v => cleanedColor.endsWith(v))
 
-  const variation = possibleVariations[matchingVariation]
+  const variation = possibleVariations[matchingVariation || defaultVariation]
+  const baseColor = matchingVariation
+    ? cleanedColor?.slice(0, -matchingVariation?.length - 1)
+    : cleanedColor
 
   return {
+    baseColor,
     preset: matchingPreset,
+    variationName: matchingVariation,
     variation,
   }
 }
 
-const mapIntoRule = ({ state, prefix, color, preset, variation }) => {
+const mapIntoRule = ({ state, prefix, color, preset, variation, variationName }) => {
   // _ Set state selector
   let stateSelector = ''
   switch (state) {
@@ -146,7 +153,7 @@ const mapIntoRule = ({ state, prefix, color, preset, variation }) => {
       break
   }
 
-  let selector = `${prefix}${color ? `-${color}` : ''}`
+  let selector = `${prefix}${color ? `-${color}` : ''}${variationName ? `-${variationName}` : ''}`
   if (state) {
     selector = `${state}\\:${selector}${stateSelector}`
   }