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.
Input
We are using https://xstyled.dev
Which allows color tokens like
sandstone.10. This was untouched using the previous version of Oxfmt.Config
Oxfmt output
Oxfmt version:
0.57.0Oxfmt playground link
No response
Prettier output
Prettier version:
3.9.4Prettier playground link
No response
Additional notes
color: sandstone.10;now becomescolor: sandstone 0.1;with the latest oxfmtIt's not a pure CSS code I agree, but it worked fine when oxfmt was relying on prettier to format CSS-in-JS.