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

0.1.6 • Public • Published

HStyle

A component styling lib.

Features

  • Support all CSS features
  • Readable class names
  • Collision-free
  • Easy to learn
  • Lightweight

Usage

import { style, styleObj } from "hstyle";
// Use string template form:
const className = style`
    /* & will be replaced with the real class name: */
    & {
        color: blue;
    }
    /* Write anything as if you are writing CSS: */
    @media all and (max-width: 600px) {
        ul&>li::before {
            /* && will be converted to & */
            content: "&&";
        }
    }
    /* The real class name will be returned. */
`;
// Use the returned class name later:
function MyList(props) {
    return (
        <ul className={className}>
            {props.children}
        </ul>
    );
}
// Use object form:
const anotherClassName = styleObj({
    '&': {
        color: 'blue'
    },
    '@media all and (max-width: 600px)': {
        'ul&>li::before': {
            content: '"&&"'
        }
    }
});

Changelog

See CHANGELOG.md.

Package Sidebar

Install

npm i hstyle

Weekly Downloads

9

Version

0.1.6

License

MIT

Unpacked Size

12.6 kB

Total Files

13

Last publish

Collaborators

  • 3h