Componentsv2.189.0
Iconsv1.19.0
MCPv0.8.61
Tokensv0.34.3

no-raw-pluma-css-variables

Github

Disallow raw Pluma CSS variable strings.


Use this rule to keep application styles on typed Pluma token exports instead of raw CSS variable strings.

Incorrect

export const row = style({
	color: 'var(--pluma-color-text-base)',
	border: `1px solid var(--pluma-color-border-base)`,
});

Correct

import { themeVars } from '@customerio/pluma-components/css/theme-tokens';

export const row = style({
	color: themeVars.color['text-base'],
	border: `${themeVars.border['width-0125']} solid ${themeVars.color['border-base']}`,
});

What is checked

The rule reports string literals and template literal text that contain var(--pluma-...). It does not try to infer dynamic string values.

On this page