[core] Fix useTheme import change

packages/pigment-css-react/src/createExtendSxProp.js

@@ -5,7 +5,7 @@
  * to reduce bundle size only. DO NOT use it in your codebase.
  */
 function extendSxProp(props) {
-  return props;
+  return { ...props };
 }
 export default function createExtendSxProp() {
   return extendSxProp;

packages/pigment-css-react/src/processors/useTheme.ts

@@ -10,6 +10,9 @@ export type TemplateCallback = (params: Record<string, unknown> | undefined) =>
 export class UseThemeProcessor extends BaseProcessor {
   constructor(params: Params, ...args: TailProcessorParams) {
     super([params[0]], ...args);
+    if (params.length === 1) {
+      throw BaseProcessor.SKIP;
+    }
     validateParams(params, ['callee', ['call']], `Invalid use of ${this.tagSource.imported} tag.`);
   }
 

packages/pigment-css-react/tests/createExtendSxProp/runtime-createExtendSxProp.test.js

@@ -1,11 +1,10 @@
-import { describe } from 'yargs';
 import { expect } from 'chai';
 import createExtendSxProp from '../../src/createExtendSxProp';
 
 describe('createExtendSxProp', () => {
   it('return the new copy of input', () => {
     const original = { color: 'red' };
-    expect(createExtendSxProp()(original)).to.not.equal(original);
+    expect(createExtendSxProp()(original)).not.to.equal(original);
     expect(createExtendSxProp()(original)).to.deep.equal({ color: 'red' });
   });
 });

packages/pigment-css-react/tests/useTheme/fixtures/useTheme.input.js

@@ -1,4 +1,7 @@
-import { useTheme } from '../zero-styled';
+import { useTheme } from '@pigment-css/react';
+
+// This is intentional to make sure Pigment leaves the reference as-is.
+console.log(useTheme);
 
 export const Fade = React.forwardRef(function Fade(props, ref) {
   const theme = useTheme();

packages/pigment-css-react/tests/useTheme/fixtures/useTheme.output.js

@@ -1,4 +1,8 @@
 import _default from '@pigment-css/react/theme';
+import { useTheme } from '@pigment-css/react';
+
+// This is intentional to make sure Pigment leaves the reference as-is.
+console.log(useTheme);
 export const Fade = React.forwardRef(function Fade(props, ref) {
   const theme = _default;
   return (

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

@@ -347,7 +347,10 @@ export const plugin = createUnplugin<PigmentOptions, true>((options) => {
               if (id.endsWith('styles.css')) {
                 return theme ? generateTokenCss(theme) : _code;
               }
-              if (id.includes('pigment-css-react/theme')) {
+              if (
+                id.includes('pigment-css-react/theme') ||
+                id.includes(`${process.env.RUNTIME_PACKAGE_NAME}/theme`)
+              ) {
                 return generateThemeSource(theme);
               }
               return null;

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

@@ -52,10 +52,10 @@ export function pigment(options: PigmentOptions) {
       name: 'vite-mui-theme-injection-plugin',
       enforce: 'pre',
       resolveId(source) {
-        if (source === `${process.env.RUNTIME_PACKAGE_NAME}/styles.css`) {
+        if (source.includes(`${process.env.RUNTIME_PACKAGE_NAME}/styles.css`)) {
           return VIRTUAL_CSS_FILE;
         }
-        if (source === `${process.env.RUNTIME_PACKAGE_NAME}/theme`) {
+        if (source.includes(`${process.env.RUNTIME_PACKAGE_NAME}/theme`)) {
           return VIRTUAL_THEME_FILE;
         }
         return null;