Ideas for Static CSS Generation of JSX Style Props

ideas.md

// Button.js => Button.css
import { chakra } from "@chakra-ui/magic";
import "@chakra-ui/css/Button.css";

<chakra.button mb="2" mt="2" _hover={{ bg: "red.200", _focus: {} }} />;

<button css={{mb: "2", mt="2", _hover: { bg: "red.200", _focus: {} }} />

const result = interpret(
  `<chakra.button mb="2" mt="2" _hover={{bg: "red.200", _focus: {}}} />`
);

function Button({ className, style }) {
  return (
    <chakra.button mb="2" mt="2" className={className}>
      {children}
    </chakra.button>
  );
}

// <button className={cx("css-hash-12", className)}>

const dict ={
    ".css-hash-12": {
        mb: 2,
        mt: 2,
    },
    ".css-hash-Button": {
        mt: 5
    }
}

function Page() {
  return <Button mt="5">Hello</Button>;
}

// <Button className="css-hash-Button" />

// Store the styles as object

result.element; // button

result.styleProps - // ...
  result.static - // ...
  result.dynamic; // ...

result.attributes; // ...

const result = compile(
  `<chakra.button mb="2" mt="2" _hover={{bg: "red.200", _focus: {}}} />`
);

result; // => <button class="css-hash" />
result; // => <chakra.button class="css-hash" mb={Math.random() ? "3": "4"} />

<template>
  <chakra.button mb="2" mt="2" :hover="{bg: "red.200", _focus: {}}" />
</template>
<script lang="ts">
const variants = createVariants({
  true: {},
  false: {},
});
</script>

import { chakra, variants, cx } from "magic"
import { compile } from "magic/compiler"

module.export = esbuild({
    fileProcessor: (file, content)=>{
      compile(file, {output: ".chakra"})
    }
})

import "button-fileHash.css"

const sizeVariants = variants({
    "sm": {},
    "md": {}
})

<chakra.div mt="3" bg={Math.random() ? "red" : "green"} _hover={isDragging: styles.dragging: styles.default} />

const style = getStyle(isDragging)

<div
  className={`static-css ${style}`}
  style={{"--bg-hash": Math.random() ? "red" : "green" }}
>

.css-hash{
    margin-top: 3px
    bg: var(--bg-hash)
}

style-jsx.md

Process

• If an opening element is chakra element
• Take all the static attributes and add them to a __style attribute
• Take all the attributes with expressions (primitive), write to __style and add css variable to style atribute
• For object styles defined in _hover, _active, etc. write static parts to __style and css variable to style attribute
• For any component definition, take all the __style attributes and convert them to css strings
• For every __style css string, render them to a single <style jsx>

Plugin Helpers

• getJSXStyleProps
• mergeClassName
• isJSXElement
• addInlineStyle
• writeCSSVariable
• mergeObjects
• removeJSXAttribute
• removeStyleProps

Inspiration

• https://sourcegraph.com/github.com/blocks/blocks/-/blob/packages/blocks-ui/src/transforms.js
• https://sourcegraph.com/github.com/blocks/blocks/-/tree/packages/blocks-ui/src/babel-plugins
• https://sourcegraph.com/github.com/jsxstyle/jsxstyle/-/tree/packages/jsxstyle-webpack-plugin/src/utils/ast
• https://github.com/twstyled/twstyled

Tools

• https://babel.dev/docs/en/babel-helper-builder-react-jsx
• https://www.npmjs.com/package/babel-plugin-layout-props
• https://www.npmjs.com/package/babel-plugin-remove-attribute
• https://github.com/yungo1846/babel-plugin-remove-react-jsx-attribute#readme
• https://sourcegraph.com/github.com/NervJS/taro/-/blob/packages/taroize/src/template.ts?L33:38
• https://astexplorer.net/#/gist/60272b29c158fbea9fa974bc21fdd462/0fb505cc1056a9ab0d37868745b5c955d3b93e95

Example

const input = <chakra.div mt="2" mb="4" _hover={{ mt: "2" }} />;

const output = (
  <>
    <div className="__hash" />
    <style jsx>
      {`
          .hash {
              margin-top: 8px
              margin-bottom: 8px
          }

          .hash:hover{
              margin-top: 8px
          }
        `}
    </style>
  </>
);

Babel Plugin Setup

// babel plugin options
{
  "plugins": ["chakra-jsx", "styled-jsx"]
}