style: migrate to inline

nonzzz · May 8, 2024 · dd4ae58 · dd4ae58
1 parent c91ed04
commit dd4ae58
Show file tree

Hide file tree

Showing 11 changed files with 271 additions and 292 deletions.
diff --git a/package.json b/package.json
@@ -30,8 +30,8 @@
     "@iconify-json/ph": "^1.1.12",
     "@rollup/plugin-esm-shim": "^0.1.6",
     "@rollup/plugin-json": "^6.1.0",
-    "@stylex-extend/core": "^0.2.2",
-    "@stylex-extend/react": "^0.2.1",
+    "@stylex-extend/core": "^0.3.1",
+    "@stylex-extend/react": "^0.3.1",
     "@stylexjs/stylex": "^0.5.1",
     "@svgr/core": "^8.1.0",
     "@svgr/plugin-jsx": "^8.1.0",
@@ -55,7 +55,7 @@
     "typescript": "^5.2.2",
     "unplugin-icons": "^0.18.5",
     "vite": "^5.2.8",
-    "vite-plugin-stylex-dev": "^0.7.0"
+    "vite-plugin-stylex-dev": "0.7.0"
   },
   "license": "MIT",
   "author": "kanno",
@@ -114,7 +114,8 @@
     "unbox-primitive": "npm:@nolyfill/unbox-primitive@latest",
     "which-boxed-primitive": "npm:@nolyfill/which-boxed-primitive@latest",
     "which-typed-array": "npm:@nolyfill/which-typed-array@latest",
-    "@types/react": "^18.2.31"
+    "@types/react": "^18.2.31",
+    "@stylex-extend/babel-plugin": "^0.3.1"
   },
   "dependencies": {
     "picocolors": "^1.0.0",

diff --git a/src/client/components/button/button-drip.tsx b/src/client/components/button/button-drip.tsx
@@ -32,25 +32,6 @@ const expand = stylex.keyframes({
   }
 })
 
