Update warnings

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)!;

packages/core/tests/index.test.ts

@@ -1417,7 +1417,7 @@ describe('createCss: mixed(SSR & Client)', () => {
     }).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`
+      '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'
     );
   });
 

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 = {};