New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
@vanilla-extract/esbuild-plugin
Advanced tools
@vanilla-extract/esbuild-plugin - npm Package Compare versions
Comparing version 1.1.0 to 1.2.0
| # @vanilla-extract/esbuild-plugin | ||
| ## 1.2.0 | ||
| ### Minor Changes | ||
| - [#259](https://github.com/seek-oss/vanilla-extract/pull/259) [`b8a6441`](https://github.com/seek-oss/vanilla-extract/commit/b8a6441e3400be388a520e3acf94f3bb6519cf0a) Thanks [@markdalgleish](https://github.com/markdalgleish)! - Allow the result of `composeStyles` to be used in selectors | ||
| When style compositions are used in selectors, they are now assigned an additional class so they can be uniquely identified. When selectors are processed internally, the composed classes are removed, only leaving behind the unique identifier classes. This allows you to treat them as if they were a single class within vanilla-extract selectors. | ||
| ```ts | ||
| import { style, globalStyle, composeStyles } from '@vanilla-extract/css'; | ||
| const background = style({ background: 'mintcream' }); | ||
| const padding = style({ padding: 12 }); | ||
| export const container = composeStyles(background, padding); | ||
| globalStyle(`${container} *`, { | ||
| boxSizing: 'border-box', | ||
| }); | ||
| ``` | ||
| ### Patch Changes | ||
| - Updated dependencies [[`b8a6441`](https://github.com/seek-oss/vanilla-extract/commit/b8a6441e3400be388a520e3acf94f3bb6519cf0a)]: | ||
| - @vanilla-extract/integration@1.1.0 | ||
| ## 1.1.0 | ||
@@ -4,0 +30,0 @@ |
| { | ||
| "name": "@vanilla-extract/esbuild-plugin", | ||
| "version": "1.1.0", | ||
| "version": "1.2.0", | ||
| "description": "Zero-runtime Stylesheets-in-TypeScript", | ||
@@ -18,3 +18,3 @@ "main": "dist/vanilla-extract-esbuild-plugin.cjs.js", | ||
| "dependencies": { | ||
| "@vanilla-extract/integration": "^1.0.0" | ||
| "@vanilla-extract/integration": "^1.1.0" | ||
| }, | ||
@@ -21,0 +21,0 @@ "devDependencies": { |
128
README.md
@@ -87,2 +87,3 @@ # 🧁 vanilla-extract | ||
| - [Gatsby](#gatsby) | ||
| - [Test environments](#test-environments) | ||
| - [Styling API](#styling-api) | ||
@@ -92,2 +93,3 @@ - [style](#style) | ||
| - [globalStyle](#globalstyle) | ||
| - [composeStyles](#composestyles) | ||
| - [createTheme](#createtheme) | ||
@@ -103,3 +105,2 @@ - [createGlobalTheme](#createglobaltheme) | ||
| - [globalKeyframes](#globalkeyframes) | ||
| - [composeStyles](#composestyles) | ||
| - [Dynamic API](#dynamic-api) | ||
@@ -125,3 +126,3 @@ - [createInlineTheme](#createinlinetheme) | ||
| ```bash | ||
| $ npm install @vanilla-extract/css @vanilla-extract/babel-plugin @vanilla-extract/webpack-plugin | ||
| npm install @vanilla-extract/css @vanilla-extract/babel-plugin @vanilla-extract/webpack-plugin | ||
| ``` | ||
@@ -165,10 +166,15 @@ | ||
| { | ||
| test: /\.css$/i, | ||
| test: /\.vanilla\.css$/i, // Targets only CSS files generated by vanilla-extract | ||
| use: [ | ||
| MiniCssExtractPlugin.loader, | ||
| 'css-loader', | ||
| ], | ||
| }, | ||
| ], | ||
| }, | ||
| { | ||
| loader: require.resolve('css-loader'), | ||
| options: { | ||
| url: false // Required as image imports should be handled via JS/TS import statements | ||
| } | ||
| } | ||
| ] | ||
| } | ||
| ] | ||
| } | ||
| }; | ||
@@ -183,3 +189,3 @@ ``` | ||
| ```bash | ||
| $ npm install @vanilla-extract/css @vanilla-extract/esbuild-plugin | ||
| npm install @vanilla-extract/css @vanilla-extract/esbuild-plugin | ||
| ``` | ||
@@ -247,3 +253,3 @@ | ||
| ```bash | ||
| $ npm install @vanilla-extract/css @vanilla-extract/vite-plugin | ||
| npm install @vanilla-extract/css @vanilla-extract/vite-plugin | ||
| ``` | ||
@@ -269,3 +275,3 @@ | ||
| ```bash | ||
| $ npm install @vanilla-extract/css @vanilla-extract/snowpack-plugin | ||
| npm install @vanilla-extract/css @vanilla-extract/snowpack-plugin | ||
| ``` | ||
@@ -288,2 +294,28 @@ | ||
| ### Test environments | ||
| 1. Install the dependencies. | ||
| ```bash | ||
| $ npm install @vanilla-extract/babel-plugin | ||
| ``` | ||
| 2. Add the [Babel](https://babeljs.io) plugin. | ||
| ```json | ||
| { | ||
| "plugins": ["@vanilla-extract/babel-plugin"] | ||
| } | ||
| ``` | ||
| 3. Disable runtime styles (Optional) | ||
| In testing environments (like `jsdom`) vanilla-extract will create and insert styles. While this is often desirable, it can be a major slowdown in your tests. If your tests don’t require styles to be available, the `disableRuntimeStyles` import will disable all style creation. | ||
| ```ts | ||
| // setupTests.ts | ||
| import '@vanilla-extract/css/disableRuntimeStyles'; | ||
| ``` | ||
| --- | ||
@@ -417,2 +449,46 @@ | ||
| ### composeStyles | ||
| Combines multiple styles into a single class string, while also deduplicating and removing unnecessary spaces. | ||
| ```ts | ||
| import { style, composeStyles } from '@vanilla-extract/css'; | ||
| const button = style({ | ||
| padding: 12, | ||
| borderRadius: 8 | ||
| }); | ||
| export const primaryButton = composeStyles( | ||
| button, | ||
| style({ background: 'coral' }) | ||
| ); | ||
| export const secondaryButton = composeStyles( | ||
| button, | ||
| style({ background: 'peachpuff' }) | ||
| ); | ||
| ``` | ||
| > 💡 Styles can also be provided in shallow and deeply nested arrays, similar to [classnames.](https://github.com/JedWatson/classnames) | ||
| When style compositions are used in selectors, they are assigned an additional class so they can be uniquely identified. When selectors are processed internally, the composed classes are removed, only leaving behind the unique identifier classes. This allows you to treat them as if they were a single class within vanilla-extract selectors. | ||
| ```ts | ||
| import { | ||
| style, | ||
| globalStyle, | ||
| composeStyles | ||
| } from '@vanilla-extract/css'; | ||
| const background = style({ background: 'mintcream' }); | ||
| const padding = style({ padding: 12 }); | ||
| export const container = composeStyles(background, padding); | ||
| globalStyle(`${container} *`, { | ||
| boxSizing: 'border-box' | ||
| }); | ||
| ``` | ||
| ### createTheme | ||
@@ -669,3 +745,3 @@ | ||
| export const animated = style({ | ||
| animation: `3s infinite ${rotate}`; | ||
| animation: `3s infinite ${rotate}`, | ||
| }); | ||
@@ -687,28 +763,6 @@ ``` | ||
| export const animated = style({ | ||
| animation: `3s infinite rotate`; | ||
| animation: `3s infinite rotate`, | ||
| }); | ||
| ``` | ||
| ### composeStyles | ||
| Combines mutliple styles into a single class string, while also deduplicating and removing unnecessary spaces. | ||
| ```ts | ||
| import { style, composeStyles } from '@vanilla-extract/css'; | ||
| const base = style({ | ||
| padding: 12 | ||
| }); | ||
| export const blue = composeStyles(base, style({ | ||
| background: 'blue' | ||
| })); | ||
| export const green = composeStyles(base, style({ | ||
| background: 'green' | ||
| })); | ||
| ``` | ||
| > 💡 Styles can also be provided in shallow and deeply nested arrays. Think of it as a static version of [classnames.](https://github.com/JedWatson/classnames) | ||
| ## Dynamic API | ||
@@ -719,3 +773,3 @@ | ||
| ```bash | ||
| $ npm install @vanilla-extract/dynamic | ||
| npm install @vanilla-extract/dynamic | ||
| ``` | ||
@@ -781,3 +835,3 @@ | ||
| ```bash | ||
| $ npm install @vanilla-extract/css-utils | ||
| npm install @vanilla-extract/css-utils | ||
| ``` | ||
@@ -784,0 +838,0 @@ |
No alert changes
Improved metrics
- Total package byte prevSize
- increased by9.09%
33395
- Number of lines in readme file
- increased by6.63%
869