@vanilla-extract/vite-plugin - npm Package Compare versions

Comparing version 3.0.1 to 3.1.0

dist/declarations/src/index.d.ts

@@ -0,0 +0,0 @@ import type { Plugin } from 'vite';

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

@@ -12,5 +12,57 @@ 'use strict';
 
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n["default"] = e;
+  return Object.freeze(n);
+}
+
 var path__default = /*#__PURE__*/_interopDefault(path);
 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 => {
+  // inline postcss config via vite config
+  const inlineOptions = config.css?.postcss;
+  const inlineOptionsIsString = typeof inlineOptions === 'string';
+
+  if (inlineOptions && !inlineOptionsIsString) {
+    const options = { ...inlineOptions
+    };
+    delete options.plugins;
+    return {
+      options,
+      plugins: inlineOptions.plugins || []
+    };
+  } else {
+    try {
+      const searchPath = typeof inlineOptions === 'string' ? inlineOptions : config.root;
+      const postCssConfig = await (await Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('postcss-load-config')); })).default({}, searchPath);
+      return {
+        options: postCssConfig.options,
+        // @ts-expect-error - The postcssrc options don't agree with real postcss, but it should be ok
+        plugins: postCssConfig.plugins
+      };
+    } catch (e) {
+      if (!/No PostCSS Config found/.test(e.message)) {
+        throw e;
+      }
+
+      return null;
+    }
+  }
+};
+
 const styleUpdateEvent = fileId => `vanilla-extract-style-update:${fileId}`;
@@ -25,2 +77,3 @@
   let server;
+  let postCssConfig;
   const cssMap = new Map();
@@ -48,4 +101,9 @@ let virtualExt;
 
-    configResolved(resolvedConfig) {
+    async configResolved(resolvedConfig) {
       config = resolvedConfig;
+
+      if (config.command === 'serve') {
+        postCssConfig = await resolvePostcssConfig(config);
+      }
+
       virtualExt = `.vanilla.${config.command === 'serve' ? 'js' : 'css'}`;
@@ -76,3 +134,3 @@ packageInfo = integration.getPackageInfo(config.root);
         const fileScope = integration.parseFileScope(fileScopeId);
-        return outdent__default['default']`
+        return outdent__default["default"]`
           import { injectStyles } from '@vanilla-extract/css/injectStyles';
@@ -107,3 +165,3 @@
           source: code,
-          filePath: vite.normalizePath(path__default['default'].relative(packageInfo.dirname, validId)),
+          filePath: vite.normalizePath(path__default["default"].relative(packageInfo.dirname, validId)),
           packageInfo
@@ -132,4 +190,4 @@ }).source;
         filePath: validId,
-        identOption: identifiers !== null && identifiers !== void 0 ? identifiers : config.mode === 'production' ? 'short' : 'debug',
-        serializeVirtualCssPath: ({
+        identOption: identifiers ?? (config.mode === 'production' ? 'short' : 'debug'),
+        serializeVirtualCssPath: async ({
           fileScope,
@@ -140,3 +198,12 @@ source
           const id = `${virtualPrefix}${fileId}${virtualExt}`;
+          let cssSource = source;
 
+          if (postCssConfig) {
+            const postCssResult = await (await Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('postcss')); })).default(postCssConfig.plugins).process(source, { ...postCssConfig.options,
+              from: undefined,
+              map: false
+            });
+            cssSource = postCssResult.css;
+          }
+
           if (server && cssMap.has(fileId) && cssMap.get(fileId) !== source) {
@@ -155,7 +222,7 @@ const {
               event: styleUpdateEvent(fileId),
-              data: source
+              data: cssSource
             });
           }
 
-          cssMap.set(fileId, source);
+          cssMap.set(fileId, cssSource);
           return `import "${id}";`;
@@ -162,0 +229,0 @@ }

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

@@ -12,5 +12,57 @@ 'use strict';
 
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n["default"] = e;
+  return Object.freeze(n);
+}
+
 var path__default = /*#__PURE__*/_interopDefault(path);
 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 => {
+  // inline postcss config via vite config
+  const inlineOptions = config.css?.postcss;
+  const inlineOptionsIsString = typeof inlineOptions === 'string';
+
+  if (inlineOptions && !inlineOptionsIsString) {
+    const options = { ...inlineOptions
+    };
+    delete options.plugins;
+    return {
+      options,
+      plugins: inlineOptions.plugins || []
+    };
+  } else {
+    try {
+      const searchPath = typeof inlineOptions === 'string' ? inlineOptions : config.root;
+      const postCssConfig = await (await Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('postcss-load-config')); })).default({}, searchPath);
+      return {
+        options: postCssConfig.options,
+        // @ts-expect-error - The postcssrc options don't agree with real postcss, but it should be ok
+        plugins: postCssConfig.plugins
+      };
+    } catch (e) {
+      if (!/No PostCSS Config found/.test(e.message)) {
+        throw e;
+      }
+
+      return null;
+    }
+  }
+};
+
 const styleUpdateEvent = fileId => `vanilla-extract-style-update:${fileId}`;
@@ -25,2 +77,3 @@
   let server;
