Skip to content

CHANGELOG.md

Latest commit

 

History

History
831 lines (473 loc) · 47.8 KB

CHANGELOG.md

File metadata and controls

831 lines (473 loc) · 47.8 KB

@vanilla-extract/vite-plugin

5.1.4

Patch Changes

5.1.3

Patch Changes

5.1.2

Patch Changes

5.1.1

Patch Changes

5.1.0

Minor Changes

  • #1614 4e92cce Thanks @askoufis! - Add new inlineCssInDev option to unstable_mode configuration property

    Setting unstableMode: 'inlineCssInDev' will result in all CSS generated by Vanilla Extract being inlined into a style element at the top of the document head. This feature is useful for preventing FOUC (Flash of Unstyled Content) when server-rendering your initial HTML. Without this, calling ssrLoadModule on your server entrypoint will not include the CSS in the HTML, leading to a FOUC when the client-side JavaScript takes over.

    Note that CSS will only be inlined in development mode. Production builds are unaffected by this setting.

    EXAMPLE USAGE:

    // vite.config.ts
import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin';

export default {
  plugins: [
    vanillaExtractPlugin({
      unstable_mode: 'inlineCssInDev'
    })
  ]
};

Patch Changes

5.0.7

Patch Changes

  • #1617 f4bd196 Thanks @askoufis! - Don't watch files or invalidate VE modules during SSR

    Fixes a bug where a dependent of a Vanilla Extract module could be evaulated multiple times during ssrLoadModule, potentially causing bugs with singleton variables such as React context.

5.0.6

Patch Changes

5.0.5

Patch Changes

5.0.4

Patch Changes

5.0.3

Patch Changes

5.0.2

Patch Changes

  • #1583 6488e28 Thanks @askoufis! - Ignore Vite base config

    Fixes a bug where imported asset URLs would be transformed by the compiler when setting the base option in Vite, resulting in incorrect resolution and bundling of these assets during the build process.

  • Updated dependencies [6488e28]:

5.0.1

Patch Changes

5.0.0

Major Changes

  • #1537 7810b7c Thanks @askoufis! - Change the plugin name from "vanilla-extract" to the more conventional "vite-plugin-vanilla-extract"

  • #1529 d5b6e70 Thanks @askoufis! - Update vite peer dependency range to ^5.0.0 || ^6.0.0

    BREAKING CHANGE: Vite 4 is no longer supported. Please upgrade to at least Vite 5.

  • #1537 7810b7c Thanks @askoufis! - BREAKING CHANGE: User-configured vite plugins are no longer forwarded through to the Vanilla Extract compiler by default. This should not affect most consumers.

    Previously, all vite plugins except for a select few incompatible plugins were forwarded through. This resulted in a constant game of whack-a-mole as new plugins were added to the list of incompatible plugins as issues were discovered.

    Framework-specific plugins, as well as plugins that handle assets and build output, tend not to be relevant to Vanilla Extract code, and in some cases cause more harm than good.

    For that reason, in this release only the vite-tsconfig-paths plugin is fowarded through by default. This is a relatively common plugin that is know to be compatible with the Vanilla Extract compiler.

    In most cases users should not need to forward any additional plugins through to the Vanilla Extract compiler. However, if such a case arises, a plugin filter function can be provided via the unstable_pluginFilter option:

    // vite.config.ts

import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin';
import { vitePluginFoo } from 'vite-plugin-foo';

export default defineConfig({
  plugins: [
    vitePluginFoo(),
    vanillaExtractPlugin({
      // Only forward the `vite-plugin-foo` plugin through to the Vanilla Extract compiler
      unstable_pluginFilter: ({ name, mode }) =>
        plugin.name === 'vite-plugin-foo'
    })
  ]
});

    When providing a plugin filter function, the vite-tsconfig-paths plugin will no longer be forwarded through by default. If you wish to forward this plugin, you must include it in your filter function.

    NOTE: The unstable_pluginFilter API is considered unstable and may be changed or removed without notice in a future non-major version.

Patch Changes

4.0.20

Patch Changes

4.0.19

Patch Changes

4.0.18

Patch Changes

4.0.17

Patch Changes

  • #1492 1fd348a Thanks @kube! - Filter out react-router Vite plugin when creating the vite-node compiler

4.0.16

Patch Changes

  • #1482 30c0305 Thanks @askoufis! - Fixes a bug where Vanilla Extract files with extensions other than css.ts were not being invalidated during HMR

  • Updated dependencies []:

4.0.15

Patch Changes

4.0.14

Patch Changes

4.0.13

Patch Changes

4.0.12

Patch Changes

4.0.11

Patch Changes

4.0.10

Patch Changes

4.0.9

Patch Changes

4.0.8

Patch Changes

4.0.7

