❤
npm
Sign UpSign In

aesthetic
TypeScript icon, indicating that this package has built-in type declarations

5.2.0 • Public • Published

Aesthetic

Build Status npm version npm deps

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

/aesthetic/

    Package Sidebar

    Install

    npm i aesthetic

    Repository

    github.com/milesj/aesthetic/tree/master/packages/core-legacy

    Fund this package

    Weekly Downloads

    63

    Version

    5.2.0

    License

    MIT

    Unpacked Size

    159 kB

    Total Files

    39

    Last publish

    Collaborators

    • milesj
    Try on RunKit
    Report malware