Skip to content

formatter: Diff with Prettier on CSS-in-JS with xstyled color token #24000

Description

@thobas-dnvgl

Input

We are using https://xstyled.dev

const SelectItem = styled(Box)`
	display: flex;
	align-items: center;
	color: sandstone.10;
`;

Which allows color tokens like sandstone.10. This was untouched using the previous version of Oxfmt.

Config

import { defineConfig } from 'oxfmt';

export default defineConfig({
	printWidth: 120,
	singleQuote: true,
	trailingComma: 'all',
	useTabs: true,
	sortPackageJson: true,
	sortImports: {
		newlinesBetween: false,
		groups: [
			'type-import',
			['value-builtin', 'value-external'],
			'type-internal',
			'value-internal',
			['type-parent', 'type-sibling', 'type-index'],
			['value-parent', 'value-sibling', 'value-index'],
			'unknown',
		],
	},
	ignorePatterns: ['src/routes/routeTree.gen.ts', 'static-storybook', 'test/fixtures/storybook/api/*.json'],
});

Oxfmt output

Oxfmt version: 0.57.0

const SelectItem = styled(Box)`
	display: flex;
	align-items: center;
	color: sandstone 0.1;
`;

Oxfmt playground link

No response

Prettier output

Prettier version: 3.9.4

const SelectItem = styled(Box)`
	display: flex;
	align-items: center;
	color: sandstone.10;
`;

Prettier playground link

No response

Additional notes

color: sandstone.10; now becomes color: sandstone 0.1; with the latest oxfmt

It's not a pure CSS code I agree, but it worked fine when oxfmt was relying on prettier to format CSS-in-JS.

Metadata

Metadata

Assignees

Labels

A-formatter-prettier-diffArea - Formatter difference with PrettierF-lang-cssFormatter - oxc_formatter_css related

Type

Fields

Priority

None yet

Effort

None yet

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions