feat: add support for media queries #261
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,4 +1,4 @@ | ||
| import { MediaCondition, MediaQuery, QueryFeatureFor_MediaFeatureId } from 'lightningcss' | ||
| import { ColorScheme, Orientation } from '../../types' | ||
| import { MediaQueryResolver, Platform } from '../types' | ||
| import type { ProcessorBuilder } from './processor' | ||
|
|
@@ -18,20 +18,26 @@ export class MQ { | |
| return | ||
| } | ||
|
|
||
| if (condition) this.processCondition(condition, mq) | ||
| }) | ||
|
|
||
| return mq | ||
| } | ||
|
|
||
| private processCondition(condition: MediaCondition, mq: MediaQueryResolver) { | ||
| if (condition.type === 'operation') { | ||
| condition.conditions.forEach(nestedCondition => { | ||
| this.processCondition(nestedCondition, mq) | ||
| }) | ||
| } else if (condition.type === 'feature') { | ||
| if (condition.value.type === 'range') { | ||
| this.processWidthMediaQuery(condition.value, mq) | ||
| } | ||
|
|
||
| if (condition.value.type === 'plain') { | ||
| this.processPlainMediaQuery(condition.value, mq) | ||
| } | ||
| } | ||
| } | ||
|
Comment on lines
+27
to
41
There was a problem hiding this comment. 🧩 Analysis chain🏁 Script executed: #!/bin/bash
# Search for MediaCondition import and type definition
rg -n "MediaCondition" packages/uniwind/src/metro/processor/mq.ts -C 2Repository: uni-stack/uniwind Length of output: 482 🏁 Script executed: #!/bin/bash
# Search for Lightning CSS imports and any type definitions in the project
rg -n "from.*lightningcss" packages/uniwind/ --type tsRepository: uni-stack/uniwind Length of output: 1255 🏁 Script executed: #!/bin/bash
# Check if there are any type definition files or interfaces for MediaCondition
fd -e d.ts -e ts | head -20 | xargs grep -l "MediaCondition" 2>/dev/null || echo "No type definition files found"Repository: uni-stack/uniwind Length of output: 91 🏁 Script executed: #!/bin/bash
# Search for any documentation or comments about condition types
rg -n "condition\.type" packages/uniwind/ --type ts -C 1Repository: uni-stack/uniwind Length of output: 647 🌐 Web query:
💡 Result: Short answer: Lightning CSS represents parsed media queries with a MediaCondition union whose variants are objects with a type field such as "type", "feature", "operation", and "not" (plus a few others like "style"/container-related variants). Each variant means:
See Lightning CSS docs and the TypeScript AST typings (lightningcss-wasm) for the exact shapes of the nodes. [1][2] Sources:
🌐 Web query:
💡 Result: In Lightning CSS the MediaCondition AST (media_query::MediaCondition) has three node kinds you asked about:
Sources: docs for lightningcss media_query (MediaCondition / QueryFeature). [1][2] References Citations:
🏁 Script executed: #!/bin/bash
# Check if there are any tests or other usages of processCondition to understand expected behavior
rg -n "processCondition\|MediaCondition" packages/uniwind/ --type ts -B 2 -A 5 | head -60Repository: uni-stack/uniwind Length of output: 43 🏁 Script executed: #!/bin/bash
# Search for any handling of 'not' or 'type' condition types in the entire codebase
rg -n "condition\.type.*=.*['\"]not['\"]|condition\.type.*=.*['\"]type['\"]" packages/uniwind/ --type tsRepository: uni-stack/uniwind Length of output: 43 🏁 Script executed: #!/bin/bash
# Check the full context of the processCondition method and surrounding code
cat -n packages/uniwind/src/metro/processor/mq.ts | head -50Repository: uni-stack/uniwind Length of output: 2202 Handle missing MediaCondition types: 'not' and 'type'. The current implementation only processes Add handling for both:
|
||
|
|
||
| private processWidthMediaQuery(query: QueryFeatureFor_MediaFeatureId & { type: 'range' }, mq: MediaQueryResolver) { | ||
|
|
||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| @import 'tailwindcss'; | ||
| @import 'uniwind'; | ||
|
|
||
| @layer theme { | ||
| :root { | ||
| --color-primary: #000000; | ||
| } | ||
| } | ||
|
|
||
| @media (prefers-color-scheme: dark) { | ||
| :root { | ||
| --color-primary: #ffffff; | ||
| } | ||
| } | ||
|
|
||
| .text-color-primary { | ||
| color: var(--color-primary); | ||
| } | ||
|
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@Brentlok Kindly review this:
The coderabbitai has reviewed most part of the code, but I'll need an in-dept review of this method resolving media queries at runtime