5 ms·

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

6 points by sunesimonsen 6y ago

scott31 6y ago
> A tiny CSS in JS library that requires no tooling. > Installation: npm install stylewars so that was a lie?
- sunesimonsen 6y 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"; https://unpkg.com/stylewars@1.6.0/dist/bundle.esm.min.js";
  - sunesimonsen 6y ago
    Here we go https://github.com/sunesimonsen/stylewars#unpkgcom https://github.com/sunesimonsen/stylewars#unpkgcom
quickthrower2 6y ago
What’s the advantage of this over they style attribute given that you are already in JS land.
- gustavnikolaj 6y 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/ https://styled-components.com/ [2]: https://github.com/css-modules/css-modules https://github.com/css-modules/css-modules
  - quickthrower2 6y 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.

6 points by sunesimonsen 6y ago

scott31 6y ago

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

sunesimonsen 6y 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"; https://unpkg.com/stylewars@1.6.0/dist/bundle.esm.min.js";
- sunesimonsen 6y ago
  Here we go https://github.com/sunesimonsen/stylewars#unpkgcom https://github.com/sunesimonsen/stylewars#unpkgcom

quickthrower2 6y ago

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

gustavnikolaj 6y 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/ https://styled-components.com/ [2]: https://github.com/css-modules/css-modules https://github.com/css-modules/css-modules
- quickthrower2 6y 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.