[API] Consider removing evaluation of values during build-time?

[oliviertassinari]

Summary

As far as I understand it, today, Pigment CSS works like Linaria, we evaluate the values at built-time, e.g. https://github.com/callstack/linaria?tab=readme-ov-file#syntax the font and color transformations.

import { css } from '@linaria/core';
import { modularScale, hiDPI } from 'polished';
import fonts from './fonts';

// Write your styles in `css` tag
const header = css`
  text-transform: uppercase;
  font-family: ${fonts.heading};
  font-size: ${modularScale(2)};

  ${hiDPI(1.5)} {
    font-size: ${modularScale(2.5)};
  }
`;

// Then use it as a class name
<h1 className={header}>Hello world</h1>;

This creates a very large build performance hit.

What if we were to remove this constraint? As far as I understand the value of Pigment CSS, it's about being able to CSS Modules but without having a separate file for it. When using CSS Modules, you can't import JavaScript functions so it seems that it's not that important.

Examples

• Yak only resolves static values and whitelisted files: https://yak.js.org/migration-from-styled-components#add-yak-files. This seems much better on paper.

Motivation

Improve build speed, simplify integration

Search keywords: -