CSS GUIv0.0.247DocsPropertiesGitHubLog inSign up

Exporting CSS

Use built-in code generation to transform your style object to CSS.

CSS GUI exports a codegen module which can transform a styles object into CSS that can be embedded directly onto a page.

import { codegen } from '@compai/css-gui'

You can pass it your styles object, and pass a selector and/or theme as options.

codegen.css(
  {
    fontSize: [
      { value: 16, unit: 'px' },
      { value: 20, unit: 'px' },
      { value: 24, unit: 'px' },
    ],
  },
  {
    selector: '.my-custom-selector',
  }
)

Which will output:

.my-custom-selector {
  font-size: 16px;
}

@media screen (min-width: 52em) {
  .my-custom-selector {
    font-size: 20px;
  }
}

@media screen (min-width: 64em) {
  .my-custom-selector {
    font-size: 24px;
  }
}

All together

Below shows usage of React style state, the editor, and exporting the style object to CSS that's then displayed in a pre tag.

import { useState } from 'react'
import { Editor, styled, codegen } from '@compai/css-gui'

export const MyEditor = () => {
  const [styles, setStyles] = useState({
    fontSize: null,
  })

  return (
    <>
      <Editor styles={styles} onChange={setStyles} />
      <styled.p styles={styles}>Hello, world!</styled.p>
      <pre>{codegen.css(styles)}</pre>
    </>
  )
}