The issue of vanilla-extract layers not being preserved in production

Overview

In my project using Remix (React Router v7) and vanilla-extract, I define the order of CSS rules using @layer.
However, I encountered an issue where the order of these layers was not preserved in the production environment.
This article serves as a memo on how I resolved that issue.

Problem

I was using globalLayer from vanilla-extract to define the layer order as shown below:

import { globalLayer } from '@vanilla-extract/css'

export const cssLayerReset = globalLayer('reset')

export const cssLayerComponentUiLow = globalLayer('componentUiLow')

export const cssLayerComponentUiMiddle = globalLayer('componentUiMiddle')

export const cssLayerComponentUiHigh = globalLayer('componentUiHigh')

export const cssLayerComponentCommon = globalLayer('componentCommon')

export const cssLayerComponentPage = globalLayer('componentPage')

export const cssLayerUtils = globalLayer('utils')

This worked correctly in the development environment, preserving the intended layer order.
However, in production, the order became inconsistent, causing certain styles to not be applied correctly.

Solution

To fix this issue, I explicitly defined the layer hierarchy by using the parent property when calling globalLayer.

import { globalLayer } from '@vanilla-extract/css'

export const cssLayerUtils = globalLayer('utils')

export const cssLayerComponentPage = globalLayer(
  {
    parent: cssLayerUtils,
  },
  'componentPage'
)

export const cssLayerComponentCommon = globalLayer(
  {
    parent: cssLayerComponentPage,
  },
  'componentCommon'
)

export const cssLayerComponentUiHigh = globalLayer(
  {
    parent: cssLayerComponentCommon,
  },
  'componentUiHigh'
)

export const cssLayerComponentUiMiddle = globalLayer(
  {
    parent: cssLayerComponentUiHigh,
  },
  'componentUiMiddle'
)

export const cssLayerComponentUiLow = globalLayer(
  {
    parent: cssLayerComponentUiMiddle,
  },
  'componentUiLow'
)

export const cssLayerReset = globalLayer(
  {
    parent: cssLayerComponentUiLow,
  },
  'reset'
)

By defining the layers this way, I was able to maintain a consistent layer order between development and production environments.

Related

• Pull Request from when this fix was implemented
• globalLayer — vanilla-extract