Skip to content

feat: add validation for letter spacing that allows negative values #138

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mxschll merged 5 commits into from
Feb 20, 2026
Merged

feat: add validation for letter spacing that allows negative values #138

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
cba5776
feat: add validation for letter spacing that allows negative values
mxschll Feb 19, 2026
02d3088
chore: update package-lock.json
mxschll Feb 19, 2026
2aecc38
feat: allow values without leading zeros
mxschll Feb 19, 2026
4cf2152
retrigger checks
mxschll Feb 19, 2026
665a8f1
feat: allow css keyword values
mxschll Feb 19, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 0 additions & 21 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

40 changes: 40 additions & 0 deletions src/build/tasks/__tests__/theme-json-schema.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -268,4 +268,44 @@ describe('validateJson', () => {
});
});
});

describe('letter spacing', () => {
test('accepts positive, negative, and zero values with valid units', () => {
['1px', '-0.5rem', '0em', '0.25px', '-1.5em', '.5px', '-.5rem'].forEach((validValue) => {
expect(
validateTokens({
'letter-spacing-button': {
$value: validValue,
},
}),
).toBe(true);
});
});

test('accepts keyword values', () => {
['normal', 'inherit', 'initial', 'revert', 'revert-layer', 'unset'].forEach((validValue) => {
expect(
validateTokens({
'letter-spacing-button': {
$value: validValue,
},
}),
).toBe(true);
});
});

test('rejects invalid formats', () => {
['100', '-1', '1.5', '100 px', '20ps', '.px', '-.rem'].forEach((invalidValue) => {
expect(() =>
validateTokens({
'letter-spacing-button': {
$value: invalidValue,
},
}),
).toThrowError(
'Tokens validation error: instance.tokens.letter-spacing-button.$value does not match pattern "normal|inherit|initial|revert|revert-layer|unset|-?\\\\d*\\\\.?\\\\d+(px|rem|em)"',
);
});
});
});
});
6 changes: 5 additions & 1 deletion src/build/tasks/theme-json-schema.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,10 @@ const textWeightValueSchema: GenericSchema = {
type: 'string',
pattern: '300|400|700|900|normal|bold|light|heavy',
};
const letterSpacingValueSchema: GenericSchema = {
type: 'string',
pattern: 'normal|inherit|initial|revert|revert-layer|unset|-?\\d*\\.?\\d+(px|rem|em)',
Copy link
Copy Markdown
Member

@amanabiy amanabiy Feb 20, 2026 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This pattern match partial strings like revert-something or 12px extra-text. Should we use anchors and word boundaries to ensure only exact matches are accepted something like this: ^(\b(normal|inherit|initial|revert-layer|revert|unset)\b|-?\d*\.?\d+(px|rem|em))$.

I see the others also have similar implementation so I am wondering if we can do this maybe as a follow up.

};
const durationValueSchema: GenericSchema = { type: 'string', pattern: '\\d+m?s' };

const visualModes = ['light', 'dark'];
Expand Down Expand Up @@ -79,7 +83,7 @@ const tokensSchema: GenericSchema = {
'^font-size-': getTokenSchema(textSizeValueSchema),
'^line-height-': getTokenSchema(textSizeValueSchema),
'^font-weight-': getTokenSchema(textWeightValueSchema),
'^letter-spacing-': getTokenSchema(textSizeValueSchema),
'^letter-spacing-': getTokenSchema(letterSpacingValueSchema),
},
additionalProperties: false,
};
Expand Down
Loading