Package Exports

aesthetic
aesthetic/lib/testing

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (aesthetic) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Aesthetic

Aesthetic is a powerful type-safe, framework agnostic, CSS-in-JS library for styling components, whether it be with plain objects, importing style sheets, or simply referencing external class names. Simply put, Aesthetic is an abstraction layer for the compilation of styles via third-party libraries, all the while providing customizability, theming, additional features, and a unified syntax.

import aesthetic from 'aesthetic';
import AphroditeAdapter from 'aesthetic-adapter-aphrodite';
import { Theme } from './types';

aesthetic.configure({
  adapter: new AphroditeAdapter(),
  theme: 'light',
});

// Register a theme
aesthetic.registerTheme<Theme>('light', {
  unit: 8,
});

// Register a style sheet definition for a component
aesthetic.registerStyleSheet<Theme>('button', ({ unit }) => ({
  button: {
    textAlign: 'center',
    display: 'inline-block',
    padding: unit,
  },
}));

// Parse the styles and generate CSS class names
const styles = aesthetic.createStyleSheet('button');
const className = aesthetic.transformStyles(styles.button);

React

Supports both an HOC and hook styled React API!

import React from 'react';
import { useStyles } from 'aesthetic-react';

export type Props = {
  children: React.ReactNode;
};

export default function Button({ children }: Props) {
  const [styles, cx] = useStyles(({ unit }) => ({
    button: {
      textAlign: 'center',
      display: 'inline-block',
      padding: unit,
    },
  }));

  return (
    <button type="button" className={cx(styles.button)}>
      {children}
    </button>
  );
}

Requirements

IE 11+

Installation

yarn add aesthetic
// Or
npm install aesthetic

Documentation

https://milesj.gitbook.io/aesthetic