[POC] replace zero-styled path with pigment

packages/pigment-css-react/exports/replace-zero-styled-plugin.js

@@ -0,0 +1,5 @@
+Object.defineProperty(exports, '__esModule', {
+  value: true,
+});
+
+exports.default = require('../utils/replace-zero-styled-plugin').replaceZeroStyledPlugin;

packages/pigment-css-react/src/utils/replace-zero-styled-plugin.ts

@@ -0,0 +1,16 @@
+import { declare } from '@babel/helper-plugin-utils';
+
+export const replaceZeroStyledPlugin = declare<{}>((api) => {
+  api.assertVersion(7);
+  return {
+    name: '@pigmentcss/wyw-replace-zero-styled-plugin',
+    visitor: {
+      ImportDeclaration(path) {
+        const sourcePath = path.get('source');
+        if (sourcePath.node.value.endsWith('zero-styled')) {
+          sourcePath.replaceWith(api.types.stringLiteral('@pigment-css/react'));
+        }
+      },
+    },
+  };
+});

packages/pigment-css-react/tests/styled/fixtures/zero-styled.input.js

@@ -0,0 +1,7 @@
+import { styled } from '../zero-styled';
+
+const Component = styled.div({
+  display: 'flex',
+  flexDirection: 'column',
+  color: '#ff5252',
+});

packages/pigment-css-react/tests/styled/fixtures/zero-styled.output.css

@@ -0,0 +1,5 @@
+.c1j4t6f0 {
+  display: flex;
+  flex-direction: column;
+  color: #ff5252;
+}

packages/pigment-css-react/tests/styled/fixtures/zero-styled.output.js

@@ -0,0 +1,5 @@
+import { styled as _styled } from '@pigment-css/react';
+import _theme from '@pigment-css/react/theme';
+const Component = /*#__PURE__*/ _styled('div')({
+  classes: ['c1j4t6f0'],
+});

packages/pigment-css-react/tests/styled/styled.test.tsx

@@ -81,4 +81,13 @@ describe('Pigment CSS - styled', () => {
     expect(output.js).to.equal(fixture.js);
     expect(output.css).to.equal(fixture.css);
   });
+
+  it('should work with zero-styled path', async () => {
+    const { output, fixture } = await runTransformation(
+      path.join(__dirname, 'fixtures/zero-styled.input.js'),
+    );
+
+    expect(output.js).to.equal(fixture.js);
+    expect(output.css).to.equal(fixture.css);
+  });
 });

packages/pigment-css-react/tests/testUtils.ts

@@ -11,6 +11,7 @@ import {
 import { PluginCustomOptions, preprocessor } from '@pigment-css/react/utils';
 import * as prettier from 'prettier';
 
+import { replaceZeroStyledPlugin } from '../src/utils/replace-zero-styled-plugin';
 import sxTransformPlugin from '../exports/sx-plugin';
 
 const shouldUpdateOutput = process.env.UPDATE_FIXTURES === 'true';
@@ -20,7 +21,7 @@ function runSxTransform(code: string, filename: string) {
     babelrc: false,
     configFile: false,
     filename,
-    plugins: ['@babel/plugin-syntax-jsx', [sxTransformPlugin]],
+    plugins: ['@babel/plugin-syntax-jsx', replaceZeroStyledPlugin, [sxTransformPlugin]],
   });
 }
 

packages/pigment-css-react/tsup.config.ts

@@ -28,6 +28,7 @@ export default defineConfig([
       './src/utils/index.ts',
       './src/utils/sx-plugin.ts',
       './src/utils/remove-prop-types-plugin.ts',
+      './src/utils/replace-zero-styled-plugin.ts',
     ],
     outDir: 'utils',
   },

packages/pigment-css-unplugin/src/index.ts

@@ -240,6 +240,9 @@ export const plugin = createUnplugin<PigmentOptions, true>((options) => {
                 require.resolve(
                   `${process.env.RUNTIME_PACKAGE_NAME}/exports/remove-prop-types-plugin`,
                 ),
+                require.resolve(
+                  `${process.env.RUNTIME_PACKAGE_NAME}/exports/replace-zero-styled-plugin`,
+                ),
                 'babel-plugin-define-var', // A fix for undefined variables in the eval phase of wyw-in-js, more details on https://github.com/siriwatknp/babel-plugin-define-var?tab=readme-ov-file#problem
                 ...(rest.babelOptions?.plugins ?? []),
               ],

packages/pigment-css-vite-plugin/src/vite-plugin.ts

@@ -197,6 +197,9 @@ export default function wywVitePlugin({
                     require.resolve(
                       `${process.env.RUNTIME_PACKAGE_NAME}/exports/remove-prop-types-plugin`,
                     ),
+                    require.resolve(
+                      `${process.env.RUNTIME_PACKAGE_NAME}/exports/replace-zero-styled-plugin`,
+                    ),
                     'babel-plugin-define-var', // A fix for undefined variables in the eval phase of wyw-in-js, more details on https://github.com/siriwatknp/babel-plugin-define-var?tab=readme-ov-file#problem
                     ...(rest.babelOptions?.plugins ?? []),
                   ],