+  let postCssConfig;
   const cssMap = new Map();
@@ -48,4 +101,9 @@ let virtualExt;
 
-    configResolved(resolvedConfig) {
+    async configResolved(resolvedConfig) {
       config = resolvedConfig;
+
+      if (config.command === 'serve') {
+        postCssConfig = await resolvePostcssConfig(config);
+      }
+
       virtualExt = `.vanilla.${config.command === 'serve' ? 'js' : 'css'}`;
@@ -76,3 +134,3 @@ packageInfo = integration.getPackageInfo(config.root);
         const fileScope = integration.parseFileScope(fileScopeId);
-        return outdent__default['default']`
+        return outdent__default["default"]`
           import { injectStyles } from '@vanilla-extract/css/injectStyles';
@@ -107,3 +165,3 @@
           source: code,
-          filePath: vite.normalizePath(path__default['default'].relative(packageInfo.dirname, validId)),
+          filePath: vite.normalizePath(path__default["default"].relative(packageInfo.dirname, validId)),
           packageInfo
@@ -132,4 +190,4 @@ }).source;
         filePath: validId,
-        identOption: identifiers !== null && identifiers !== void 0 ? identifiers : config.mode === 'production' ? 'short' : 'debug',
-        serializeVirtualCssPath: ({
+        identOption: identifiers ?? (config.mode === 'production' ? 'short' : 'debug'),
+        serializeVirtualCssPath: async ({
           fileScope,
@@ -140,3 +198,12 @@ source
           const id = `${virtualPrefix}${fileId}${virtualExt}`;
+          let cssSource = source;
 
+          if (postCssConfig) {
+            const postCssResult = await (await Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('postcss')); })).default(postCssConfig.plugins).process(source, { ...postCssConfig.options,
+              from: undefined,
+              map: false
+            });
+            cssSource = postCssResult.css;
+          }
+
           if (server && cssMap.has(fileId) && cssMap.get(fileId) !== source) {
@@ -155,7 +222,7 @@ const {
               event: styleUpdateEvent(fileId),
-              data: source
+              data: cssSource
             });
           }
 
-          cssMap.set(fileId, source);
+          cssMap.set(fileId, cssSource);
           return `import "${id}";`;
@@ -162,0 +229,0 @@ }

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

@@ -6,2 +6,36 @@ import path from 'path';
 
+// Mostly copied from vite's implementation
+// https://github.com/vitejs/vite/blob/efec70f816b80e55b64255b32a5f120e1cf4e4be/packages/vite/src/node/plugins/css.ts
+const resolvePostcssConfig = async config => {
+  // inline postcss config via vite config
+  const inlineOptions = config.css?.postcss;
+  const inlineOptionsIsString = typeof inlineOptions === 'string';
+
+  if (inlineOptions && !inlineOptionsIsString) {
+    const options = { ...inlineOptions
+    };
+    delete options.plugins;
+    return {
+      options,
+      plugins: inlineOptions.plugins || []
+    };
+  } else {
+    try {
+      const searchPath = typeof inlineOptions === 'string' ? inlineOptions : config.root;
+      const postCssConfig = await (await import('postcss-load-config')).default({}, searchPath);
+      return {
+        options: postCssConfig.options,
+        // @ts-expect-error - The postcssrc options don't agree with real postcss, but it should be ok
+        plugins: postCssConfig.plugins
+      };
+    } catch (e) {
+      if (!/No PostCSS Config found/.test(e.message)) {
+        throw e;
+      }
+
+      return null;
+    }
+  }
+};
+
 const styleUpdateEvent = fileId => `vanilla-extract-style-update:${fileId}`;
@@ -16,2 +50,3 @@
   let server;
+  let postCssConfig;
   const cssMap = new Map();
@@ -39,4 +74,9 @@ let virtualExt;
 
