createCss and CSS function (#22)

* Working on CSS type shape * got it working! * omg fixed the keyof issue * maybe broke things, but got the csstype suggestion working... may need to revert * fix some things * fix some bugs, things seem to work * clean up types and demos * clean up examples * some more clean-up * v0.19.0-0 * fix type issue with array token scales * v0.19.0-1 * switch and to or * v0.19.0-2 * fix css function types * v0.19.0-3 * fix system return types incompatible with styled-components * v0.19.0-4 * save work * save work * clean up types * Revert "clean up types" This reverts commit 50c4b89. * remove commented code * fix more type issues * v0.19.0-5 * small cleanup * clean up
system-props · May 26, 2021 · 24588be · 24588be
1 parent 2244920
commit 24588be
Show file tree

Hide file tree

Showing 28 changed files with 2,435 additions and 4,653 deletions.
diff --git a/examples/emotion/Box.tsx b/examples/emotion/Box.tsx
@@ -1,3 +1,4 @@
+import React, { PropsWithChildren } from 'react';
 import {
   createSystem,
   color,
@@ -14,6 +15,7 @@ import {
   grid,
   typography,
   shouldForwardProp,
+  CSSObject,
 } from 'system-props';
 import styled from '@emotion/styled';
 import isPropValid from '@emotion/is-prop-valid';
@@ -32,27 +34,40 @@ type BaseProps = AllSystemProps<'all'> &
     [k in keyof typeof extraProps]?: SystemProp<CSS.Properties[k]>;
   };
 
-interface BoxProps extends BaseProps, PseudoProps<BaseProps> {}
+interface BoxProps extends BaseProps, PseudoProps<BaseProps> {
+  cx?: CSSObject;
+}
 
-export const Box = styled('div', {
+const styles = system({
+  ...color,
+  ...border,
+  ...background,
+  ...flexbox,
+  ...grid,
+  ...shadow,
+  ...position,
+  ...layout,
+  ...space,
+  ...typography,
+  ...extraProps,
+});
+
+const BaseElement = ({
+  is: Component = 'div',
+  ...props
+}: {
+  is?: React.ElementType;
+  children?: React.ReactNode;
+}) => <Component {...props} />;
+
+export const BaseBox = styled(BaseElement, {
   shouldForwardProp: (prop) =>
     typeof prop === 'string' &&
     shouldForwardProp(prop) &&
     isPropValid(prop) &&
     !Object.keys(extraProps).includes(prop),
-})<BoxProps>(
-  { boxSizing: 'border-box' },
-  system({
-    ...color,
-    ...border,
-    ...background,
-    ...flexbox,
-    ...grid,
-    ...shadow,
-    ...position,
-    ...layout,
-    ...space,
-    ...typography,
-    ...extraProps,
-  })
+})<BoxProps>({ boxSizing: 'border-box' }, styles);
+
+export const Box = ({ cx, ...props }: BoxProps) => (
+  <BaseBox css={styles.css(cx)} {...props} />
 );
diff --git a/examples/emotion/tsconfig.json b/examples/emotion/tsconfig.json
@@ -4,6 +4,7 @@
     "target": "es5",
     "module": "commonjs",
     "jsx": "react",
+    "jsxImportSource": "@emotion/react",
     "moduleResolution": "node",
     "noImplicitAny": false,
     "noUnusedLocals": false,

diff --git a/examples/styled-components/.babelrc b/examples/styled-components/.babelrc
@@ -0,0 +1,3 @@
+{
+  "plugins": ['babel-plugin-styled-components'],
+}
diff --git a/examples/styled-components/.gitignore b/examples/styled-components/.gitignore
@@ -1,3 +1,5 @@
 node_modules
-.cache
+.DS_Store
 dist
+dist-ssr
+*.local
diff --git a/examples/styled-components/Box.tsx b/examples/styled-components/Box.tsx
diff --git a/examples/styled-components/index.html b/examples/styled-components/index.html
@@ -2,13 +2,12 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="src/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
-    <title>Playground</title>
+    <title>Vite App</title>
   </head>
-
   <body>
     <div id="root"></div>
-    <script src="./index.tsx"></script>
+    <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>
diff --git a/examples/styled-components/package.json b/examples/styled-components/package.json
@@ -1,26 +1,25 @@
 {
-  "name": "example",
-  "version": "1.0.0",
-  "main": "index.js",
-  "license": "MIT",
+  "name": "styled-components-vite",
+  "version": "0.0.0",
   "scripts": {
-    "start": "parcel index.html",
-    "build": "parcel build index.html",
-    "lint": "tsc"
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "serve": "vite preview"
   },
   "dependencies": {
-    "react": "^16",
-    "react-dom": "^16",
-    "react-is": "^16",
-    "styled-components": "^5",
-    "system-props": "latest"
+    "react": "^17.0.0",
+    "react-dom": "^17.0.0",
+    "styled-components": "^5.2.1",
+    "system-props": "^0.18.0"
   },
   "devDependencies": {
-    "@types/react": "^16",
-    "@types/react-dom": "^16",
-    "@types/styled-components": "^5.1.4",
-    "csstype": "^3.0.5",
-    "parcel": "^1.12.3",
-    "typescript": "^4.1.0"
+    "@types/react": "^17.0.0",
+    "@types/react-dom": "^17.0.0",
+    "@types/styled-components": "^5.1.9",
+    "@vitejs/plugin-react-refresh": "^1.3.1",
+    "csstype": "^3.0.7",
+    "typescript": "^4.1.2",
+    "vite": "^2.1.0",
+    "vite-babel-plugin": "^0.0.2"
   }
 }
diff --git a/examples/styled-components/index.tsx → examples/styled-components/src/App.tsx b/examples/styled-components/index.tsx → examples/styled-components/src/App.tsx
@@ -1,17 +1,17 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
 import { ThemeProvider } from 'styled-components';
 import { theme } from './theme';
-import { Box } from './Box';
+import { Box, css } from './Box';
 
 const Button = (props) => {
   return (
     <Box
+      css={css({ color: '$red400', bg: 'red400', padding: 10, fontSize: 3 })}
+      color="white"
       as="a"
       fontFamily="$base"
       backgroundColor="$blue400"
       borderRadius="$pill"
-      color="white"
       fontSize="$body"
       fontWeight="600"
       p="$2 $3"
@@ -48,4 +48,4 @@ const App = () => {
   );
 };
 
-ReactDOM.render(<App />, document.getElementById('root'));
+export default App;
diff --git a/examples/styled-components/src/Box.tsx b/examples/styled-components/src/Box.tsx
@@ -0,0 +1,65 @@
+import { ReactNode } from 'react';
+import {
+  createSystem,
+  color,
+  border,
+  space,
+  layout,
+  position,
+  shadow,
+  background,
+  flexbox,
+  grid,
+  typography,
+  shouldForwardProp,
+  createCss,
+  PseudoProps,
+  AllSystemProps,
+  SystemProp,
+  Theme,
+  CSSObject,
+} from 'system-props';
+import styled, { CSSProp } from 'styled-components';
+import * as CSS from 'csstype';
+
+const system = createSystem();
+
+const extraProps = {
+  transform: true,
+  textDecoration: true,
+  transition: true,
+} as const;
+
+type BaseProps = AllSystemProps<'all'> &
+  {
+    [k in keyof typeof extraProps]?: SystemProp<CSS.Properties[k]>;
+  };
+
+interface BoxProps extends BaseProps, PseudoProps<BaseProps> {
+  cx?: CSSObject<'all'> | ((theme: Theme) => CSSObject<'all'>);
+  children?: ReactNode;
+  css?: CSSProp;
+}
+
+const config = {
+  ...color,
+  ...border,
+  ...background,
+  ...flexbox,
+  ...grid,
+  ...shadow,
+  ...position,
+  ...layout,
+  ...space,
+  ...typography,
+  ...extraProps,
+};
+
+export const css = createCss(config, { tokenPrefix: 'all' });
+
+export const Box = styled('div').withConfig({
+  shouldForwardProp: (prop, defaultValidtorFn) =>
+    shouldForwardProp(prop) &&
+    defaultValidtorFn(prop) &&
+    !Object.keys(extraProps).includes(prop),
+})<BoxProps>({ boxSizing: 'border-box' }, system(config));
diff --git a/examples/styled-components/src/favicon.svg b/examples/styled-components/src/favicon.svg
diff --git a/examples/styled-components/src/main.tsx b/examples/styled-components/src/main.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+
+ReactDOM.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+  document.getElementById('root')
+);
diff --git a/examples/styled-components/styled.d.ts → examples/styled-components/src/styled.d.ts b/examples/styled-components/styled.d.ts → examples/styled-components/src/styled.d.ts
@@ -1,4 +1,5 @@
 import { AppTheme } from './theme';
+import type {} from 'styled-components/cssprop';
 
 declare module 'styled-components' {
   export interface DefaultTheme extends AppTheme {}