Enable sx prop on any components

apps/pigment-css-next-app/.eslintrc

@@ -3,6 +3,7 @@
   "rules": {
     "import/prefer-default-export": "off",
     "import/extensions": "off",
-    "import/no-unresolved": "off"
-  }
+    "import/no-unresolved": "off",
+    "react/no-unknown-property": ["error", { "ignore": ["sx"] }],
+  },
 }

apps/pigment-css-next-app/next.config.js

@@ -101,7 +101,7 @@ theme.getColorSchemeSelector = (colorScheme) => {
  */
 const pigmentOptions = {
   theme,
-  transformLibraries: ['local-ui-lib'],
+  transformLibraries: ['local-ui-lib', '@mui/material'],
   sourceMap: true,
   displayName: true,
 };

apps/pigment-css-next-app/src/app/page.tsx

@@ -1,7 +1,17 @@
 import Image from 'next/image';
 import { styled, css } from '@pigment-css/react';
+import Button from '@mui/material/Button';
 import styles from './page.module.css';
 
+declare global {
+  namespace React {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    interface HTMLAttributes<T> {
+      sx?: any;
+    }
+  }
+}
+
 const visuallyHidden = css({
   border: 0,
   clip: 'rect(0 0 0 0)',
@@ -93,8 +103,16 @@ export default function Home() {
   return (
     <Main>
       <div className={visuallyHidden}>I am invisible</div>
-      <Description>
-        <p>
+      <Description
+        sx={{
+          '&::before': {
+            content: '"🚀"',
+            display: 'inline-block',
+            border: '1px solid',
+          },
+        }}
+      >
+        <p sx={{ boxShadow: '0 0 4px 0 rgba(0 0 0 / 0.12)' }}>
           Get started by editing&nbsp;
           <code className={styles.code}>src/app/page.tsx</code>
         </p>
@@ -117,7 +135,12 @@ export default function Home() {
         </div>
       </Description>
 
-      <div className={styles.center}>
+      <div
+        className={styles.center}
+        sx={{
+          border: '1px solid',
+        }}
+      >
         <Image
           className={styles.logo}
           src="/next.svg"
@@ -176,6 +199,18 @@ export default function Home() {
           </h2>
           <p>Instantly deploy your Next.js site to a shareable URL with Vercel.</p>
         </a>
+        <Button
+          sx={{
+            color: 'red',
+            backgroundColor: 'blue',
+            '&:hover': {
+              color: 'blue',
+              backgroundColor: 'red',
+            },
+          }}
+        >
+          Hello
+        </Button>
       </div>
     </Main>
   );

apps/pigment-css-next-app/tsconfig.json

@@ -25,15 +25,6 @@
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
   "exclude": ["node_modules"],
   "references": [
-    {
-      "path": "../../packages/mui-system/tsconfig.build.json"
-    },
-    {
-      "path": "../../packages/mui-base/tsconfig.build.json"
-    },
-    {
-      "path": "../../packages/mui-material/tsconfig.build.json"
-    },
     {
       "path": "../../packages/pigment-css-react/tsconfig.json"
     }

packages/pigment-css-react/.gitignore

@@ -1,4 +1,3 @@
 /processors/
 /utils/
 LICENSE
-/private-runtime/

packages/pigment-css-react/package.json

@@ -43,9 +43,9 @@
     "@emotion/styled": "^11.11.5",
     "@mui/system": "^6.0.0-alpha.1",
     "@mui/utils": "^6.0.0-alpha.1",
-    "@wyw-in-js/processor-utils": "^0.5.1",
-    "@wyw-in-js/shared": "^0.5.1",
-    "@wyw-in-js/transform": "^0.5.1",
+    "@wyw-in-js/processor-utils": "^0.5.3",
+    "@wyw-in-js/shared": "^0.5.3",
+    "@wyw-in-js/transform": "^0.5.3",
     "clsx": "^2.1.0",
     "cssesc": "^3.0.0",
     "csstype": "^3.1.3",
@@ -91,7 +91,6 @@
   "files": [
     "build",
     "exports",
-    "private-runtime",
     "processors",
     "theme",
     "utils",
@@ -149,15 +148,6 @@
       },
       "require": "./build/RtlProvider.js",
       "default": "./build/RtlProvider.js"
-    },
-    "./private-runtime": {
-      "types": "./private-runtime/index.d.ts",
-      "import": {
-        "types": "./private-runtime/index.d.mts",
-        "default": "./private-runtime/index.mjs"
-      },
-      "require": "./private-runtime/index.js",
-      "default": "./private-runtime/index.js"
     }
   },
   "nx": {