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!

TanStack•17mo ago•

5 replies

colossal-harlequin

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,
      }),

Variable undefined via vite plugin

Similar Threads

Variable undefined via vite plugin

Similar Threads

Similar Threads

Similar Threads