gatsby-uc / gatsby-plugin-vanilla-extract

Gatsby plugin which wraps the vanilla-extract package for easy use

Welcome to the Gatsby User Collective!

The Gatsby UC was born out of a desire to create higher quality plugins in the Gatsby ecosystem by reducing maintainer work loads.

Goals

Most Gatsby plugin projects aren't massive. Sometimes they need regular maintenance, a lot of the time they do not. Either way, original authors become unable or willing to maintain a plugin at any given moment or maybe indefinately. This is not a comdemnation, it's a fact of life that sometimes maintainers need to move on. No matter the cause, this results in plugins going un-maintained by their authors. Others are willing and able to help; but the bottle neck that cannot be bypassed. At times this means fixing bugs in less ideal ways, creating duplicate implementations of plugins, etc. The Gatsby User collective's goal is to demorcratize the maintenance of these plugins to allow more folks to assist in their maintenance.

Info

The details of this community is still being flushed out. As problems arrize we will solve them together and in an open fasion. For now check out

• Code of conduct [TBA]
• Submitting a plugin to the UC [TBA]
• ...

gatsby-plugin-vanilla-extract's Issues

Bug when importing .css.ts file

"gatsby": "^2.32.13",
"@vanilla-extract/css": "^1.0.0",
"@vanilla-extract/babel-plugin": "^1.0.0",
"@vanilla-extract/css-utils": "^0.1.1",
"@vanilla-extract/webpack-plugin": "^1.0.1",
"gatsby-plugin-vanilla-extract": "^1.0.5",

I'm creating a theme in my gatsby app

import { defaultButtons, themeVars } from '@newrade/core-react-ui';
import { createTheme } from '@vanilla-extract/css';

export const themeClassName = createTheme(themeVars, {
  buttons: {
    ...defaultButtons,
    medium: {
      ...defaultButtons.medium,
      padding: {
        default: '40px',
      },
    },
  },
});

and then importing it

import { themeClassName } from '../design-system/theme.css';

Somehow I'm getting this error:

 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

(Emitted value instead of an instance of Error) ReferenceError: window is not defined

File: src/design-system/theme.css.ts

failed Re-building development bundle - 2.975s

./src/design-system/theme.css.ts
Module build failed (from /Users/phil/Code/newrade/node_modules/@vanilla-extract/webpack-plugin/loader/dist/vanilla-extract-webpack-plugin-loader.cjs.js):
NonErrorEmittedError: (Emitted value instead of an instance of Error) ReferenceError: window is not defined
    at /Users/phil/Code/newrade/node_modules/webpack/lib/NormalModule.js:313:13
    at /Users/phil/Code/newrade/node_modules/loader-runner/lib/LoaderRunner.js:367:11
    at /Users/phil/Code/newrade/node_modules/loader-runner/lib/LoaderRunner.js:182:20
    at context.callback (/Users/phil/Code/newrade/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at /Users/phil/Code/newrade/node_modules/@vanilla-extract/webpack-plugin/loader/dist/vanilla-extract-webpack-plugin-loader.cjs.dev.js:58:5
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)

I get this while running gatsby develop

What is weird is I have a default theme in another package and I can import that one fine, but locally created theme fails

Dependency Dashboard

This issue provides visibility into Renovate updates and their statuses. Learn more

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• Update dependency @vanilla-extract/webpack-plugin to v2

---

• Check this box to trigger a request for Renovate to run again on this repository

not working in production

In production ,there is a mismatch between classes in style element and those applied to component dom nodes. It seems that those in style element are minified while second are not.

Steps to reporoduce

1. clone https://github.com/pindjur/gatsby-starter-default-vanilla-bug.git
2. run gatsby build and gatsby serve
3. visit http://localhost:9000/

Expected result

Header styles are applied

Actual result

Header styles are not applied