From 160d4d214fb1c525302945114bd8074bdcbbef1a Mon Sep 17 00:00:00 2001
From: tkow <t.kusama0613@outlook.jp>
Date: Tue, 8 Nov 2022 13:41:31 +0900
Subject: [PATCH 1/2] fix: inline style media properties available

---
 src/internals/index.js | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/internals/index.js b/src/internals/index.js
index 07cdc8f..908dfde 100644
--- a/src/internals/index.js
+++ b/src/internals/index.js
@@ -207,7 +207,7 @@ export function createStitches(config = {}) {
           .filter(Boolean);
       }
 
-      const cssStyles = props.css
+      let cssStyles = props.css
         ? utils.processStyles({
             styles: props.css || {},
             theme: theme.values,
@@ -215,6 +215,11 @@ export function createStitches(config = {}) {
           })
         : {};
 
+      if (cssStyles && breakpoint in cssStyles) {
+        // WARNING: lodash merge modifies the first argument reference or skips if object is frozen.
+        cssStyles = merge({}, cssStyles, cssStyles[breakpoint]);
+      }
+
       const mediaStyle = styleSheet.base[breakpoint] || {};
 
       const stitchesStyles = [

From c10e2f9a2e056aa0f8d5b0cb4b7c53e8201eba0c Mon Sep 17 00:00:00 2001
From: tkow <t.kusama0613@outlook.jp>
Date: Tue, 8 Nov 2022 13:50:31 +0900
Subject: [PATCH 2/2] chore: add example inline media style

---
 example/src/Example.tsx | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/example/src/Example.tsx b/example/src/Example.tsx
index cebe510..ee90325 100644
--- a/example/src/Example.tsx
+++ b/example/src/Example.tsx
@@ -26,7 +26,16 @@ export default function Example() {
               <Heading heading="h3">Heading</Heading>
               <Heading heading="h4">Heading</Heading>
               <Heading heading="h5">Heading</Heading>
-              <Heading underlined>Compound Variants</Heading>
+              <Heading
+                // NOTE: test inline media style.
+                // marginTopRem util function turns media style.
+                css={{
+                  marginTopRem: 1,
+                }}
+                underlined
+              >
+                Compound Variants
+              </Heading>
               <Heading underlined heading="h2">
                 Heading
               </Heading>