[pigment-css] Fix propTypes removal during eval stage (#41695)

packages/pigment-css-react/package.json

@@ -66,6 +66,7 @@
     "@types/stylis": "^4.2.5",
     "chai": "^4.4.1",
     "prettier": "^3.2.5",
+    "prop-types": "^15.8.1",
     "react": "^18.2.0"
   },
   "peerDependencies": {

packages/pigment-css-react/src/utils/remove-prop-types-plugin.ts

@@ -14,8 +14,9 @@ export const removePropTypesPlugin = declare<{}>((api) => {
         if (!property.isIdentifier({ name: 'propTypes' })) {
           return;
         }
-        if (path.parentPath.isExpressionStatement()) {
-          path.parentPath.remove();
+        const parentExpression = path.findParent((p) => p.isExpressionStatement());
+        if (parentExpression) {
+          parentExpression.remove();
         }
       },
     },

packages/pigment-css-react/tests/styled/fixtures/styled-theme.input.js

@@ -1,4 +1,5 @@
 import { styled, keyframes } from '@pigment-css/react';
+import PropTypes from 'prop-types';
 
 const rotateKeyframe = keyframes({
   from: {
@@ -34,3 +35,18 @@ const SliderRail2 = styled.span`
     display: none;
   }
 `;
+
+export function App() {
+  return (
+    <Component>
+      <SliderRail />
+      <SliderRail2 />
+    </Component>
+  );
+}
+
+process.env.NODE_ENV !== 'production'
+  ? (App.propTypes = {
+      children: PropTypes.element,
+    })
+  : void 0;

packages/pigment-css-react/tests/styled/fixtures/styled-theme.output.js

@@ -1,8 +1,28 @@
 import { styled as _styled, styled as _styled2, styled as _styled3 } from '@pigment-css/react';
 import _theme from '@pigment-css/react/theme';
+import PropTypes from 'prop-types';
 const Component = /*#__PURE__*/ _styled('div')({
   classes: ['c1h7nuob'],
 });
+const SliderRail = /*#__PURE__*/ _styled2('span', {
+  name: 'MuiSlider',
+  slot: 'Rail',
+})({
+  classes: ['s13xim6i', 's13xim6i-1'],
+});
 const SliderRail2 = /*#__PURE__*/ _styled3('span')({
   classes: ['s1emg10t'],
 });
+export function App() {
+  return (
+    <Component>
+      <SliderRail />
+      <SliderRail2 />
+    </Component>
+  );
+}
+process.env.NODE_ENV !== 'production'
+  ? (App.propTypes = {
+      children: PropTypes.element,
+    })
+  : void 0;

packages/pigment-css-react/tests/styled/fixtures/styled.input.js

@@ -1,4 +1,5 @@
 import { styled, keyframes } from '@pigment-css/react';
+import PropTypes from 'prop-types';
 
 const rotateKeyframe = keyframes({
   from: {
@@ -32,3 +33,16 @@ const SliderRail2 = styled.span`
     display: none;
   }
 `;
+
+export function App() {
+  return (
+    <Component>
+      <SliderRail />
+      <SliderRail2 />
+    </Component>
+  );
+}
+
+App.propTypes = {
+  children: PropTypes.element,
+};

packages/pigment-css-react/tests/styled/fixtures/styled.output.js

@@ -1,5 +1,6 @@
 import { styled as _styled, styled as _styled2, styled as _styled3 } from '@pigment-css/react';
 import _theme from '@pigment-css/react/theme';
+import PropTypes from 'prop-types';
 const Component = /*#__PURE__*/ _styled('div')({
   classes: ['c1aiqtje'],
 });
@@ -12,3 +13,14 @@ export const SliderRail = /*#__PURE__*/ _styled2('span', {
 const SliderRail2 = /*#__PURE__*/ _styled3('span')({
   classes: ['shdkmm7'],
 });
+export function App() {
+  return (
+    <Component>
+      <SliderRail />
+      <SliderRail2 />
+    </Component>
+  );
+}
+App.propTypes = {
+  children: PropTypes.element,
+};

packages/pigment-css-react/tests/testUtils.ts

@@ -51,7 +51,10 @@ export async function runTransformation(
       babelrc: false,
       plugins: ['@babel/plugin-syntax-jsx'],
     },
-    tagResolver(_source: string, tag: string) {
+    tagResolver(source: string, tag: string) {
+      if (source !== '@pigment-css/react') {
+        return null;
+      }
       return require.resolve(`../exports/${tag}`);
     },
   };