ionic-team / ionic-team/ionic-framework

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

Open
#30,024 6 comments 7 reactions 0 assignees View on GitHub
package: core type: bug
Dominant language
TypeScript
Stars
52.7k
Forks
13.3k
Avg merge
1d 15h
Merged PRs (30d)
51

Description

### Prerequisites

- [X] I have read the [Contributing Guidelines](https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#creating-an-issue).
- [X] I agree to follow the [Code of Conduct](https://ionicframework.com/code-of-conduct).
- [X] I have searched for [existing issues](https://github.com/ionic-team/ionic-framework/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

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

### Code Reproduction URL

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

### Ionic Info

Latest stackblitz

### Additional Information

_No response_

Contributor guide

Open the contributing guide

Research direction

Start with the linked StackBlitz reproduction and its vite.config.js, then run npm run build to reproduce the warnings. Trace where Ionic's CSS is compiled and verify that the build completes without the deprecated host-context pseudo-class warnings.

Written by the indexing model from the issue text.

Assessment

Tech stack
css
Domain
build-system, frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
55/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.