Hacker News new | ask | show | jobs
Show HN: A 1KB CSS-in-JS library with all the bells and whistles (github.com)
6 points by sunesimonsen 2025 days ago
2 comments
quickthrower2 2023 days ago
What’s the advantage of this over they style attribute given that you are already in JS land.
link
gustavnikolaj 2023 days 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

link
quickthrower2 2022 days 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.
link
scott31 2024 days ago
> A tiny CSS in JS library that requires no tooling.

> Installation: npm install stylewars

so that was a lie?

link
sunesimonsen 2024 days 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";

link
sunesimonsen 2024 days ago
Here we go https://github.com/sunesimonsen/stylewars#unpkgcom
link