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

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

Hide file tree

Showing 48 changed files with 90 additions and 90 deletions.
diff --git a/apps/zero-runtime-next-app/src/components/Slider/ZeroSlider.tsx b/apps/zero-runtime-next-app/src/components/Slider/ZeroSlider.tsx
@@ -327,7 +327,7 @@ const SliderThumb = styled('span', {
   transition: theme.transitions.create(['box-shadow', 'left', 'bottom'], {
     duration: theme.transitions.duration.shortest,
   }),
-  '&:before': {
+  '&::before': {
     position: 'absolute',
     content: '""',
     borderRadius: 'inherit',
@@ -388,7 +388,7 @@ const SliderThumb = styled('span', {
       style: {
         width: 12,
         height: 12,
-        '&:before': {
+        '&::before': {
           boxShadow: 'none',
         },
       },
@@ -454,7 +454,7 @@ const StyledSliderValueLabel = styled(SliderValueLabel, {
         top: '-10px',
         transformOrigin: 'bottom center',
         transform: 'translateY(-100%) scale(0)',
-        '&:before': {
+        '&::before': {
           position: 'absolute',
           content: '""',
           width: 8,
@@ -478,7 +478,7 @@ const StyledSliderValueLabel = styled(SliderValueLabel, {
         right: '30px',
         transform: 'translateY(-50%) scale(0)',
         transformOrigin: 'right center',
-        '&:before': {
+        '&::before': {
           position: 'absolute',
           content: '""',
           width: 8,

diff --git a/apps/zero-runtime-vite-app/src/Slider/ZeroSlider.tsx b/apps/zero-runtime-vite-app/src/Slider/ZeroSlider.tsx
@@ -325,7 +325,7 @@ const SliderThumb = styled('span', {
   transition: theme.transitions.create(['box-shadow', 'left', 'bottom'], {
     duration: theme.transitions.duration.shortest,
   }),
-  '&:before': {
+  '&::before': {
     position: 'absolute',
     content: '""',
     borderRadius: 'inherit',
@@ -386,7 +386,7 @@ const SliderThumb = styled('span', {
       style: {
         width: 12,
         height: 12,
-        '&:before': {
+        '&::before': {
           boxShadow: 'none',
         },
       },
@@ -452,7 +452,7 @@ const StyledSliderValueLabel = styled(SliderValueLabel, {
         top: '-10px',
         transformOrigin: 'bottom center',
         transform: 'translateY(-100%) scale(0)',
-        '&:before': {
+        '&::before': {
           position: 'absolute',
           content: '""',
           width: 8,
@@ -476,7 +476,7 @@ const StyledSliderValueLabel = styled(SliderValueLabel, {
         right: '30px',
         transform: 'translateY(-50%) scale(0)',
         transformOrigin: 'right center',
-        '&:before': {
+        '&::before': {
           position: 'absolute',
           content: '""',
           width: 8,

diff --git a/docs/data/base/components/select/UseSelect.js b/docs/data/base/components/select/UseSelect.js
@@ -138,7 +138,7 @@ const Option = styled('li')(
     outline: 3px solid ${theme.palette.mode === 'dark' ? blue[600] : blue[200]};
   }
 
-  &:before {
+  &::before {
     content: '';
     width: 1ex;
     height: 1ex;

diff --git a/docs/data/base/components/select/UseSelect.tsx b/docs/data/base/components/select/UseSelect.tsx
@@ -141,7 +141,7 @@ const Option = styled('li')(
     outline: 3px solid ${theme.palette.mode === 'dark' ? blue[600] : blue[200]};
   }
 
-  &:before {
+  &::before {
     content: '';
     width: 1ex;
     height: 1ex;

diff --git a/docs/data/joy/components/card/InstagramPost.js b/docs/data/joy/components/card/InstagramPost.js
@@ -30,7 +30,7 @@ export default function InstagramPost() {
         <Box
           sx={{
             position: 'relative',
-            '&:before': {
+            '&::before': {
               content: '""',
               position: 'absolute',
               top: 0,

diff --git a/docs/data/joy/components/card/InstagramPost.tsx b/docs/data/joy/components/card/InstagramPost.tsx
@@ -30,7 +30,7 @@ export default function InstagramPost() {
         <Box
           sx={{
             position: 'relative',
-            '&:before': {
+            '&::before': {
               content: '""',
               position: 'absolute',
               top: 0,

diff --git a/docs/data/joy/getting-started/templates/team/App.tsx b/docs/data/joy/getting-started/templates/team/App.tsx
@@ -422,7 +422,7 @@ export default function TeamExample() {
                     <ListItem key={companyIndex} sx={{ alignItems: 'flex-start' }}>
                       <ListItemDecorator
                         sx={{
-                          '&:before': {
+                          '&::before': {
                             content: '""',
                             position: 'absolute',
                             height: '100%',

diff --git a/docs/data/material/components/accordion/CustomizedAccordions.js b/docs/data/material/components/accordion/CustomizedAccordions.js
@@ -13,7 +13,7 @@ const Accordion = styled((props) => (
   '&:not(:last-child)': {
     borderBottom: 0,
   },
-  '&:before': {
+  '&::before': {
     display: 'none',
   },
 }));

diff --git a/docs/data/material/components/accordion/CustomizedAccordions.tsx b/docs/data/material/components/accordion/CustomizedAccordions.tsx
@@ -15,7 +15,7 @@ const Accordion = styled((props: AccordionProps) => (
   '&:not(:last-child)': {
     borderBottom: 0,
   },
-  '&:before': {
+  '&::before': {
     display: 'none',
   },
 }));

diff --git a/docs/data/material/components/checkboxes/CustomizedCheckbox.js b/docs/data/material/components/checkboxes/CustomizedCheckbox.js
@@ -32,7 +32,7 @@ const BpIcon = styled('span')(({ theme }) => ({
 const BpCheckedIcon = styled(BpIcon)({
   backgroundColor: '#137cbd',
   backgroundImage: 'linear-gradient(180deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,0))',
-  '&:before': {
+  '&::before': {
     display: 'block',
     width: 16,
     height: 16,

diff --git a/docs/data/material/components/checkboxes/CustomizedCheckbox.tsx b/docs/data/material/components/checkboxes/CustomizedCheckbox.tsx
@@ -32,7 +32,7 @@ const BpIcon = styled('span')(({ theme }) => ({
 const BpCheckedIcon = styled(BpIcon)({
   backgroundColor: '#137cbd',
   backgroundImage: 'linear-gradient(180deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,0))',
-  '&:before': {
+  '&::before': {
     display: 'block',
     width: 16,
     height: 16,

diff --git a/docs/data/material/components/menus/AccountMenu.js b/docs/data/material/components/menus/AccountMenu.js
@@ -57,7 +57,7 @@ export default function AccountMenu() {
               ml: -0.5,
               mr: 1,
             },
-            '&:before': {
+            '&::before': {
               content: '""',
               display: 'block',
               position: 'absolute',

diff --git a/docs/data/material/components/menus/AccountMenu.tsx b/docs/data/material/components/menus/AccountMenu.tsx
@@ -57,7 +57,7 @@ export default function AccountMenu() {
               ml: -0.5,
               mr: 1,
             },
-            '&:before': {
+            '&::before': {
               content: '""',
               display: 'block',
               position: 'absolute',

diff --git a/docs/data/material/components/radio-buttons/CustomizedRadios.js b/docs/data/material/components/radio-buttons/CustomizedRadios.js
@@ -36,7 +36,7 @@ const BpIcon = styled('span')(({ theme }) => ({
 const BpCheckedIcon = styled(BpIcon)({
   backgroundColor: '#137cbd',
   backgroundImage: 'linear-gradient(180deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,0))',
-  '&:before': {
+  '&::before': {
     display: 'block',
     width: 16,
     height: 16,

diff --git a/docs/data/material/components/radio-buttons/CustomizedRadios.tsx b/docs/data/material/components/radio-buttons/CustomizedRadios.tsx
@@ -36,7 +36,7 @@ const BpIcon = styled('span')(({ theme }) => ({
 const BpCheckedIcon = styled(BpIcon)({
   backgroundColor: '#137cbd',
   backgroundImage: 'linear-gradient(180deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,0))',
-  '&:before': {
+  '&::before': {
     display: 'block',
     width: 16,
     height: 16,

diff --git a/docs/data/material/components/slider/CustomizedSlider.js b/docs/data/material/components/slider/CustomizedSlider.js
@@ -63,7 +63,7 @@ const IOSSlider = styled(Slider)(({ theme }) => ({
     top: -6,
     backgroundColor: 'unset',
     color: theme.palette.text.primary,
-    '&:before': {
+    '&::before': {
       display: 'none',
     },
     '& *': {
@@ -103,7 +103,7 @@ const PrettoSlider = styled(Slider)({
     '&:focus, &:hover, &.Mui-active, &.Mui-focusVisible': {
       boxShadow: 'inherit',
     },
-    '&:before': {
+    '&::before': {
       display: 'none',
     },
   },
@@ -118,7 +118,7 @@ const PrettoSlider = styled(Slider)({
     backgroundColor: '#52af77',
     transformOrigin: 'bottom left',
     transform: 'translate(50%, -100%) rotate(-45deg) scale(0)',
-    '&:before': { display: 'none' },
+    '&::before': { display: 'none' },
     '&.MuiSlider-valueLabelOpen': {
       transform: 'translate(50%, -100%) rotate(-45deg) scale(1)',
     },

diff --git a/docs/data/material/components/slider/CustomizedSlider.tsx b/docs/data/material/components/slider/CustomizedSlider.tsx
@@ -57,7 +57,7 @@ const IOSSlider = styled(Slider)(({ theme }) => ({
     top: -6,
     backgroundColor: 'unset',
     color: theme.palette.text.primary,
-    '&:before': {
+    '&::before': {
       display: 'none',
     },
     '& *': {
@@ -97,7 +97,7 @@ const PrettoSlider = styled(Slider)({
     '&:focus, &:hover, &.Mui-active, &.Mui-focusVisible': {
       boxShadow: 'inherit',
     },
-    '&:before': {
+    '&::before': {
       display: 'none',
     },
   },
@@ -112,7 +112,7 @@ const PrettoSlider = styled(Slider)({
     backgroundColor: '#52af77',
     transformOrigin: 'bottom left',
     transform: 'translate(50%, -100%) rotate(-45deg) scale(0)',
-    '&:before': { display: 'none' },
+    '&::before': { display: 'none' },
     '&.MuiSlider-valueLabelOpen': {
       transform: 'translate(50%, -100%) rotate(-45deg) scale(1)',
     },

diff --git a/docs/data/material/components/slider/MusicPlayerSlider.js b/docs/data/material/components/slider/MusicPlayerSlider.js
@@ -21,7 +21,7 @@ const WallPaper = styled('div')({
   overflow: 'hidden',
   background: 'linear-gradient(rgb(255, 38, 142) 0%, rgb(255, 105, 79) 100%)',
   transition: 'all 500ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s',
-  '&:before': {
+  '&::before': {
     content: '""',
     width: '140%',
     height: '140%',
@@ -127,7 +127,7 @@ export default function MusicPlayerSlider() {
               width: 8,
               height: 8,
               transition: '0.3s cubic-bezier(.47,1.64,.41,.8)',
-              '&:before': {
+              '&::before': {
                 boxShadow: '0 2px 12px 0 rgba(0,0,0,0.4)',
               },
               '&:hover, &.Mui-focusVisible': {
@@ -200,7 +200,7 @@ export default function MusicPlayerSlider() {
                 width: 24,
                 height: 24,
                 backgroundColor: '#fff',
-                '&:before': {
+                '&::before': {
                   boxShadow: '0 4px 8px rgba(0,0,0,0.4)',
                 },
                 '&:hover, &.Mui-focusVisible, &.Mui-active': {

diff --git a/docs/data/material/components/slider/MusicPlayerSlider.tsx b/docs/data/material/components/slider/MusicPlayerSlider.tsx
@@ -21,7 +21,7 @@ const WallPaper = styled('div')({
   overflow: 'hidden',
   background: 'linear-gradient(rgb(255, 38, 142) 0%, rgb(255, 105, 79) 100%)',
   transition: 'all 500ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s',
-  '&:before': {
+  '&::before': {
     content: '""',
     width: '140%',
     height: '140%',
@@ -127,7 +127,7 @@ export default function MusicPlayerSlider() {
               width: 8,
               height: 8,
               transition: '0.3s cubic-bezier(.47,1.64,.41,.8)',
-              '&:before': {
+              '&::before': {
                 boxShadow: '0 2px 12px 0 rgba(0,0,0,0.4)',
               },
               '&:hover, &.Mui-focusVisible': {
@@ -200,7 +200,7 @@ export default function MusicPlayerSlider() {
                 width: 24,
                 height: 24,
                 backgroundColor: '#fff',
-                '&:before': {
+                '&::before': {
                   boxShadow: '0 4px 8px rgba(0,0,0,0.4)',
                 },
                 '&:hover, &.Mui-focusVisible, &.Mui-active': {

diff --git a/docs/data/material/components/switches/CustomizedSwitches.js b/docs/data/material/components/switches/CustomizedSwitches.js
@@ -32,7 +32,7 @@ const MaterialUISwitch = styled(Switch)(({ theme }) => ({
     backgroundColor: theme.palette.mode === 'dark' ? '#003892' : '#001e3c',
     width: 32,
     height: 32,
-    '&:before': {
+    '&::before': {
       content: "''",
       position: 'absolute',
       width: '100%',
@@ -57,15 +57,15 @@ const Android12Switch = styled(Switch)(({ theme }) => ({
   padding: 8,
   '& .MuiSwitch-track': {
     borderRadius: 22 / 2,
-    '&:before, &:after': {
+    '&::before, &:after': {
       content: '""',
       position: 'absolute',
       top: '50%',
       transform: 'translateY(-50%)',
       width: 16,
       height: 16,
     },
-    '&:before': {
+    '&::before': {
       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="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"/></svg>')`,

diff --git a/docs/data/material/components/switches/CustomizedSwitches.tsx b/docs/data/material/components/switches/CustomizedSwitches.tsx
@@ -32,7 +32,7 @@ const MaterialUISwitch = styled(Switch)(({ theme }) => ({
     backgroundColor: theme.palette.mode === 'dark' ? '#003892' : '#001e3c',
     width: 32,
     height: 32,
-    '&:before': {
+    '&::before': {
       content: "''",
       position: 'absolute',
       width: '100%',
@@ -57,15 +57,15 @@ const Android12Switch = styled(Switch)(({ theme }) => ({
   padding: 8,
   '& .MuiSwitch-track': {
     borderRadius: 22 / 2,
-    '&:before, &:after': {
+    '&::before, &:after': {
       content: '""',
       position: 'absolute',
       top: '50%',
       transform: 'translateY(-50%)',
       width: 16,
       height: 16,
     },
-    '&:before': {
+    '&::before': {
       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="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"/></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': {
@@ -55,7 +55,7 @@ const customTheme = (outerTheme) =>
       MuiInput: {
         styleOverrides: {
           root: {
-            '&:before': {
+            '&::before': {
               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': {
@@ -55,7 +55,7 @@ const customTheme = (outerTheme: Theme) =>
       MuiInput: {
         styleOverrides: {
           root: {
-            '&:before': {
+            '&::before': {
               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
@@ -89,7 +89,7 @@ const Accordion = styled(MuiAccordion)(({ theme }) => ({
   '&:not(:last-of-type)': {
     marginBottom: theme.spacing(2),
   },
-  '&:before': {
+  '&::before': {
     display: 'none',
   },
   '&:after': {