-const styles = stylex.create({
-  drip: {
-    position: 'absolute',
-    left: 0,
-    right: 0,
-    top: 0,
-    bottom: 0
-  },
-  svg: {
-    position: 'absolute',
-    animationName: expand,
-    animationDuration: '350ms',
-    animationTimingFunction: 'ease-in',
-    animationFillMode: 'forwards',
-    width: '1rem',
-    height: '1rem'
-  }
-})
-
 const ButtonDrip: React.FC<ButtonDrip> = ({
   x,
   y,
@@ -71,8 +52,32 @@ const ButtonDrip: React.FC<ButtonDrip> = ({
   })
 
   return (
-    <div ref={dripRef} {...stylex.props(styles.drip)}>
-      <svg width="20" height="20" viewBox="0 0 20 20" {...stylex.props(styles.svg)} style={{ top, left }}>
+    <div
+      ref={dripRef}
+      stylex={{
+        position: 'absolute',
+        left: 0,
+        right: 0,
+        top: 0,
+        bottom: 0
+      }}
+    >
+      <svg
+        width="20"
+        height="20"
+        viewBox="0 0 20 20"
+        stylex={{
+          position: 'absolute',
+          top,
+          left,
+          animationName: expand,
+          animationDuration: '350ms',
+          animationTimingFunction: 'ease-in',
+          animationFillMode: 'forwards',
+          width: '1rem',
+          height: '1rem'
+        }}
+      >
         <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
           <g fill={color}>
             <rect width="100%" height="100%" rx="10" />

diff --git a/src/client/components/button/button.tsx b/src/client/components/button/button.tsx
@@ -1,61 +1,23 @@
 import React from 'react'
 import * as stylex from '@stylexjs/stylex'
+import { inline } from '@stylex-extend/core'
 import { useClasses, useScale, withScale } from '../../composables'
-import type { SCALES } from '../../composables'
 
 interface Props {
-  icon?: React.ReactNode
-  auto?: boolean
-  type?: 'default' | 'secondary'
+  icon?: React.ReactNode;
+  auto?: boolean;
+  type?: 'default' | 'secondary';
 }
 
-type ButtonProps = Props & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, keyof Props>
+type ButtonProps = Props &
+Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, keyof Props>
 
 const defaultProps: Props = {
   auto: false,
   type: 'default'
-} 
+}
 
 const styles = stylex.create({
-  button: {
-    boxSizing: 'border-box',
-    display: 'inline-block',
-    borderRadius: '6px',
-    fontWeight: 400,
-    userSelect: 'none',
-    outline: 'none',
-    textTransform: 'capitalize',
-    justifyContent: 'center',
-    textAlign: 'center',
-    whiteSpace: 'nowrap',
-    transition: 'background-color 200ms ease 0s, box-shadow 200ms ease 0ms, border 200ms ease 0ms, color 200ms ease 0ms',
-    position: 'relative',
-    overflow: 'hidden',
-    color: {
-      default: '#666',
-      ':hover': '#000'
-    },
-    backgroundColor: '#fff',
-    border: '1px solid #eaeaea',
-    cursor: 'pointer',
-    width: 'initial',
-    ':hover': {
-      borderColor: '#000'
-    }
-  },
-  auto: {
-    width: 'auto'
-  },
-  layout: (scale: SCALES, auto: boolean) => ({
-    minWidth: auto ? 'min-content' : scale.width(10.5),
-    lineHeight: scale.height(2.5),
-    fontSize: scale.font(0.875),
-    height: scale.height(2.5),
-    padding: `${scale.pt(0)} ${auto ? scale.pr(1.15) : scale.pr(1.375)} ${scale.pt(0)} ${auto ? scale.pl(1.15) : scale.pl(1.375)}`,
-    margin: `${scale.mt(0)} ${scale.mr(0)} ${scale.mb(0)} ${scale.ml(0)}`,
-    '--button-height': scale.height(2.5),
-    '--button-icon-padding': scale.pl(0.727)
-  }),
   text: {
     position: 'relative',
     zIndex: 1,
@@ -80,27 +42,27 @@ const styles = stylex.create({
       height: 'calc(var(--button-height) / 2.35)',
       width: 'calc(var(--button-height) / 2.35)'
     }
-  },
-  single: {
-    position: 'static',
-    transform: 'none'
-  },
-  autoPaddingLeft: {
-    paddingLeft: 'calc(var(--button-height) / 2 + var(--button-icon-padding) * .5)'
-  },
-  autoPaddingRight: {
-    paddingRight: 'calc(var(--button-height) / 2 + var(--button-icon-padding) * .5)'
-  },
-  secondary: {
-    backgroundColor: '#000',
-    borderColor: '#000',
-    color: '#fff'
   }
 })
 
-function getButtonChildrenWithIcon(auto: boolean, icon: React.ReactNode, children: React.ReactNode) {
+function getButtonChildrenWithIcon(
+  auto: boolean,
+  icon: React.ReactNode,
+  children: React.ReactNode
+) {
   if (!icon) return <div {...stylex.props(styles.text)}>{children}</div>
-  if (icon && !children) return <span {...stylex.props(styles.icon, styles.single)}>{icon}</span>
+  if (icon && !children) {
+    return (
+      <span
+        {...stylex.props(
+          styles.icon,
+          inline({ position: 'static', transform: 'none' })
+        )}
+      >
+        {icon}
+      </span>
+    ) 
+  }
   return (
     <>
       <span {...stylex.props(styles.icon)}>{icon}</span>
@@ -109,32 +71,81 @@ function getButtonChildrenWithIcon(auto: boolean, icon: React.ReactNode, childre
   )
 }
 
-const ButtonComponent = React.forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
-  const { 
-    type = 'default',
-    className: userClassName, style: userStyle, auto = false, 
-    icon, children, ...rest
-  } = props
-  const { SCALES } = useScale()
+const ButtonComponent = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  (props, ref) => {
+    const {
+      type = 'default',
+      className: userClassName,
+      style: userStyle,
+      auto = false,
+      icon,
+      children,
+      ...rest
+    } = props
+    const { SCALES } = useScale()
 
-  const { className, style } = stylex.props(styles.button,
-    styles.layout(SCALES, auto), auto && styles.auto, type === 'secondary' && 
-    styles.secondary)
+    const { className, style } = stylex.props(
+      inline({
+        boxSizing: 'border-box',
+        borderRadius: '6px',
+        fontWeight: 400,
+        userSelect: 'none',
+        outline: 'none',
+        textTransform: 'capitalize',
+        justifyContent: 'center',
+        textAlign: 'center',
+        whiteSpace: 'nowrap',
+        transition:
+          'background-color 200ms ease 0s, box-shadow 200ms ease 0ms, border 200ms ease 0ms, color 200ms ease 0ms',
+        position: 'relative',
+        overflow: 'hidden',
+        color: {
+          default: '#666',
+          ':hover': '#000'
+        },
+        backgroundColor: '#fff',
+        border: '1px solid #eaeaea',
+        cursor: 'pointer',
+        width: 'initial',
+        ':hover': {
+          borderColor: '#000'
+        },
+        minWidth: auto ? 'min-content' : SCALES.width(10.5),
+        lineHeight: SCALES.height(2.5),
+        fontSize: SCALES.font(0.875),
+        height: SCALES.height(2.5),
+        padding: `${SCALES.pt(0)} ${
+          auto ? SCALES.pr(1.15) : SCALES.pr(1.375)
+        } ${SCALES.pt(0)} ${auto ? SCALES.pl(1.15) : SCALES.pl(1.375)}`,
+        margin: `${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(
+          0
+        )}`,
+        '--button-height': SCALES.height(2.5),
+        '--button-icon-padding': SCALES.pl(0.727),
+        ...(auto && { width: 'auto' }),
+        ...(type === 'secondary' && {
+          backgroundColor: '#000',
+          borderColor: '#000',
+          color: '#fff'
+        })
+      })
+    )
 
-  const classes = useClasses('button', className, userClassName)
+    const classes = useClasses('button', className, userClassName)
 
-  return (
-    <button
-      ref={ref}
-      className={classes}
-      style={{ ...style, ...userStyle }}
-      {...rest}
-      type="button"
-    >
-      {getButtonChildrenWithIcon(auto, icon, children)}
-    </button>
-  )
-})
+    return (
+      <button
+        ref={ref}
+        className={classes}
+        style={{ ...style, ...userStyle }}
+        {...rest}
+        type="button"
+      >
+        {getButtonChildrenWithIcon(auto, icon, children)}
+      </button>
+    )
+  }
+)
 
 ButtonComponent.displayName = 'Button'
 ButtonComponent.defaultProps = defaultProps

diff --git a/src/client/components/checkbox/checkbox.tsx b/src/client/components/checkbox/checkbox.tsx
@@ -1,5 +1,6 @@
 import React, { useCallback, useEffect, useState } from 'react'
 import * as stylex from '@stylexjs/stylex'
+import { inline } from '@stylex-extend/core'
 import { useClasses, useScale, withScale } from '../../composables'
 import { useCheckbox } from './context'
 
@@ -33,32 +34,17 @@ const defaultProps: Props = {
   value: ''
 }
 
-const styles = stylex.create({
-  input: {
-    opacity: 0,
-    outline: 'none',
-    position: 'absolute',
-    width: 0,
-    height: 0,
-    margin: 0,
-    padding: 0,
-    zIndex: -1,
-    fontSize: 0,
-    backgroundColor: 'transparent'
-  },
-  svg: (disabled) => ({
+function CheckboxIcon(props: CheckboxIconProps) {
+  const { checked, disabled } = props
+  const c = stylex.props(inline({
     display: 'inline-flex',
     width: 'calc(var(--checkbox-size) * 0.86)',
     height: 'calc(var(--checkbox-size) * 0.86)',
     userSelect: 'none',
-    opacity: disabled ? 0.4 : 1,
-    cursor: disabled ? 'not-allowed' : 'pointer'
-  })
-})
-
-function CheckboxIcon(props: CheckboxIconProps) {
-  const { checked, disabled } = props
-  const c = stylex.props(styles.svg(disabled))
+    opacity: 1,
+    cursor: 'pointer',
+    ...(disabled && { opacity: 0.4, cursor: 'not-allowed' })
+  }))
 
   if (checked) {
     return (
@@ -89,7 +75,18 @@ function CheckboxComponent(props: CheckboxProps) {
      props
   const { disabledAll, inGroup, values, updateState } = useCheckbox()
   const { SCALES } = useScale()
-  const { className, style } = stylex.props(styles.input)
+  const { className, style } = stylex.props(inline({
+    opacity: 0,
+    outline: 'none',
+    position: 'absolute',
+    width: 0,
+    height: 0,
+    margin: 0,
+    padding: 0,
+    zIndex: -1,
+    fontSize: 0,
+    backgroundColor: 'transparent'
+  }))
   const classes = useClasses(className, userClassName)
   const [selfChecked, setSelfChecked] = useState<boolean>(false)
   const isDisabled = inGroup ? disabledAll || disabled : disabled