[core] Fix CSS2 vs. CSS3 ::after syntax

See https://stackoverflow.com/questions/7327326/what-is-the-difference-between-before-and-before for why.
mui · Dec 25, 2023 · 0277e3e · 0277e3e
1 parent cb1196a
commit 0277e3e
Show file tree

Hide file tree

Showing 25 changed files with 35 additions and 35 deletions.
diff --git a/CHANGELOG.old.md b/CHANGELOG.old.md
@@ -7552,7 +7552,7 @@ The text underline color customization change:
 
 ```diff
    underline: {
-     '&:after': {
+     '&::after': {
 -      backgroundColor: purple[500],
 +      borderBottomColor: purple[500],
      },

diff --git a/docs/data/joy/components/stepper/DottedConnector.js b/docs/data/joy/components/stepper/DottedConnector.js
@@ -13,7 +13,7 @@ export default function DottedConnector() {
         width: '100%',
         [`& .${stepClasses.root}`]: {
           flexDirection: 'column-reverse',
-          '&:after': {
+          '&::after': {
             top: 'unset',
             bottom:
               'calc(var(--StepIndicator-size) / 2 - var(--Step-connectorThickness) / 2)',

diff --git a/docs/data/joy/components/stepper/DottedConnector.tsx b/docs/data/joy/components/stepper/DottedConnector.tsx
@@ -13,7 +13,7 @@ export default function DottedConnector() {
         width: '100%',
         [`& .${stepClasses.root}`]: {
           flexDirection: 'column-reverse',
-          '&:after': {
+          '&::after': {
             top: 'unset',
             bottom:
               'calc(var(--StepIndicator-size) / 2 - var(--Step-connectorThickness) / 2)',

diff --git a/docs/data/material/components/lists/CustomizedList.js b/docs/data/material/components/lists/CustomizedList.js
@@ -108,7 +108,7 @@ export default function CustomizedList() {
                         opacity: 1,
                       },
                     },
-                    '&:after': {
+                    '&::after': {
                       content: '""',
                       position: 'absolute',
                       height: '80%',

diff --git a/docs/data/material/components/lists/CustomizedList.tsx b/docs/data/material/components/lists/CustomizedList.tsx
@@ -108,7 +108,7 @@ export default function CustomizedList() {
                         opacity: 1,
                       },
                     },
-                    '&:after': {
+                    '&::after': {
                       content: '""',
                       position: 'absolute',
                       height: '80%',

diff --git a/docs/data/material/components/slider/MusicPlayerSlider.js b/docs/data/material/components/slider/MusicPlayerSlider.js
@@ -31,7 +31,7 @@ const WallPaper = styled('div')({
     background:
       'radial-gradient(at center center, rgb(62, 79, 249) 0%, rgba(62, 79, 249, 0) 64%)',
   },
-  '&:after': {
+  '&::after': {
     content: '""',
     width: '140%',
     height: '140%',

diff --git a/docs/data/material/components/slider/MusicPlayerSlider.tsx b/docs/data/material/components/slider/MusicPlayerSlider.tsx
@@ -31,7 +31,7 @@ const WallPaper = styled('div')({
     background:
       'radial-gradient(at center center, rgb(62, 79, 249) 0%, rgba(62, 79, 249, 0) 64%)',
   },
-  '&:after': {
+  '&::after': {
     content: '""',
     width: '140%',
     height: '140%',

diff --git a/docs/data/material/components/switches/CustomizedSwitches.js b/docs/data/material/components/switches/CustomizedSwitches.js
@@ -57,7 +57,7 @@ const Android12Switch = styled(Switch)(({ theme }) => ({
   padding: 8,
   '& .MuiSwitch-track': {
     borderRadius: 22 / 2,
-    '&::before, &:after': {
+    '&::before, &::after': {
       content: '""',
       position: 'absolute',
       top: '50%',
@@ -71,7 +71,7 @@ const Android12Switch = styled(Switch)(({ theme }) => ({
       )}" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"/></svg>')`,
       left: 12,
     },
