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

Comparing version 2.0.3 to 2.0.4

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

@@ -5,2 +5,3 @@ 'use strict';
 
+var path = require('path');
 var integration = require('@vanilla-extract/integration');
@@ -37,7 +38,10 @@
       }, async ({
-        path
+        path: path$1
       }) => {
+        var _build$initialOptions;
+
         let {
-          source
-        } = await integration.getSourceFromVirtualCssFile(path);
+          source,
+          fileName
+        } = await integration.getSourceFromVirtualCssFile(path$1);
 
@@ -48,5 +52,8 @@ if (typeof processCss === 'function') {
 
+        const rootDir = (_build$initialOptions = build.initialOptions.absWorkingDir) !== null && _build$initialOptions !== void 0 ? _build$initialOptions : process.cwd();
+        const resolveDir = path.dirname(path.join(rootDir, fileName));
         return {
           contents: source,
-          loader: 'css'
+          loader: 'css',
+          resolveDir
         };
@@ -53,0 +60,0 @@ });

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

@@ -5,2 +5,3 @@ 'use strict';
 
+var path = require('path');
 var integration = require('@vanilla-extract/integration');
@@ -37,7 +38,10 @@
       }, async ({
-        path
+        path: path$1
       }) => {
+        var _build$initialOptions;
+
         let {
-          source
-        } = await integration.getSourceFromVirtualCssFile(path);
+          source,
+          fileName
+        } = await integration.getSourceFromVirtualCssFile(path$1);
 
@@ -48,5 +52,8 @@ if (typeof processCss === 'function') {
 
+        const rootDir = (_build$initialOptions = build.initialOptions.absWorkingDir) !== null && _build$initialOptions !== void 0 ? _build$initialOptions : process.cwd();
+        const resolveDir = path.dirname(path.join(rootDir, fileName));
         return {
           contents: source,
-          loader: 'css'
+          loader: 'css',
+          resolveDir
         };
@@ -53,0 +60,0 @@ });

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

@@ -0,1 +1,2 @@
+import { dirname, join } from 'path';
 import { vanillaExtractFilescopePlugin, virtualCssFileFilter, getSourceFromVirtualCssFile, cssFileFilter, compile, processVanillaFile } from '@vanilla-extract/integration';
@@ -34,4 +35,7 @@
       }) => {
+        var _build$initialOptions;
+
         let {
-          source
+          source,
+          fileName
         } = await getSourceFromVirtualCssFile(path);
@@ -43,5 +47,8 @@
 
+        const rootDir = (_build$initialOptions = build.initialOptions.absWorkingDir) !== null && _build$initialOptions !== void 0 ? _build$initialOptions : process.cwd();
+        const resolveDir = dirname(join(rootDir, fileName));
         return {
           contents: source,
-          loader: 'css'
+          loader: 'css',
+          resolveDir
         };
@@ -48,0 +55,0 @@ });

package.json

 {
   "name": "@vanilla-extract/esbuild-plugin",
-  "version": "2.0.3",
+  "version": "2.0.4",
   "description": "Zero-runtime Stylesheets-in-TypeScript",
@@ -18,3 +18,3 @@ "main": "dist/vanilla-extract-esbuild-plugin.cjs.js",
   "dependencies": {
-    "@vanilla-extract/integration": "^3.0.0"
+    "@vanilla-extract/integration": "^4.0.0"
   },
@@ -21,0 +21,0 @@ "devDependencies": {

README.md

@@ -87,2 +87,3 @@ # 🧁 vanilla-extract
   - [Gatsby](#gatsby)
+  - [Rollup](#rollup)
   - [Test environments](#test-environments)
@@ -334,2 +335,28 @@ - [Configuration](#configuration)
 
+### Rollup
+
+> Note: This option is useful for library development but not suitable for application bundles.
+> Rollup has no built-in CSS bundling, so this plugin just outputs styles as individual CSS assets.
+> For applications we instead recommend to use Vite
+> (which itself uses Rollup under the hood but comes with its own CSS bundling).
+
+1. Install the dependencies.
+
+```bash
+npm install @vanilla-extract/css @vanilla-extract/rollup-plugin
+```
+
+2. Add the [Rollup](https://rollupjs.org/) plugin to your Rollup config.
+
+> 💡 This plugin accepts an optional [configuration object](#configuration).
+
+```js
+import { vanillaExtractPlugin } from '@vanilla-extract/rollup-plugin';
+
+// rollup.config.js
+export default {
+  plugins: [vanillaExtractPlugin()]
+}
+```
+
 ### Test environments
@@ -448,2 +475,11 @@
 
+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.
@@ -843,3 +879,3 @@
 export const exampleStyle = style({
-  color: fallbackVar(colorVar, 'blue');
+  color: fallbackVar(colorVar, 'blue'),
 });
@@ -857,3 +893,3 @@ ```
 export const exampleStyle = style({
-  color: fallbackVar(primaryColorVar, secondaryColorVar, 'blue');
+  color: fallbackVar(primaryColorVar, secondaryColorVar, 'blue'),
 });
@@ -860,0 +896,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

Total package byte prevSize

38074

increased by5.91%

Lines of code

250

increased by7.76%

Number of lines in readme file

1226

increased by3.03%

Dependency changes

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

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

• Updated@vanilla-extract/integration@^4.0.0