[pigment-css] Fix `keyframes` serialize styles error #41395

siriwatknp · 2024-03-07T13:59:55Z

Root cause

Passing empty args ([]) to emotion's serializeStyles is not allowed.

Full error:

1) Pigment CSS - keyframes
       basics:
     Expected test not to call console.error() but instead received 1 calls.
If the warning is expected, test for it explicitly by using the toErrorDev() matcher.
Test location:
  /Users/siriwatknp/Personal-Repos/material-ui/packages/pigment-react/tests/keyframes/keyframes.test.ts 
console.error message #1:
  You have illegal escape sequence in your template literal, most likely inside content's property value.
Because you write your CSS inside a JavaScript string you actually have to do double escaping, so for example "content: '\00d7';" should become "content: '\\00d7';".
You can read more about this here:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#ES2018_revision_of_illegal_escape_sequences
Stack:
    at Object.serializeStyles (/Users/siriwatknp/Personal-Repos/material-ui/node_modules/.pnpm/@[email protected]/node_modules/@emotion/serialize/dist/emotion-serialize.cjs.dev.js:278:17)
    at KeyframesProcessor.generateArtifacts (/Users/siriwatknp/Personal-Repos/material-ui/packages/pigment-react/src/processors/keyframes.ts:97:6)
    at KeyframesProcessor.handleTemplate (/Users/siriwatknp/Personal-Repos/material-ui/packages/pigment-react/src/processors/keyframes.ts:92:7)
    at KeyframesProcessor.build (/Users/siriwatknp/Personal-Repos/material-ui/packages/pigment-react/src/processors/keyframes.ts:51:5)

The rest of the changes are splitting tests into small cases

I have followed (at least) the PR section of the contributing guide.

mui-bot · 2024-03-07T14:02:38Z

Netlify deploy preview

https://deploy-preview-41395--material-ui.netlify.app/

Bundle size report

No bundle size changes (Toolpad)
No bundle size changes

Generated by 🚫 dangerJS against 5f36e63

…pigment-tag-template

siriwatknp · 2024-03-08T11:22:02Z

packages/pigment-react/src/processors/keyframes.ts

+    const [, ...callParamsRest] = callParams;
+
+    callParamsRest.flat().forEach((item) => {
+      if ('kind' in item) {
+        this.dependencies.push(item);
+      }
+    });


follow the styled implementation.

siriwatknp · 2024-03-08T11:23:38Z

packages/pigment-react/src/processors/keyframes.ts

+      args.length > 0
+        ? [styleObjOrTaggged as Interpolation<{}>, ...args]
+        : [styleObjOrTaggged as Interpolation<{}>],


This condition is required to prevent ILLEGAL_ESCAPE_SEQUENCE_ERROR from emotion because serializeStyles assumes that [] is an expression.

packages/pigment-react/tests/tag-call/fixtures/tag-call.input.js

packages/pigment-react/tests/testUtils.ts

…pigment-tag-template

siriwatknp added 9 commits March 6, 2024 11:58

add prettier and init result at first run

acd39c2

run install

bdb1714

add support for tagged template call

3eb88d9

update keyframes to handle tagged template call

b217aaf

revert

57404e9

add interpolation support to keyframes

c590dbb

add a comment

7e59194

remove condition test

baeb88a

extract common functions

80047c6

danilo-leal added the package: pigment-css Specific to Pigment CSS. label Mar 7, 2024

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged. label Mar 8, 2024

siriwatknp added 3 commits March 8, 2024 16:43

restore

bfa524d

Merge branch 'master' of https://github.com/mui/material-ui into fix/…

b1b83a9

…pigment-tag-template

fix keyframes and split tests

453a101

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged. label Mar 8, 2024

siriwatknp commented Mar 8, 2024

View reviewed changes

remove only

ec88614

siriwatknp commented Mar 8, 2024

View reviewed changes

packages/pigment-react/tests/tag-call/fixtures/tag-call.input.js Outdated Show resolved Hide resolved

siriwatknp commented Mar 8, 2024

View reviewed changes

packages/pigment-react/tests/testUtils.ts Outdated Show resolved Hide resolved

revert tsconfig change

0ec65c9

siriwatknp marked this pull request as ready for review March 8, 2024 11:30

siriwatknp requested a review from brijeshb42 March 8, 2024 11:30

add babel presets and plugins to resolve modules

acce2e3

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged. label Mar 8, 2024

oliviertassinari changed the title ~~[pigment] Add a support for tagged template call~~ [pigment-css] Add a support for tagged template call Mar 10, 2024

siriwatknp added 3 commits March 11, 2024 09:44

Merge branch 'master' of https://github.com/mui/material-ui into fix/…

4aec0cb

…pigment-tag-template

remove tag-call

160d5d3

update test output

9ad2382

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged. label Mar 12, 2024

siriwatknp enabled auto-merge (squash) March 12, 2024 07:11

siriwatknp merged commit d93226a into mui:master Mar 12, 2024

This was referenced May 19, 2024

[Snyk] Upgrade @mui/material from 5.2.2 to 5.15.15 NOUIY/cloud#3758

Open

[Snyk] Upgrade @mui/styles from 5.2.3 to 5.15.15 NOUIY/cloud#3759

Open

[Snyk] Upgrade @mui/icons-material from 5.2.5 to 5.15.15 NOUIY/cloud#3760