Patch Changes

  • #1369 05ef2f0 Thanks @askoufis! - Fixes a bug where an internal Remix plugin would throw an error inside the vite-node compiler

  • #1368 90f0315 Thanks @askoufis! - Update @vanilla-extract/integration dependency

    This fixes a bug where APIs that used the walkObject utility (e.g. createTheme) would fail when used with module namespace objects inside vite-node. This was due to the previous implementation using the input object's constructor to initialize a clone, which does not work with module namespace objects because they do not have a constructor function.

  • Updated dependencies [c8aefe0]:

4.0.6

Patch Changes

4.0.5

Patch Changes

  • #1353 94d5f06 Thanks @himself65! - Move vite-node compiler creation to a more appropriate plugin hook to ensure correct cleanup of resources

4.0.4

Patch Changes

  • #1314 e8a6850 Thanks @mrm007! - Resolve and pass a new copy of the Vite config to the vite-node compiler

    Previously, we were passing the same Vite config object to the vite-node compiler. This was causing compatibility issues with other plugins, such as Vitest and Remix.

  • Updated dependencies [e8a6850]:

4.0.3

Patch Changes

  • #1309 fdafb6d Thanks @mrm007! - Correctly resolve module paths when using Vite plugins that affect module resolution, such as vite-tsconfig-paths

  • #1308 20e33a5 Thanks @mrm007! - Don't pass Remix Vite plugin to the vite-node compiler

    Remix throws an error if it's loaded without a config file, which is what we do when we initialise the vite-node compiler.

  • Updated dependencies [fdafb6d]:

4.0.2

Patch Changes

4.0.1

Patch Changes

4.0.0

Major Changes

  • #1264 e531c41 Thanks @mrm007! - The Vite plugin now uses a newer, faster, Vite-based compiler by default.

    The new compiler uses vite-node to parse and extract CSS from .css.ts files. This comes with all the benefits of using Vite, faster builds and the ability to use Vite plugins.

    The new compiler has been used in Remix ever since support for Vanilla Extract was introduced.

  • #1264 e531c41 Thanks @mrm007! - The behaviour previously known as emitCssInSsr has been turned on by default. The emitCssInSsr option has been removed.

    This means that the CSS emitted by the plugin is now processed by Vite, so the plugin no longer needs to resolve PostCSS plugins and process the CSS output itself.

  • #1264 e531c41 Thanks @mrm007! - The esbuildOptions option has been removed as we are no longer using esbuild internally

  • #1264 e531c41 Thanks @mrm007! - Drop support for Vite < 4

Patch Changes

3.9.5

Patch Changes

3.9.4

Patch Changes

3.9.3

Patch Changes

3.9.2

Patch Changes

3.9.1

Patch Changes

  • #1231 cdd5150 Thanks @mrm007! - Bump postcss-load-config to enable loading PostCSS configs defined as ES Modules

3.9.0

Minor Changes

3.8.2

Patch Changes

3.8.1

Patch Changes

  • #1066 0d0ea39 Thanks @askoufis! - Fix stale emitted CSS in SSR mode by invalidating all modules related to a file

3.8.0

Minor Changes

  • #989 669a61f Thanks @michaeltaranto! - Add emitCssInSsr option

    Provides the ability to opt in to emitting CSS during SSR.

    // vite.config.js

import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin';

export default {
  plugins: [
    vanillaExtractPlugin({
      emitCssInSsr: true
    })
  ]
};

3.7.1

Patch Changes

3.7.0

Minor Changes

Patch Changes

3.6.1

Patch Changes

3.6.0

Minor Changes

  • #827 9cfb9a1 Thanks @mattcompiles! - Add automatic debug IDs

    Automatic debug IDs allow your styles and other identifiers (e.g. CSS Vars, keyframes, etc) to have names that more closely reflect your source code when in development. This makes it easier to understand how the CSS output links to your source code.

    // styles.css.ts

// redBox ~= 'styles_redBox_asdfgj'
const redBox = style({
  background: 'red'
});

Patch Changes

3.5.0

Minor Changes

3.4.0

Minor Changes

3.3.1

Patch Changes

  • #781 4fb9a2c Thanks @benjervis! - Adds a check for the existence of import.meta.hot before attempting to add an event listener to inject styles

3.3.0

Minor Changes

Patch Changes

3.2.1

Patch Changes

  • #729 02ea735 Thanks @danielroe! - Generate CSS and not HMR code if vite server is present in production mode

3.2.0

Minor Changes

Patch Changes

3.1.7

Patch Changes

3.1.6

Patch Changes

3.1.5

Patch Changes

3.1.4

Patch Changes

3.1.3

Patch Changes

3.1.2

Patch Changes

3.1.1

