From 16f92bcdc5ebc4f95f216c730cffaf13cd5fd2e8 Mon Sep 17 00:00:00 2001
From: Stephen Haberman <shaberman@homebound.com>
Date: Mon, 14 Nov 2022 15:00:13 -0600
Subject: [PATCH] Notes.

---
 .../app-tachyons-fela-prop/src/jsx-dev-runtime.js     | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/packages/app-tachyons-fela-prop/src/jsx-dev-runtime.js b/packages/app-tachyons-fela-prop/src/jsx-dev-runtime.js
index d52c9ab..b7d9083 100644
--- a/packages/app-tachyons-fela-prop/src/jsx-dev-runtime.js
+++ b/packages/app-tachyons-fela-prop/src/jsx-dev-runtime.js
@@ -30,12 +30,15 @@ export function jsxDEV(type, props = {}, ...children) {
   if (props) {
     const { css, className, ...otherProps } = props;
     if (css) {
-      // Use emotion to convert `{ color: "blue" }` --> `a`
-      // const cn = renderer.renderRule(() => css, {});
-      // return _jsxDEV(type, { ...otherProps, className: className ? cn + " " + className : cn }, ...children);
+      // Use fela/emotion to convert `{ color: "blue" }` --> `a`
+      const cn = renderer.renderRule(() => css, {});
+      // Wrinkles with skipping the wrapper FelaComponent/EmotionCssPropInternal are:
+      // 1) Technically we should get renderer from `useContext` instead of a global variable :shrug:
+      // 2) Ideally in React 18 we'd use useInsertionEffect to batch style insertions but also maybe :shrug:
+      return _jsxDEV(type, { ...otherProps, className: className ? cn + " " + className : cn }, ...children);
 
       // Or just use `style`
-      return _jsxDEV(type, { ...otherProps, style: css }, ...children);
+      // return _jsxDEV(type, { ...otherProps, style: css }, ...children);
     }
   }
   return _jsxDEV(type, props, ...children);