PrimeFlex Documentation

PrimeFlex is a PostCSS plugin that allows you to use @primeflex at-rules in your CSS to generate utility classes. You can initialize the plugin by calling the exported function with an optional configuration object.

When the plugin encounters an @primeflex at-rule, it processes various CSS utility categories (such as align, flex, grid, margin, padding, etc.) and applies them to the rule based on the provided options. It also supports custom plugins via the plugins option.

const primeflex = require('primeflex');

module.exports = {
    plugins: [
        primeflex({
            // your custom options here
        })
    ]
};

The PrimeFlex plugin accepts an options object (opts) to customize its behavior. While the full schema is defined in internal modules, the entrypoint demonstrates that you can provide:

• colors: Custom color definitions that are merged into the available themes.
• themes: Theme configurations that can be overridden.
• plugins: An array of custom plugins. Each plugin should be an array where the first element is a function with the signature (atRule, opts, pluginContext).

The font utility module exports a function that accepts a root object (typically the PrimeFlex configuration root) and an opts object. When called, it populates the root with font-related CSS properties, specifically:

• family: Font family definitions.
• size: Font size definitions.
• style: Font style definitions.
• weight: Font weight definitions.

const fontUtils = require('./lib/src/font/index.js');

// Usage within the PrimeFlex initialization flow
fontUtils(root, opts);

The animation entrypoint is a function that initializes a set of animation properties and modules on a specified root element using an opts configuration object.

When called, it applies the following:

Animation Properties:

• delay
• duration
• fill_mode
• iteration_count
• timing_function

Animation Modules:

• animate
• fade
• flip
• scale
• slide
• zoom

const initAnimation = require('./lib/src/animation/index');

// root is the element or selector to apply animations to
// opts is the configuration object
initAnimation(root, opts);

The flex module provides a set of utility classes for managing flexbox properties. When invoked, it registers the base flex class and its associated shorthand properties (flex-1, flex-auto, flex-initial, flex-none) along with related flexbox properties like direction, grow, shrink, and wrap.

It requires a root element and an optional opts object. The module uses styleClass to apply these definitions to the provided root.

const flex = require('./lib/src/flex/index');

// Assuming 'root' is a DOM element or a compatible target
flex(root, { /* options */ });

The all utility allows you to set the all CSS property to one of several values: initial, inherit, or unset. This is useful for resetting all properties of an element at once. In the PrimeFlex source, this is exposed via an aggregated export that maps the all utility to its specific CSS values.

/* The 'all' utility maps to the following values: */
// 'all-initial': 'initial'
// 'all-inherit': 'inherit'
// 'all-unset': 'unset'

PrimeFlex provides an outline utility that allows you to manage element outlines. By default, it includes an outline-none class which sets the outline to 2px solid transparent. The utility also supports related properties for controlling the color, offset, style, and width of the outline via PrimeFlex's property system.

/* Example of the default outline-none class */
.outline-none {
    outline: 2px solid transparent;
}

PrimeFlex provides utility classes to apply CSS backdrop-filter effects to elements. These classes allow you to apply visual effects like blur, brightness, contrast, and more to the area behind an element. The utility is implemented by wrapping specific filter functions (like blur, brightness, etc.) using addBackdrop and applying them via the styleClass utility to a root element.

/* 
Note: This file defines the internal registration of backdrop-filter utilities. 
End-users typically use the generated CSS classes in their HTML/templates, 
for example:
*/

<div class="backdrop-filter blur-sm">...</div>
<div class="backdrop-filter brightness-50">...</div>

PrimeFlex provides utility classes to control the pointer-events CSS property. These classes allow you to enable or disable pointer interactions (like clicks and hover states) on specific elements.

Available utility classes:

• pointer-events-none: Sets pointer-events: none;, making the element ignore all pointer events.
• pointer-events-auto: Sets pointer-events: auto;, restoring default pointer event behavior.

The filter module provides a way to apply various CSS filter effects (such as blur, brightness, contrast, etc.) to a root element using PrimeFlex's styleClass utility. This function iterates through a predefined set of filter types and applies them to the provided root element based on the opts configuration.

Available filter types applied by this module:

• blur
• brightness
• contrast
• grayscale
• hueRotate
• invert
• saturate
• sepia
• dropShadow

const applyFilters = require('./lib/src/filter/index.js');

// Example usage:
// root: The DOM element to apply filters to
// opts: Configuration object for the filters
applyFilters(document.body, { /* options */ });

The color module exports a function that generates CSS utility classes for text colors. It uses a prefixing system based on the provided opts.prefix.cssVariable to map color names to CSS variables.

When invoked, it generates classes for:

• Standard colors: Includes text-primary, text-white, text-color, text-color-secondary, and text-primary-invert.
• Theme colors: Dynamically generated theme colors prefixed with text-.
• Surface colors: Colors derived from surface definitions.
• White and Black RGBA: Specific RGBA variations for white and black.

All generated classes follow the color-{name} pattern (e.g., color-text-primary).

// The module exports a function used during the build process
// signature: (root, opts) => void

module.exports((root), { prefix: { cssVariable: 'pf-variable-prefix' } });