Patch Changes

  • #530 0d7f912 Thanks @benjervis! - Fix compatibility issues with [email protected]

    Vite 2.7 introduced some breaking changes around the way SSR was indicated in plugins. The plugin has been updated to handle both the old and new formats, so it should support both 2.7 forward, as well as previous versions.

3.1.0

Minor Changes

  • #517 64791f3 Thanks @benjervis! - Add postcss processing to the plugin

    Vite supports postcss processing as a built in feature, but that's lost in dev mode with vanilla-extract because there are no actual css files for vite to pick up.

    The vite plugin now manually runs postcss over the generated css in serve mode, if any postcss config was found.

Patch Changes

3.0.1

Patch Changes

3.0.0

Major Changes

Patch Changes

  • #422 4e5ba05 Thanks @mattcompiles! - Fix HMR for pre-existing CSS

    Previously, styles would not hot reload correctly when returning to a previously cached version

2.1.3

Patch Changes

  • #409 a9c5cb7 Thanks @benjervis! - Fix plugin for watch mode.

    The vite plugin previously relied on a one to one matching of resolve to load calls, and would clean up the CSS stored in memory after it was loaded.

    This isn't true in --watch mode, as the same file can be loaded on the rebuild without having to be resolved, which the plugin now handles.

  • #409 a9c5cb7 Thanks @benjervis! - Update the "vanilla-extract" devStyleRuntime option.

    When using the vanilla browser runtime in vite, it now operates on a new model where a .css.js file is generated, that uses @vanilla-extract/css/injectStyles to add the css to the browser.

    This allows for hot reloading of styles, and makes styles a bit easier to debug at dev time (because they're actually visible).

  • #409 a9c5cb7 Thanks @benjervis! - Handle vite 2.6.

    As of vite 2.6 and greater, ?used gets appended to css imports, which causes the file imports to be not what we expected.

    This caused mismatching classnames in the vite plugin, and it caused the babel plugin to not add filescopes when it should have.

  • #409 a9c5cb7 Thanks @benjervis! - Automatically optimize deps.

    When using the new vanilla browser runtime, the new injectStyles dependency gets injected at runtime, so vite can't discover it ahead of time and pre-bundle it.

    The plugin will now add the dependency to optimizeDeps if the vanilla runtime is being used so that it's optimized up front. It also ensures that some relevant vanilla packages are externalised in SSR mode.

  • Updated dependencies [a9c5cb7]:

2.1.2

Patch Changes

  • #398 63f4ed0 Thanks @benjervis! - Fixes a bug with vite where "?used" is appended to the file path of css files.

    This could cause different class name hashes to be generated between SSR and client builds. This was introduced in vite 2.6.0.

2.1.1

Patch Changes

2.1.0

Minor Changes

  • #373 a55d2cf Thanks @mattcompiles! - Add devStyleRuntime option to allow switching between dev style runtimes

    The built-in Vite dev style runtime (what adds styles to the page when running vite serve) doesn't seem to clean up old styles as expected. Passing devStyleRuntime: 'vanilla-extract' will instead use vanilla-extract's browser runtime. This pushes all style creation in development to the browser, but may give a better HMR experience.

2.0.2

Patch Changes

2.0.1

Patch Changes

  • #327 73b55f8 Thanks @benjervis! - Fix bug where precompiled .css.ts files (.css.js) were treated differently in SSR mode.

2.0.0

Major Changes

  • #323 1e7d647 Thanks @mattcompiles! - Formatting of identifiers (e.g. class names, keyframes, CSS Vars, etc) can now be configured via the identifiers option which accepts either short or debug.

    • short identifiers are a 7+ character hash. e.g. hnw5tz3
    • debug identifiers contain human readable prefixes representing the owning filename and a potential rule level debug name. e.g. somefile_mystyle_hnw5tz3
    import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin';

vanillaExtractPlugin({ identifiers: 'short' });

    BREAKING CHANGE

    Previously identifiers were formatted as short when process.env.NODE_ENV was set to "production". By default, they will now be formatted according to Vite's mode config.

Patch Changes

1.2.0

Minor Changes

  • #311 416eb9a Thanks @mattcompiles! - In SSR mode, move to runtime evaluation of vanilla-extract files

    This unlocks the potential for CSS extraction on the server.

1.1.2

Patch Changes

1.1.1

Patch Changes

1.1.0

Minor Changes

  • #259 b8a6441 Thanks @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.

    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

1.0.0

Major Changes

Patch Changes

0.1.1

Patch Changes

  • #96 697a233 Thanks @mattcompiles! - Change vite-plugin to be a named export

    BREAKING CHANGE

    -import vanillaExtractPlugin from '@vanilla-extract/vite-plugin';
+import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin';

// vite.config.js
export default {
  plugins: [vanillaExtractPlugin()]
}