feat: Added support for unsafe CSS using __unsafe

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"
 />
 `;
 

packages/css/spec.md

@@ -0,0 +1,6 @@
+## CSS Spec
+
+- [ ] transition
+- [ ] keyframes
+- [ ] animation
+- [ ] box-shadow

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}
   }

packages/css/src/AncestorCss_Stories.res

@@ -19,6 +19,9 @@ let main = () => {
         },
       ),
     ],
+    __unsafe: {
+      "border": "solid 1px red",
+    },
   })
 
   <div className={styles}>