CSS Custom Functions Specification Advances Toward Browser Implementation

Figure 1: Visual representation of the BeyondTrust vulnerability chain

The CSS Working Group's CSS Functions and Mixins Module Level 1 specification has progressed through multiple revisions since its initial proposal. The February 2025 draft represents the most complete articulation of the feature set to date.

The specification introduces the @function at-rule, which allows developers to define named functions that accept parameters. According to the draft, a basic function definition follows this structure: an @function declaration with a name, parameter list, and a body containing CSS declarations that compute a return value.

Bramus Van Damme's February 9, 2025 technical preview demonstrated working prototypes in experimental browser builds. The preview highlighted several use cases: color palette generation from a base color, fluid typography calculations, and spacing scale computations.

The CSS Working Group has been developing this specification alongside related proposals for CSS mixins, which would allow grouping multiple property declarations for reuse. The functions specification focuses specifically on value computation and return.

The CSS Working Group draft specifies that custom functions operate at parse time, not runtime. According to the specification, this means function calls are resolved when the stylesheet is parsed, similar to how calc() expressions are evaluated.

The specification states that custom functions can accept typed parameters, allowing authors to constrain inputs to specific CSS value types such as lengths, colors, or numbers. The draft includes syntax for default parameter values and variadic parameters.

According to the technical preview published by Van Damme, custom functions can call other custom functions, enabling composition of complex calculations from simpler building blocks. The preview demonstrated a color contrast function that internally called a luminance calculation function.

The specification draft indicates that custom functions have access to custom properties defined in scope, allowing functions to reference design tokens and theme values.

Figure 2: How the authentication bypass vulnerability works

Native CSS functions would eliminate the build step required by preprocessors for many common use cases. Developers could write function-based stylesheets that work directly in browsers without compilation.

Design systems could distribute reusable functions as part of their CSS packages. Teams could share calculation logic for spacing, typography, and color manipulation without requiring consumers to adopt specific build tools.

The feature enables more expressive CSS without introducing new syntax for each specific use case. Rather than adding dedicated functions for every calculation type, the specification provides a general mechanism for authors to define their own.

Runtime theming and customization become more powerful when combined with custom properties. Functions could compute derived values from theme tokens, automatically generating consistent color variations or spacing scales.

Browser support remains uncertain as of March 2, 2025. The specification is in draft status, and no browser vendor has announced implementation timelines or committed to shipping the feature.

Performance implications of complex function evaluation at parse time require further analysis. Deeply nested function calls or computationally intensive operations could impact stylesheet parsing performance.

The specification does not address all preprocessor capabilities. Features like conditional logic, loops, and file imports remain outside the scope of CSS Functions and Mixins Module Level 1.

Migration from existing preprocessor-based codebases would require rewriting function definitions. The syntax differs from Sass and Less function syntax, preventing direct code reuse.

Debugging tools and developer experience features for custom functions have not been specified. Browser DevTools would need updates to display function definitions and trace value computations.

Figure 3: Privilege escalation from user to SYSTEM level

CSS custom functions use the @function at-rule to define named, parameterized value computations. The function body contains declarations that compute intermediate values, with a final result descriptor specifying the return value.

Parameters are declared in parentheses following the function name, with optional type annotations constraining acceptable input values. The specification supports default values for parameters, allowing functions to be called with fewer arguments than defined.

Inside the function body, local custom properties can be declared to hold intermediate computation results. The result descriptor specifies the final value returned when the function is called.

Function calls use standard CSS function syntax: the function name followed by parentheses containing argument values. The parser resolves the function call by substituting arguments for parameters and evaluating the function body.

Technical context (optional): The specification defines custom functions as operating in the "specified value" stage of CSS value processing. Function calls are resolved before inheritance and before computed value calculation, placing them earlier in the cascade than custom property substitution.

The specification represents a shift in CSS's design philosophy toward greater expressiveness within the language itself. Historically, complex stylesheet logic required external tools; native functions bring that capability into the platform.

Preprocessor ecosystems built around Sass, Less, and PostCSS face potential disruption if browsers widely adopt custom functions. The value proposition of these tools narrows when core functionality moves into native CSS.

Framework and library authors could leverage custom functions to provide more flexible APIs. Component libraries could expose customization functions rather than requiring users to override specific property values.

The standardization process itself demonstrates the CSS Working Group's responsiveness to developer needs. Custom functions have been requested by the web development community for years, and the specification's progress indicates active engagement with that feedback.

Confirmed:

• The CSS Functions and Mixins Module Level 1 specification exists as a CSS Working Group draft
• The specification introduces the @function at-rule for defining custom functions
• Experimental implementations have been demonstrated in browser development builds
• The specification is separate from but related to CSS mixins proposals

Unconfirmed or unclear:

• When or whether major browsers will implement the specification
• Performance characteristics of function evaluation in production scenarios
• How the specification will evolve based on implementer feedback
• Whether the feature will ship behind flags before general availability

Monitor browser vendor bug trackers and intent-to-implement announcements for signals of active development. Chrome, Firefox, and Safari engineering teams typically announce specification work through public channels.

Track CSS Working Group meeting minutes and specification revision history for changes to the draft. Significant revisions may indicate implementer feedback or design challenges being addressed.

Watch for updated technical previews and demos from browser developer relations teams. These often precede formal implementation announcements and provide insight into feature readiness.

Follow web standards community discussions on platforms where specification authors engage with developers. Feedback from early adopters of experimental implementations shapes final specification details.