Class-based css generator
npm install anubis-uiAnubisUI (Autonomous Nominative Utility Based Intuitive Styler) is a Vite plugin that provides dynamic CSS class generation based on configuration files. It automatically generates CSS rules by scanning your source files and mapping utility classes to their corresponding styles.
AnubisUI automatically generates the CSS classes you need, simply by using them in your code. No need to write CSS manually!
In your Vue/HTML component:
``html`
AnubisUI automatically generates the CSS:
`css`
.bg-primary-low { background: var(--primary-low) !important; }
.text-primary { color: var(--primary) !important; }
.rounded-lg { border-radius: 12px !important; }
.smooth { transition-duration: 0.1s !important; }
.hover\:shadow-accent-wide:hover { box-shadow: 0px 0px 10px 2px var(--accent) !important; }
/ ... and much more /
ā
Zero CSS to write - Use classes, AnubisUI generates the CSS\
ā
Light/dark themes - Automatic support with CSS variables\
ā
Hot-reload - Classes are detected and generated on the fly\
ā
Optimized - Only used classes are generated\
ā
Customizable - Configure your colors, variations and presets
` Descriptionhtml
Title
New
`
> __ā ļø IMPORTANT__ - Dynamic classes like bg-primary-${props.bg} will NOT workforce
>
> Classes must be EXPLICITLY written in the code to allow the extraction to work correctly. The plugin uses regex pattern matching on your source files.
>
> Use the configuration to generate specific classes even if they're not present in the code.
1. Add the package to your project
npm install anubis-ui
2. In the config file, add the package in the plugin section
`js`
vitePlugins: [
[
anubisUI(),
...
]
]
quasar.config.js
3. Still in the config file, add the generated file to the css usage (rules are generated in src/css/_anubis.scss, file is auto-created)`js`
css: [
'app.scss',
'_anubis.scss'
],
quasar.config.js
4. AnubisUI generates the following files automatically in src/css/:_anubis.scss
- - Main stylesheet with all generated rulesanubis/_mixins.scss
- - SCSS mixins for color handlinganubis/_tokens.scss
- - Color token variables ($primary, $primary-dark, etc.)anubis/_overrides.scss
- - Quasar variable overrides from utilitiesquasar.variables.scss
- - Auto-injected imports for tokens and overrides
5. Colors are automatically defined from the configuration
- AnubisUI generates CSS variables for all colors defined in colors.config.json
- Colors support light/dark themes automatically
- Each color is exposed as a CSS variable: , --secondary, etc.lowest
- Pre-defined color levels: , lower, low, medium, high, higher, highest
6. Start adding classes to your .vue files
`html`
any .vue file
7. Enjoy
> Note: Generated CSS variables (from colors and export) are available for custom styling:
> `css`
> .custom-class {
> background: var(--primary-low);
> font-size: var(--size-xl);
> font-weight: var(--weight-bold);
> }
>
> SCSS Tokens: Color tokens are also available as SCSS variables for compile-time usage:
> `scss`
> @use "anubis/_tokens.scss" as tokens;
>
> .custom-class {
> border-color: tokens.$primary;
> background: tokens.$accent-dark;
> }
>
directory:
To override default configuration, add a anubis.config.json in project root folder.
>Overriding completly replaces default configuration. You need to copy/paste it and add yours if you want to keep the default too.
Only the sections you want to override need to be included - other sections will use default values.\
For every config you want to change, add the corresponding section in your config file
$3
`js
{
// files.config.json
"files": {
"targets": ["/.vue"],
"ignore": ["*/specificFile.vue"]
}, // colors.config.json
"colors": ["primary", "secondary", "..."],
// utilities.config.json
"utilities": [
{
"prefix": "bg",
"declaration": "background: ${color}",
"export": "all"
}
{
"prefix": "border",
"declaration": "border-width: ${value} !important; border-color: ${color} !important; border-style: solid;",
"variations": {
"default": "4px",
"thin": "2px"
},
"export": "variations"
},
{
"prefix": "rounded",
"declaration": "border-radius: ${value}",
"variations": {
"default": "8px",
"lg": "12px"
},
}
],
// force.config.json
"force": [
"bg-primary-10",
"hover:border-neutral-thin",
"text-danger"
]
}
`
anubis.config.json (example)---
$3
Define your color palette with light/dark theme support. Colors can be defined in three different ways:View default colors config ā
Color generation modes:
1. Both themes - Define both
and dark values:
`json
"primary": {
"light": "#0f84cb",
"dark": "#1a94db"
}
`
Generates color variables for both light and dark themes with opacity variations.2. Light theme only - Define only
value:
`json
"custom-light": {
"light": "#ff00ff"
}
`
Generates color variables only for light theme. Dark theme will not have this color defined.3. Dark theme only - Define only
value:
`json
"custom-dark": {
"dark": "#00ffff"
}
`
Generates color variables only for dark theme. Light theme will not have this color defined.Full palette includes:\
Colors
- primary
- secondary
- accent
- neutral
- success
- warning
- danger
Levels
- lowest - lighest
- lower
- low
- medium
- high
- higher
- highest - darkest
Color naming convention: Colors are automatically converted to CSS variables as
. Use semantic color levels to ensure proper theme adaptation.Opacity variations: For non-transparent colors, AnubisUI automatically generates opacity variants (10 to 90) accessible via
--{color-name}-{opacity} (e.g., --primary-50 for 50% opacity).Color validation: AnubisUI automatically validates your color configuration on build:
- Each color must have at least one theme defined (
light or dark)
- Color values must be valid hex format (#RRGGBB or #RGB) or transparent
- Invalid configurations will throw an error with detailed messages---
$3
Specify which files to scan for classes using glob patterns.You can add multiple glob patterns to scan different file types:
json
{
"targets": [
"*/.html",
"*/.vue",
"*/.jsx"
]
}
`---
$3
Configure all utility classes. This includes both color-based utilities and standalone utilities.View default utilities config ā
Color-based utilities (require a color):
-
- Background colors
- text - Text colors
- border - Border with width variations and color
- inner-border - Inset box shadow with width variations and color
- shadow - Box shadow with spread variations and color
Standalone utilities (no color required):
-
blur - Backdrop filter blur effect
- smooth - Transition duration
- rounded - Border radius
- border - Border style (solid, dashed, dotted)
- position - CSS positioning (relative, absolute)
- size - Font sizes (2xs to 9xl) with CSS variable export
- weight - Font weights (thin to black) with CSS variable exportConfiguration options:
1.
prefix - The class name prefix
2. declaration - CSS rule using ${value} and/or ${color} placeholders
3. variations - Key-value pairs of variation names and their CSS values
4. export (optional) - Controls how variations are exported as CSS variables
5. overrides (optional) - List of Quasar/global SCSS variables to override with the default variationThe
export flag:
- export: "variations" ā Generates CSS variables for every variation
- export: "all" ā Generates classes for every possible color
- These can be used in custom CSS: font-size: var(--size-xl)The
option:
Override Quasar or global SCSS variables with the default variation value:
`json
{
"prefix": "border",
"declaration": "border-width: ${value}; border-color: ${color}; border-style: solid;",
"overrides": [
"generic-border-radius",
"button-border-radius"
],
"variations": {
"default": "4px",
"thin": "2px"
}
}
`
This generates in :
`scss
$generic-border-radius: 4px;
$button-border-radius: 4px;
`Color support:
- Use
in declaration to indicate the utility requires a color
- Colors are automatically injected as CSS variables: var(--{color})Standalone usage:
- Utilities with a
variation and no color requirement can be used without specifying a variation (e.g., rounded uses rounded-default)Example usage:
`html
Typography utilities
`$3
Define state modifiers that can be applied to any utility class.View default states config ā
Default states:
, not-hover$3
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.Add a
array to your anubis.config.json:
`json
{
"force": [
"bg-primary-lowest",
"bg-primary-low",
"bg-primary-medium",
"hover:bg-secondary-high"
]
}
`Available Utility Classes
$3
These utilities require a color from your config:-
- Background color
- text-{color} - Text color
- border-{color} - Border with color (also requires variation for width)
- inner-border-{color} - Inset box shadow (not compatible with shadow-)
- shadow-{color} - Box shadow (not compatible with inner-border-)Available colors:
none, text, text-invert, text-link, primary, secondary, accent, neutral, success, warning, dangerColor levels: Most colors have variants -
, lower, low, medium, high, higher, highestExamples:
html
Blue background with primary text
Success themed element
`$3
Utilities can combine colors with size variations:-
- Border with color and width
- Variations: thinest, thiner, thin, default, thick, thicker, thickest, node
- - Inset shadow with color and width
- Variations: thinest, thiner, thin2, default, thick, thicker, thickest, node
- - Box shadow with color and spread
- Variations: densest, lower, dense, default, wide, wider, widestExamples:
html
Thin neutral border
Thick accent inset border
Shadow on hover
`$3
Standalone utilities that work independently:-
/ blur-{default} - Backdrop filter blur (default: 3px)
- smooth / smooth-{variation} - Transition duration
- Variations: quickest, quicker, quick, default, slow, slower, slowest
- / rounded-{variation} - Border radius
- Variations: square, xs, sm, md, lg, xl, very, full, half
- - Border style
- Variations: solid, dashed, dotted
- - CSS positioning
- Variations: relative, absolute
- - Font size (generates CSS variables)
- Variations: 2xs, xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl, 7xl, 8xl, 9xl
- - Font weight (generates CSS variables)
- Variations: thin, extra-light, light, normal, medium, semi-bold, bold, extra-bold, blackExamples:
html
Rounded with smooth transition
Large bold text
Blurred absolute positioned element
`$3
Apply styles conditionally based on element state:-
- Apply style on hover
- not-hover:{utility} - Apply style when not hoveringExamples:
`html
Shadow appears on hover
Text grows on hover
`Prefix/Declaration Relations
$3
| Prefix | CSS Declaration |
|--------------|---------------------------------------------------------------------------------|
| bg | |
| text | color: var(--{color}) !important; |
| border | border-width: {value} !important; border-color: var(--{color}) !important; border-style: solid; |
| inner-border | box-shadow: inset 0px 0px 0px {value} var(--{color}) !important; |
| shadow | box-shadow: {value} var(--{color}) !important; |$3
| Prefix | CSS Declaration |
|----------|-----------------------------------------------|
| blur | backdrop-filter: blur({value}) !important; |
| smooth | transition-duration: {value} !important; |
| rounded | border-radius: {value} !important; |
| border | border-style: {value} !important; |
| position | position: {value} !important; |
| size | font-size: {value} !important; |
| weight | font-weight: {value} !important; |Note: When
export: "variations" is set, {value} becomes var(--{prefix}-{variation}) instead of the direct value.Architecture
$3
The build process is orchestrated by
src/tools/main.ts which runs the following steps in sequence:1. Configuration Initialization (
src/tools/config.tool.ts)
- Loads default configs from src/config/*.config.json
- Merges with user's if present
- User config completely replaces default sections (no deep merge)2. Mixins Generation (
src/tools/output/css.output.ts)
- Generates SCSS mixins for color handling (light/dark theme support)
- Outputs to src/css/anubis/_mixins.scss3. Tokens Generation (
)
- Maps all colors from config into SCSS token variables
- Generates $colorname, $colorname-light, $colorname-dark variables
- Outputs to src/css/anubis/_tokens.scss4. Overrides Generation (
)
- Maps utilities with overrides property to SCSS variable declarations
- Allows overriding Quasar/global variables with utility defaults
- Outputs to src/css/anubis/_overrides.scss5. Quasar Variables Injection (
)
- Automatically adds @use imports for tokens and overrides
- Updates src/css/quasar.variables.scss6. Class Extraction (
)
- Scans files matching glob patterns from files.config.json
- Builds dynamic regex from config (states, utilities prefixes)
- Extracts classes matching pattern:
- Merges with forced classes and exported classes from config
- Deduplicates and returns unique classes7. Rule Generation (
)
- Parses each class to identify state, prefix, color, and variation
- Validates color existence in config
- Handles utility variations (direct values or CSS variables)
- Generates CSS rules with proper selectors and declarations
- Collects variants for CSS variable export8. CSS Output (
src/tools/extraction/extractClasses.ts)
- Generates color CSS variables with light/dark theme support
- Generates variation CSS variables (from export: "variations" or export: "all")
- Writes final CSS rules
- Outputs to src/css/_anubis.scss$3
The plugin (
) provides:
- buildStart() hook - Runs full CSS generation on build
- configureServer() hook - Watches file changes and regenerates CSS
- Hot reload - Automatically reloads on anubis.config.json changes$3
- Main Orchestrator (
main.ts): Coordinates all initialization steps with timing
- Config System (config.tool.ts): Manages configuration loading and merging
- Class Extractor (extractClasses.ts): Regex-based pattern matching for class detection
- Color Mapper (mapColors.ts): Generates tokens and mixin declarations from colors
- Utilities Mapper (mapUtilities.ts): Generates SCSS overrides from utilities config
- Rule Mapper (mapClassIntoRule.ts): Complex parsing logic for class-to-CSS conversion
- CSS Generator (css.output.ts): Generates variables, mixins and rules with proper formatting
- File Tools (file.tools.ts): Centralized file I/O with concurrency control$3
`
āāā dist/ # Compiled output
āāā src/
ā āāā config/ # Default configuration files
ā ā āāā colors.config.json # Color palette (light/dark themes)
ā ā āāā utilities.config.json # All utility classes (bg, text, border, etc.)
ā ā āāā states.config.json # State modifiers
ā ā āāā files.config.json # File scan patterns
ā ā āāā force.config.json # Force specific classes
ā āāā css/ # Generated CSS output (in user project)
ā ā āāā _anubis.scss # Main generated stylesheet
ā ā āāā quasar.variables.scss # Quasar variables with injected imports
ā ā āāā anubis/
ā ā āāā _mixins.scss # SCSS mixins for color handling
ā ā āāā _tokens.scss # Color token variables
ā ā āāā _overrides.scss # Quasar/global variable overrides
ā āāā interfaces/ # TypeScript type definitions
ā āāā tools/
ā āāā extraction/ # Class extraction logic
ā āāā fileStuff/ # File I/O operations
ā āāā mapping/ # Class-to-CSS mapping
ā ā āāā mapClassIntoRule.ts # Class to CSS rule conversion
ā ā āāā mapColors.ts # Color to tokens/mixins mapping
ā ā āāā mapUtilities.ts # Utilities to overrides mapping
ā āāā output/ # CSS output generation
ā āāā config.tool.ts # Configuration loader
ā āāā main.ts # Main orchestration entry point
ā āāā logger.ts # Logging utilities
āāā index.js # Vite plugin entry point
$3
Regex-Based Extraction: Classes must be literal strings in source code for detection to work. Dynamic string interpolation is not supported.
CSS Variables: Colors and exported variations use CSS variables (
) for better reusability and theme support.Configuration Override: User configs completely replace default sections to avoid merge complexity and unexpected behavior.
Concurrency Control: File reading uses a concurrency limit to prevent system overload on large codebases.
Caching: Regex patterns are cached based on config hash to avoid recompilation on every file scan.
Development
$3
AnubisUI uses Vitest for testing:
`bash
Run tests in watch mode (recommended for development)
npm testRun tests once (CI/production)
npm run test:runRun tests with UI
npm run test:ui
`$3
- Color Validation - Tests for configuration validation logic
- Located in
See tests/README.md for more information.
This project was made possible thanks to the support and resources provided by __Improba__.
Their trust and commitment played a key role in bringing this idea to life, and i'm grateful for their involvement in making it happen.
This project is licensed under the MIT License.