Skip to content

fix inconsistent parsing of injected expressions in styled-components' css#8097

Merged
thorn0 merged 18 commits intoprettier:masterfrom
thecodrr:inconsistent
May 7, 2020
Merged

fix inconsistent parsing of injected expressions in styled-components' css#8097
thorn0 merged 18 commits intoprettier:masterfrom
thecodrr:inconsistent

Conversation

@thecodrr
Copy link
Copy Markdown
Contributor

@thecodrr thecodrr commented Apr 20, 2020

Fixes #8095

This fixes this error:

Error: Couldn't insert all the expressions
    at transformCssDoc (https://prettier.io/lib/standalone.js:22171:11)
    at Object.embed$4 [as embed] (https://prettier.io/lib/standalone.js:22011:18)
    at Object.printSubtree (https://prettier.io/lib/standalone.js:15781:31)
    at callPluginPrintFunction (https://prettier.io/lib/standalone.js:15898:29)
    at https://prettier.io/lib/standalone.js:15863:16
    at Object.printComments (https://prettier.io/lib/standalone.js:15586:17)
    at printGenerically (https://prettier.io/lib/standalone.js:15862:22)
    at FastPath.call (https://prettier.io/lib/standalone.js:15700:16)
    at printPathNoParens (https://prettier.io/lib/standalone.js:25178:91)
    at Object.genericPrint$3 [as print] (https://prettier.io/lib/standalone.js:23541:28)

When this is parsed:

const Header = styled.div`
  ${something()}
  & > ${Child}:not(:first-child) {
margin-left:5px;
}
`
  • I’ve added tests to confirm my change works.
  • (If changing the API or CLI) I’ve documented the changes I’ve made (in the docs/ directory)
  • (If the change is user-facing) I’ve added my changes to changelog_unreleased/*/pr-XXXX.md file following changelog_unreleased/TEMPLATE.md.
  • I’ve read the contributing guidelines.

Try the playground for this PR

@thorn0
Copy link
Copy Markdown
Member

thorn0 commented Apr 20, 2020

What about this?
Prettier pr-8097
Playground link

--parser babel

Input:

const Header = styled.div`
  ${something()}
  & > ${Child}${Child2}:not(:first-child) {
margin-left:5px;
}
`

Output:

Error: Couldn't insert all the expressions
    at transformCssDoc (https://deploy-preview-8097--prettier.netlify.app/lib/standalone.js:24233:13)
    at Object.embed$3 [as embed] (https://deploy-preview-8097--prettier.netlify.app/lib/standalone.js:24077:20)
    at Object.printSubtree (https://deploy-preview-8097--prettier.netlify.app/lib/standalone.js:16837:30)
    at callPluginPrintFunction (https://deploy-preview-8097--prettier.netlify.app/lib/standalone.js:16958:33)
    at https://deploy-preview-8097--prettier.netlify.app/lib/standalone.js:16922:49
    at Object.printComments (https://deploy-preview-8097--prettier.netlify.app/lib/standalone.js:16595:21)
    at printGenerically (https://deploy-preview-8097--prettier.netlify.app/lib/standalone.js:16922:24)
    at FastPath.call (https://deploy-preview-8097--prettier.netlify.app/lib/standalone.js:16715:22)
    at printPathNoParens (https://deploy-preview-8097--prettier.netlify.app/lib/standalone.js:28820:92)
    at Object.genericPrint$3 [as print] (https://deploy-preview-8097--prettier.netlify.app/lib/standalone.js:27330:32)

@thecodrr
Copy link
Copy Markdown
Contributor Author

@thorn0 looking into it. thanks for pointing it out.

@thecodrr
Copy link
Copy Markdown
Contributor Author

@thorn0 should be working as expected now.

Copy link
Copy Markdown
Member

@thorn0 thorn0 left a comment

Choose a reason for hiding this comment

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

Prettier pr-8097
Playground link

--parser babel

Input:

styled.div`
font-family: "${a}", "${b}";
`

Output:

Error: Couldn't insert all the expressions
    at transformCssDoc (https://deploy-preview-8097--prettier.netlify.app/lib/standalone.js:24233:13)
    at Object.embed$3 [as embed] (https://deploy-preview-8097--prettier.netlify.app/lib/standalone.js:24077:20)
    at Object.printSubtree (https://deploy-preview-8097--prettier.netlify.app/lib/standalone.js:16837:30)
    at callPluginPrintFunction (https://deploy-preview-8097--prettier.netlify.app/lib/standalone.js:16958:33)
    at https://deploy-preview-8097--prettier.netlify.app/lib/standalone.js:16922:49
    at Object.printComments (https://deploy-preview-8097--prettier.netlify.app/lib/standalone.js:16595:21)
    at printGenerically (https://deploy-preview-8097--prettier.netlify.app/lib/standalone.js:16922:24)
    at FastPath.call (https://deploy-preview-8097--prettier.netlify.app/lib/standalone.js:16715:22)
    at printPathNoParens (https://deploy-preview-8097--prettier.netlify.app/lib/standalone.js:28831:92)
    at Object.genericPrint$3 [as print] (https://deploy-preview-8097--prettier.netlify.app/lib/standalone.js:27341:32)

@thecodrr thecodrr requested a review from thorn0 April 20, 2020 19:47
@thecodrr thecodrr requested a review from thorn0 April 21, 2020 15:25
@thorn0 thorn0 linked an issue Apr 23, 2020 that may be closed by this pull request
Copy link
Copy Markdown
Member

@alexander-akait alexander-akait left a comment

Choose a reason for hiding this comment

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

Hope, we will not break something, CSS-in-JS is our pain 😄

@thorn0 thorn0 merged commit 8acc9e2 into prettier:master May 7, 2020
@github-actions github-actions bot locked as resolved and limited conversation to collaborators May 8, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

None yet

Projects

None yet

4 participants