From 7df2fac2d82422f5f7984679d5542f485738ee53 Mon Sep 17 00:00:00 2001
From: Pedro Duarte <contact@peduarte.com>
Date: Mon, 12 Oct 2020 15:37:05 +0200
Subject: [PATCH 1/3] Remove warning aout dynamic CSS prop

---
 packages/react/src/index.tsx | 17 -----------------
 1 file changed, 17 deletions(-)

diff --git a/packages/react/src/index.tsx b/packages/react/src/index.tsx
index 708f4203..211a86d6 100644
--- a/packages/react/src/index.tsx
+++ b/packages/react/src/index.tsx
@@ -10,8 +10,6 @@ import {
 export { _ATOM } from '@stitches/core';
 import * as React from 'react';
 
-let hasWarnedInlineStyle = false;
-
 export type TCssProp<T extends TConfig> = TCssProperties<T> | (string & {});
 
 /**
@@ -197,21 +195,6 @@ export const createStyled = <Config extends TConfig>(
     const stitchesComponentId = `scid-${hashString(JSON.stringify(baseAndVariantStyles))}`;
 
     const StitchesComponent = React.forwardRef((props: any, ref: React.Ref<Element>) => {
-      // Check the memoCompsition's identity to warn the user
-      // remove in production
-      if (process.env.NODE_ENV === 'development') {
-        // we're breaking the rules of hooks on purpose as the env will never change
-        // eslint-disable-next-line
-        const memoStyled = React.useMemo(() => props.css, []); // We want this to only eval once
-        if (memoStyled !== props.css && !hasWarnedInlineStyle) {
-          // tslint:disable-next-line
-          console.warn(
-            '@stitches/react : The css prop should ideally not be dynamic. Define it outside your component using the css composer, or use a memo hook'
-          );
-          hasWarnedInlineStyle = true;
-        }
-      }
-
       const compositions = [baseStyles];
 
       const propsWithoutVariantsAndCssProp: any = {};

From e1ffd1e3c9819959066590f6da1d0cc31d0a0410 Mon Sep 17 00:00:00 2001
From: Pedro Duarte <contact@peduarte.com>
Date: Mon, 12 Oct 2020 15:43:15 +0200
Subject: [PATCH 2/3] Improve warning about inline media queries

---
 packages/core/src/index.ts        | 8 ++++++--
 packages/core/tests/index.test.ts | 4 +---
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
index 9117c5a4..ef5866c1 100644
--- a/packages/core/src/index.ts
+++ b/packages/core/src/index.ts
@@ -534,10 +534,14 @@ export const createCss = <T extends TConfig>(
     // If this was created before return the cached atom
     if (atomCache.has(uid)) {
       // check if this has a breakpoint based media query
-      if (inlineMediasAsString.match(/@media.*\((min|max)?.*(width|height).*\)/)) {
+      // and that it's not production environment
+      if (
+        inlineMediasAsString.match(/@media.*\((min|max)?.*(width|height).*\)/) &&
+        process.env.NODE_ENV !== 'production'
+      ) {
         // tslint:disable-next-line
         console.warn(
-          `The property "${cssProp}" with media query ${inlineMediasAsString} can cause a specificity issue. You should create a breakpoint`
+          `The property "${cssProp}" with media query ${inlineMediasAsString} could cause specificity issues due to injection order. We recommend abstracting media queries used more than once onto the config object. Learn more: https://stitches.dev/docs/breakpoints`
         );
       }
       return atomCache.get(uid)!;
diff --git a/packages/core/tests/index.test.ts b/packages/core/tests/index.test.ts
index 3c868681..6453e127 100644
--- a/packages/core/tests/index.test.ts
+++ b/packages/core/tests/index.test.ts
@@ -1416,9 +1416,7 @@ describe('createCss: mixed(SSR & Client)', () => {
       [mediaString]: { color: 'red' },
     }).toString();
     // tslint:disable-next-line
-    expect(console.warn).toHaveBeenCalledWith(
-      `The property "color" with media query ${mediaString} can cause a specificity issue. You should create a breakpoint`
-    );
+    expect(console.warn).toHaveBeenCalled();
   });
 
   test('should inject inline media queries after normal rules', () => {

From 8972a8a8aa9ab31eb7110daf6bd7ad9d4840219c Mon Sep 17 00:00:00 2001
From: Pedro Duarte <contact@peduarte.com>
Date: Tue, 13 Oct 2020 11:20:04 +0200
Subject: [PATCH 3/3] Update test to `toHaveBeenCalledWith()`

---
 packages/core/tests/index.test.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/core/tests/index.test.ts b/packages/core/tests/index.test.ts
index 6453e127..f8bca09a 100644
--- a/packages/core/tests/index.test.ts
+++ b/packages/core/tests/index.test.ts
@@ -1416,7 +1416,9 @@ describe('createCss: mixed(SSR & Client)', () => {
       [mediaString]: { color: 'red' },
     }).toString();
     // tslint:disable-next-line
-    expect(console.warn).toHaveBeenCalled();
+    expect(console.warn).toHaveBeenCalledWith(
+      'The property "color" with media query @media (min-width: 700px) could cause specificity issues due to injection order. We recommend abstracting media queries used more than once onto the config object. Learn more: https://stitches.dev/docs/breakpoints'
+    );
   });
 
   test('should inject inline media queries after normal rules', () => {