From 9f90c6d9b01fb66338760807e3b1db12e9799d6a Mon Sep 17 00:00:00 2001
From: Marcos Oliveira <vmarcosp.pereira@gmail.com>
Date: Thu, 2 Feb 2023 13:53:24 -0300
Subject: [PATCH 1/2] feat: added support for unsafe css using __unsafe

---
 packages/css/spec.md                     |  6 +++
 packages/css/src/AncestorCss.res         | 55 ++++++++++++++----------
 packages/css/src/AncestorCss_Stories.res |  3 ++
 3 files changed, 42 insertions(+), 22 deletions(-)
 create mode 100644 packages/css/spec.md

diff --git a/packages/css/spec.md b/packages/css/spec.md
new file mode 100644
index 00000000..16f11c9a
--- /dev/null
+++ b/packages/css/spec.md
@@ -0,0 +1,6 @@
+## CSS Spec
+
+- [ ] transition
+- [ ] keyframes
+- [ ] animation
+- [ ] box-shadow
diff --git a/packages/css/src/AncestorCss.res b/packages/css/src/AncestorCss.res
index d15c3ab2..72fc820d 100644
--- a/packages/css/src/AncestorCss.res
+++ b/packages/css/src/AncestorCss.res
@@ -17,7 +17,12 @@ module Make = (
 
   open! Types
 
-  type rec t = {
+  module Unsafe = {
+    type t
+    external make: {..} => t = "%identity"
+  }
+
+  type rec t<'unsafe> = {
     borderRadius?: Parser.t<TokensConfig.radius>,
     borderTLRadius?: Parser.t<TokensConfig.radius>,
     borderTRRadius?: Parser.t<TokensConfig.radius>,
@@ -111,21 +116,22 @@ module Make = (
     /*
      * Pseudo selectors
      */
-    _hover?: t,
-    _focus?: t,
-    _active?: t,
-    _focusWithin?: t,
-    _focusVisible?: t,
-    _disabled?: t,
-    _before?: t,
-    _after?: t,
-    _even?: t,
-    _odd?: t,
-    _first?: t,
-    _last?: t,
-    _notFirst?: t,
-    _notLast?: t,
-    selectors?: array<(string, t)>,
+    _hover?: t<'unsafe>,
+    _focus?: t<'unsafe>,
+    _active?: t<'unsafe>,
+    _focusWithin?: t<'unsafe>,
+    _focusVisible?: t<'unsafe>,
+    _disabled?: t<'unsafe>,
+    _before?: t<'unsafe>,
+    _after?: t<'unsafe>,
+    _even?: t<'unsafe>,
+    _odd?: t<'unsafe>,
+    _first?: t<'unsafe>,
+    _last?: t<'unsafe>,
+    _notFirst?: t<'unsafe>,
+    _notLast?: t<'unsafe>,
+    selectors?: array<(string, t<'unsafe>)>,
+    __unsafe?: {..} as 'unsafe,
   }
 
   let createPseudoStyle = (transformer, selector, maybeStyles) =>
@@ -140,7 +146,7 @@ module Make = (
       }, ""))
   }
 
-  let rec parseToCss = (api: Context.api, styles: t) => {
+  let rec parseToCss = (api: Context.api, styles: t<'unsafe>) => {
     let cssTransformer = parseToCss(api)
     let s = Parser.parse
     let p = createPseudoStyle(cssTransformer)
@@ -270,8 +276,10 @@ module Make = (
     ->Js.Array2.joinWith("")
   }
 
-  let css = (styles: t) =>
-    parseToCss(
+  let css = (styles: t<'unsafe>) => {
+    let unsafeStyles = styles.__unsafe->Obj.magic->Emotion.rawCss
+
+    let responsiveStyles = parseToCss(
       {
         colors: TokensConfig.colors,
         spacing: TokensConfig.spacing,
@@ -281,11 +289,14 @@ module Make = (
       styles,
     )->Emotion.rawCss
 
-  type useCssApi = {css: t => string}
+    `${responsiveStyles} ${unsafeStyles}`
+  }
+
+  type useCssApi<'unsafe> = {css: t<'unsafe> => string}
 
-  let useCss = (): useCssApi => {
+  let useCss = (): useCssApi<'unsafe> => {
     let context = Context.useContext()
-    let css = (styles: t) => parseToCss(context, styles)->Emotion.rawCss
+    let css = (styles: t<'unsafe>) => parseToCss(context, styles)->Emotion.rawCss
 
     {css: css}
   }
diff --git a/packages/css/src/AncestorCss_Stories.res b/packages/css/src/AncestorCss_Stories.res
index b2be1ae2..1f594b4a 100644
--- a/packages/css/src/AncestorCss_Stories.res
+++ b/packages/css/src/AncestorCss_Stories.res
@@ -19,6 +19,9 @@ let main = () => {
         },
       ),
     ],
+    __unsafe: {
+      "border": "solid 1px red",
+    },
   })
 
   <div className={styles}>

From 28f5b3e212e205227dd28851da5b723ac33f77ae Mon Sep 17 00:00:00 2001
From: Marcos Oliveira <vmarcosp.pereira@gmail.com>
Date: Thu, 2 Feb 2023 14:03:44 -0300
Subject: [PATCH 2/2] tests: updating snapshot tests

---
 packages/css/__tests__/__snapshots__/AcestorCss_Test.bs.js.snap | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/css/__tests__/__snapshots__/AcestorCss_Test.bs.js.snap b/packages/css/__tests__/__snapshots__/AcestorCss_Test.bs.js.snap
index b35dad4f..d9de7fca 100644
--- a/packages/css/__tests__/__snapshots__/AcestorCss_Test.bs.js.snap
+++ b/packages/css/__tests__/__snapshots__/AcestorCss_Test.bs.js.snap
@@ -17,7 +17,7 @@ exports[`AncestorCss .parseToCss should generate a simple className correctly 1`
 }
 
 <div
-  className="emotion-0"
+  className="emotion-0 emotion-1"
 />
 `;