From 35d63af0fbadc5779612dde7a676f0292eab0aa0 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Fri, 29 Mar 2024 11:26:10 +0700 Subject: [PATCH 1/4] fix emotion toString error --- .../wyw-in-js/errors/CustomizedSwitches.js | 128 ++++++++++++++++++ .../pigment-css-nextjs-plugin/package.json | 1 + .../pigment-css-nextjs-plugin/src/index.ts | 3 + .../third-party-styled.js | 4 + 4 files changed, 136 insertions(+) create mode 100644 apps/pigment-css-next-app/wyw-in-js/errors/CustomizedSwitches.js create mode 100644 packages/pigment-css-nextjs-plugin/third-party-styled.js diff --git a/apps/pigment-css-next-app/wyw-in-js/errors/CustomizedSwitches.js b/apps/pigment-css-next-app/wyw-in-js/errors/CustomizedSwitches.js new file mode 100644 index 00000000000000..ba47efe10b3ef3 --- /dev/null +++ b/apps/pigment-css-next-app/wyw-in-js/errors/CustomizedSwitches.js @@ -0,0 +1,128 @@ +"use strict"; + +var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault"); +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.__wywPreval = void 0; +var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty")); +var _jsxDevRuntime = require("react/jsx-dev-runtime"); +var React = _interopRequireWildcard(require("react")); +var _styles = require("@mui/material/styles"); +var _Switch = _interopRequireDefault(require("@mui/material/Switch")); +function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); } +function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; } +function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; } +function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } +const MaterialUISwitch = (0, _styles.styled)(_Switch.default)(({ + theme +}) => ({ + width: 62, + height: 34, + padding: 7, + "& .MuiSwitch-switchBase": { + margin: 1, + padding: 0, + transform: "translateX(6px)", + "&.Mui-checked": { + color: "#fff", + transform: "translateX(22px)", + "& .MuiSwitch-thumb:before": { + backgroundImage: `url('data:image/svg+xml;utf8,')` + }, + "& + .MuiSwitch-track": { + opacity: 1, + backgroundColor: theme.palette.mode === "dark" ? "#8796A5" : "#aab4be" + } + } + }, + "& .MuiSwitch-thumb": { + backgroundColor: theme.palette.mode === "dark" ? "#003892" : "#001e3c", + width: 32, + height: 32, + "&::before": { + content: "''", + position: "absolute", + width: "100%", + height: "100%", + left: 0, + top: 0, + backgroundRepeat: "no-repeat", + backgroundPosition: "center", + backgroundImage: `url('data:image/svg+xml;utf8,')` + } + }, + "& .MuiSwitch-track": { + opacity: 1, + backgroundColor: theme.palette.mode === "dark" ? "#8796A5" : "#aab4be", + borderRadius: 20 / 2 + } +})); +const IOSSwitch = (0, _styles.styled)(props => /*#__PURE__*/(0, _jsxDevRuntime.jsxDEV)(_Switch.default, _objectSpread({ + focusVisibleClassName: ".Mui-focusVisible", + disableRipple: true +}, props), void 0, false, { + fileName: "/Users/siriwatknp/Personal-Repos/material-ui/docs/data/material/components/switches/CustomizedSwitches.js", + lineNumber: 90, + columnNumber: 3 +}, void 0))(({ + theme +}) => ({ + width: 42, + height: 26, + padding: 0, + "& .MuiSwitch-switchBase": { + padding: 0, + margin: 2, + transitionDuration: "300ms", + "&.Mui-checked": { + transform: "translateX(16px)", + color: "#fff", + "& + .MuiSwitch-track": { + backgroundColor: theme.palette.mode === "dark" ? "#2ECA45" : "#65C466", + opacity: 1, + border: 0 + }, + "&.Mui-disabled + .MuiSwitch-track": { + opacity: 0.5 + } + }, + "&.Mui-focusVisible .MuiSwitch-thumb": { + color: "#33cf4d", + border: "6px solid #fff" + }, + "&.Mui-disabled .MuiSwitch-thumb": { + color: theme.palette.mode === "light" ? theme.palette.grey[100] : theme.palette.grey[600] + }, + "&.Mui-disabled + .MuiSwitch-track": { + opacity: theme.palette.mode === "light" ? 0.7 : 0.3 + } + }, + "& .MuiSwitch-thumb": { + boxSizing: "border-box", + width: 22, + height: 22 + }, + "& .MuiSwitch-track": { + borderRadius: 26 / 2, + backgroundColor: theme.palette.mode === "light" ? "#E9E9EA" : "#39393D", + opacity: 1, + transition: theme.transitions.create(["background-color"], { + duration: 500 + }) + } +})); +const _exp = /*#__PURE__*/() => ({ + m: 1 +}); +const _exp2 = /*#__PURE__*/() => MaterialUISwitch; +const _exp3 = /*#__PURE__*/() => ({ + m: 1 +}); +const _exp4 = /*#__PURE__*/() => IOSSwitch; +const __wywPreval = exports.__wywPreval = { + _exp: _exp, + _exp2: _exp2, + _exp3: _exp3, + _exp4: _exp4 +}; \ No newline at end of file diff --git a/packages/pigment-css-nextjs-plugin/package.json b/packages/pigment-css-nextjs-plugin/package.json index ff9149029c1def..48fc30fa15324f 100644 --- a/packages/pigment-css-nextjs-plugin/package.json +++ b/packages/pigment-css-nextjs-plugin/package.json @@ -45,6 +45,7 @@ "loader.js", "next-font.js", "next-image.js", + "third-party-styled.js", "zero-virtual.css", "package.json", "LICENSE" diff --git a/packages/pigment-css-nextjs-plugin/src/index.ts b/packages/pigment-css-nextjs-plugin/src/index.ts index d4cbe973021384..6055f710f4ebd8 100644 --- a/packages/pigment-css-nextjs-plugin/src/index.ts +++ b/packages/pigment-css-nextjs-plugin/src/index.ts @@ -72,6 +72,9 @@ export function withPigment(nextConfig: NextConfig, pigmentConfig?: PigmentOptio if (what.startsWith('next/font')) { return require.resolve('../next-font'); } + if (what.startsWith('@emotion/styled') || what.startsWith('styled-components')) { + return require.resolve('../third-party-styled'); + } if (asyncResolve) { return asyncResolve(what, importer, stack); } diff --git a/packages/pigment-css-nextjs-plugin/third-party-styled.js b/packages/pigment-css-nextjs-plugin/third-party-styled.js new file mode 100644 index 00000000000000..053f431428732b --- /dev/null +++ b/packages/pigment-css-nextjs-plugin/third-party-styled.js @@ -0,0 +1,4 @@ +/* eslint-env node */ +module.exports = function DummyStyled() { + return () => () => null; +}; From 89e5d165fc64c8812056f8d5795abaf07834376b Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Fri, 29 Mar 2024 11:26:21 +0700 Subject: [PATCH 2/4] fix prop-types from Material UI --- .../pigment-css-react/src/utils/remove-prop-types-plugin.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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..5c01909da42f5b 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,7 +14,7 @@ export const removePropTypesPlugin = declare<{}>((api) => { if (!property.isIdentifier({ name: 'propTypes' })) { return; } - if (path.parentPath.isExpressionStatement()) { + if (path.parentPath.isExpressionStatement() || path.parentPath.isConditionalExpression()) { path.parentPath.remove(); } }, From 19868dbe54fc792e19845642e6254cbff3daec06 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Fri, 29 Mar 2024 11:32:33 +0700 Subject: [PATCH 3/4] remove debugging file --- .../wyw-in-js/errors/CustomizedSwitches.js | 128 ------------------ 1 file changed, 128 deletions(-) delete mode 100644 apps/pigment-css-next-app/wyw-in-js/errors/CustomizedSwitches.js diff --git a/apps/pigment-css-next-app/wyw-in-js/errors/CustomizedSwitches.js b/apps/pigment-css-next-app/wyw-in-js/errors/CustomizedSwitches.js deleted file mode 100644 index ba47efe10b3ef3..00000000000000 --- a/apps/pigment-css-next-app/wyw-in-js/errors/CustomizedSwitches.js +++ /dev/null @@ -1,128 +0,0 @@ -"use strict"; - -var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault"); -Object.defineProperty(exports, "__esModule", { - value: true -}); -exports.__wywPreval = void 0; -var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty")); -var _jsxDevRuntime = require("react/jsx-dev-runtime"); -var React = _interopRequireWildcard(require("react")); -var _styles = require("@mui/material/styles"); -var _Switch = _interopRequireDefault(require("@mui/material/Switch")); -function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); } -function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; } -function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; } -function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } -const MaterialUISwitch = (0, _styles.styled)(_Switch.default)(({ - theme -}) => ({ - width: 62, - height: 34, - padding: 7, - "& .MuiSwitch-switchBase": { - margin: 1, - padding: 0, - transform: "translateX(6px)", - "&.Mui-checked": { - color: "#fff", - transform: "translateX(22px)", - "& .MuiSwitch-thumb:before": { - backgroundImage: `url('data:image/svg+xml;utf8,')` - }, - "& + .MuiSwitch-track": { - opacity: 1, - backgroundColor: theme.palette.mode === "dark" ? "#8796A5" : "#aab4be" - } - } - }, - "& .MuiSwitch-thumb": { - backgroundColor: theme.palette.mode === "dark" ? "#003892" : "#001e3c", - width: 32, - height: 32, - "&::before": { - content: "''", - position: "absolute", - width: "100%", - height: "100%", - left: 0, - top: 0, - backgroundRepeat: "no-repeat", - backgroundPosition: "center", - backgroundImage: `url('data:image/svg+xml;utf8,')` - } - }, - "& .MuiSwitch-track": { - opacity: 1, - backgroundColor: theme.palette.mode === "dark" ? "#8796A5" : "#aab4be", - borderRadius: 20 / 2 - } -})); -const IOSSwitch = (0, _styles.styled)(props => /*#__PURE__*/(0, _jsxDevRuntime.jsxDEV)(_Switch.default, _objectSpread({ - focusVisibleClassName: ".Mui-focusVisible", - disableRipple: true -}, props), void 0, false, { - fileName: "/Users/siriwatknp/Personal-Repos/material-ui/docs/data/material/components/switches/CustomizedSwitches.js", - lineNumber: 90, - columnNumber: 3 -}, void 0))(({ - theme -}) => ({ - width: 42, - height: 26, - padding: 0, - "& .MuiSwitch-switchBase": { - padding: 0, - margin: 2, - transitionDuration: "300ms", - "&.Mui-checked": { - transform: "translateX(16px)", - color: "#fff", - "& + .MuiSwitch-track": { - backgroundColor: theme.palette.mode === "dark" ? "#2ECA45" : "#65C466", - opacity: 1, - border: 0 - }, - "&.Mui-disabled + .MuiSwitch-track": { - opacity: 0.5 - } - }, - "&.Mui-focusVisible .MuiSwitch-thumb": { - color: "#33cf4d", - border: "6px solid #fff" - }, - "&.Mui-disabled .MuiSwitch-thumb": { - color: theme.palette.mode === "light" ? theme.palette.grey[100] : theme.palette.grey[600] - }, - "&.Mui-disabled + .MuiSwitch-track": { - opacity: theme.palette.mode === "light" ? 0.7 : 0.3 - } - }, - "& .MuiSwitch-thumb": { - boxSizing: "border-box", - width: 22, - height: 22 - }, - "& .MuiSwitch-track": { - borderRadius: 26 / 2, - backgroundColor: theme.palette.mode === "light" ? "#E9E9EA" : "#39393D", - opacity: 1, - transition: theme.transitions.create(["background-color"], { - duration: 500 - }) - } -})); -const _exp = /*#__PURE__*/() => ({ - m: 1 -}); -const _exp2 = /*#__PURE__*/() => MaterialUISwitch; -const _exp3 = /*#__PURE__*/() => ({ - m: 1 -}); -const _exp4 = /*#__PURE__*/() => IOSSwitch; -const __wywPreval = exports.__wywPreval = { - _exp: _exp, - _exp2: _exp2, - _exp3: _exp3, - _exp4: _exp4 -}; \ No newline at end of file From 083374ee8f675ac0cfacb11a0bbcb1617d2ec8a3 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Fri, 29 Mar 2024 11:40:43 +0700 Subject: [PATCH 4/4] revert change --- .../pigment-css-react/src/utils/remove-prop-types-plugin.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 5c01909da42f5b..703fe989b249a9 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,7 +14,7 @@ export const removePropTypesPlugin = declare<{}>((api) => { if (!property.isIdentifier({ name: 'propTypes' })) { return; } - if (path.parentPath.isExpressionStatement() || path.parentPath.isConditionalExpression()) { + if (path.parentPath.isExpressionStatement()) { path.parentPath.remove(); } },