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

Comparing version 1.0.0 to 1.1.0

CHANGELOG.md

 # @vanilla-extract/esbuild-plugin
 
+## 1.1.0
+
+### Minor Changes
+
+- [#183](https://github.com/seek-oss/vanilla-extract/pull/183) [`6721228`](https://github.com/seek-oss/vanilla-extract/commit/672122828f763193c9086706ba969caa6c564761) Thanks [@Brendan-csel](https://github.com/Brendan-csel)! - Add `processCss` plugin option to allow further processing of CSS while bundling.
+
+  **Example for postcss with autoprefixer:**
+
+  ```js
+  const { vanillaExtractPlugin } = require('@vanilla-extract/esbuild-plugin');
+  const postcss = require('postcss');
+  const autoprefixer = require('autoprefixer');
+
+  async function processCss(css) {
+    const result = await postcss([autoprefixer]).process(css, {
+      from: undefined /* suppress source map warning */,
+    });
+
+    return result.css;
+  }
+
+  require('esbuild')
+    .build({
+      entryPoints: ['app.ts'],
+      bundle: true,
+      plugins: [
+        vanillaExtractPlugin({
+          processCss,
+        }),
+      ],
+      outfile: 'out.js',
+    })
+    .catch(() => process.exit(1));
+  ```
+
 ## 1.0.0
@@ -4,0 +39,0 @@

dist/declarations/src/index.d.ts

@@ -6,4 +6,5 @@ import type { Plugin } from 'esbuild';
     runtime?: boolean;
+    processCss?: (css: string) => Promise<string>;
 }
-export declare function vanillaExtractPlugin({ outputCss, externals, runtime, }?: VanillaExtractPluginOptions): Plugin;
+export declare function vanillaExtractPlugin({ outputCss, externals, runtime, processCss, }?: VanillaExtractPluginOptions): Plugin;
 export {};

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

@@ -11,3 +11,4 @@ 'use strict';
   externals = [],
-  runtime = false
+  runtime = false,
+  processCss
 } = {}) {
@@ -34,8 +35,13 @@ if (runtime) {
         namespace: vanillaCssNamespace
-      }, ({
+      }, async ({
         path
       }) => {
-        const {
+        let {
           source
         } = integration.getSourceFromVirtualCssFile(path);
+
+        if (typeof processCss === 'function') {
+          source = await processCss(source);
+        }
+
         return {
@@ -42,0 +48,0 @@ contents: source,

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

@@ -11,3 +11,4 @@ 'use strict';
   externals = [],
-  runtime = false
+  runtime = false,
+  processCss
 } = {}) {
@@ -34,8 +35,13 @@ if (runtime) {
         namespace: vanillaCssNamespace
-      }, ({
+      }, async ({
         path
       }) => {
-        const {
+        let {
           source
         } = integration.getSourceFromVirtualCssFile(path);
+
+        if (typeof processCss === 'function') {
+          source = await processCss(source);
+        }
+
         return {
@@ -42,0 +48,0 @@ contents: source,

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

@@ -7,3 +7,4 @@ import { vanillaExtractFilescopePlugin, virtualCssFileFilter, getSourceFromVirtualCssFile, cssFileFilter, compile, processVanillaFile } from '@vanilla-extract/integration';
   externals = [],
-  runtime = false
+  runtime = false,
+  processCss
 } = {}) {
@@ -30,8 +31,13 @@ if (runtime) {
         namespace: vanillaCssNamespace
-      }, ({
+      }, async ({
         path
       }) => {
-        const {
+        let {
           source
         } = getSourceFromVirtualCssFile(path);
+
+        if (typeof processCss === 'function') {
+          source = await processCss(source);
+        }
+
         return {
@@ -38,0 +44,0 @@ contents: source,

package.json

 {
   "name": "@vanilla-extract/esbuild-plugin",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Zero-runtime Stylesheets-in-TypeScript",
@@ -5,0 +5,0 @@ "main": "dist/vanilla-extract-esbuild-plugin.cjs.js",

README.md

@@ -9,8 +9,2 @@ # 🧁 vanilla-extract
 
----
-
-**🚧   Please note, this is an alpha release.**
-
----
-
 🔥   All styles generated at build time — just like [Sass](https://sass-lang.com), [Less](http://lesscss.org), etc.
@@ -203,2 +197,40 @@
 
+3. Process CSS
+
+As [esbuild](https://esbuild.github.io/) currently doesn't have a way to process the CSS generated by vanilla-extract, you can optionally use the `processCss` option.
+
+For example, to run autoprefixer over the generated CSS.
+
+```js
+const {
+  vanillaExtractPlugin
+} = require('@vanilla-extract/esbuild-plugin');
+const postcss = require('postcss');
+const autoprefixer = require('autoprefixer');
+
+async function processCss(css) {
+  const result = await postcss([autoprefixer]).process(
+    css,
+    {
+      from: undefined /* suppress source map warning */
+    }
+  );
+
+  return result.css;
+}
+
+require('esbuild')
+  .build({
+    entryPoints: ['app.ts'],
+    bundle: true,
+    plugins: [
+      vanillaExtractPlugin({
+        processCss
+      })
+    ],
+    outfile: 'out.js'
+  })
+  .catch(() => process.exit(1));
+```
+
 ### Vite
@@ -227,5 +259,5 @@
 
-## Snowpack
+### Snowpack
 
-1/ Install the dependencies.
+1. Install the dependencies.
 
@@ -236,3 +268,3 @@ ```bash
 
-2/ Add the [Snowpack](https://www.snowpack.dev/) plugin to your snowpack config.
+2. Add the [Snowpack](https://www.snowpack.dev/) plugin to your snowpack config.
 
@@ -239,0 +271,0 @@ ```js

No alert changes

Improved metrics

Total package byte prevSize

30612

increased by7.73%

Lines of code

224

increased by6.16%

Number of lines in readme file

815

increased by4.09%

No dependency changes