-    '&:after': {
+    '&::after': {
       backgroundImage: `url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 24 24"><path fill="${encodeURIComponent(
         theme.palette.getContrastText(theme.palette.primary.main),
       )}" d="M19,13H5V11H19V13Z" /></svg>')`,

diff --git a/docs/data/material/components/switches/CustomizedSwitches.tsx b/docs/data/material/components/switches/CustomizedSwitches.tsx
@@ -57,7 +57,7 @@ const Android12Switch = styled(Switch)(({ theme }) => ({
   padding: 8,
   '& .MuiSwitch-track': {
     borderRadius: 22 / 2,
-    '&::before, &:after': {
+    '&::before, &::after': {
       content: '""',
       position: 'absolute',
       top: '50%',
@@ -71,7 +71,7 @@ const Android12Switch = styled(Switch)(({ theme }) => ({
       )}" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"/></svg>')`,
       left: 12,
     },
-    '&:after': {
+    '&::after': {
       backgroundImage: `url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 24 24"><path fill="${encodeURIComponent(
         theme.palette.getContrastText(theme.palette.primary.main),
       )}" d="M19,13H5V11H19V13Z" /></svg>')`,

diff --git a/docs/data/material/components/text-fields/CustomizedInputsStyleOverrides.js b/docs/data/material/components/text-fields/CustomizedInputsStyleOverrides.js
@@ -40,7 +40,7 @@ const customTheme = (outerTheme) =>
       MuiFilledInput: {
         styleOverrides: {
           root: {
-            '&::before, &:after': {
+            '&::before, &::after': {
               borderBottom: '2px solid var(--TextField-brandBorderColor)',
             },
             '&:hover:not(.Mui-disabled, .Mui-error):before': {

diff --git a/docs/data/material/components/text-fields/CustomizedInputsStyleOverrides.tsx b/docs/data/material/components/text-fields/CustomizedInputsStyleOverrides.tsx
@@ -40,7 +40,7 @@ const customTheme = (outerTheme: Theme) =>
       MuiFilledInput: {
         styleOverrides: {
           root: {
-            '&::before, &:after': {
+            '&::before, &::after': {
               borderBottom: '2px solid var(--TextField-brandBorderColor)',
             },
             '&:hover:not(.Mui-disabled, .Mui-error):before': {

diff --git a/docs/pages/careers.tsx b/docs/pages/careers.tsx
@@ -92,7 +92,7 @@ const Accordion = styled(MuiAccordion)(({ theme }) => ({
   '&::before': {
     display: 'none',
   },
-  '&:after': {
+  '&::after': {
     display: 'none',
   },
   ...theme.applyDarkStyles({

diff --git a/docs/src/components/action/Item.tsx b/docs/src/components/action/Item.tsx
@@ -43,7 +43,7 @@ export function Group({
           },
           '& > *:last-child': {
             position: 'relative',
-            '&:after': {
+            '&::after': {
               // to create scroll spacing on the right edge
               content: '""',
               position: 'absolute',

diff --git a/docs/src/components/home/MaterialDesignComponents.tsx b/docs/src/components/home/MaterialDesignComponents.tsx
@@ -387,7 +387,7 @@ export function buildTheme(): ThemeOptions {
                 '&::before': {
                   borderColor: (theme.vars || theme).palette.grey[300],
                 },
-                '&:after': {
+                '&::after': {
                   borderColor: (theme.vars || theme).palette.primary[400],
                 },
                 '&:hover': {
@@ -398,7 +398,7 @@ export function buildTheme(): ThemeOptions {
                 color: (theme.vars || theme).palette.grey[800],
               },
               '& .MuiInput-root.Mui-focused': {
-                '&:after': {
+                '&::after': {
                   borderColor: (theme.vars || theme).palette.primary[400],
                 },
               },
@@ -424,7 +424,7 @@ export function buildTheme(): ThemeOptions {
               '& .MuiFilledInput-root': {
                 borderColor: (theme.vars || theme).palette.primaryDark[700],
                 backgroundColor: alpha(theme.palette.primaryDark[900], 0.5),
-                '&:after': {
+                '&::after': {
                   borderColor: (theme.vars || theme).palette.primary[300],
                 },
                 '&:hover': {
@@ -436,7 +436,7 @@ export function buildTheme(): ThemeOptions {
                 color: (theme.vars || theme).palette.grey[500],
               },
               '& .MuiInput-root.Mui-focused': {
-                '&:after': {
+                '&::after': {
                   borderColor: (theme.vars || theme).palette.primaryDark[400],
                 },
               },

diff --git a/docs/src/components/pricing/PricingFAQ.tsx b/docs/src/components/pricing/PricingFAQ.tsx
@@ -209,7 +209,7 @@ const Accordion = styled(MuiAccordion)(({ theme }) => ({
   '&::before': {
     display: 'none',
   },
-  '&:after': {
+  '&::after': {
     display: 'none',
   },
   ...theme.applyDarkStyles({

diff --git a/docs/src/components/productDesignKit/DesignKitFAQ.tsx b/docs/src/components/productDesignKit/DesignKitFAQ.tsx
@@ -85,7 +85,7 @@ const Accordion = styled(MuiAccordion)(({ theme }) => ({
   '&::before': {
     display: 'none',
   },
-  '&:after': {
+  '&::after': {
     display: 'none',
   },
 }));

diff --git a/docs/src/modules/components/AppNavDrawerItem.js b/docs/src/modules/components/AppNavDrawerItem.js
@@ -77,7 +77,7 @@ const Item = styled(
           opacity: depth === 0 ? 0 : 1,
           background: (theme.vars || theme).palette.grey[100],
         },
-        '&:after': {
+        '&::after': {
           content: '""',
           display: 'block',
           position: 'absolute',
@@ -172,7 +172,7 @@ const Item = styled(
         '&::before': {
           background: alpha(theme.palette.primaryDark[700], 0.6),
         },
-        '&:after': {
+        '&::after': {
           background: alpha(theme.palette.primaryDark[700], 0.8),
           borderColor: alpha(theme.palette.primaryDark[600], 0.6),
         },

diff --git a/docs/src/modules/components/HighlightedCodeWithTabs.tsx b/docs/src/modules/components/HighlightedCodeWithTabs.tsx
@@ -50,7 +50,7 @@ const StyledTab = styled(Tab)<{ ownerState: { mounted: boolean } }>(({ theme, ow
     ...(ownerState.mounted && {
       '&.Mui-selected': {
         color: '#FFF',
-        '&:after': {
+        '&::after': {
           content: "''",
           position: 'absolute',
           left: 0,

diff --git a/docs/src/modules/components/ad.styles.js b/docs/src/modules/components/ad.styles.js
@@ -62,7 +62,7 @@ const adBodyInlineStyles = (theme) => {
         content: '"Ad"',
         fontSize: theme.typography.pxToRem(14),
       },
-      '&:after': {
+      '&::after': {
         // Link
         marginLeft: 4,
         content: '"Get started"',

diff --git a/packages/mui-joy/test/typescript/moduleAugmentation/CssVarsProvider.spec.tsx b/packages/mui-joy/test/typescript/moduleAugmentation/CssVarsProvider.spec.tsx
@@ -145,7 +145,7 @@ function App8() {
       theme={extendTheme({
         focus: {
           bordered: {
-            '&:after': {
+            '&::after': {
               position: 'absolute',
               inset: '2px',
               outline: '1px solid',

diff --git a/packages/mui-material-next/src/FilledInput/FilledInput.tsx b/packages/mui-material-next/src/FilledInput/FilledInput.tsx
@@ -79,7 +79,7 @@ const FilledInputRoot = styled(InputBaseRoot, {
     },
     [`&.${filledInputClasses.focused}`]: {
       backgroundColor: 'var(--md-comp-filled-input-container-color)',
-      '&:after': {
+      '&::after': {
         borderColor: 'var(--md-comp-filled-input-focus-active-indicator-color)',
       },
     },
@@ -88,7 +88,7 @@ const FilledInputRoot = styled(InputBaseRoot, {
         'color-mix(in srgb, var(--md-comp-filled-input-disabled-container-color) calc(var(--md-comp-filled-input-disabled-container-opacity) * 100%), transparent)',
     },
     ...(!ownerState.disableUnderline && {
-      '&:after': {
+      '&::after': {
         borderBottom: '2px solid var(--md-comp-filled-input-active-indicator-color)',
         left: 0,
         bottom: 0,
@@ -109,7 +109,7 @@ const FilledInputRoot = styled(InputBaseRoot, {
         transform: 'scaleX(1) translateX(0)',
       },
       [`&.${filledInputClasses.error}`]: {
-        '&::before, &:after': {
+        '&::before, &::after': {
           borderBottomColor: 'var(--md-comp-filled-input-error-active-indicator-color)',
         },
       },

diff --git a/packages/mui-material-next/src/Input/Input.js b/packages/mui-material-next/src/Input/Input.js
@@ -114,7 +114,7 @@ const InputRoot = styled('div', {
       },
     }),
     ...(!ownerState.disableUnderline && {
-      '&:after': {
+      '&::after': {
         borderBottom: `2px solid ${theme.palette[ownerState.color].main}`,
         left: 0,
         bottom: 0,

diff --git a/packages/mui-material/src/Dialog/Dialog.js b/packages/mui-material/src/Dialog/Dialog.js
@@ -77,7 +77,7 @@ const DialogContainer = styled('div', {
     overflowY: 'auto',
     overflowX: 'hidden',
     textAlign: 'center',
-    '&:after': {
+    '&::after': {
       content: '""',
       display: 'inline-block',
       verticalAlign: 'middle',

diff --git a/packages/mui-material/src/FilledInput/FilledInput.js b/packages/mui-material/src/FilledInput/FilledInput.js
@@ -70,7 +70,7 @@ const FilledInputRoot = styled(InputBaseRoot, {
       backgroundColor: theme.vars ? theme.vars.palette.FilledInput.disabledBg : disabledBackground,
     },
     ...(!ownerState.disableUnderline && {
-      '&:after': {
+      '&::after': {
         borderBottom: `2px solid ${
           (theme.vars || theme).palette[ownerState.color || 'primary']?.main
         }`,
@@ -93,7 +93,7 @@ const FilledInputRoot = styled(InputBaseRoot, {
         transform: 'scaleX(1) translateX(0)',
       },
       [`&.${filledInputClasses.error}`]: {
-        '&::before, &:after': {
+        '&::before, &::after': {
           borderBottomColor: (theme.vars || theme).palette.error.main,
         },
       },

diff --git a/packages/mui-material/src/Input/Input.js b/packages/mui-material/src/Input/Input.js
@@ -56,7 +56,7 @@ const InputRoot = styled(InputBaseRoot, {
       },
     }),
     ...(!ownerState.disableUnderline && {
-      '&:after': {
+      '&::after': {
         borderBottom: `2px solid ${(theme.vars || theme).palette[ownerState.color].main}`,
         left: 0,
         bottom: 0,
@@ -77,7 +77,7 @@ const InputRoot = styled(InputBaseRoot, {
         transform: 'scaleX(1) translateX(0)',
       },
       [`&.${inputClasses.error}`]: {
-        '&::before, &:after': {
+        '&::before, &::after': {
           borderBottomColor: (theme.vars || theme).palette.error.main,
         },
       },