Fix ignoreFlag not works bug

[kyoncy]

What: Fix #2478

When using the ignoreFlag for nth-child being potentially unsafe with server rendering, the first instance of the flag works while the second does not (workaround provided).

Why: To ignore unsafe selector warning.

How: The current implementation only compared the previous element, so all elements are now compared.

Checklist:

• Documentation N/A
• [x] Tests
• [x] Code complete
• [x] Changeset

[changeset-bot[bot]]

🦋 Changeset detected

Latest commit: b82bcee09b70ae5f33240ea516c8d0024199bb0e

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@emotion/cache	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[codesandbox-ci[bot]]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit b82bcee09b70ae5f33240ea516c8d0024199bb0e:

Sandbox	Source
Emotion	Configuration

[codecov[bot]]

Codecov Report

Merging #2751 (b82bcee) into main (d39379c) will decrease coverage by 1.08%. The diff coverage is 81.25%.

Impacted Files	Coverage Δ
packages/cache/src/stylis-plugins.js	86.08% <81.25%> (-13.92%)	:arrow_down:
packages/serialize/src/index.js	93.98% <0.00%> (-6.02%)	:arrow_down:
packages/react/src/global.js	94.73% <0.00%> (-3.51%)	:arrow_down:
packages/react/src/class-names.js	97.10% <0.00%> (-2.90%)	:arrow_down:

[kyoncy]

@srmagura Thanks for reviewing!

Can you add a changeset to record this patch-level change to @emotion/cache?

Add a changeset commit!

Can you refactor the for..of to a classic for loop or a .forEach()?

I used classic for loop because it is returnable!

[kyoncy]

@Andarist How is this going?

[Andarist]

Could you check if this would fix the recently reported issue: https://github.com/emotion-js/emotion/issues/2763 ?

[kyoncy]

Could you check if this would fix the recently reported issue: #2763 ?

@Andarist Sorry for the late reply. I applied the modifications and deployed the same code as in the codesandbox example!

deployed site: https://kyoncy.github.io/emotion-test/ repository: https://github.com/kyoncy/emotion-test/tree/main

[Andarist]

@kyoncy thanks for taking a look. I've pushed out some commits to make this comment detection more strict - we should be able to land this soon. I will just wait a couple of days to give a chance to other maintainers to review this

[swernerx]

Hi! I know this is not a fully valid bug report. Still it seems that updating from v11.10.1 to v11.10.2 breaks in our application. I receive the error: Cannot read properties of undefined (reading 'type') at isIgnoringComment2. Possibly element can be null/undefined?

[swernerx]

Seems to be related to:

var isIgnoringComment = function isIgnoringComment(element) {
  return element.type === 'comm' && element.children.indexOf(ignoreFlag) > -1;
};

which can be fixed using:

var isIgnoringComment = function isIgnoringComment(element) {
  return element && element.type === 'comm' && element.children.indexOf(ignoreFlag) > -1;
};

[swernerx]

The code involved producing the issue is:

  terminatedContract: {
    '& .contractIcon, tr:nth-child(1) td:nth-child(1), tr:nth-child(n+2) td': {
      opacity: 0.4
    }
  }

I guess it's related to the multiple usage of :nth-child. When I migrate that code to:

  terminatedContract: {
    '& .contractIcon, tr:nth-of-type(1) td:nth-of-type(1), tr:nth-of-type(n+2) td': {
      opacity: 0.4
    }
  }

the issue disappears.

[Andarist]

Thank you for the report - I've already merged in the fix for this and gonna release a new version in a second.