breaking refactor(stylis): disable vendor prefixing by default

Thankfully vendor prefixes are far less likely to be needed thes days. They can still be enabled via `StyleSheetManager`. Accordingly, the `disableVendorPrefixes` prop in `StyleSheetManager` has been revised to `enableVendorPrefixes`.
styled-components · Mar 19, 2023 · 2b4f6cb · 2b4f6cb
1 parent fe1ceb1
commit 2b4f6cb
Show file tree

Hide file tree

Showing 7 changed files with 37 additions and 184 deletions.
diff --git a/packages/styled-components/src/constructors/test/createGlobalStyle.test.tsx b/packages/styled-components/src/constructors/test/createGlobalStyle.test.tsx
@@ -456,36 +456,15 @@ describe(`createGlobalStyle`, () => {
     expect(getRenderedCSS()).toMatchInlineSnapshot(`
       "div {
         display: inline-block;
-        -webkit-animation: a 2s linear infinite;
         animation: a 2s linear infinite;
         padding: 2rem 1rem;
         font-size: 1.2rem;
       }
-      @-webkit-keyframes a {
-        from {
-          -webkit-transform: rotate(0deg);
-          -moz-transform: rotate(0deg);
-          -ms-transform: rotate(0deg);
-          transform: rotate(0deg);
-        }
-        to {
-          -webkit-transform: rotate(360deg);
-          -moz-transform: rotate(360deg);
-          -ms-transform: rotate(360deg);
-          transform: rotate(360deg);
-        }
-      }
       @keyframes a {
         from {
-          -webkit-transform: rotate(0deg);
-          -moz-transform: rotate(0deg);
-          -ms-transform: rotate(0deg);
           transform: rotate(0deg);
         }
         to {
-          -webkit-transform: rotate(360deg);
-          -moz-transform: rotate(360deg);
-          -ms-transform: rotate(360deg);
           transform: rotate(360deg);
         }
       }"

diff --git a/packages/styled-components/src/constructors/test/keyframes.test.tsx b/packages/styled-components/src/constructors/test/keyframes.test.tsx
@@ -63,17 +63,8 @@ describe('keyframes', () => {
 
     expect(getRenderedCSS()).toMatchInlineSnapshot(`
       ".c {
-        -webkit-animation: a 2s linear infinite;
         animation: a 2s linear infinite;
       }
-      @-webkit-keyframes a {
-        0% {
-          opacity: 0;
-        }
-        100% {
-          opacity: 1;
-        }
-      }
       @keyframes a {
         0% {
           opacity: 0;
@@ -108,27 +99,18 @@ describe('keyframes', () => {
     TestRenderer.create(<Comp />);
 
     expect(getRenderedCSS()).toMatchInlineSnapshot(`
-".c {
-  -webkit-animation: a 2s linear infinite;
-  animation: a 2s linear infinite;
-}
-@-webkit-keyframes a {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-@keyframes a {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}"
-`);
+      ".c {
+        animation: a 2s linear infinite;
+      }
+      @keyframes a {
+        0% {
+          opacity: 0;
+        }
+        100% {
+          opacity: 1;
+        }
+      }"
+    `);
   });
 
   it('should insert the correct styles for objects with nesting', () => {
@@ -161,33 +143,23 @@ describe('keyframes', () => {
     TestRenderer.create(<Comp />);
 
     expect(getRenderedCSS()).toMatchInlineSnapshot(`
-"@media(max-width:700px) {
-  .c {
-    -webkit-animation: a 2s linear infinite;
-    animation: a 2s linear infinite;
-  }
-  .c :hover {
-    -webkit-animation: a 10s linear infinite;
-    animation: a 10s linear infinite;
-  }
-}
-@-webkit-keyframes a {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-@keyframes a {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}"
-`);
+      "@media(max-width:700px) {
+        .c {
+          animation: a 2s linear infinite;
+        }
+        .c :hover {
+          animation: a 10s linear infinite;
+        }
+      }
+      @keyframes a {
+        0% {
+          opacity: 0;
+        }
+        100% {
+          opacity: 1;
+        }
+      }"
+    `);
   });
 
   it('should insert the correct styles when keyframes in props', () => {
@@ -211,17 +183,8 @@ describe('keyframes', () => {
 
     expect(getRenderedCSS()).toMatchInlineSnapshot(`
       ".c {
-        -webkit-animation: a 2s linear infinite;
         animation: a 2s linear infinite;
       }
-      @-webkit-keyframes a {
-        0% {
-          opacity: 0;
-        }
-        100% {
-          opacity: 1;
-        }
-      }
       @keyframes a {
         0% {
           opacity: 0;
@@ -287,57 +250,25 @@ describe('keyframes', () => {
 
     expect(getRenderedCSS()).toMatchInlineSnapshot(`
       ".d {
-        -webkit-animation: none;
         animation: none;
       }
       .e {
-        -webkit-animation: b 1s linear, a 1s linear;
         animation: b 1s linear, a 1s linear;
       }
       .f {
-        -webkit-animation: a 1s linear;
         animation: a 1s linear;
       }
       .g {
-        -webkit-animation: b 1s linear;
         animation: b 1s linear;
       }
-      @-webkit-keyframes b {
-        from {
-          -webkit-transform: translateX(-10px);
-          -moz-transform: translateX(-10px);
-          -ms-transform: translateX(-10px);
-          transform: translateX(-10px);
-        }
-        to {
-          -webkit-transform: none;
-          -moz-transform: none;
-          -ms-transform: none;
-          transform: none;
-        }
-      }
       @keyframes b {
         from {
-          -webkit-transform: translateX(-10px);
-          -moz-transform: translateX(-10px);
-          -ms-transform: translateX(-10px);
           transform: translateX(-10px);
         }
         to {
-          -webkit-transform: none;
-          -moz-transform: none;
-          -ms-transform: none;
           transform: none;
         }
       }
-      @-webkit-keyframes a {
-        from {
-          opacity: 0;
-        }
-        to {
-          opacity: 1;
-        }
-      }
       @keyframes a {
         from {
           opacity: 0;
@@ -380,17 +311,8 @@ describe('keyframes', () => {
 
     expect(getRenderedCSS()).toMatchInlineSnapshot(`
       ".c {
-        -webkit-animation: a-1567285458 2s linear infinite;
         animation: a-1567285458 2s linear infinite;
       }
-      @-webkit-keyframes a-1567285458 {
-        0% {
-          right: 0%;
-        }
-        100% {
-          right: 100%;
-        }
-      }
       @keyframes a-1567285458 {
         0% {
           right: 0%;
@@ -430,21 +352,11 @@ describe('keyframes', () => {
 
     expect(getRenderedCSS()).toMatchInlineSnapshot(`
       ".c {
-        -webkit-animation: a 2s linear infinite;
         animation: a 2s linear infinite;
       }
       .d {
-        -webkit-animation: a-1567285458 2s linear infinite;
         animation: a-1567285458 2s linear infinite;
       }
-      @-webkit-keyframes a {
-        0% {
-          left: 0%;
-        }
-        100% {
-          left: 100%;
-        }
-      }
       @keyframes a {
         0% {
           left: 0%;
@@ -453,14 +365,6 @@ describe('keyframes', () => {
           left: 100%;
         }
       }
-      @-webkit-keyframes a-1567285458 {
-        0% {
-          right: 0%;
-        }
-        100% {
-          right: 100%;
-        }
-      }
       @keyframes a-1567285458 {
         0% {
           right: 0%;

diff --git a/packages/styled-components/src/models/StyleSheetManager.tsx b/packages/styled-components/src/models/StyleSheetManager.tsx
@@ -40,7 +40,7 @@ export type IStyleSheetManager = React.PropsWithChildren<{
    * If you are working exclusively with modern browsers, vendor prefixes can often be omitted
    * to reduce the weight of CSS on the page.
    */
-  disableVendorPrefixes?: boolean;
+  enableVendorPrefixes?: boolean;
   /**
    * Provide an optional selector to be prepended to all generated style rules.
    */
@@ -100,10 +100,10 @@ export function StyleSheetManager(props: IStyleSheetManager): JSX.Element {
   const stylis = useMemo(
     () =>
       createStylisInstance({
-        options: { namespace: props.namespace, prefix: !props.disableVendorPrefixes },
+        options: { namespace: props.namespace, prefix: props.enableVendorPrefixes },
         plugins,
       }),
-    [props.disableVendorPrefixes, props.namespace, plugins]
+    [props.enableVendorPrefixes, props.namespace, plugins]
   );
 
   useEffect(() => {

diff --git a/packages/styled-components/src/models/test/StyleSheetManager.test.tsx b/packages/styled-components/src/models/test/StyleSheetManager.test.tsx
@@ -279,13 +279,13 @@ describe('StyleSheetManager', () => {
     expect(indexOfBlueStyle).toBeGreaterThan(indexOfRedStyle);
   });
 
-  it('passing disableVendorPrefixes to StyleSheetManager works', () => {
+  it('passing `enableVendorPrefixes` to StyleSheetManager works', () => {
     const Test = styled.div`
       display: flex;
     `;
 
     TestRenderer.create(
-      <StyleSheetManager disableVendorPrefixes>
+      <StyleSheetManager enableVendorPrefixes>
         <Test>Foo</Test>
       </StyleSheetManager>
     );
@@ -294,7 +294,7 @@ describe('StyleSheetManager', () => {
       <style data-styled="active"
              data-styled-version="JEST_MOCK_VERSION"
       >
-        .b{display:flex;}
+        .b{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}
       </style>
     `);
   });
@@ -529,7 +529,7 @@ describe('StyleSheetManager', () => {
       <style data-styled="active"
              data-styled-version="JEST_MOCK_VERSION"
       >
-        #foo .b{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}
+        #foo .b{display:flex;}
       </style>
     `);
   });

diff --git a/packages/styled-components/src/test/css.test.tsx b/packages/styled-components/src/test/css.test.tsx
@@ -20,7 +20,6 @@ describe('css features', () => {
     TestRenderer.create(<Comp />);
     expect(getRenderedCSS()).toMatchInlineSnapshot(`
       ".b {
-        -webkit-transition: opacity 0.3s;
         transition: opacity 0.3s;
       }"
     `);
@@ -35,16 +34,8 @@ describe('css features', () => {
     TestRenderer.create(<Comp />);
     expect(getRenderedCSS()).toMatchInlineSnapshot(`
       ".b {
-        display: -webkit-box;
-        display: -webkit-flex;
-        display: -ms-flexbox;
         display: flex;
-        -webkit-flex-direction: column;
-        -ms-flex-direction: column;
         flex-direction: column;
-        -webkit-align-items: center;
-        -webkit-box-align: center;
-        -ms-flex-align: center;
         align-items: center;
       }"
     `);