implement block scoped eval ($macaron)

Author: Mokshit06

examples/react/package.json

@@ -10,7 +10,7 @@
   "dependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "@macaron-css/core": "0.1.8",
+    "@macaron-css/core": "0.1.9",
     "@macaron-css/vite": "0.1.12",
     "@macaron-css/react": "0.1.10"
   },

examples/solid-start/package.json

@@ -21,7 +21,7 @@
     "node": ">=14"
   },
   "dependencies": {
-    "@macaron-css/core": "0.1.8",
+    "@macaron-css/core": "0.1.9",
     "@macaron-css/vite": "0.1.12",
     "@macaron-css/solid": "0.1.9"
   }

examples/solid/package.json

@@ -11,7 +11,7 @@
     "@macaron-css/esbuild": "0.1.8",
     "@macaron-css/solid": "0.1.9",
     "babel-preset-solid": "^1.4.2",
-    "@macaron-css/core": "0.1.8",
+    "@macaron-css/core": "0.1.9",
     "esbuild": "^0.14.42",
     "solid-js": "^1.4.3"
   }

examples/vanilla/package.json

@@ -5,7 +5,7 @@
   "license": "MIT",
   "dependencies": {
     "@macaron-css/esbuild": "0.1.8",
-    "@macaron-css/core": "0.1.8",
+    "@macaron-css/core": "0.1.9",
     "esbuild": "^0.14.42"
   }
 }

examples/vite/package.json

@@ -9,7 +9,7 @@
   },
   "dependencies": {
     "@vanilla-extract/css": "^1.7.1",
-    "@macaron-css/core": "0.1.8",
+    "@macaron-css/core": "0.1.9",
     "@macaron-css/vite": "0.1.12"
   },
   "devDependencies": {

packages/babel/src/index.test.ts

@@ -95,6 +95,20 @@ test('extracts style function', () => {
   expect(code).toMatchSnapshot();
 });
 
+test('extracts $macaron function', () => {
+  const { result, code } = babelTransform(`
+    import { style, $macaron } from '@macaron-css/core';
+    
+    const red = $macaron(() => {
+      return style({ color: 'red' })
+    });
+    console.log(red);
+  `);
+
+  expect(result).toMatchSnapshot();
+  expect(code).toMatchSnapshot();
+});
+
 test('multiple variable declarators in one declaration', () => {
   const { result, code } = babelTransform(`
     import { style } from '@macaron-css/core';

packages/babel/src/utils.ts

@@ -61,6 +61,8 @@ export function getNearestIdentifier(path: NodePath<t.Node>) {
 }
 
 export const extractionAPIs = [
+  // @macaron-css/core
+  '$macaron',
   // @vanilla-extract/css
   'style',
   'styleVariants',

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@macaron-css/core",
-  "version": "0.1.8",
+  "version": "0.1.9",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",

packages/core/src/index.ts

@@ -80,3 +80,7 @@ export function recipe<Variants extends VariantGroups>(
     args: [config],
   });
 }
+
+export const $macaron = <T>(block: () => T) => {
+  return block();
+};

packages/solid/src/index.ts

@@ -37,13 +37,17 @@ export function styled<
 ): StyledComponent<TProps, Variants>;
 
 export function styled(component: any, options: any): (props: any) => any {
+  // the following doesn't work because vanilla-extract's function serializer
+  // cannot serialize complex functions like `$$styled`
+
   // const runtimeFn = recipe(options);
 
   // return addFunctionSerializer($$styled(component, runtimeFn as any), {
   //   importPath: '@macaron-css/solid/runtime',
   //   args: [component, runtimeFn],
   //   importName: '$$styled',
   // });
+
   throw new Error(
     "This function shouldn't be there in your final code. If you're seeing this, there is probably some issue with your build config. If you think everything looks fine, then file an issue at https://github.com/mokshit06/macaron/issues"
   );