phy-vanilla

All-in-JS template engine for you to write everything in JavaScript. No more HTML. No more CSS. Only JavaScript!

phy-vanilla is a fork of phy with Vanilla Extract embeded to allow you to use minimalist h helper function to create React/Preact elements. With phy-vanilla, the css prop gets parsed by Vanilla Extract, so you can write everything in JS!

Examples

To style an element, simply pass css prop:

const h = require('phy-vanilla');

module.exports = function SomeComponent() {
  return h('#foo', h('span.bar', { css: { color: 'red' } }, 'whee!'));
};

You can create an entire styled, dark-mode aware component with merely JavaScript:

// button.js

import { h } from 'phy-vanilla';

export const Button = ({
  variant = 'primary',
  size = 'normal',
  height = size === 'small' ? 24 : 32,
  css,
  ...props
}) =>
  h('button', {
    ...props,
    css: {
      all: 'unset',
      fontFamily: 'inherit',
      fontSize: 16,
      height,
      fontWeight: 'bold',
      borderRadius: 4,
      display: 'inline-flex',
      alignItems: 'center',
      justifyContent: 'center',
      cursor: 'default', // Or 'pointer'
      userSelect: 'none',
      ...{
        wide: { padding: '0 48px' },
        normal: { padding: '0 32px' },
        narrow: { padding: '0 16px' },
        small: {
          padding: '0 16px',
          fontSize: 14,
        },
      }[size],
      ...{
        primary: {
          color: 'white',
          backgroundColor: 'hsl(212, 100%, 47.6%)',
          border: '1px solid rgb(174, 174, 178)',
          '&:hover': { backgroundColor: 'hsl(212, 100%, 60%)' },
          '&:focus': {
            boxShadow: '0 0 0 2px hsla(212, 100%, 60%, 0.5)',
          },
          '@media (prefers-color-scheme: dark)': {
            color: 'white',
            backgroundColor: 'hsl(212, 100%, 36%)',
            border: '1px solid rgb(99, 99, 102)',
            '&:hover': { backgroundColor: 'hsl(212, 100%, 36%)' },
            '&:focus': {
              boxShadow: '0 0 0 2px hsla(212, 100%, 64%, 0.8)',
            },
          },
        },
        green: {
          color: 'hsl(129, 67.3%, 20.0%)',
          backgroundColor: 'hsl(129, 67.3%, 72.0%)',
          border: '1px solid rgb(174, 174, 178)',
          '&:hover': { backgroundColor: 'hsl(129, 67.3%, 64.0%)' },
          '&:focus': {
            boxShadow: '0 0 0 2px rgb(174, 174, 178)',
          },
          '@media (prefers-color-scheme: dark)': {
            color: 'hsl(129, 67.3%, 88.0%)',
            backgroundColor: 'hsl(129, 67.3%, 28.0%)',
            border: '1px solid rgb(99, 99, 102)',
            '&:hover': { backgroundColor: 'hsl(129, 67.3%, 36.0%)' },
            '&:focus': {
              boxShadow: '0 0 0 2px hsl(129, 67.3%, 28.0%)',
            },
          },
        },
      }[variant],
      ...css,
    },
  });

import { h } from 'phy-vanilla';
import Button from './button';

export default function App() {
  return [
    h(Button, 'Primary'),
    h('br'),
    h(Button, { variant: 'green', size: 'wide' }, 'Green'),
    h('br'),
    h(Button, { size: 'small' }, 'Small'),
  ];
}

See CodeSandbox button example: https://codesandbox.io/s/cocky-waterfall-vy8d6q?file=/src/App.js

Starters

To quickly get started with phy-vanilla, feel free to clone the starters:

• phy-vanilla-next-starter: Starter for Next.js
• phy-vanilla-gatsby-starter: Starter for Gatsby

License

phy-vanilla is a fork of phy which is under BSD-3-Clause license.