Open

This was referenced May 19, 2024

[Snyk] Upgrade @mui/material from 5.11.3 to 5.15.15 Nishaan-Ghimire/Dashboard#3

Open

[Snyk] Upgrade @mui/icons-material from 5.11.0 to 5.15.15 Nishaan-Ghimire/Dashboard#5

Open

nachodev-ui mentioned this pull request May 20, 2024

[Snyk] Upgrade @mui/material from 5.13.1 to 5.15.15 nachodev-ui/LI-Frontend#190

Open

FaroukAmr mentioned this pull request May 20, 2024

[Snyk] Upgrade @mui/material from 5.10.13 to 5.15.15 FaroukAmr/Web-Application#992

Open

jfnw-capco mentioned this pull request May 20, 2024

[Snyk] Upgrade @mui/material from 5.10.1 to 5.15.15 capcodigital/engineering-website#334

Open

This was referenced May 20, 2024

[Snyk] Upgrade @mui/material from 5.14.15 to 5.15.15 michael-moussaoui/cryoAttitudeApp#2

Open

[Snyk] Upgrade @mui/icons-material from 5.14.15 to 5.15.15 michael-moussaoui/cryoAttitudeApp#4

Open

This was referenced May 20, 2024

[Snyk] Upgrade @mui/material from 5.2.2 to 5.15.15 NOUIY/cloud#3768

Open

[Snyk] Upgrade @mui/styles from 5.2.3 to 5.15.15 NOUIY/cloud#3769

Open

sergivj mentioned this pull request May 21, 2024

[Snyk] Upgrade @mui/material from 5.14.18 to 5.15.15 sergivj/Blog-Django-React#93

Open

This was referenced May 21, 2024

[Snyk] Upgrade @mui/material from 5.2.2 to 5.15.15 NOUIY/cloud#3770

Open

[Snyk] Upgrade @mui/icons-material from 5.2.0 to 5.15.15 NOUIY/cloud#3771

Open

RTHariSankar mentioned this pull request May 21, 2024

[Snyk] Upgrade @mui/material from 5.14.3 to 5.15.15 RTHariSankar/CURRICULUM-TRACKER#246

Open

GitLukeW mentioned this pull request May 21, 2024

[Snyk] Upgrade @mui/material from 5.14.11 to 5.15.15 TeamProductionSystem/Momentors_Frontend#502

Open

aqibawan12 mentioned this pull request May 21, 2024

[Snyk] Upgrade @mui/material from 5.10.6 to 5.15.15 aqibawan12/Web-app#334

Open

Poseidon-G mentioned this pull request May 21, 2024

[Snyk] Upgrade @mui/material from 5.5.0 to 5.15.15 Poseidon-G/generate-tool-fe#247

Open

Crushoverride007 mentioned this pull request May 21, 2024

[Snyk] Upgrade @mui/material from 5.4.1 to 5.15.15 Crushoverride007/Project-Sigma#415

Open

mxiloyannis mentioned this pull request May 21, 2024

[Snyk] Upgrade @mui/material from 5.10.2 to 5.15.15 mxiloyannis/personal_website#121

Closed

DanneelsSophie mentioned this pull request May 22, 2024

[Snyk] Upgrade @mui/material from 5.4.1 to 5.15.15 DanneelsSophie/events#889

Open

heliumtank92 mentioned this pull request Jun 8, 2024

[Snyk] Upgrade @mui/system from 5.14.20 to 5.15.15 heliumtank92/am92-react-design-system#9

Open

Helmut-Tischler mentioned this pull request Jun 10, 2024

[Snyk] Upgrade @mui/system from 5.12.3 to 5.15.15 Helmut-Tischler/trivialquiz#5

Open

This was referenced Jun 15, 2024

[Snyk] Upgrade @mui/system from 5.10.10 to 5.15.15 nejidevelops/Bofulo-School#80

Open

[Snyk] Upgrade @mui/system from 5.10.10 to 5.15.15 nejidevelops/School-Management-System-ALX#18

Open

dsypasit mentioned this pull request Jun 20, 2024

[Snyk] Upgrade @mui/system from 5.14.11 to 5.15.15 TNKbenz/make-sense#12

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

[pigment-css] Fix `keyframes` serialize styles error #41395

[pigment-css] Fix `keyframes` serialize styles error #41395

Uh oh!

siriwatknp commented Mar 7, 2024 •

edited

Loading

Uh oh!

mui-bot commented Mar 7, 2024 •

edited

Loading

Uh oh!

siriwatknp Mar 8, 2024

Uh oh!

siriwatknp Mar 8, 2024 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Uh oh!

[pigment-css] Fix keyframes serialize styles error #41395

[pigment-css] Fix keyframes serialize styles error #41395

Uh oh!

Conversation

siriwatknp commented Mar 7, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Root cause

Uh oh!

mui-bot commented Mar 7, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Netlify deploy preview

Bundle size report

Uh oh!

siriwatknp Mar 8, 2024

Choose a reason for hiding this comment

Uh oh!

siriwatknp Mar 8, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

[pigment-css] Fix `keyframes` serialize styles error #41395

[pigment-css] Fix `keyframes` serialize styles error #41395

siriwatknp commented Mar 7, 2024 •

edited

Loading

mui-bot commented Mar 7, 2024 •

edited

Loading

siriwatknp Mar 8, 2024 •

edited

Loading