Skip to content

formatter: Incorrectly escaping backslash inside styled components template strings #20208

@vieira

Description

@vieira

Input

import styled from 'styled-components';

const Example = styled.div`
  content: '\\201C';
`;

export default Example;

Config

{
  "ignorePatterns": ["node_modules/**", "vendor/**", "dist/**", "config/**"],
  "singleAttributePerLine": false,
  "singleQuote": true,
  "sortImports": {
    "internalPattern": ["@guuru/"],
    "newlinesBetween": false,
    "groups": [
      ["side_effect"],
      ["builtin"],
      ["external", "type-external"],
      ["internal", "type-internal"],
      ["parent", "type-parent"],
      ["sibling", "type-sibling"],
      ["index", "type-index"]
    ]
  }
}

Oxfmt output

Oxfmt version: 0.37

import styled from 'styled-components';

const Example = styled.div`
  content: '\\\\201C';
`;

export default Example;

Oxfmt playground link

No response

Prettier output

Prettier version: 3.8.1

import styled from 'styled-components';

const Example = styled.div`
  content: '\\201C';
`;

export default Example;

Prettier playground link

No response

Additional notes

oxfmt escapes already escaped backslashes inside css or styled template strings. Reruning oxfmt keeps adding more and more backslashes to the file.

Unable to reproduce in the Oxc playground.

$ yarn oxfmt --version
Version: 0.37.0
$ cat test.jsx 
import styled from 'styled-components';

const Example = styled.div`
  content: '\\201C';
`;

$ yarn oxfmt test.jsx 
Finished in 144ms on 1 files using 12 threads.

$ cat test.jsx 
import styled from 'styled-components';

const Example = styled.div`
  content: '\\\\201C';
`;

export default Example;

$ yarn oxfmt test.jsx 
Finished in 144ms on 1 files using 12 threads.

cat test.jsx
import styled from 'styled-components';

const Example = styled.div`
  content: '\\\\\\\\201C';
`;

Metadata

Metadata

Assignees

Labels

Type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions