add dev enviroment warning for css property (#3)

* feat: add warning when css immutable property is wrong

package.json

@@ -15,22 +15,18 @@
     "@types/react-dom": "17.0.2"
   },
   "devDependencies": {
-    "vite": "^2.9.12",
-    "zx": "^7.0.0",
-    "jest": "^27.5.1",
-    "jest-extended": "^2.0.0",
-    "@babel/plugin-transform-modules-commonjs": "^7.17.7",
-    "@types/react": "^17.0.2",
-    "@types/react-dom": "^17.0.2",
     "@babel/core": "^7.17.2",
-    "@c3/cli": "^1.0.100",
+    "@babel/plugin-transform-modules-commonjs": "^7.17.7",
+    "@c3/cli": "workspace:^1.0.107",
     "@changesets/cli": "^2.22.0",
     "@jest/types": "^28.1.1",
     "@rollup/plugin-commonjs": "^21.0.1",
     "@rollup/plugin-typescript": "^8.3.0",
     "@types/jest": "^27.4.1",
     "@types/lodash": "^4.14.178",
     "@types/node": "^17.0.13",
+    "@types/react": "^17.0.2",
+    "@types/react-dom": "^17.0.2",
     "@types/styled-components": "^5.1.21",
     "@typescript-eslint/eslint-plugin": "^5.15.0",
     "@typescript-eslint/parser": "^5.15.0",
@@ -41,11 +37,15 @@
     "eslint-plugin-react": "^7.29.4",
     "eslint-plugin-react-hooks": "^4.3.0",
     "husky": ">=6",
+    "jest": "^27.5.1",
+    "jest-extended": "^2.0.0",
     "js-beautify": "^1.14.0",
     "lint-staged": ">=10",
     "prettier": "2.6.1",
     "tslib": "^2.3.1",
-    "typescript": "^4.5.5"
+    "typescript": "^4.5.5",
+    "vite": "^2.9.12",
+    "zx": "^7.0.0"
   },
   "scripts": {
     "build-storybook": "build-storybook",

packages/stitches/package.json

@@ -18,8 +18,7 @@
     "types/*.d.ts"
   ],
   "publishConfig": {
-    "access": "public",
-    "main": "dist/stitches.umd.js"
+    "access": "public"
   },
   "repository": {
     "type": "git",

packages/stitches/src/createStitches.js

@@ -9,5 +9,7 @@ export const createStitches = config => {
     config: Object.assign(instance.config, config),
     css: instance.css,
   });
+  window.stitch = instance;
+  window.config = config;
   return instance;
 };

packages/stitches/src/styled.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { internal, createMemo, isVairants as isVariants } from './utils';
 import { isEqual } from 'lodash-es';
-import { isUndefined } from '@c3/utils';
+import { isUndefined, __DEV__ } from '@c3/utils';
 
 const createCssFunctionMap = createMemo();
 
@@ -59,6 +59,7 @@ export const createStyledFunction = ({ config, css }) =>
       styledComponent.toString = toString;
       styledComponent[internal] = cssComponent[internal];
 
+
       return React.memo(styledComponent, (prev, next) => {
         const prevKeys = Object.keys(prev);
         const nextKeys = Object.keys(next);
@@ -81,7 +82,15 @@ export const createStyledFunction = ({ config, css }) =>
             }
           }
           if (key === 'css') {
-            if (isUndefined(next[key].isImmutable) || next[key].isImmutable) {
+            const isImmutable = next[key].isImmutable;
+            if (isUndefined(isImmutable) || !!isImmutable) {
+              if (__DEV__) {
+                if (!isEqual(prev[key], next[key])) {
+                  throw new Error(
+                    'error: "css" is considered as immutable,but its value changed. please set isImmutable to false'
+                  );
+                }
+              }
               continue;
             }
           }
@@ -92,6 +101,7 @@ export const createStyledFunction = ({ config, css }) =>
         }
         return eq;
       });
+
     };
 
     return styled;

packages/stitches/src/utils/bp2media.js

@@ -3,7 +3,7 @@ export const bp2media = bps => {
     return {};
   }
   const res = {
-    m1: ` (max-width: ${bps[0]}px)`,
+    m1: ` (max-width: ${bps[0]-1}px)`,
   };
   bps
     .map((bp, i) => ` (min-width: ${bp}px)`)

packages/stitches/src/utils/convert.js

@@ -6,7 +6,7 @@ import { origin, rvw } from '@c3/css';
 // }}>
 
 //[mobile,laptop,desktop]
-export const convertResponsiveArrayForVariant = (value) => {
+export const convertResponsiveArrayForVariant = value => {
   const values = toArray(value);
   switch (values.length) {
     case 1: {
@@ -29,6 +29,11 @@ export const convertResponsiveArrayForVariant = (value) => {
   }
 };
 
+const globalStyle = {
+  '@m1': {},
+  '@m2': {},
+  '@m3': {},
+};
 export const convertResponsiveArrayForStyle = (key, value) => {
   const values = toArray(value);
   switch (values.length) {

packages/utils/src/dbg.ts

@@ -8,9 +8,8 @@ const ls =
 
 export const __MOCK__ = !!ls.getItem('mock');
 
-//FIXME
-// export const __DEV__ = import.meta.env.DEV;
-export const __DEV__ = false;
+//TODO:
+export const __DEV__ = globalThis.location?.hostname === 'localhost';
 
 export const logtype = s(ls.getItem('dbg')).split(',');
 

packages/utils/vite.config.ts

@@ -5,7 +5,7 @@ import { defineConfig } from 'vite';
 // https://vitejs.dev/config/
 export default defineConfig({
   build: {
-    minify: false,
+    minify: true,
     lib: {
       entry: './src/index.ts',
       name: 'css',