Skip to content

feat(formatter_css): implement oxc_formatter_css#23320

Merged
graphite-app[bot] merged 1 commit into
mainfrom
06-11-feat_formatter_css_implement_oxc_formatter_css
Jun 29, 2026
Merged

feat(formatter_css): implement oxc_formatter_css#23320
graphite-app[bot] merged 1 commit into
mainfrom
06-11-feat_formatter_css_implement_oxc_formatter_css

Conversation

@leaysgur

@leaysgur leaysgur commented Jun 12, 2026

Copy link
Copy Markdown
Member

Since design of postcss, this parser is very lenient with syntax.
Because of this, the AST is also less detailed, so formatting processes often rely on text-based.

On the other hand, raffia is relatively strict, so it cannot parse some postcss plugin syntax.

While this part clearly creates a difference from Prettier, we have judged that it is not an issue since it still supports major plugins syntax and aligns with current trends.

leaysgur commented Jun 12, 2026

Copy link
Copy Markdown
Member Author

How to use the Graphite Merge Queue

Add either label to this PR to merge it via the merge queue:

  • 0-merge - adds this PR to the back of the merge queue
  • hotfix - for urgent changes, fast-track this PR to the front of the merge queue

You must have a Graphite account in order to use the merge queue. Sign up using this link.

An organization admin has enabled the Graphite Merge Queue in this repository.

Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue.

This stack of pull requests is managed by Graphite. Learn more about stacking.

@codspeed-hq

codspeed-hq Bot commented Jun 12, 2026

Copy link
Copy Markdown

Merging this PR will improve performance by 12.93%

⚡ 4 improved benchmarks
✅ 58 untouched benchmarks
⏩ 9 skipped benchmarks1

Performance Changes

Mode Benchmark BASE HEAD Efficiency
Simulation linter[kitchen-sink.tsx] 219.6 ms 180.2 ms +21.87%
Simulation linter[binder.ts] 34.1 ms 30.6 ms +11.38%
Simulation linter[App.tsx] 108.4 ms 98.4 ms +10.12%
Simulation linter[react.development.js] 15.7 ms 14.4 ms +8.79%

Tip

Curious why this is faster? Comment @codspeedbot explain why this is faster on this PR, or directly use the CodSpeed MCP with your agent.


Comparing 06-11-feat_formatter_css_implement_oxc_formatter_css (5bd8af9) with 06-10-refactor_oxfmt_handle_gql-in-js_by_oxc_formatter_graphql (72c79af)

Open in CodSpeed

Footnotes

  1. 9 benchmarks were skipped, so the baseline results were used instead. If they were deleted from the codebase, click here and archive them to remove them from the performance reports.

