@vanilla-extract/next-plugin 2.0.1 → 2.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +12 -3
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -328,7 +328,7 @@ If you don't have a `.babelrc` file in the root of your project, create one. Add
|
|
|
328
328
|
|
|
329
329
|
### Gatsby
|
|
330
330
|
|
|
331
|
-
To add to your [Gatsby](https://www.gatsbyjs.com) site, use the [gatsby-plugin-vanilla-extract](https://github.com/
|
|
331
|
+
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.
|
|
332
332
|
|
|
333
333
|
### Test environments
|
|
334
334
|
|
|
@@ -443,6 +443,15 @@ export const childClass = style({
|
|
|
443
443
|
>
|
|
444
444
|
> If you want to globally target child nodes within the current element (e.g. `'& a[href]'`), you should use [`globalStyle`](#globalstyle) instead.
|
|
445
445
|
|
|
446
|
+
For fallback styles you may simply pass an array of properties instead of a single prop.
|
|
447
|
+
|
|
448
|
+
```ts
|
|
449
|
+
export const exampleStyle = style({
|
|
450
|
+
// in Firefox and IE the "overflow: overlay" will be ignored and the "overflow: auto" will be applied
|
|
451
|
+
overflow: ['auto', 'overlay'],
|
|
452
|
+
});
|
|
453
|
+
```
|
|
454
|
+
|
|
446
455
|
Multiple styles can be composed into a single rule by providing an array of styles.
|
|
447
456
|
|
|
448
457
|
```ts
|
|
@@ -837,7 +846,7 @@ import { createVar, fallbackVar, style } from '@vanilla-extract/css';
|
|
|
837
846
|
export const colorVar = createVar();
|
|
838
847
|
|
|
839
848
|
export const exampleStyle = style({
|
|
840
|
-
color: fallbackVar(colorVar, 'blue')
|
|
849
|
+
color: fallbackVar(colorVar, 'blue'),
|
|
841
850
|
});
|
|
842
851
|
```
|
|
843
852
|
|
|
@@ -850,7 +859,7 @@ export const primaryColorVar = createVar();
|
|
|
850
859
|
export const secondaryColorVar = createVar();
|
|
851
860
|
|
|
852
861
|
export const exampleStyle = style({
|
|
853
|
-
color: fallbackVar(primaryColorVar, secondaryColorVar, 'blue')
|
|
862
|
+
color: fallbackVar(primaryColorVar, secondaryColorVar, 'blue'),
|
|
854
863
|
});
|
|
855
864
|
```
|
|
856
865
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vanilla-extract/next-plugin",
|
|
3
|
-
"version": "2.0.
|
|
3
|
+
"version": "2.0.2",
|
|
4
4
|
"description": "Zero-runtime Stylesheets-in-TypeScript",
|
|
5
5
|
"main": "dist/vanilla-extract-next-plugin.cjs.js",
|
|
6
6
|
"module": "dist/vanilla-extract-next-plugin.esm.js",
|
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
"author": "SEEK",
|
|
16
16
|
"license": "MIT",
|
|
17
17
|
"dependencies": {
|
|
18
|
-
"@vanilla-extract/webpack-plugin": "^2.1.
|
|
18
|
+
"@vanilla-extract/webpack-plugin": "^2.1.7",
|
|
19
19
|
"browserslist": "^4.19.1"
|
|
20
20
|
},
|
|
21
21
|
"peerDependencies": {
|