feat: screen directive

[sastan]

The screen directive allows you to create media queries that reference your breakpoints by name instead of duplicating their values in your own CSS.

For example, say you have a sm breakpoint at 640px and you need to write some custom CSS that references this breakpoint.

Instead of writing a raw media query that duplicates that value like this:

css`
  @media (min-width: 640px) {
    /* ... */
  }
`

...you can use the screen directive and reference the breakpoint by name:

import { css, screen, apply } from 'twind/css'

// With template literal
css`
  ${screen('sm')} {
    /* ... */
  }
  ${screen('md', css` /* ... */ `)}
  ${screen('lg', css({ /* ... */ }))}
  ${screen('xl', { /* ... */ })}
  ${screen('2xl', apply` ... `)}
`

// With object notation
css(
  screen('md', css` /* ... */ `),
  screen('lg', css({ /* ... */ })),
  screen('xl', { /* ... */ }),
  screen('2xl', apply` ... `),
)
`

/cc @tw-in-js/contributors

[coveralls]

Pull Request Test Coverage Report for Build 502303393

• 0 of 24 (100.0%) changed or added relevant lines in 1 file are covered.
• 1 unchanged line in 1 file lost coverage.
• Overall coverage decreased (-1.3%) to 88.781%

---

Files with Coverage Reduction	New Missed Lines	%
src/css/index.ts	1	95.06%

Totals
Change from base Build 502274439:	-1.3%
Covered Lines:	4214
Relevant Lines:	4750

---

💛 - Coveralls

[coveralls]

Pull Request Test Coverage Report for Build 502303393

• 24 of 24 (100.0%) changed or added relevant lines in 1 file are covered.
• 1 unchanged line in 1 file lost coverage.
• Overall coverage increased (+0.02%) to 90.097%

---

Files with Coverage Reduction	New Missed Lines	%
src/css/index.ts	1	95.06%

Totals
Change from base Build 502274439:	0.02%
Covered Lines:	4246
Relevant Lines:	4750

---

💛 - Coveralls

[github-actions]

size-limit report 📦

Path	Size
dist/twind.js	12 KB (0%)

[github-actions]

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@pr93.

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@pr93

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