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;
+};