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