@vanilla-extract/vite-plugin 3.1.1 → 3.1.4

package/README.md

@@ -328,7 +328,7 @@ If you don't have a `.babelrc` file in the root of your project, create one. Add
 
 ### Gatsby
 
-To add to your [Gatsby](https://www.gatsbyjs.com) site, use the [gatsby-plugin-vanilla-extract](https://github.com/KyleAMathews/gatsby-plugin-vanilla-extract) plugin.
+To add to your [Gatsby](https://www.gatsbyjs.com) site, use the [gatsby-plugin-vanilla-extract](https://github.com/gatsby-uc/plugins/tree/main/packages/gatsby-plugin-vanilla-extract) plugin.
 
 ### Test environments
 
@@ -443,6 +443,15 @@ export const childClass = style({
 >
 > If you want to globally target child nodes within the current element (e.g. `'& a[href]'`), you should use [`globalStyle`](#globalstyle) instead.
 
+For fallback styles you may simply pass an array of properties instead of a single prop.
+
+```ts
+export const exampleStyle = style({
+  // in Firefox and IE the "overflow: overlay" will be ignored and the "overflow: auto" will be applied
+  overflow: ['auto', 'overlay'],
+});
+```
+
 Multiple styles can be composed into a single rule by providing an array of styles.
 
 ```ts
@@ -837,7 +846,7 @@ import { createVar, fallbackVar, style } from '@vanilla-extract/css';
 export const colorVar = createVar();
 
 export const exampleStyle = style({
-  color: fallbackVar(colorVar, 'blue');
+  color: fallbackVar(colorVar, 'blue'),
 });
 ```
 
@@ -850,7 +859,7 @@ export const primaryColorVar = createVar();
 export const secondaryColorVar = createVar();
 
 export const exampleStyle = style({
-  color: fallbackVar(primaryColorVar, secondaryColorVar, 'blue');
+  color: fallbackVar(primaryColorVar, secondaryColorVar, 'blue'),
 });
 ```
 

package/dist/vanilla-extract-vite-plugin.cjs.dev.js

@@ -33,8 +33,10 @@ var outdent__default = /*#__PURE__*/_interopDefault(outdent);
 // Mostly copied from vite's implementation
 // https://github.com/vitejs/vite/blob/efec70f816b80e55b64255b32a5f120e1cf4e4be/packages/vite/src/node/plugins/css.ts
 const resolvePostcssConfig = async config => {
+  var _config$css;
+
   // inline postcss config via vite config
-  const inlineOptions = config.css?.postcss;
+  const inlineOptions = (_config$css = config.css) === null || _config$css === void 0 ? void 0 : _config$css.postcss;
   const inlineOptionsIsString = typeof inlineOptions === 'string';
 
   if (inlineOptions && !inlineOptionsIsString) {
@@ -157,7 +159,7 @@ function vanillaExtractPlugin({
       if (typeof ssrParam === 'boolean') {
         ssr = ssrParam;
       } else {
-        ssr = ssrParam?.ssr;
+        ssr = ssrParam === null || ssrParam === void 0 ? void 0 : ssrParam.ssr;
       }
 
       const index = id.indexOf('?');
@@ -190,12 +192,13 @@ function vanillaExtractPlugin({
       return integration.processVanillaFile({
         source,
         filePath: validId,
-        identOption: identifiers ?? (config.mode === 'production' ? 'short' : 'debug'),
+        identOption: identifiers !== null && identifiers !== void 0 ? identifiers : config.mode === 'production' ? 'short' : 'debug',
         serializeVirtualCssPath: async ({
           fileScope,
           source
         }) => {
-          const fileId = integration.stringifyFileScope(fileScope);
+          // This file id is requested through a URL where ".." isn't valid.
+          const fileId = integration.stringifyFileScope(fileScope).replace(/\.\./g, '_dir_up_');
           const id = `${virtualPrefix}${fileId}${virtualExt}`;
           let cssSource = source;
 

package/dist/vanilla-extract-vite-plugin.cjs.prod.js

@@ -33,8 +33,10 @@ var outdent__default = /*#__PURE__*/_interopDefault(outdent);
 // Mostly copied from vite's implementation
 // https://github.com/vitejs/vite/blob/efec70f816b80e55b64255b32a5f120e1cf4e4be/packages/vite/src/node/plugins/css.ts
 const resolvePostcssConfig = async config => {
+  var _config$css;
+
   // inline postcss config via vite config
-  const inlineOptions = config.css?.postcss;
+  const inlineOptions = (_config$css = config.css) === null || _config$css === void 0 ? void 0 : _config$css.postcss;
   const inlineOptionsIsString = typeof inlineOptions === 'string';
 
   if (inlineOptions && !inlineOptionsIsString) {
@@ -157,7 +159,7 @@ function vanillaExtractPlugin({
       if (typeof ssrParam === 'boolean') {
         ssr = ssrParam;
       } else {
-        ssr = ssrParam?.ssr;
+        ssr = ssrParam === null || ssrParam === void 0 ? void 0 : ssrParam.ssr;
       }
 
       const index = id.indexOf('?');
@@ -190,12 +192,13 @@ function vanillaExtractPlugin({
       return integration.processVanillaFile({
         source,
         filePath: validId,
-        identOption: identifiers ?? (config.mode === 'production' ? 'short' : 'debug'),
+        identOption: identifiers !== null && identifiers !== void 0 ? identifiers : config.mode === 'production' ? 'short' : 'debug',
         serializeVirtualCssPath: async ({
           fileScope,
           source
         }) => {
-          const fileId = integration.stringifyFileScope(fileScope);
+          // This file id is requested through a URL where ".." isn't valid.
+          const fileId = integration.stringifyFileScope(fileScope).replace(/\.\./g, '_dir_up_');
           const id = `${virtualPrefix}${fileId}${virtualExt}`;
           let cssSource = source;
 

package/dist/vanilla-extract-vite-plugin.esm.js

@@ -6,8 +6,10 @@ import { getPackageInfo, parseFileScope, cssFileFilter, addFileScope, compile, p
 // Mostly copied from vite's implementation
 // https://github.com/vitejs/vite/blob/efec70f816b80e55b64255b32a5f120e1cf4e4be/packages/vite/src/node/plugins/css.ts
 const resolvePostcssConfig = async config => {
+  var _config$css;
+
   // inline postcss config via vite config
-  const inlineOptions = config.css?.postcss;
+  const inlineOptions = (_config$css = config.css) === null || _config$css === void 0 ? void 0 : _config$css.postcss;
   const inlineOptionsIsString = typeof inlineOptions === 'string';
 
   if (inlineOptions && !inlineOptionsIsString) {
@@ -130,7 +132,7 @@ function vanillaExtractPlugin({
       if (typeof ssrParam === 'boolean') {
         ssr = ssrParam;
       } else {
-        ssr = ssrParam?.ssr;
+        ssr = ssrParam === null || ssrParam === void 0 ? void 0 : ssrParam.ssr;
       }
 
       const index = id.indexOf('?');
@@ -163,12 +165,13 @@ function vanillaExtractPlugin({
       return processVanillaFile({
         source,
         filePath: validId,
-        identOption: identifiers ?? (config.mode === 'production' ? 'short' : 'debug'),
+        identOption: identifiers !== null && identifiers !== void 0 ? identifiers : config.mode === 'production' ? 'short' : 'debug',
         serializeVirtualCssPath: async ({
           fileScope,
           source
         }) => {
-          const fileId = stringifyFileScope(fileScope);
+          // This file id is requested through a URL where ".." isn't valid.
+          const fileId = stringifyFileScope(fileScope).replace(/\.\./g, '_dir_up_');
           const id = `${virtualPrefix}${fileId}${virtualExt}`;
           let cssSource = source;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vanilla-extract/vite-plugin",
-  "version": "3.1.1",
+  "version": "3.1.4",
   "description": "Zero-runtime Stylesheets-in-TypeScript",
   "main": "dist/vanilla-extract-vite-plugin.cjs.js",
   "module": "dist/vanilla-extract-vite-plugin.esm.js",
@@ -15,7 +15,7 @@
   "author": "SEEK",
   "license": "MIT",
   "dependencies": {
-    "@vanilla-extract/integration": "^2.0.0",
+    "@vanilla-extract/integration": "^3.0.0",
     "outdent": "^0.8.0",
     "postcss": "^8.3.6",
     "postcss-load-config": "^3.1.0"