Configuration

Overview

The Styleframe instance accepts configuration options that allow you to customize how your styles are generated. These options give you fine-grained control over indentation, variable naming conventions, utility class selectors, and theme selectors — ensuring the generated CSS matches your project's conventions and requirements.

Why configure Styleframe?

Configuration helps you:

• Match your code style: Set custom indentation to align with your project's formatting rules.
• Follow naming conventions: Customize how CSS variable names are generated to match your design system.
• Control selector output: Define how utility classes and theme selectors are generated.
• Ensure consistency: Maintain consistent patterns across your entire codebase.

Configuration Options

You configure Styleframe by passing an options object when creating an instance:

export type StyleframeOptions = {
    indent?: string;
    variables?: {
        name?: VariableNameFn;
    };
    utilities?: {
        selector?: UtilitySelectorFn;
    };
    theme?: {
        selector?: ThemeSelectorFn;
    };
};

import { styleframe } from "styleframe";

const s = styleframe({
    ... // Your configuration options here
});

export default s;

Let's explore each configuration option in detail.

variables.name

type VariableNameFn = (options: { name: string }) => string;

utilities.selector

type UtilitySelectorFn = (options: {
    name: string;
    value: string;
    modifiers: string[];
}) => string;

theme.selector

type ThemeSelectorFn = (options: { name: string }) => string;

Best Practices

• Define configuration once: Create a single configured instance and export it for use across your project.
• Match your project conventions: Align the configuration with your existing CSS and naming conventions.
• Document your choices: Add comments explaining why specific configuration options were chosen.
• Use consistent patterns: Ensure your naming functions produce predictable, consistent results.
• Test generated output: Verify that the generated CSS matches your expectations after configuration changes.

FAQ