Show HN: A 1KB CSS-in-JS library with all the bells and whistles

scott31 5y ago ↗

> A tiny CSS in JS library that requires no tooling.

> Installation: npm install stylewars

so that was a lie?

sunesimonsen 5y ago ↗

You are actually right - I should update the readme with unpkg information:

import { css, classes } from "https://unpkg.com/stylewars@1.6.0/dist/bundle.esm.min.js";

sunesimonsen 5y ago ↗

Here we go https://github.com/sunesimonsen/stylewars#unpkgcom

quickthrower2 5y ago ↗

What’s the advantage of this over they style attribute given that you are already in JS land.

gustavnikolaj 5y ago ↗

When you say "style"-attribute, I assume that you mean JSX. If you use JSX, you already have at least a transpiler, and some framework.

This is not a competitor to inline-styling via style-attributes, but more of an alternative to styled-components [1] or css-modules [2].

The big benefit with a solution like this is that it will work in browsers with no tooling at all. No transpiling or other code needed.

[1]: https://styled-components.com/

[2]: https://github.com/css-modules/css-modules

quickthrower2 5y ago ↗

I didn't mean JSX. Here is an example:

  import {
    css,
    classes,
  } from "https://unpkg.com/stylewars@1.6.0/dist/bundle.esm.min.js";

  const buttonStyles = css`
    & {
      border-radius: 4px;
      background: #587894;
      color: white;
      border: none;
      padding: 0.5em 2em;
    }

    &:hover {
      background: #89a2b9;
    }
  `;

  document.getElementById('root').classList.add(buttonStyles);

VERSUS

  const buttonStyles = {
    borderRadius: '4px',
    background: '#587894',
    color: 'white',
    border: 'none',
    padding: '0.5em 2em'
  }

  Object.assign(document.getElementById('root').style,buttonStyles);

Admittedly I don't know how to cover hover but I'm sure it could be figured out, or just use JS events.

Show HN: A 1KB CSS-in-JS library with all the bells and whistles (github.com)

6 comments