Screen import

[ben-rogerson]

This PR adds a screen import, making it easier to use tailwind screen breakpoints outside of tailwind.

Before and after the screen import

Before

Before the screen import, custom breakpoints needed to be manually constructed to mimic the tailwind breakpoints:

import { styled, theme } from "twin.macro";

// Manual breakpoints with the css prop
<div css={{ 
	[`@media (min-width: ${theme('screens.sm')})`]: { display: "block", ...tw`inline` },
	[`@media (min-width: ${theme('screens.2xl')})`]: `display: block; ${tw`inline`}`,
}} />;

// Manual breakpoints with the styled import
styled.div({
	[`@media (min-width: ${theme('screens.sm')})`]: { display: "block", ...tw`inline` },
	[`@media (min-width: ${theme('screens.2xl')})`]: `display: block; ${tw`inline`}`,
});

After

Using the screen import, twin will create the same "min-width" breakpoints tailwind uses:

import { styled, screen } from "twin.macro";

// Screen breakpoints with the css prop
<div
  css={{
    [screen`sm`]: { display: "block", ...tw`inline` },
    [screen`2xl`]: `display: block; ${tw`inline`}`,
  }}
/>;

// Screen breakpoints with the styled import
styled.div({
    [screen`sm`]: { display: "block", ...tw`inline` },
    [screen`2xl`]: `display: block; ${tw`inline`}`,
});

Screen styling shorthand

The screen import can also add styles when they are attached as a suffix:

const styles = css(
  screen.xl({
    ":root": {
      "--gutter": "15px"
    },
  })
);

Relaxed usage

The screen import can be added in a few different ways:

screen`sm`({ ... })
screen('sm')({ ... })
screen(`sm`)({ ... })
screen.sm({ ... }) // Dot syntax can’t be used when the screen begins with a number, eg: screen.2xl

[ben-rogerson]

I’m definitely not going to have fun writing the types for this feature... 😱

[theonesean]

I’m definitely not going to have fun writing the types for this feature... 😱

Want some help?

[ben-rogerson]

@theonesean Yes! I'd really like some help with those types, thanks so much for offering.

I'd expect much of the challenge will be around the different ways of defining the breakpoints:

screen`sm`({ ... })
screen('sm')({ ... })
screen(`sm`)({ ... })
screen.sm({ ... })

// And the styles can also be defined in template literals:
screen`sm``...`
screen('sm')`...`
screen(`sm`)`...`
screen.sm`...`

Here’s the existing types.

Will you need anything else to get started?

[theonesean]

@ben-rogerson Sorry for the delay -- what's your timeframe for this? It's a holiday weekend here in the US, and I'm traveling for the next few days. I'd love to help, but if this is something that I'd be holding up, it might be best for me to work on something in the future, instead.

[ben-rogerson]

@theonesean I'm currently aiming to get this out soonish. All good though, I'm keen on getting your help on a future project for sure 👍