@leaysgur leaysgur force-pushed the 06-11-feat_formatter_css_implement_oxc_formatter_css branch 2 times, most recently from 28a038b to 85d4c99 Compare June 12, 2026 07:47
@leaysgur leaysgur force-pushed the 06-10-refactor_oxfmt_handle_gql-in-js_by_oxc_formatter_graphql branch from ef8d246 to 16da3fc Compare June 12, 2026 07:47
@leaysgur leaysgur force-pushed the 06-11-feat_formatter_css_implement_oxc_formatter_css branch 2 times, most recently from 2fc1c2a to fe3d559 Compare June 12, 2026 08:25
@leaysgur leaysgur force-pushed the 06-10-refactor_oxfmt_handle_gql-in-js_by_oxc_formatter_graphql branch 2 times, most recently from a74bf8f to a48a730 Compare June 15, 2026 01:28
@leaysgur leaysgur force-pushed the 06-11-feat_formatter_css_implement_oxc_formatter_css branch from fe3d559 to 5ba3377 Compare June 15, 2026 01:28
@leaysgur leaysgur force-pushed the 06-10-refactor_oxfmt_handle_gql-in-js_by_oxc_formatter_graphql branch from a48a730 to 9d2bc3d Compare June 15, 2026 09:19
@leaysgur leaysgur force-pushed the 06-11-feat_formatter_css_implement_oxc_formatter_css branch from 5ba3377 to 677e2ad Compare June 15, 2026 09:19
@leaysgur leaysgur force-pushed the 06-10-refactor_oxfmt_handle_gql-in-js_by_oxc_formatter_graphql branch from e8e75dd to e95645e Compare June 25, 2026 15:02
@leaysgur leaysgur force-pushed the 06-11-feat_formatter_css_implement_oxc_formatter_css branch from f811d49 to ad8da00 Compare June 25, 2026 15:02
@leaysgur leaysgur force-pushed the 06-10-refactor_oxfmt_handle_gql-in-js_by_oxc_formatter_graphql branch from e95645e to ed1619f Compare June 26, 2026 07:00
@leaysgur leaysgur force-pushed the 06-11-feat_formatter_css_implement_oxc_formatter_css branch from ad8da00 to 1a81491 Compare June 26, 2026 07:00
@leaysgur leaysgur force-pushed the 06-11-feat_formatter_css_implement_oxc_formatter_css branch from 1a81491 to 523533c Compare June 29, 2026 02:31
@leaysgur leaysgur force-pushed the 06-10-refactor_oxfmt_handle_gql-in-js_by_oxc_formatter_graphql branch from ed1619f to 72c79af Compare June 29, 2026 02:31
@graphite-app graphite-app Bot added the 0-merge Merge with Graphite Merge Queue label Jun 29, 2026
@graphite-app graphite-app Bot changed the base branch from 06-10-refactor_oxfmt_handle_gql-in-js_by_oxc_formatter_graphql to graphite-base/23320 June 29, 2026 02:56
@graphite-app graphite-app Bot force-pushed the graphite-base/23320 branch from 72c79af to a7fd35e Compare June 29, 2026 03:00
@graphite-app graphite-app Bot force-pushed the 06-11-feat_formatter_css_implement_oxc_formatter_css branch from 5bd8af9 to 4f39e52 Compare June 29, 2026 03:00
@graphite-app graphite-app Bot changed the base branch from graphite-base/23320 to main June 29, 2026 03:01
@graphite-app graphite-app Bot force-pushed the 06-11-feat_formatter_css_implement_oxc_formatter_css branch from 4f39e52 to 9a9a6b2 Compare June 29, 2026 03:01
@graphite-app

graphite-app Bot commented Jun 29, 2026

Copy link
Copy Markdown
Contributor

Merge activity

- Implement `oxc_formatter_css` crate
- Use `raffia` crate
  - https://github.com/g-plane/raffia
  - Supports CSS, LESS and SCSS
- Prettier uses `postcss` for parser
  - https://github.com/prettier/prettier/blob/1c6ba5539141552e0e8e22d401ea620d8fdff468/package.json#L100-L105

Since design of `postcss`, this parser is very lenient with syntax.
Because of this, the AST is also less detailed, so formatting processes often rely on text-based.

On the other hand, `raffia` is relatively strict, so it cannot parse some postcss plugin syntax.

While this part clearly creates a difference from Prettier, we have judged that it is not an issue since it still supports major plugins syntax and aligns with current trends.
@graphite-app graphite-app Bot force-pushed the 06-11-feat_formatter_css_implement_oxc_formatter_css branch from 9a9a6b2 to dffa4b3 Compare June 29, 2026 03:15
@graphite-app graphite-app Bot merged commit dffa4b3 into main Jun 29, 2026
30 checks passed
@graphite-app graphite-app Bot removed the 0-merge Merge with Graphite Merge Queue label Jun 29, 2026
@graphite-app graphite-app Bot deleted the 06-11-feat_formatter_css_implement_oxc_formatter_css branch June 29, 2026 03:24
camc314 added a commit that referenced this pull request Jun 29, 2026
# Oxlint
### 💥 BREAKING CHANGES