-    configResolved(resolvedConfig) {
+    async configResolved(resolvedConfig) {
       config = resolvedConfig;
+
+      if (config.command === 'serve') {
+        postCssConfig = await resolvePostcssConfig(config);
+      }
+
       virtualExt = `.vanilla.${config.command === 'serve' ? 'js' : 'css'}`;
@@ -121,4 +161,4 @@ packageInfo = getPackageInfo(config.root);
         filePath: validId,
-        identOption: identifiers !== null && identifiers !== void 0 ? identifiers : config.mode === 'production' ? 'short' : 'debug',
-        serializeVirtualCssPath: ({
+        identOption: identifiers ?? (config.mode === 'production' ? 'short' : 'debug'),
+        serializeVirtualCssPath: async ({
           fileScope,
@@ -129,3 +169,12 @@ source
           const id = `${virtualPrefix}${fileId}${virtualExt}`;
+          let cssSource = source;
 
+          if (postCssConfig) {
+            const postCssResult = await (await import('postcss')).default(postCssConfig.plugins).process(source, { ...postCssConfig.options,
+              from: undefined,
+              map: false
+            });
+            cssSource = postCssResult.css;
+          }
+
           if (server && cssMap.has(fileId) && cssMap.get(fileId) !== source) {
@@ -144,7 +193,7 @@ const {
               event: styleUpdateEvent(fileId),
-              data: source
+              data: cssSource
             });
           }
 
-          cssMap.set(fileId, source);
+          cssMap.set(fileId, cssSource);
           return `import "${id}";`;
@@ -151,0 +200,0 @@ }

package.json

 {
   "name": "@vanilla-extract/vite-plugin",
-  "version": "3.0.1",
+  "version": "3.1.0",
   "description": "Zero-runtime Stylesheets-in-TypeScript",
@@ -18,4 +18,6 @@ "main": "dist/vanilla-extract-vite-plugin.cjs.js",
   "dependencies": {
-    "@vanilla-extract/integration": "^1.4.3",
-    "outdent": "^0.8.0"
+    "@vanilla-extract/integration": "^2.0.0",
+    "outdent": "^0.8.0",
+    "postcss": "^8.3.6",
+    "postcss-load-config": "^3.1.0"
   },
@@ -28,2 +30,2 @@ "devDependencies": {
   }
-}
+}

README.md

@@ -85,3 +85,2 @@ # 🧁 vanilla-extract
   - [Vite](#vite)
-  - [Snowpack](#snowpack)
   - [Next.js](#nextjs)
@@ -99,2 +98,3 @@ - [Gatsby](#gatsby)
   - [createThemeContract](#createthemecontract)
+  - [createGlobalThemeContract](#createglobalthemecontract)
   - [assignVars](#assignvars)
@@ -276,23 +276,2 @@ - [createVar](#createvar)
 
-### Snowpack
-
-1. Install the dependencies.
-
-```bash
-npm install @vanilla-extract/css @vanilla-extract/snowpack-plugin
-```
-
-2. Add the [Snowpack](https://www.snowpack.dev/) plugin to your snowpack config.
-
-> 💡 This plugin accepts an optional [configuration object](#configuration).
-
-```js
-// snowpack.config.json
-{
-  "plugins": ["@vanilla-extract/snowpack-plugin"]
-}
-```
-
-> Please note: There are currently no automatic readable class names during development. However, you can still manually provide a debug ID as the last argument to functions that generate scoped styles, e.g. `export const className = style({ ... }, 'className');`
-
 ### Next.js
@@ -306,13 +285,4 @@
 
-2. If you don't have a `.babelrc` file in the root of your project, create one. Add the [Babel](https://babeljs.io) plugin to your `.babelrc` file, ensuring that you're also including `"next/babel"` in your `presets` array.
+2. If you don't have a `next.config.js` file in the root of your project, create one. Add the [Next.js](https://nextjs.org) plugin to your `next.config.js` file.
 
-```json
-{
-  "presets": ["next/babel"],
-  "plugins": ["@vanilla-extract/babel-plugin"]
-}
-```
-
-3. If you don't have a `next.config.js` file in the root of your project, create one. Add the [Next.js](https://nextjs.org) plugin to your `next.config.js` file.
-
 > 💡 This plugin accepts an optional [configuration object](#configuration).
@@ -326,2 +296,3 @@
 
+/** @type {import('next').NextConfig} */
 const nextConfig = {};
@@ -344,2 +315,3 @@
 
+/** @type {import('next').NextConfig} */
 const nextConfig = {};
@@ -350,2 +322,15 @@
 
+3. (Optional) If you want to automatically generate debug IDs during development, you can add the [Babel](https://babeljs.io) plugin. Note that this step will cause Next.js to switch from [SWC](https://github.com/swc-project/swc) to Babel, increasing build times. This may or may not be an issue depending on the size of your project.
+
+> Note: While optional for Next.js, the Babel plugin is still required when trying to run `.css.ts` files in Node for unit testing since the files are no longer being processed by a bundler.
+
+If you don't have a `.babelrc` file in the root of your project, create one. Add the Babel plugin to your `.babelrc` file, ensuring that you're also including `"next/babel"` in your `presets` array.
+
+```json
+{
+  "presets": ["next/babel"],
+  "plugins": ["@vanilla-extract/babel-plugin"]
+}
+```
+
 ### Gatsby
@@ -352,0 +337,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Number of package files

10

increased by11.11%

Lines of code

569

increased by42.61%

Worsened metrics

Total package byte prevSize

49173

decreased by-6.08%

Dependency count

5

increased by66.67%

Number of lines in readme file

1190

decreased by-1.24%

Dependency changes

• + Addedpostcss@^8.3.6

• + Addedpostcss-load-config@^3.1.0

• + Added@vanilla-extract/integration@2.0.2(transitive)

• + Addedlilconfig@2.1.0(transitive)

• + Addedpostcss-load-config@3.1.4(transitive)

• + Addedyaml@1.10.2(transitive)

• - Removed@vanilla-extract/integration@1.4.3(transitive)

• - Removedansi-styles@4.3.0(transitive)

• - Removedchalk@4.1.2(transitive)

• - Removedcolor-convert@2.0.1(transitive)

• - Removedcolor-name@1.1.4(transitive)

• - Removedhas-flag@4.0.0(transitive)

• - Removedsupports-color@7.2.0(transitive)

• Updated@vanilla-extract/integration@^2.0.0