feat: define Vite environment variables for vanilla-extract

.changeset/dirty-impalas-whisper.md

@@ -0,0 +1,16 @@
+---
+'@tabula/forge': minor
+---
+
+emulate Vite's environment variables
+
+The `vanilla-extract` uses `esbuild` under the hood with CJS format. In that case, if you import any code with usage of
+`import`.
+
+We assume usage only `import.meta.env.DEV`, `import.meta.env.PROD` and `import.meta.env.MODE` variables in bundler
+user's code and emulate only it with defining constants.
+
+But this constants working only in compile time when CSS is generated and based on mode in which the `forge` is running
+at compilation moment.
+
+Be careful when use code which based on that variables in your `vanilla-extract` styles.

src/plugins/vanillaExtractPlugin/vanillaExtractPlugin.ts

@@ -36,6 +36,12 @@ export function vanillaExtractPlugin(options: Options): Plugin {
     //       it can be a function, but typings allow to use only `short` and `debug` string literals.
     identifiers: getIdentifiersBuilder(options) as never,
     esbuildOptions: {
+      define: {
+        'import.meta.env.DEV': JSON.stringify(!options.isProduction),
+        'import.meta.env.PROD': JSON.stringify(options.isProduction),
+        'import.meta.env.MODE': JSON.stringify(options.isProduction ? 'production' : 'development'),
+      },
+
       plugins: [
         {
           name: 'vanilla-extract-plugin/static',

tests/__snapshots__/browser.test.ts.snap

@@ -4181,6 +4181,68 @@ exports[`browser > vanilla-extract support > supports \`vanilla-extract\` packag
 "
 `;
 
+exports[`browser > vanilla-extract support > supports Vite \`import.meta.env.*\` flags > when mode is development > sets flags to development mode 1`] = `
+"import "./index.css";
+
+// src/index.css.ts
+var dev = "src_dev__fj0g6q0";
+var mode = "src_mode__fj0g6q2";
+var prod = "src_prod__fj0g6q1";
+
+// src/index.ts
+document.body.classList.add(dev);
+document.body.classList.add(prod);
+document.body.classList.add(mode);
+//# sourceMappingURL=index.js.map
+"
+`;
+
+exports[`browser > vanilla-extract support > supports Vite \`import.meta.env.*\` flags > when mode is development > sets flags to development mode 2`] = `
+"/* vanilla-extract-css-ns:src/index.css.ts.vanilla.css?source=LnNyY19kZXZfX2ZqMGc2cTA6OmJlZm9yZSB7CiAgY29udGVudDogInRydWUiOwp9Ci5zcmNfcHJvZF9fZmowZzZxMTo6YmVmb3JlIHsKICBjb250ZW50OiAiZmFsc2UiOwp9Ci5zcmNfbW9kZV9fZmowZzZxMjo6YmVmb3JlIHsKICBjb250ZW50OiAiZGV2ZWxvcG1lbnQiOwp9 */
+.src_dev__fj0g6q0::before {
+  content: "true";
+}
+.src_prod__fj0g6q1::before {
+  content: "false";
+}
+.src_mode__fj0g6q2::before {
+  content: "development";
+}
+/*# sourceMappingURL=index.css.map */
+"
+`;
+
+exports[`browser > vanilla-extract support > supports Vite \`import.meta.env.*\` flags > when mode is production > sets flags to production mode 1`] = `
+"import "./index.css";
+
+// src/index.css.ts
+var dev = "browser_vanilla_extract_vite__fj0g6q0";
+var mode = "browser_vanilla_extract_vite__fj0g6q2";
+var prod = "browser_vanilla_extract_vite__fj0g6q1";
+
+// src/index.ts
+document.body.classList.add(dev);
+document.body.classList.add(prod);
+document.body.classList.add(mode);
+//# sourceMappingURL=index.js.map
+"
+`;
+
+exports[`browser > vanilla-extract support > supports Vite \`import.meta.env.*\` flags > when mode is production > sets flags to production mode 2`] = `
+"/* vanilla-extract-css-ns:src/index.css.ts.vanilla.css?source=LmJyb3dzZXJfdmFuaWxsYV9leHRyYWN0X3ZpdGVfX2ZqMGc2cTA6OmJlZm9yZSB7CiAgY29udGVudDogImZhbHNlIjsKfQouYnJvd3Nlcl92YW5pbGxhX2V4dHJhY3Rfdml0ZV9fZmowZzZxMTo6YmVmb3JlIHsKICBjb250ZW50OiAidHJ1ZSI7Cn0KLmJyb3dzZXJfdmFuaWxsYV9leHRyYWN0X3ZpdGVfX2ZqMGc2cTI6OmJlZm9yZSB7CiAgY29udGVudDogInByb2R1Y3Rpb24iOwp9 */
+.browser_vanilla_extract_vite__fj0g6q0::before {
+  content: "false";
+}
+.browser_vanilla_extract_vite__fj0g6q1::before {
+  content: "true";
+}
+.browser_vanilla_extract_vite__fj0g6q2::before {
+  content: "production";
+}
+/*# sourceMappingURL=index.css.map */
+"
+`;
+
 exports[`browser > vanilla-extract support > supports static files in the \`vanilla-extract\` styles 1`] = `
 "/* vanilla-extract-css-ns:src/index.css.ts.vanilla.css?source=LnNyY19yb290X19rajdyczQwIHsKICBiYWNrZ3JvdW5kLWNvbG9yOiByZWQ7Cn0= */
 .src_root__kj7rs40 {

tests/browser.test.ts

@@ -1075,6 +1075,42 @@ describe('browser', () => {
         expect(await c.read('lib/index.css')).toMatchSnapshot();
       },
     );
+
+    describe('supports Vite `import.meta.env.*` flags', () => {
+      describe('when mode is production', () => {
+        it(
+          'sets flags to production mode',
+          {
+            command: 'build',
+            dependencies: ['@vanilla-extract/css'],
+            name: 'browser-vanilla-extract-vite',
+            target: 'browser',
+            production: true,
+          },
+          async (c) => {
+            expect(await c.read('lib/index.js')).toMatchSnapshot();
+            expect(await c.read('lib/index.css')).toMatchSnapshot();
+          },
+        );
+      });
+
+      describe('when mode is development', () => {
+        it(
+          'sets flags to development mode',
+          {
+            command: 'build',
+            dependencies: ['@vanilla-extract/css'],
+            name: 'browser-vanilla-extract-vite',
+            target: 'browser',
+            production: false,
+          },
+          async (c) => {
+            expect(await c.read('lib/index.js')).toMatchSnapshot();
+            expect(await c.read('lib/index.css')).toMatchSnapshot();
+          },
+        );
+      });
+    });
   });
 
   describe('storybook', () => {

tests/fixtures/browser-vanilla-extract-vite/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "browser-vanilla-extract-vite",
+  "version": "1.0.0",
+  "type": "module",
+  "module": "lib/index.js",
+  "exports": {
+    ".": {
+      "import": "./lib/index.js"
+    }
+  },
+  "files": [
+    "lib"
+  ]
+}

tests/fixtures/browser-vanilla-extract-vite/src/index.css.ts

@@ -0,0 +1,35 @@
+import { style } from '@vanilla-extract/css';
+
+declare global {
+  interface ImportMeta {
+    env: {
+      DEV: boolean;
+      PROD: boolean;
+      MODE: string;
+    };
+  }
+}
+
+export const dev = style({
+  selectors: {
+    '&::before': {
+      content: `${import.meta.env.DEV}`,
+    },
+  },
+});
+
+export const prod = style({
+  selectors: {
+    '&::before': {
+      content: `${import.meta.env.PROD}`,
+    },
+  },
+});
+
+export const mode = style({
+  selectors: {
+    '&::before': {
+      content: `${import.meta.env.MODE}`,
+    },
+  },
+});

tests/fixtures/browser-vanilla-extract-vite/src/index.ts

@@ -0,0 +1,5 @@
+import { dev, mode, prod } from './index.css';
+
+document.body.classList.add(dev);
+document.body.classList.add(prod);
+document.body.classList.add(mode);

tests/fixtures/browser-vanilla-extract-vite/tsconfig.forge.json

@@ -0,0 +1,5 @@
+{
+  "extends": "@tabula/typescript-config/tsconfig.browser.json",
+
+  "include": ["src"]
+}