- 88f4455 str: [**BREAKING**] `Str` and `Ident` methods take
`&GetAllocator` (#23781) (overlookmotel)

### 🚀 Features

- f2091b3 ast: Unify old and new `AstBuilder`s (#23875) (overlookmotel)
- 1c8f50c linter: Add schema for `eslint/no-restricted-import` (#23642)
(Sysix)

### 🐛 Bug Fixes

- 7cb85c4 linter/eslint/no-negated-condition: Add autofix for negated
conditions (#23825) (Yagiz Nizipli)
- f7d1f50 oxlint, oxfmt: Enable `disable_old_builder` Cargo feature for
`oxc_ast` crate (#23886) (overlookmotel)
- d891990 linter/jsx-a11y/role-supports-aria-props: Ignore nullish prop
values (#23865) (Mikhail Baev)
- 94b6599 linter: Deduplicate missing plugin errors (#23853) (camc314)
- eff3eff linter/oxc/branches-sharing-code: Avoid else-if false
positives (#23843) (camc314)
- 2a2d3b9 linter/eslint/prefer-destructuring: Skip
`AssignmentExpression` autofixes (#23818) (camc314)
- ddc24ae linter/eslint/id-length: Respect checkGeneric for mapped type
keys (#23802) (bab)
- cd89202 linter/react/exhaustive-deps: Skip wrapper expression when
analyzing hook initializers (#23793) (camc314)
- 20e8285 linter/unicorn/prefer-native-coercion-function: Allow ts type
predicates (#23774) (camc314)
- d86f60b lsp: Normalize user config path to watch pattern (#23723)
(Sysix)
- 52032cf linter: Newline-terminate tsgolint errors (#23762) (Mikhail
Baev)
- 368fda7 linter/eslint/no-warning-comments: Avoid dropping generated
regex patterns (#23741) (camc314)
- ce44fbd linter/valid-title: Escape disallowed words regex (#23742)
(camc314)
- 3100d11 linter/prefer-called-exactly-once-with: Avoid out-of-bounds
slice panic at end of file (#23625) (Jerry Zhao)
- 742be36 refactor/node/handle-callback-err: Reject invalid regex config
(#23740) (camc314)
- d7be179 linter/eslint/no-restricted-globals: Handle shadowed locals
(#23736) (camc314)
- b3b1ff8 linter/vitest/expect-expect: Handle global vitest detection
correctly (#23734) (camc314)

### ⚡ Performance

- 68f9472 linter/jsx-a11y: Skip lowercasing non-aria attribute names
(#23906) (Lawrence Lin)
- b9312b4 linter/unicorn/prefer-export-from: Use keyed binding lookup
(#23893) (Marius Schulz)
- cd5204e linter/typescript/no-unsafe-declaration-merging: Use keyed
binding lookup (#23894) (Marius Schulz)
- e948498 linter/eslint/prefer-named-capture-group: Only dispatch for
relevant node types (#23868) (Connor Shea)
- 4ac7a8e linter/eslint/max-depth: Derive node types (#23896) (Connor
Shea)
- daeed09 linter/eslint/no-restricted-globals: Only scan unresolved
references (#23890) (camc314)
- e808514 linter/jest-vitest: Speed up no-standalone-expect (#23883)
(camc314)
- 8b165e5 linter/react/exhaustive-deps: Skip non-reactive calls early
(#23882) (camc314)
- 54005e7 linter/eslint/no-unused-vars: Precompute exported bindings
(#23881) (camc314)
- 9bc2f8c linter/unicorn/prefer-number-properties: Speed up global
checks (#23880) (camc314)
- 4ff104f linter: Optimize `require-hook` and `prefer-mock-*` rules to
run on specific node types (#23871) (Connor Shea)
- cc2213b linter: Run `no-underscore-dangle` only when relevant node
types are present (#23867) (Connor Shea)
- 3e55c21 linter/promise/always-return: Narrow to function node types
(#23878) (Connor Shea)
- 7136182 linter/jest-vitest: Speed up no-commented-out-tests (#23864)
(camc314)
- f138264 linter/eslint/no-script-url: Match javascript: prefix without
allocating (#23861) (Lawrence Lin)
- 7ef6895 linter/react/no-array-index-key: Delay index symbol lookup
(#23857) (camc314)
- 26bc171 linter/react/no-array-index-key: Match callback methods
directly (#23856) (camc314)
- 44fbbda linter/jsx-a11y/interactive-supports-focus: Check cheap
conditions first (#23854) (camc314)
- 84a5aa3 linter/eslint/no-extend-native: Skip lowercase references
early (#23851) (camc314)
- 88a74b2 linter/eslint/no-nonoctal-decimal-escape: Scan decimal escapes
as bytes (#23850) (camc314)
- fca69a8 linter: Skip traversal without this expressions (#23845)
(camc314)
- 838fd63 linter: Reduce preallocation for per-file diagnostics `Vec`
(#23705) (Marius Schulz)
- 417b506 linter/typescript/array-type: Remove full source text clone
(#23751) (Marius Schulz)

### 📚 Documentation

- 57e4469 linter/unicorn: Update prefer-dom-node-text-content rationale
(#23933) (Mikhail Baev)
- 3d61dea all: Correct capitalization in comments (#23887)
(overlookmotel)

### 🛡️ Security

- 3cdd18f deps: Update npm packages (#23690) (renovate[bot])
# Oxfmt
### 💥 BREAKING CHANGES

- 259e0cd oxfmt,formatter_graphql: [**BREAKING**] Support draft syntax
with removing prettier fallback (#23326) (leaysgur)
- accbc49 oxfmt: [**BREAKING**] Format `parser:css,less,scss` files +
css-in-js by `oxc_formatter_css` (#23321) (leaysgur)

### 🚀 Features

- dffa4b3 formatter_css: Implement `oxc_formatter_css` (#23320)
(leaysgur)
- 01de9ec oxfmt: Format `parser:graphql` files by
`oxc_formatter_graphql` (#23318) (leaysgur)
- 4e66212 formatter_graphql: Implement oxc_formatter_graphql (#23317)
(leaysgur)

### 🐛 Bug Fixes

- 67325ae formatter_css: Handle frontmatter language (#23819) (leaysgur)
- 3f355e5 formatter_graphql: Improve major prettier diffs (#23419)
(leaysgur)
- 48e2d78 formatter_css: Improve major prettier diffs (#23327)
(leaysgur)
- 8c07cad all: Enable `disable_old_builder` Cargo feature for `oxc_ast`
crate in tests (#23888) (overlookmotel)
- f7d1f50 oxlint, oxfmt: Enable `disable_old_builder` Cargo feature for
`oxc_ast` crate (#23886) (overlookmotel)
- d86f60b lsp: Normalize user config path to watch pattern (#23723)
(Sysix)

### ⚡ Performance

- 4ddcba0 formatter_core: Add printable-ASCII fast path to TextWidth
(#23913) (Lawrence Lin)

### 📚 Documentation

- b4d0dc9 oxfmt,formatter,formatter_css,formatter_core: Update AGENTS.md
(#23814) (leaysgur)

Co-authored-by: Boshen <1430279+Boshen@users.noreply.github.com>
Co-authored-by: Cameron <cameron.clark@hey.com>
camc314 pushed a commit that referenced this pull request Jul 3, 2026
- Implement `oxc_formatter_css` crate
- Use `raffia` crate
  - https://github.com/g-plane/raffia
  - Supports CSS, LESS and SCSS
- Prettier uses `postcss` for parser
  - https://github.com/prettier/prettier/blob/1c6ba5539141552e0e8e22d401ea620d8fdff468/package.json#L100-L105

Since design of `postcss`, this parser is very lenient with syntax.
Because of this, the AST is also less detailed, so formatting processes often rely on text-based.

On the other hand, `raffia` is relatively strict, so it cannot parse some postcss plugin syntax.

While this part clearly creates a difference from Prettier, we have judged that it is not an issue since it still supports major plugins syntax and aligns with current trends.
camc314 added a commit that referenced this pull request Jul 3, 2026
# Oxlint
### 💥 BREAKING CHANGES

- 88f4455 str: [**BREAKING**] `Str` and `Ident` methods take
`&GetAllocator` (#23781) (overlookmotel)

### 🚀 Features

- f2091b3 ast: Unify old and new `AstBuilder`s (#23875) (overlookmotel)
- 1c8f50c linter: Add schema for `eslint/no-restricted-import` (#23642)
(Sysix)

### 🐛 Bug Fixes

- 7cb85c4 linter/eslint/no-negated-condition: Add autofix for negated
conditions (#23825) (Yagiz Nizipli)
- f7d1f50 oxlint, oxfmt: Enable `disable_old_builder` Cargo feature for
`oxc_ast` crate (#23886) (overlookmotel)
- d891990 linter/jsx-a11y/role-supports-aria-props: Ignore nullish prop
values (#23865) (Mikhail Baev)
- 94b6599 linter: Deduplicate missing plugin errors (#23853) (camc314)
- eff3eff linter/oxc/branches-sharing-code: Avoid else-if false
positives (#23843) (camc314)
- 2a2d3b9 linter/eslint/prefer-destructuring: Skip
`AssignmentExpression` autofixes (#23818) (camc314)
- ddc24ae linter/eslint/id-length: Respect checkGeneric for mapped type
keys (#23802) (bab)
- cd89202 linter/react/exhaustive-deps: Skip wrapper expression when
analyzing hook initializers (#23793) (camc314)
- 20e8285 linter/unicorn/prefer-native-coercion-function: Allow ts type
predicates (#23774) (camc314)
- d86f60b lsp: Normalize user config path to watch pattern (#23723)
(Sysix)
- 52032cf linter: Newline-terminate tsgolint errors (#23762) (Mikhail
Baev)
- 368fda7 linter/eslint/no-warning-comments: Avoid dropping generated
regex patterns (#23741) (camc314)
- ce44fbd linter/valid-title: Escape disallowed words regex (#23742)
(camc314)
- 3100d11 linter/prefer-called-exactly-once-with: Avoid out-of-bounds
slice panic at end of file (#23625) (Jerry Zhao)
- 742be36 refactor/node/handle-callback-err: Reject invalid regex config
(#23740) (camc314)
- d7be179 linter/eslint/no-restricted-globals: Handle shadowed locals
(#23736) (camc314)
- b3b1ff8 linter/vitest/expect-expect: Handle global vitest detection
correctly (#23734) (camc314)

### ⚡ Performance

- 68f9472 linter/jsx-a11y: Skip lowercasing non-aria attribute names
(#23906) (Lawrence Lin)
- b9312b4 linter/unicorn/prefer-export-from: Use keyed binding lookup
(#23893) (Marius Schulz)
- cd5204e linter/typescript/no-unsafe-declaration-merging: Use keyed
binding lookup (#23894) (Marius Schulz)
- e948498 linter/eslint/prefer-named-capture-group: Only dispatch for
relevant node types (#23868) (Connor Shea)
- 4ac7a8e linter/eslint/max-depth: Derive node types (#23896) (Connor
Shea)
- daeed09 linter/eslint/no-restricted-globals: Only scan unresolved
references (#23890) (camc314)
- e808514 linter/jest-vitest: Speed up no-standalone-expect (#23883)
(camc314)
- 8b165e5 linter/react/exhaustive-deps: Skip non-reactive calls early
(#23882) (camc314)
- 54005e7 linter/eslint/no-unused-vars: Precompute exported bindings
(#23881) (camc314)
- 9bc2f8c linter/unicorn/prefer-number-properties: Speed up global
checks (#23880) (camc314)
- 4ff104f linter: Optimize `require-hook` and `prefer-mock-*` rules to
run on specific node types (#23871) (Connor Shea)
- cc2213b linter: Run `no-underscore-dangle` only when relevant node
types are present (#23867) (Connor Shea)
- 3e55c21 linter/promise/always-return: Narrow to function node types
(#23878) (Connor Shea)
- 7136182 linter/jest-vitest: Speed up no-commented-out-tests (#23864)
(camc314)
- f138264 linter/eslint/no-script-url: Match javascript: prefix without
allocating (#23861) (Lawrence Lin)
- 7ef6895 linter/react/no-array-index-key: Delay index symbol lookup
(#23857) (camc314)
- 26bc171 linter/react/no-array-index-key: Match callback methods
directly (#23856) (camc314)
- 44fbbda linter/jsx-a11y/interactive-supports-focus: Check cheap
conditions first (#23854) (camc314)
- 84a5aa3 linter/eslint/no-extend-native: Skip lowercase references
early (#23851) (camc314)
- 88a74b2 linter/eslint/no-nonoctal-decimal-escape: Scan decimal escapes
as bytes (#23850) (camc314)
- fca69a8 linter: Skip traversal without this expressions (#23845)
(camc314)
- 838fd63 linter: Reduce preallocation for per-file diagnostics `Vec`
(#23705) (Marius Schulz)
- 417b506 linter/typescript/array-type: Remove full source text clone
(#23751) (Marius Schulz)

### 📚 Documentation

- 57e4469 linter/unicorn: Update prefer-dom-node-text-content rationale
(#23933) (Mikhail Baev)
- 3d61dea all: Correct capitalization in comments (#23887)
(overlookmotel)

### 🛡️ Security

- 3cdd18f deps: Update npm packages (#23690) (renovate[bot])
# Oxfmt
### 💥 BREAKING CHANGES

- 259e0cd oxfmt,formatter_graphql: [**BREAKING**] Support draft syntax
with removing prettier fallback (#23326) (leaysgur)
- accbc49 oxfmt: [**BREAKING**] Format `parser:css,less,scss` files +
css-in-js by `oxc_formatter_css` (#23321) (leaysgur)

### 🚀 Features

- dffa4b3 formatter_css: Implement `oxc_formatter_css` (#23320)
(leaysgur)
- 01de9ec oxfmt: Format `parser:graphql` files by
`oxc_formatter_graphql` (#23318) (leaysgur)
- 4e66212 formatter_graphql: Implement oxc_formatter_graphql (#23317)
(leaysgur)

### 🐛 Bug Fixes

- 67325ae formatter_css: Handle frontmatter language (#23819) (leaysgur)
- 3f355e5 formatter_graphql: Improve major prettier diffs (#23419)
(leaysgur)
- 48e2d78 formatter_css: Improve major prettier diffs (#23327)
(leaysgur)
- 8c07cad all: Enable `disable_old_builder` Cargo feature for `oxc_ast`
crate in tests (#23888) (overlookmotel)
- f7d1f50 oxlint, oxfmt: Enable `disable_old_builder` Cargo feature for
`oxc_ast` crate (#23886) (overlookmotel)
- d86f60b lsp: Normalize user config path to watch pattern (#23723)
(Sysix)

### ⚡ Performance

- 4ddcba0 formatter_core: Add printable-ASCII fast path to TextWidth
(#23913) (Lawrence Lin)

### 📚 Documentation

- b4d0dc9 oxfmt,formatter,formatter_css,formatter_core: Update AGENTS.md
(#23814) (leaysgur)

Co-authored-by: Boshen <1430279+Boshen@users.noreply.github.com>
Co-authored-by: Cameron <cameron.clark@hey.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

A-formatter Area - Formatter

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant