T
TanStack•11mo ago
typical-coral

Variable undefined via vite plugin

My app.config.ts 
// app.config.ts
import { defineConfig } from "@tanstack/start/config";
import { pigment, extendTheme } from "@stylefusion/vite-plugin";
import { getPigmentCSSTheme } from "@raikou/system";

const { cssTheme, rawTheme } = getPigmentCSSTheme();

const theme = extendTheme({
  cssVarPrefix: "raikou",
  getSelector: (colorScheme) =>
    colorScheme ? `[data-raikou-color-scheme='${colorScheme}']` : ":root",
  ...cssTheme,
});

console.log("rawTheme", rawTheme);

export default defineConfig({
  vite: {
    plugins: [
      // @ts-ignore
      pigment({
        atomic: false,
        theme,
        rawTheme,
      }),
    ],
    optimizeDeps: {
      include: ['prop-types', 'react-is'],
    },
    resolve: {
      alias: {
        'prop-types': 'prop-types/prop-types.js',
        'react-is': 'react-is/cjs/react-is.development.js',
      },
    },
  },
});
// app.config.ts
import { defineConfig } from "@tanstack/start/config";
import { pigment, extendTheme } from "@stylefusion/vite-plugin";
import { getPigmentCSSTheme } from "@raikou/system";

const { cssTheme, rawTheme } = getPigmentCSSTheme();

const theme = extendTheme({
  cssVarPrefix: "raikou",
  getSelector: (colorScheme) =>
    colorScheme ? `[data-raikou-color-scheme='${colorScheme}']` : ":root",
  ...cssTheme,
});

console.log("rawTheme", rawTheme);

export default defineConfig({
  vite: {
    plugins: [
      // @ts-ignore
      pigment({
        atomic: false,
        theme,
        rawTheme,
      }),
    ],
    optimizeDeps: {
      include: ['prop-types', 'react-is'],
    },
    resolve: {
      alias: {
        'prop-types': 'prop-types/prop-types.js',
        'react-is': 'react-is/cjs/react-is.development.js',
      },
    },
  },
});
The pigment plugin has 3 params: 
pigment({
        atomic: false,
        theme,
        rawTheme,
      }),
pigment({
        atomic: false,
        theme,
        rawTheme,
      }),
When I run with Router. Works. The rawTheme variable is accessible inside all the packages. However, when I try to use Start. The rawTheme variable is undefined [in these same packages]. Note: see the console log above. The variable contents is available at that point (for both router and start). But with start, not when a package uses it. So it disappears at some point. I am unable to produce a repo because there is a ton of code that goes into this.
1) A css-in-js lib that is forked 2) A UI lib that is also forked I can put these both on npm and a repo of Start containing these packages. Let me know. Thanks!
2 Replies
typical-coral
typical-coralOP•11mo ago
Here is a short video. With start, you'll see the rawTheme variable flash up.
typical-coral
typical-coralOP•10mo ago
I noticed. If I put console.log in the packages [.mjs files] which handle the rawTheme variable. Start does not output them. Router does. 🤷‍♂️ No doubt some sort of vinxi issue. I tried running vinxi natively but ran into issues immediately. 😩 Rather not step into that mess... Now I have @raikou as an npm package. I now get a different issue 😂 Closing.

Did you find this page helpful?