diff --git a/package.json b/package.json index 8c3575e..12126c5 100644 --- a/package.json +++ b/package.json @@ -15,15 +15,9 @@ "@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", @@ -31,6 +25,8 @@ "@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", diff --git a/packages/stitches/package.json b/packages/stitches/package.json index 961c627..91b65e7 100644 --- a/packages/stitches/package.json +++ b/packages/stitches/package.json @@ -18,8 +18,7 @@ "types/*.d.ts" ], "publishConfig": { - "access": "public", - "main": "dist/stitches.umd.js" + "access": "public" }, "repository": { "type": "git", diff --git a/packages/stitches/src/createStitches.js b/packages/stitches/src/createStitches.js index c832a47..1da7ecf 100644 --- a/packages/stitches/src/createStitches.js +++ b/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; }; diff --git a/packages/stitches/src/styled.js b/packages/stitches/src/styled.js index 0260fe7..b87a28c 100644 --- a/packages/stitches/src/styled.js +++ b/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; diff --git a/packages/stitches/src/utils/bp2media.js b/packages/stitches/src/utils/bp2media.js index ff1e4b6..d8dec14 100644 --- a/packages/stitches/src/utils/bp2media.js +++ b/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)`) diff --git a/packages/stitches/src/utils/convert.js b/packages/stitches/src/utils/convert.js index 357d212..14d2e35 100644 --- a/packages/stitches/src/utils/convert.js +++ b/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) { diff --git a/packages/utils/src/dbg.ts b/packages/utils/src/dbg.ts index 343e89a..d02003d 100644 --- a/packages/utils/src/dbg.ts +++ b/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(','); diff --git a/packages/utils/vite.config.ts b/packages/utils/vite.config.ts index 911c467..e142753 100644 --- a/packages/utils/vite.config.ts +++ b/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', diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 3fa9c7c..19f78a3 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -10,7 +10,7 @@ importers: specifiers: '@babel/core': ^7.17.2 '@babel/plugin-transform-modules-commonjs': ^7.17.7 - '@c3/cli': ^1.0.100 + '@c3/cli': workspace:^1.0.107 '@changesets/cli': ^2.22.0 '@jest/types': ^28.1.1 '@rollup/plugin-commonjs': ^21.0.1