Smallest styled components

styled.js

function useStyles(styles) {
  const [, forceUpdate] = useState();
  const [width, height] = useDimensions();

  useEffect(() => {
    // TODO: debounce it
    forceUpdate((v) => v + 1);
  }, [width, height]);

  return Object.entires(styles).reduce((acc, [key, value]) => {
    if (typeof value === 'string' && value.includes('vh')) {
      acc[key] = +value.split('vh')[0] * height;
    } else if (typeof value === 'string' && value.includes('vw')) {
      acc[key] = +value.split('vw')[0] * width;
    } else {
      acc[key] = value;
    }

    return acc;
  }, {});
}

function createStyled(Kind)  {
  return (styles) => {
    return ({ style, ...props }) => {
      const parsedStyles = useStyles(styles);

      return <Kind style={[parsedStyles, style]} {...props} />;
    };
  }
}

const styled = {
  Text: createStyled(Text),
};

// example
const Container = styled.Text({
  fontSize: '12vh',
});

looks awesome!