From 794b4437af72992c4907f6f13f92bbed3359b3be Mon Sep 17 00:00:00 2001 From: Brijesh Bittu Date: Wed, 7 Aug 2024 15:29:54 +0530 Subject: [PATCH] [core] Fix thrown error during eval phase (#196) --- apps/pigment-css-next-app/src/app/grid/page.tsx | 2 +- packages/pigment-css-react/src/css.js | 8 ++++++++ packages/pigment-css-react/src/generateAtomics.js | 8 ++++++++ packages/pigment-css-react/src/globalCss.js | 8 ++++++++ packages/pigment-css-react/src/keyframes.js | 8 ++++++++ packages/pigment-css-react/src/useTheme.js | 8 ++++++++ 6 files changed, 41 insertions(+), 1 deletion(-) diff --git a/apps/pigment-css-next-app/src/app/grid/page.tsx b/apps/pigment-css-next-app/src/app/grid/page.tsx index 52c27519..7c5070e8 100644 --- a/apps/pigment-css-next-app/src/app/grid/page.tsx +++ b/apps/pigment-css-next-app/src/app/grid/page.tsx @@ -13,7 +13,7 @@ const Item = styled.div` function GridDemo1() { return ( - + size=8 diff --git a/packages/pigment-css-react/src/css.js b/packages/pigment-css-react/src/css.js index 39cdb04d..755ea0ac 100644 --- a/packages/pigment-css-react/src/css.js +++ b/packages/pigment-css-react/src/css.js @@ -1,4 +1,12 @@ +/** + * `__wyw_dynamic_import` is a special global var that is set during the evaluation phase by wyw. + * So during eval phase, it can happen that some code is calling the runtime function. + * We do not want to throw error in that case as we want the evaluation to happen. + */ export default function css() { + if (typeof __wyw_dynamic_import !== 'undefined') { + return; + } throw new Error( `${process.env.PACKAGE_NAME}: You were trying to call "css" function without configuring your bundler. Make sure to install the bundler specific plugin and use it. @pigment-css/vite-plugin for Vite integration or @pigment-css/nextjs-plugin for Next.js integration.`, ); diff --git a/packages/pigment-css-react/src/generateAtomics.js b/packages/pigment-css-react/src/generateAtomics.js index b78ccfd6..2db31e7c 100644 --- a/packages/pigment-css-react/src/generateAtomics.js +++ b/packages/pigment-css-react/src/generateAtomics.js @@ -1,6 +1,14 @@ import cx from 'clsx'; +/** + * `__wyw_dynamic_import` is a special global var that is set during the evaluation phase by wyw. + * So during eval phase, it can happen that some code is calling the runtime function. + * We do not want to throw error in that case as we want the evaluation to happen. + */ export function generateAtomics() { + if (typeof __wyw_dynamic_import !== 'undefined') { + return; + } throw new Error( `${process.env.PACKAGE_NAME}: You were trying to call "generateAtomics" function without configuring your bundler. Make sure to install the bundler specific plugin and use it. @pigment-css/vite-plugin for Vite integration or @pigment-css/nextjs-plugin for Next.js integration.`, ); diff --git a/packages/pigment-css-react/src/globalCss.js b/packages/pigment-css-react/src/globalCss.js index 65e0cfca..38b43837 100644 --- a/packages/pigment-css-react/src/globalCss.js +++ b/packages/pigment-css-react/src/globalCss.js @@ -1,4 +1,12 @@ +/** + * `__wyw_dynamic_import` is a special global var that is set during the evaluation phase by wyw. + * So during eval phase, it can happen that some code is calling the runtime function. + * We do not want to throw error in that case as we want the evaluation to happen. + */ export default function globalCss() { + if (typeof __wyw_dynamic_import !== 'undefined') { + return; + } throw new Error( `${process.env.PACKAGE_NAME}: You were trying to call "globalCss" function without configuring your bundler. Make sure to install the bundler specific plugin and use it. @pigment-css/vite-plugin for Vite integration or @pigment-css/nextjs-plugin for Next.js integration.`, ); diff --git a/packages/pigment-css-react/src/keyframes.js b/packages/pigment-css-react/src/keyframes.js index 197d509e..1dc7df6c 100644 --- a/packages/pigment-css-react/src/keyframes.js +++ b/packages/pigment-css-react/src/keyframes.js @@ -1,4 +1,12 @@ +/** + * `__wyw_dynamic_import` is a special global var that is set during the evaluation phase by wyw. + * So during eval phase, it can happen that some code is calling the runtime function. + * We do not want to throw error in that case as we want the evaluation to happen. + */ export default function keyframes() { + if (typeof __wyw_dynamic_import !== 'undefined') { + return; + } throw new Error( `${process.env.PACKAGE_NAME}: You were trying to call "keyframes" function without configuring your bundler. Make sure to install the bundler specific plugin and use it. @pigment-css/vite-plugin for Vite integration or @pigment-css/nextjs-plugin for Next.js integration.`, ); diff --git a/packages/pigment-css-react/src/useTheme.js b/packages/pigment-css-react/src/useTheme.js index 527eb6df..a3f91f53 100644 --- a/packages/pigment-css-react/src/useTheme.js +++ b/packages/pigment-css-react/src/useTheme.js @@ -1,4 +1,12 @@ +/** + * `__wyw_dynamic_import` is a special global var that is set during the evaluation phase by wyw. + * So during eval phase, it can happen that some code is calling the runtime function. + * We do not want to throw error in that case as we want the evaluation to happen. + */ export default function useTheme() { + if (typeof __wyw_dynamic_import !== 'undefined') { + return; + } throw new Error( `${process.env.PACKAGE_NAME}: You were trying to call "useTheme" function without configuring your bundler. Make sure to install the bundler specific plugin and use it. @pigment-css/vite-plugin for Vite integration or @pigment-css/nextjs-plugin for Next.js integration.`, );