@vanilla-extract/next-plugin 1.0.1 → 2.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 SEEK
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -82,7 +82,6 @@ Want to work at a higher level while maximising style re-use? Check out  🍨 [S
   - [webpack](#webpack)
   - [esbuild](#esbuild)
   - [Vite](#vite)
-  - [Snowpack](#snowpack)
   - [Next.js](#nextjs)
   - [Gatsby](#gatsby)
   - [Test environments](#test-environments)
@@ -95,6 +94,7 @@ Want to work at a higher level while maximising style re-use? Check out  🍨 [S
   - [createTheme](#createtheme)
   - [createGlobalTheme](#createglobaltheme)
   - [createThemeContract](#createthemecontract)
+  - [createGlobalThemeContract](#createglobalthemecontract)
   - [assignVars](#assignvars)
   - [createVar](#createvar)
   - [fallbackVar](#fallbackvar)
@@ -271,27 +271,6 @@ export default {
 
 > 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');`
 
-### 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
 
 1. Install the dependencies.
@@ -300,16 +279,7 @@ npm install @vanilla-extract/css @vanilla-extract/snowpack-plugin
 npm install @vanilla-extract/css @vanilla-extract/babel-plugin @vanilla-extract/next-plugin
 ```
 
-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.
-
-```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.
+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.
 
 > 💡 This plugin accepts an optional [configuration object](#configuration).
 
@@ -319,6 +289,7 @@ const {
 } = require('@vanilla-extract/next-plugin');
 const withVanillaExtract = createVanillaExtractPlugin();
 
+/** @type {import('next').NextConfig} */
 const nextConfig = {};
 
 module.exports = withVanillaExtract(nextConfig);
@@ -336,11 +307,25 @@ const withMDX = require('@next/mdx')({
   extension: /\.mdx$/
 });
 
+/** @type {import('next').NextConfig} */
 const nextConfig = {};
 
 module.exports = withVanillaExtract(withMDX(nextConfig));
 ```
 
+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
 
 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.

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

@@ -3,11 +3,31 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var webpackPlugin = require('@vanilla-extract/webpack-plugin');
+var browserslist = require('browserslist');
+var css = require('next/dist/build/webpack/config/blocks/css');
 var loaders = require('next/dist/build/webpack/config/blocks/css/loaders');
 
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var browserslist__default = /*#__PURE__*/_interopDefault(browserslist);
+
+function getSupportedBrowsers(dir, isDevelopment) {
+  let browsers;
+
+  try {
+    browsers = browserslist__default["default"].loadConfig({
+      path: dir,
+      env: isDevelopment ? 'development' : 'production'
+    });
+  } catch {}
+
+  return browsers;
+}
+
 const createVanillaExtractPlugin = (pluginOptions = {}) => (nextConfig = {}) => Object.assign({}, nextConfig, {
   webpack(config, options) {
     const {
+      dir,
       dev,
       isServer
     } = options;
@@ -24,7 +44,7 @@ const createVanillaExtractPlugin = (pluginOptions = {}) => (nextConfig = {}) =>
         isDevelopment: dev,
         future: nextConfig.future || {},
         experimental: nextConfig.experimental || {}
-      }, [], [])
+      }, () => css.lazyPostCSS(dir, getSupportedBrowsers(dir, dev)), [])
     });
     config.plugins.push(new webpackPlugin.VanillaExtractPlugin(pluginOptions));
 

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

@@ -3,11 +3,31 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var webpackPlugin = require('@vanilla-extract/webpack-plugin');
+var browserslist = require('browserslist');
+var css = require('next/dist/build/webpack/config/blocks/css');
 var loaders = require('next/dist/build/webpack/config/blocks/css/loaders');
 
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var browserslist__default = /*#__PURE__*/_interopDefault(browserslist);
+
+function getSupportedBrowsers(dir, isDevelopment) {
+  let browsers;
+
+  try {
+    browsers = browserslist__default["default"].loadConfig({
+      path: dir,
+      env: isDevelopment ? 'development' : 'production'
+    });
+  } catch {}
+
+  return browsers;
+}
+
 const createVanillaExtractPlugin = (pluginOptions = {}) => (nextConfig = {}) => Object.assign({}, nextConfig, {
   webpack(config, options) {
     const {
+      dir,
       dev,
       isServer
     } = options;
@@ -24,7 +44,7 @@ const createVanillaExtractPlugin = (pluginOptions = {}) => (nextConfig = {}) =>
         isDevelopment: dev,
         future: nextConfig.future || {},
         experimental: nextConfig.experimental || {}
-      }, [], [])
+      }, () => css.lazyPostCSS(dir, getSupportedBrowsers(dir, dev)), [])
     });
     config.plugins.push(new webpackPlugin.VanillaExtractPlugin(pluginOptions));
 

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

@@ -1,9 +1,25 @@
 import { VanillaExtractPlugin } from '@vanilla-extract/webpack-plugin';
+import browserslist from 'browserslist';
+import { lazyPostCSS } from 'next/dist/build/webpack/config/blocks/css';
 import { getGlobalCssLoader } from 'next/dist/build/webpack/config/blocks/css/loaders';
 
+function getSupportedBrowsers(dir, isDevelopment) {
+  let browsers;
+
+  try {
+    browsers = browserslist.loadConfig({
+      path: dir,
+      env: isDevelopment ? 'development' : 'production'
+    });
+  } catch {}
+
+  return browsers;
+}
+
 const createVanillaExtractPlugin = (pluginOptions = {}) => (nextConfig = {}) => Object.assign({}, nextConfig, {
   webpack(config, options) {
     const {
+      dir,
       dev,
       isServer
     } = options;
@@ -20,7 +36,7 @@ const createVanillaExtractPlugin = (pluginOptions = {}) => (nextConfig = {}) =>
         isDevelopment: dev,
         future: nextConfig.future || {},
         experimental: nextConfig.experimental || {}
-      }, [], [])
+      }, () => lazyPostCSS(dir, getSupportedBrowsers(dir, dev)), [])
     });
     config.plugins.push(new VanillaExtractPlugin(pluginOptions));
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vanilla-extract/next-plugin",
-  "version": "1.0.1",
+  "version": "2.0.0",
   "description": "Zero-runtime Stylesheets-in-TypeScript",
   "main": "dist/vanilla-extract-next-plugin.cjs.js",
   "module": "dist/vanilla-extract-next-plugin.esm.js",
@@ -15,12 +15,13 @@
   "author": "SEEK",
   "license": "MIT",
   "dependencies": {
-    "@vanilla-extract/webpack-plugin": "^2.0.0"
+    "@vanilla-extract/webpack-plugin": "^2.0.0",
+    "browserslist": "^4.19.1"
   },
   "peerDependencies": {
-    "next": ">=11.0.0"
+    "next": ">=12.0.5"
   },
   "devDependencies": {
-    "next": "^12.0.0"
+    "next": "^12.0.5"
   }
-}
+}

package/CHANGELOG.md

@@ -1,8 +0,0 @@
-# @vanilla-extract/next-plugin
-
-## 1.0.1
-### Patch Changes
-
-
-
-- [#443](https://github.com/seek-oss/vanilla-extract/pull/443) [`18363ee`](https://github.com/seek-oss/vanilla-extract/commit/18363ee319bf498ed97b068414f13f5383c41405) Thanks [@swudged](https://github.com/swudged)! - Support Next.js v12