@stitches/tailwind - Gatsby build fails

[fedetibaldo]

The Problem

When I build my gatsby project, the exact same code that during development used to work now fails unexpectedly.

Expected output

The build succeeds.

Actual output

failed Building static HTML for pages - 1.526s

 ERROR #95313 

Building static HTML failed for path "/"

See our docs page for more info on this error: https://gatsby.dev/debug-html


  172 |             }
  173 |             else if (config.utilityFirst && !isCallingUtil && !isOverriding) {
> 174 |                 throw new Error("@stitches/css - The property \"" + String(prop) + "\" is not available");
      | ^
  175 |             }
  176 |             else if (specificityProps[String(prop)]) {
  177 |                 return specificityProps[String(prop)](cssInstance);


  WebpackError: @stitches/css - The property "text" is not available
  
  - index.js:174 Object.get
    node_modules/@stitches/css/es/index.js:174:1
  
  - Title.js:4 
    src/components/styled/Title.js:4:9
  
  - index.js:35 
    node_modules/@stitches/styled/es/index.js:35:55

What I've tried so far

I tried to swap the package--@stitches/css rather than @stitches/tailwind--and that works wonderfully. However, css is not the same as tailwind.

// src/styles/css.js
import { createStyled } from "@stitches/styled"
// import { createConfig } from "@stitches/tailwind" // fails
import { createConfig } from "@stitches/css" // works as expected

If you go down this path, remember to update src/components/styled/Title to use a non-tailwind token.

I also tried to upgrade node to version 13--I should've done that anyway--but no luck with that.

How to reproduce

Requirements

• docker
• docker-compose
• npm
• node
• git
• nvm

Steps

1. I've set up a branch of my repo to replicate the bug. Simply
   !!! I've updated the branch. The issue is not reproducible anymore. See following comment !!!

git clone https://github.com/fedetibaldo/fedetibaldo.com.git bug-tailwind-build
cd bug-tailwind-build
git checkout bug/tailwind-build
nvm use
npm i -g gatsby
npm i

---

2. Then, spin up the Ghost instance with Docker.

docker-compose up -d

---

3. Navigate to http://localhost:3001/ghost, and fill out the steps with random data.

---

4. Create a new internal tag, with name #en

---

5. Assign the newly created tag to a random post

---

6. Create a custom integration

---

7. Copy the Content API Key into your .ghost.json

---

8. In the end, run

gatsby build

[fedetibaldo]

After inspecting the index file of @stitches/tailwind, I found out that I was importing the wrong variable. Even though they looked like they did the same, createConfig of tailwind doesn't create a tailwind configuration by default. Instead, a default tailwind configuration is exported as tailwind.

Hence, changing the src/styles/css.js contents from

import { createStyled } from "@stitches/styled"
import { createConfig } from "@stitches/tailwind"

const config = createConfig({})

const { Provider, useCss, styled } = createStyled()

export { config, Provider, useCss, styled }

to

import { createStyled } from "@stitches/styled"
import { tailwind as config } from "@stitches/tailwind"

const { Provider, useCss, styled } = createStyled()

export { config, Provider, useCss, styled }

fixes the issue.

I have no idea how the former managed to work during development, though...