feat: various refactoring & typing improvements

BREAKING CHANGE: Box has been removed, "cssProperty" has been renamed "css", "getBreakpoints" has been renamed "getScreens", "useBreakpoints" has been renamed "useScreens", "th.timingFunctions" has been renamed "th.timingFunction".

Author: gregberge

CONTRIBUTING.md

@@ -40,11 +40,11 @@ _Before_ submitting a pull request, please make sure the following is done…
     yarn --version
     ```
 
-4.  If you've added code that should be tested, add tests. You can use watch mode that continuously transforms changed files to make your life easier.
+4.  If you've added code that should be tested, add tests.
 
     ```sh
-    # build packages continuously
-    yarn run build:watch
+    # build packages
+    yarn run build
     # run docs
     yarn run dev
     ```

benchmarks/package.json

@@ -10,16 +10,16 @@
     "start": "webpack-dev-server"
   },
   "devDependencies": {
-    "@babel/core": "^7.13.10",
-    "@babel/preset-env": "^7.13.10",
-    "@babel/preset-react": "^7.12.13",
+    "@babel/core": "^7.13.14",
+    "@babel/preset-env": "^7.13.12",
+    "@babel/preset-react": "^7.13.13",
     "babel-loader": "^8.2.2",
     "benchmark": "^2.1.4",
     "html-webpack-plugin": "^5.3.1",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
-    "webpack": "^5.27.1",
-    "webpack-cli": "^4.5.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "webpack": "^5.30.0",
+    "webpack-cli": "^4.6.0",
     "webpack-dev-server": "^3.11.2"
   },
   "dependencies": {
@@ -29,7 +29,7 @@
     "@xstyled/emotion": "^2.5.0",
     "@xstyled/styled-components": "^2.5.0",
     "emotion-theming": "^11.0.0",
-    "styled-components": "^5.2.1",
+    "styled-components": "^5.2.3",
     "styled-system": "^5.1.5"
   }
 }

build/rollup.config.js

@@ -0,0 +1,40 @@
+import path from 'path'
+import dts from 'rollup-plugin-dts'
+import esbuild from 'rollup-plugin-esbuild'
+
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const name = require(path.resolve(
+  process.cwd(),
+  './package.json',
+)).main.replace(/\.js$/, '')
+
+const bundle = (config) => ({
+  ...config,
+  input: 'src/index.ts',
+  external: (id) => !/^[./]/.test(id),
+})
+
+export default [
+  bundle({
+    plugins: [esbuild()],
+    output: [
+      {
+        file: `${name}.js`,
+        format: 'cjs',
+        sourcemap: true,
+      },
+      {
+        file: `${name}.mjs`,
+        format: 'es',
+        sourcemap: true,
+      },
+    ],
+  }),
+  bundle({
+    plugins: [dts()],
+    output: {
+      file: `${name}.d.ts`,
+      format: 'es',
+    },
+  }),
+]

package.json

@@ -22,48 +22,50 @@
   "scripts": {
     "build": "lerna run build --ignore @xstyled/website --ignore @xstyled/benchmarks",
     "reset": "lerna run reset --ignore @xstyled/website --ignore @xstyled/benchmarks",
-    "watch": "lerna run watch --parallel",
     "format": "prettier --write \"**/*.{js,ts,tsx,json,md,mdx}\"",
     "lint": "eslint .",
     "release": "lerna publish --conventional-commits && conventional-github-releaser --preset angular",
     "test": "jest"
   },
   "devDependencies": {
-    "@babel/core": "^7.13.10",
-    "@babel/preset-env": "^7.13.10",
-    "@babel/preset-react": "^7.12.13",
+    "@babel/core": "^7.13.14",
+    "@babel/preset-env": "^7.13.12",
+    "@babel/preset-react": "^7.13.13",
     "@babel/preset-typescript": "^7.13.0",
     "@emotion/jest": "^11.2.1",
     "@emotion/react": "^11.1.5",
     "@emotion/serialize": "^1.0.1",
     "@emotion/styled": "^11.1.5",
-    "@testing-library/jest-dom": "^5.11.9",
-    "@testing-library/react": "^11.2.5",
+    "@testing-library/jest-dom": "^5.11.10",
+    "@testing-library/react": "^11.2.6",
     "@types/react": "^17.0.3",
     "@types/styled-components": "^5.1.9",
-    "@typescript-eslint/eslint-plugin": "^4.18.0",
-    "@typescript-eslint/parser": "^4.18.0",
+    "@typescript-eslint/eslint-plugin": "^4.20.0",
+    "@typescript-eslint/parser": "^4.20.0",
     "babel-jest": "^26.6.3",
     "browser-resolve": "^2.0.0",
     "bundlesize": "^0.18.1",
     "codecov": "^3.8.1",
     "conventional-github-releaser": "^3.1.5",
-    "eslint": "^7.22.0",
-    "eslint-plugin-react": "^7.22.0",
+    "esbuild": "^0.11.5",
+    "eslint": "^7.23.0",
+    "eslint-plugin-react": "^7.23.1",
     "eslint-plugin-react-hooks": "^4.2.0",
     "jest": "^26.6.3",
     "jest-styled-components": "^7.0.3",
     "lerna": "^4.0.0",
     "prettier": "^2.2.1",
     "prop-types": "^15.7.2",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
-    "shx": "^0.3.3",
-    "styled-components": "5.2.1",
-    "tsdx": "^0.14.1",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "rollup": "^2.44.0",
+    "rollup-plugin-dts": "^3.0.1",
+    "rollup-plugin-esbuild": "^3.0.2",
+    "styled-components": "5.2.3",
     "typescript": "^4.2.3"
   },
   "resolutions": {
-    "tsdx/typescript": "^4.1.3"
+    "tsdx/typescript": "^4.2.3",
+    "tsdx/tslib": "^2.0.0"
   }
 }

packages/babel-preset-emotion-css-prop/package.json

@@ -4,14 +4,13 @@
   "version": "2.3.0",
   "sideEffects": false,
   "main": "dist/index.js",
-  "module": "dist/babel-preset-emotion-css-prop.esm.js",
+  "module": "dist/index.mjs",
   "typings": "dist/index.d.js",
   "author": "Greg Bergé <berge.greg@gmail.com>",
   "license": "MIT",
   "scripts": {
-    "reset": "rm -rf dist && rm -rf node_modules/.cache",
-    "watch": "tsdx watch",
-    "build": "tsdx build",
+    "reset": "rm -rf dist",
+    "build": "../../node_modules/.bin/rollup -c ../../build/rollup.config.js",
     "prepublishOnly": "yarn reset && yarn build"
   },
   "homepage": "https://xstyled.dev",
@@ -24,7 +23,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@babel/plugin-transform-react-jsx": "^7.12.17",
+    "@babel/plugin-transform-react-jsx": "^7.13.12",
     "@emotion/babel-plugin": "^11.2.0",
     "@emotion/babel-plugin-jsx-pragmatic": "^0.1.5"
   },

packages/babel-preset-emotion-css-prop/tsconfig.json

@@ -7,7 +7,7 @@
     "noImplicitReturns": true,
     "noFallthroughCasesInSwitch": true,
     "module": "esnext",
-    "target": "ES5",
+    "target": "esnext",
     "esModuleInterop": true,
     "moduleResolution": "node",
     "jsx": "react",

packages/core/package.json

@@ -4,14 +4,13 @@
   "version": "2.5.0",
   "sideEffects": false,
   "main": "dist/index.js",
-  "module": "dist/core.esm.js",
+  "module": "dist/index.mjs",
   "typings": "dist/index.d.ts",
   "author": "Greg Bergé <berge.greg@gmail.com>",
   "license": "MIT",
   "scripts": {
-    "reset": "rm -rf dist && rm -rf node_modules/.cache",
-    "watch": "tsdx watch",
-    "build": "tsdx build",
+    "reset": "rm -rf dist",
+    "build": "../../node_modules/.bin/rollup -c ../../build/rollup.config.js",
     "prepublishOnly": "yarn reset && yarn build"
   },
   "homepage": "https://xstyled.dev",

packages/core/src/breakpoints.ts

@@ -1,18 +1,18 @@
 /* eslint-disable no-undef */
 import * as React from 'react'
-import { getBreakpoints, Theme } from '@xstyled/system'
+import { getScreens, ITheme, Screens } from '@xstyled/system'
 
-export function useThemeBreakpoints(theme: Theme) {
-  return getBreakpoints({ theme })
+export function useThemeScreens(theme: ITheme): Screens {
+  return getScreens({ theme })
 }
 
 /**
  * Minimum breakpoint width.
  * Null for the smallest breakpoint.
  */
-function useThemeMinValue(theme: Theme, key: string | number) {
-  const breakpoints = useThemeBreakpoints(theme)
-  const value = breakpoints[key]
+function useThemeMinValue(theme: ITheme, key: string | number): number | null {
+  const screens = useThemeScreens(theme)
+  const value = screens[key]
   return value === 0 ? null : value
 }
 
@@ -24,13 +24,13 @@ function useThemeMinValue(theme: Theme, key: string | number) {
  * Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.
  * See https://bugs.webkit.org/show_bug.cgi?id=178261
  */
-function useThemeMaxValue(theme: Theme, key: string | number) {
-  const breakpoints = useThemeBreakpoints(theme)
-  const breakPoint = breakpoints[key]
+function useThemeMaxValue(theme: ITheme, key: string | number): number | null {
+  const screens = useThemeScreens(theme)
+  const breakPoint = screens[key]
   return breakPoint === 0 ? null : breakPoint - 0.02
 }
 
-export function useViewportWidth() {
+export function useViewportWidth(): number | null {
   const [width, setWidth] = React.useState(
     typeof window === 'undefined' ? null : window.innerWidth,
   )
@@ -50,27 +50,25 @@ export function useViewportWidth() {
   return width
 }
 
-export function useThemeBreakpoint(theme: Theme) {
-  const breakpoints = useThemeBreakpoints(theme)
+export function useThemeBreakpoint(theme: ITheme): string | null {
+  const screns = useThemeScreens(theme)
   const width = useViewportWidth()
   return React.useMemo(() => {
     return (
-      Object.keys(breakpoints)
+      Object.keys(screns)
         .reverse()
-        .find(
-          (breakpoint) => width !== null && width > breakpoints[breakpoint],
-        ) || null
+        .find((screen) => width !== null && width > screns[screen]) || null
     )
-  }, [breakpoints, width])
+  }, [screns, width])
 }
 
-export function useThemeUp(theme: Theme, key: string | number) {
+export function useThemeUp(theme: ITheme, key: string | number): boolean {
   const value = useThemeMinValue(theme, key)
   const width = useViewportWidth()
   return width !== null && value !== null && width >= value
 }
 
-export function useThemeDown(theme: Theme, key: string | number) {
+export function useThemeDown(theme: ITheme, key: string | number): boolean {
   const value = useThemeMaxValue(theme, key)
   const width = useViewportWidth()
   return width !== null && value !== null && width < value

packages/core/src/colorModes.tsx

@@ -2,27 +2,30 @@
 /* eslint-disable react/no-danger */
 /* eslint-env browser */
 import * as React from 'react'
+import { Colors } from '@xstyled/system'
 import {
   toCustomPropertiesDeclarations,
   toCustomPropertiesReferences,
 } from './customProperties'
 
 type ColorModeState = [string | null, (mode: string | null) => void]
-type Color = string | ((props: Record<string, unknown>) => Color)
-type Colors = Record<string, Color>
+
+interface ColorModes {
+  [key: string]: Colors
+}
 
 interface ITheme {
   useCustomProperties?: boolean
   useColorSchemeMediaQuery?: boolean
   initialColorModeName?: string
   defaultColorModeName?: string
   colors?: Colors & {
-    modes?: Record<string, Colors>
+    modes?: ColorModes
   }
 }
 
 interface IColorModeTheme extends ITheme {
-  colors: Colors & { modes: Record<string, Colors> }
+  colors: Colors & { modes: ColorModes }
 }
 
 const STORAGE_KEY = 'xstyled-color-mode'
@@ -105,7 +108,7 @@ function getDefaultColorModeName(theme: ITheme): string {
   return theme.defaultColorModeName || getInitialColorModeName(theme)
 }
 
-function getUsedColorKeys(modes: Record<string, Record<string, Color>>) {
+function getUsedColorKeys(modes: ColorModes) {
   let keys: string[] = []
   for (const key in modes) {
     keys = [...keys, ...Object.keys(modes[key])]

packages/core/src/createBox.ts

@@ -1,6 +1,6 @@
 import { system } from '@xstyled/system'
 
-export function createBox() {
+export function createBox(): (string | typeof system)[] {
   return [`&&{`, system, `}`]
 }
 createBox.meta = system.meta