WIP: twind/styled

[sastan]

The styled API is commonly used within the react community. Although twind is framework agnostic it may be nice to provide a styled module as well.

The API is inspired by emotion, styled-component and goober. This PR adds three new modules:

• twind/styled - base implementation and framework agnostic
• twind/styled/react - ready to use with react
• twind/styled/preact - ready to use with preact

See docs/styled.md

An example is available as example/styled.tsx. After yarn start open http://localhost:8080/styled.html.

Try the Preview Package

Official releases are only available on registry.npmjs.org as twind.

This PR has been published to npm.pkg.github.com as @tw-in-js/twind@pr7.

Install/Update

Configure your NPM client (click to expand)

Adjust you .npmrc to use https://npm.pkg.github.com for @tw-in-js

@tw-in-js:registry=https://npm.pkg.github.com

Using the command line:

npm config set @tw-in-js:registry https://npm.pkg.github.com --global

# For npm
npm install --force twind@npm:@tw-in-js/twind@pr7

# For yarn - upgrade implies install
yarn upgrade twind@npm:@tw-in-js/twind@pr7

Benchmarks

# Object Styles
twind: <div color="black" class="tw-3u6ba0 tw-14ssw6o"></div>
goober: <div color="black" random="0.014518000616767335" class="go3334449672" data-reactroot=""></div>
emotion: <style data-emotion="css 14zyg7u">.css-14zyg7u{display:inline-block;border-radius:3px;padding:0.5rem 0;margin:0.5rem 1rem;width:11rem;background:transparent;color:white;border:2px solid white;font-size:0.875rem;line-height:1.25rem;}.css-14zyg7u:hover{color:black;opacity:0;}.css-14zyg7u:focus{border:2px dashed black;}@media (min-width: 768px){.css-14zyg7u{font-size:1rem;line-height:1.5rem;}}@media (min-width: 1280px){.css-14zyg7u{font-size:1.125rem;line-height:1.75rem;}}</style><div color="black" class="css-14zyg7u"></div>
styled-components: <div color="black" class="sc-bdfBwQ kIZhoG"></div>
twind x 52,441 ops/sec ±0.55% (90 runs sampled)
goober@2.0.18 x 40,491 ops/sec ±0.43% (96 runs sampled)
emotion@11.0.0 x 36,848 ops/sec ±0.69% (91 runs sampled)
styled-components@5.2.1 x 38,456 ops/sec ±0.62% (90 runs sampled)

Fastest is: twind

# Template Literal Styles
twind: <div color="black" class="tw-la1urp inline-block rounded py-2 my-2 mx-4 w-44 bg-transparent text-white border-2 border-solid border-white hover:text-black hover:opacity-100 focus:border-2 focus:border-dashed focus:border-black text-sm md:text-base lg:text-lg"></div>
goober: <div color="black" random="0.44058694455997416" class="go602841230" data-reactroot=""></div>
emotion: <style data-emotion="css 1j1rmlp">.css-1j1rmlp{display:inline-block;border-radius:3px;padding:0.5rem 0;margin:0.5rem 1rem;width:11rem;background:transparent;color:white;border:2px solid white;font-size:0.875rem;line-height:1.25rem;}.css-1j1rmlp:hover{color:black;opacity:1;}.css-1j1rmlp:focus{border:2px dashed black;}@media (min-width: 768px){.css-1j1rmlp{font-size:1rem;line-height:1.5rem;}}@media (min-width: 1280px){.css-1j1rmlp{font-size:1.125rem;line-height:1.75rem;}}</style><div color="black" class="css-1j1rmlp"></div>
styled-components: <div color="black" class="sc-gsTCUz bzdKjA"></div>
twind x 57,979 ops/sec ±0.38% (93 runs sampled)
goober@2.0.18 x 43,721 ops/sec ±0.56% (96 runs sampled)
emotion@11.0.0 x 36,768 ops/sec ±0.63% (94 runs sampled)
styled-components@5.2.1 x 57,611 ops/sec ±0.45% (94 runs sampled)

Fastest is: twind

[lukejacksonn]

This all LGTM. The only comment I have is around the linting errors people who use styled already are going to recieve when using styled.xxx`` but I guess if we made tw.xxx`` available that might get confusing.

I don't think it's something that should prevent this from being merged but something we should think about.

[lukejacksonn]

After looking at and playing with the awesome demo in #44 I realised that it is possible to just do:

import { styled as twind } from "twind/styled/react";

const Button = twind.button`...`

Which prevents the styled linter plugin on codesandbox from erroring. Perhaps we recommend something like this.

[sastan]

That is a good idea 💡. I'll try to look through the comment to see if wee can implement some of the other ideas.

[coveralls]

Pull Request Test Coverage Report for Build 473256276

• -1 of 601 (99.83%) changed or added relevant lines in 3 files are covered.
• No unchanged relevant lines lost coverage.
• Overall coverage decreased (-1.6%) to 93.76%

---

Changes Missing Coverage	Covered Lines	Changed/Added Lines	%
src/styled/index.ts	549	550	99.82%

Totals
Change from base Build 473243139:	-1.6%
Covered Lines:	4559
Relevant Lines:	4846

---

💛 - Coveralls

[coveralls]

Pull Request Test Coverage Report for Build 473326666

• 600 of 601 (99.83%) changed or added relevant lines in 3 files are covered.
• No unchanged relevant lines lost coverage.
• Overall coverage increased (+0.3%) to 95.69%

---

Changes Missing Coverage	Covered Lines	Changed/Added Lines	%
src/styled/index.ts	549	550	99.82%

Totals
Change from base Build 473316997:	0.3%
Covered Lines:	4649
Relevant Lines:	4846

---

💛 - Coveralls

[sastan]

We will focus our efforts on a new PR once #102 is agreed on.