Usable without Global Styles

[Alphy11]

At the moment, it seems the GlobalStyles component is also the thing that defaults all the tailwind variables. Would the maintainers be supportive of a change that separated them (then composed them back as the same interface as today for those who want to use the styling)?

[ben-rogerson]

Hey there, I looked into separating the global styles into chunks that could be imported but didn't think the extra complexity was needed.
If you use the globalStyles import instead of the GlobalStyles import, you'll have access to the style object. You'll then just need to add it to a global provider.

Example with styled-components:

import { createGlobalStyle } from 'styled-components'
import tw, { theme, globalStyles } from 'twin.macro'

const globals = {
  body: {
    WebkitTapHighlightColor: theme`colors.purple.500`,
    ...tw`antialiased`,
  },
}

const globalStylesAdjustments = Object.entries(globalStyles).filter(style => ...)

const GlobalStyles = createGlobalStyle(globalStylesAdjustments, globals) // Use two arguments so a deep merge happens

export default GlobalStyles

[Alphy11]

Yeah thanks, we are doing that now, but then we are running a risk of new global resets being introduced with any upgrade. Since we are using this for a design system, it makes more sense for our components to exist in isolation. Several of the stye sets are already being exported independently in https://github.com/ben-rogerson/twin.macro/blob/master/src/config/globalStyles.js

If we just exported variableDefaults as the set of things that just do the variable defaults, it would make upgrading twin.macro a lot safer in the future for anyone who doesn't want global resets.

[hueyyeng]

Hi @ben-rogerson I'm currently facing an issue where my component is not animating when using translate and realise I need to import GlobalStyles to get it working for my React project (to be specific, I'm using Frontity Mars Theme as my base).

Although this resets all CSS selectors to the default value which breaks the font appearance of my theme and after checking the code, I saw there is several sets of styles but it is exported as one variable.

Seconding @Alphy11 if it is possible to have the set of styles exported independently? What I did is create a new JS file in my project containing the code from https://github.com/ben-rogerson/twin.macro/blob/master/src/config/globalStyles.js but I exclude globalPreflightStyles from the globalStyles array.

That helps in getting the animation working without resetting the font appearance for most HTML text elements (especially heading and paragraph).

For reference, I was following issue #277 and #542 which the solution didn't help for my use case (or maybe I'm approaching it wrongly). Not sure if this helps but I'm using [email protected]

[ben-rogerson]

I've been thinking about a solution - would something like this work?

The globalStyles import usually creates a merged object of global styles.
With namedGlobalStyles: true in your twin config, the globalStyles import would instead create an object containing named global styles.

// With `namedGlobalStyles: true`

import { globalStyles } from 'twin.macro'

const styles = globalStyles

// ↓ ↓ ↓ ↓ ↓ ↓

const styles = {
  preflight: { ... },
  keyframe: { ... },
  transform: { ... },
  touchAction: { ... },
  scrollSnapType: { ... },
  fontVariantNumeric: { ... },
  ring: { ... },
  boxShadow: { ... },
  filter: { ... },
  backdrop: { ... },
}

You can then modify and shape the styles then add to your global provider.

[hueyyeng]

That sounds like a good solution as it is similar to what I'm doing now but configurable through twin config!

I'm already using the suggested approach to create an external component in another file for the GlobalStyles in my project. This mean I can use the namedGlobalStyles: true and not duplicate the globalStyles.js in my React project.

[ben-rogerson]

There's also this PR which turns off the preflight styles in your globalStyles #707
Would that suit you too?

[hueyyeng]

I've checked with Tailwind docs on Preflight and your PR #707 seems to do the trick as the globalPreflightStyles is the one that I commented out in my React project.

Really appreciate your quick feedback and implementation!