bug: warnings when compiling Ionic css with lightningcss - ionic outputs deprecated host-context pseudo-class

Prerequisites

I have read the Contributing Guidelines.
I agree to follow the Code of Conduct.
I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v8.x

Current Behavior

When I compile Ionic Framework's css with lightningcss, I see the following error multiple times:

'host-context' is not recognized as a valid pseudo-class. Did you mean '::host-context' (pseudo-element) or is this a typo?

Expected Behavior

No warnings

Steps to Reproduce

Go to https://stackblitz.com/edit/meehep-hzppdu?file=vite.config.js
In console, npm run build
See warnings

Code Reproduction URL

https://stackblitz.com/edit/meehep-hzppdu?file=vite.config.js

Ionic Info

Latest stackblitz

Additional Information

No response

Looks like host-context is probably being removed from the spec anyways. So maybe this issue should just be to remove deprecated host-context from Ionic usage.

parcel-bundler/lightningcss#545 (comment)

w3c/csswg-drafts#1914 (comment)

any news?

Lightningcss appears to be the default in Vite 8, so now anyone building an Ionic app with Vite will see this error.

If you are using Vite 8 and you want to avoid this warning, you can set minify to esbuild in vite.config.ts:

  return defineConfig({
    build: {
      // Use esbuild for CSS minification instead of the Vite 8 default
      // (lightningcss), which warns about Ionic's :host-context()
      // pseudo-class.
      cssMinify: 'esbuild',

Is a fix planned for this?

I recently update to vite 8 and now get these warnings in my build output. Changing cssMinify to esbuild doesn't fix it for me. Would appreciate it if this could get fixed sooner rather than later.

Working workaround consists in wrapping the default logger to make it silent about host-context inside the vite.config.ts at the root of the project.

import { createLogger, defineConfig } from 'vite';

const logger = createLogger();
const loggerWarn = logger.warn;
logger.warn = (msg, options) => {
  if (msg.includes('host-context')) return;
  loggerWarn(msg, options);
};

// https://vitejs.dev/config/
export default defineConfig({
  // ...
  customLogger: logger,
});

Hey everyone, thanks for your patience on this issue! This has been resolved in #31516 and will be released in our next patch release

fix(css): stop emitting :host-context selectors in global stylesheets (…

This has been fixed in v9.0.7!

Navigation Menu

Repository navigation

bug: warnings when compiling Ionic css with lightningcss - ionic outputs deprecated host-context pseudo-class #30024

Prerequisites

Ionic Framework Version

Current Behavior

Expected Behavior

Steps to Reproduce

Code Reproduction URL

Ionic Info

Additional Information

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

bug: warnings when compiling Ionic css with lightningcss - ionic outputs deprecated host-context pseudo-class #30024

Description

Prerequisites

Ionic Framework Version

Current Behavior

Expected Behavior

Steps to Reproduce

Code Reproduction URL

Ionic Info

Additional Information

Activity

aeharding commented on Nov 19, 2024

reslear commented on Sep 30, 2025

aeharding commented on Mar 14, 2026

ptmkenny commented on Apr 3, 2026

jacobg commented on May 5, 2026

fabian-meisinger commented on May 19, 2026

Alain-Bearez commented on Sep 26, 2026

ShaneK commented on Oct 2, 2026

ShaneK commented on Oct 7, 2026

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions