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

Post by sunesimonsen » Mon, Dec 07, 2020, 12:29 PM UTC

Post by sunesimonsen » Mon, Dec 07, 2020, 10:14 PM UTC

scott31 wrote: post #2

> A tiny CSS in JS library that requires no tooling. > Installation: npm install stylewars so that was a lie?

Post by quickthrower2 » Wed, Dec 09, 2020, 7:41 AM UTC

Post by quickthrower2 » Thu, Dec 10, 2020, 12:38 AM UTC

gustavnikolaj wrote: post #6

quickthrower2 wrote: post #5

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

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:…

  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);

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

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