diff --git a/packages/pigment-css-react/package.json b/packages/pigment-css-react/package.json
index 7e7c9c809ce883..fbdf7d518529e6 100644
--- a/packages/pigment-css-react/package.json
+++ b/packages/pigment-css-react/package.json
@@ -65,6 +65,7 @@
"@types/stylis": "^4.2.5",
"chai": "^4.4.1",
"prettier": "^3.2.5",
+ "prop-types": "^15.8.1",
"react": "^18.2.0"
},
"peerDependencies": {
diff --git a/packages/pigment-css-react/src/utils/remove-prop-types-plugin.ts b/packages/pigment-css-react/src/utils/remove-prop-types-plugin.ts
index 703fe989b249a9..944209882af369 100644
--- a/packages/pigment-css-react/src/utils/remove-prop-types-plugin.ts
+++ b/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();
}
},
},
diff --git a/packages/pigment-css-react/tests/styled/fixtures/styled-theme.input.js b/packages/pigment-css-react/tests/styled/fixtures/styled-theme.input.js
index 909306c646fd71..80b96babb87007 100644
--- a/packages/pigment-css-react/tests/styled/fixtures/styled-theme.input.js
+++ b/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 (
+
+
+
+
+ );
+}
+
+process.env.NODE_ENV !== 'production'
+ ? (App.propTypes = {
+ children: PropTypes.element,
+ })
+ : void 0;
diff --git a/packages/pigment-css-react/tests/styled/fixtures/styled-theme.output.js b/packages/pigment-css-react/tests/styled/fixtures/styled-theme.output.js
index dab3d187f4b191..2eae296833973e 100644
--- a/packages/pigment-css-react/tests/styled/fixtures/styled-theme.output.js
+++ b/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 (
+
+
+
+
+ );
+}
+process.env.NODE_ENV !== 'production'
+ ? (App.propTypes = {
+ children: PropTypes.element,
+ })
+ : void 0;
diff --git a/packages/pigment-css-react/tests/styled/fixtures/styled.input.js b/packages/pigment-css-react/tests/styled/fixtures/styled.input.js
index 92126ff9efa283..1d7464f329a50d 100644
--- a/packages/pigment-css-react/tests/styled/fixtures/styled.input.js
+++ b/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 (
+
+
+
+
+ );
+}
+
+App.propTypes = {
+ children: PropTypes.element,
+};
diff --git a/packages/pigment-css-react/tests/styled/fixtures/styled.output.js b/packages/pigment-css-react/tests/styled/fixtures/styled.output.js
index c57ec6223df072..e29c5075747ff5 100644
--- a/packages/pigment-css-react/tests/styled/fixtures/styled.output.js
+++ b/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 (
+
+
+
+
+ );
+}
+App.propTypes = {
+ children: PropTypes.element,
+};
diff --git a/packages/pigment-css-react/tests/testUtils.ts b/packages/pigment-css-react/tests/testUtils.ts
index 66008fc628f609..fd7db17ced5380 100644
--- a/packages/pigment-css-react/tests/testUtils.ts
+++ b/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}`);
},
};
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 7b3f66cce2438d..4bc2683b769b21 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -2245,6 +2245,9 @@ importers:
prettier:
specifier: ^3.2.5
version: 3.2.5
+ prop-types:
+ specifier: ^15.8.1
+ version: 15.8.1
react:
specifier: ^18.2.0
version: 18.2.0