Skip to content

Commit

Permalink
Add ignore flag for ssr unreliable selectors warning (#1209)
Browse files Browse the repository at this point in the history
  • Loading branch information
@kylegach @emmatown
kylegach authored and emmatown committed Feb 22, 2019
1 parent a7dfb87 commit d3a34b3
Show file tree
Hide file tree
Showing 3 changed files with 327 additions and 39 deletions.
35 changes: 22 additions & 13 deletions packages/cache/src/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -201,21 +201,30 @@ let createCache = (options?: Options): EmotionCache => {

stylis.use((context, content, selectors) => {
switch (context) {
case 2: {
for (let i = 0, len = selectors.length; len > i; i++) {
// :last-child isn't included here since it's safe
// because a style element will never be the last element
let match = selectors[i].match(/:(first|nth|nth-last)-child/)
if (match !== null) {
console.error(
`The pseudo class "${
match[0]
}" is potentially unsafe when doing server-side rendering. Try changing it to "${
match[1]
}-of-type"`
case -1: {
const flag =
'emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason'
const unsafePseudoClasses = content.match(
/(:first|:nth|:nth-last)-child/g
)

if (unsafePseudoClasses) {
unsafePseudoClasses.forEach(unsafePseudoClass => {
const ignoreRegExp = new RegExp(
`${unsafePseudoClass}.*\\/\\* ${flag} \\*\\/`
)
}
const ignore = ignoreRegExp.test(content)

if (unsafePseudoClass && !ignore) {
console.error(
`The pseudo class "${unsafePseudoClass}" is potentially unsafe when doing server-side rendering. Try changing it to "${
unsafePseudoClass.split('-child')[0]
}-of-type".`
)
}
})
}

break
}
}
Expand Down
234 changes: 229 additions & 5 deletions packages/core/__tests__/__snapshots__/warnings.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,213 @@ exports[`does warn when invalid values are passed for the content property 2`] =
/>
`;

exports[`does warn when using :first-child 1`] = `
exports[`global with css prop 1`] = `null`;

exports[`unsafe pseudo classes does not warn when using with flag: /* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */ ":first-child /* [flag] */" in a style object 1`] = `
.emotion-0:first-child {
color: rebeccapurple;
}
<div
className="emotion-0"
/>
`;

exports[`unsafe pseudo classes does not warn when using with flag: /* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */ ":first-child /* [flag] */" in a style string 1`] = `
.emotion-0:first-child {
color: rebeccapurple;
}
<div
className="emotion-0"
/>
`;

exports[`unsafe pseudo classes does not warn when using with flag: /* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */ ":first-child :nth-child(3) /* [flag] */" in a style object 1`] = `
.emotion-0:first-child :nth-child(3) {
color: rebeccapurple;
}
<div
className="emotion-0"
/>
`;

exports[`unsafe pseudo classes does not warn when using with flag: /* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */ ":first-child :nth-child(3) /* [flag] */" in a style string 1`] = `
.emotion-0:first-child :nth-child(3) {
color: rebeccapurple;
}
<div
className="emotion-0"
/>
`;

exports[`unsafe pseudo classes does not warn when using with flag: /* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */ ":first-child span /* [flag] */" in a style object 1`] = `
.emotion-0:first-child span {
color: rebeccapurple;
}
<div
className="emotion-0"
/>
`;

exports[`unsafe pseudo classes does not warn when using with flag: /* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */ ":first-child span /* [flag] */" in a style string 1`] = `
.emotion-0:first-child span {
color: rebeccapurple;
}
<div
className="emotion-0"
/>
`;

exports[`unsafe pseudo classes does not warn when using with flag: /* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */ ":first-child, :nth-child(3) /* [flag] */" in a style object 1`] = `
.emotion-0:first-child,
.emotion-0:nth-child(3) {
color: rebeccapurple;
}
<div
className="emotion-0"
/>
`;

exports[`unsafe pseudo classes does not warn when using with flag: /* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */ ":first-child, :nth-child(3) /* [flag] */" in a style string 1`] = `
.emotion-0:first-child,
.emotion-0:nth-child(3) {
color: rebeccapurple;
}
<div
className="emotion-0"
/>
`;

exports[`unsafe pseudo classes does not warn when using with flag: /* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */ ":first-child, span /* [flag] */" in a style object 1`] = `
.emotion-0:first-child,
.emotion-0 span {
color: rebeccapurple;
}
<div
className="emotion-0"
/>
`;

exports[`unsafe pseudo classes does not warn when using with flag: /* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */ ":first-child, span /* [flag] */" in a style string 1`] = `
.emotion-0:first-child,
.emotion-0 span {
color: rebeccapurple;
}
<div
className="emotion-0"
/>
`;

exports[`unsafe pseudo classes does not warn when using with flag: /* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */ ":first-child:nth-child(3) /* [flag] */" in a style object 1`] = `
.emotion-0:first-child:nth-child(3) {
color: rebeccapurple;
}
<div
className="emotion-0"
/>
`;

exports[`unsafe pseudo classes does not warn when using with flag: /* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */ ":first-child:nth-child(3) /* [flag] */" in a style string 1`] = `
.emotion-0:first-child:nth-child(3) {
color: rebeccapurple;
}
<div
className="emotion-0"
/>
`;

exports[`unsafe pseudo classes does not warn when using with flag: /* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */ ":not(:first-child) /* [flag] */" in a style object 1`] = `
.emotion-0:not(:first-child) {
color: rebeccapurple;
}
<div
className="emotion-0"
/>
`;

exports[`unsafe pseudo classes does not warn when using with flag: /* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */ ":not(:first-child) /* [flag] */" in a style string 1`] = `
.emotion-0:not(:first-child) {
color: rebeccapurple;
}
<div
className="emotion-0"
/>
`;

exports[`unsafe pseudo classes does not warn when using with flag: /* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */ ":not(:nth-child(3)) /* [flag] */" in a style object 1`] = `
.emotion-0:not(:nth-child(3)) {
color: rebeccapurple;
}
<div
className="emotion-0"
/>
`;

exports[`unsafe pseudo classes does not warn when using with flag: /* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */ ":not(:nth-child(3)) /* [flag] */" in a style string 1`] = `
.emotion-0:not(:nth-child(3)) {
color: rebeccapurple;
}
<div
className="emotion-0"
/>
`;

exports[`unsafe pseudo classes does not warn when using with flag: /* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */ ":nth-child(3) /* [flag] */" in a style object 1`] = `
.emotion-0:nth-child(3) {
color: rebeccapurple;
}
<div
className="emotion-0"
/>
`;

exports[`unsafe pseudo classes does not warn when using with flag: /* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */ ":nth-child(3) /* [flag] */" in a style string 1`] = `
.emotion-0:nth-child(3) {
color: rebeccapurple;
}
<div
className="emotion-0"
/>
`;

exports[`unsafe pseudo classes does not warn when using with flag: /* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */ ":nth-last-child(7) /* [flag] */" in a style object 1`] = `
.emotion-0:nth-last-child(7) {
color: rebeccapurple;
}
<div
className="emotion-0"
/>
`;

exports[`unsafe pseudo classes does not warn when using with flag: /* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */ ":nth-last-child(7) /* [flag] */" in a style string 1`] = `
.emotion-0:nth-last-child(7) {
color: rebeccapurple;
}
<div
className="emotion-0"
/>
`;

exports[`unsafe pseudo classes warns when using without flag: /* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */ ":first-child" 1`] = `
.emotion-0:first-child {
color: hotpink;
}
Expand All @@ -50,7 +256,27 @@ exports[`does warn when using :first-child 1`] = `
/>
`;

exports[`does warn when using :nth-child(3) 1`] = `
exports[`unsafe pseudo classes warns when using without flag: /* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */ ":not(:first-child)" 1`] = `
.emotion-0:not(:first-child) {
color: hotpink;
}
<div
className="emotion-0"
/>
`;

exports[`unsafe pseudo classes warns when using without flag: /* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */ ":not(:nth-child(3))" 1`] = `
.emotion-0:not(:nth-child(3)) {
color: hotpink;
}
<div
className="emotion-0"
/>
`;

exports[`unsafe pseudo classes warns when using without flag: /* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */ ":nth-child(3)" 1`] = `
.emotion-0:nth-child(3) {
color: hotpink;
}
Expand All @@ -60,7 +286,7 @@ exports[`does warn when using :nth-child(3) 1`] = `
/>
`;

exports[`does warn when using :nth-last-child(7) 1`] = `
exports[`unsafe pseudo classes warns when using without flag: /* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */ ":nth-last-child(7)" 1`] = `
.emotion-0:nth-last-child(7) {
color: hotpink;
}
Expand All @@ -69,5 +295,3 @@ exports[`does warn when using :nth-last-child(7) 1`] = `
className="emotion-0"
/>
`;

exports[`global with css prop 1`] = `null`;
Loading

0 comments on commit d3a34b3

Please sign in to comment.