react / react/react-strict-dom
Cannot specify media query in different module - Invalid pseudo or at-rule.
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 3.6k
- Forks
- 206
- PR merge metrics
- No merged PRs in 30d
Description
Describe the issue
Im getting an error when I try to specify a helper for media queries to not have to write the string in every condition (or a const in every module I want to use it)
Invalid pseudo or at-rule.
If I specify the const in the same module, it works.
It doesn't matter if it is in a .stylex.ts file or .ts only.
// media.stylex.ts or media.ts
export const MEDIA = {
md: "@media (min-width: 1024px)",
lg: "@media (min-width: 1920px)",
};
//Component.tsx
const styles = css.create({
comp: {
width: {
default: 100,
[MEDIA.md]: 200
}
}
})
export const Comp = () => {
return <html.div style={styles.comp} />
}
Expected behavior
Expect to be able to import media query helper from a different module.
Steps to reproduce
Basic setup.
- Create a basic RSD install
- Create a media.stylex.ts file
- Add this block to it
export const MEDIA = {
md: "@media (min-width: 1024px)",
lg: "@media (min-width: 1920px)",
};
- Create a Comp.tsx file
- Add a component using this media query and import the MEDIA const from the other module
const styles = css.create({
comp: {
width: {
default: 100,
[MEDIA.md]: 200
}
}
})
export const Comp = () => {
return <html.div style={styles.comp}>Hello</html.div>
}
Test case
No response
Additional comments
strict-dom version 0.0.27
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reproducing the issue with media.stylex.ts or media.ts exporting MEDIA and Comp.tsx importing it, using strict-dom 0.0.27. Trace how the imported media key is handled and compare it with an equivalent constant declared in the component module. Done means the cross-module helper works without the “Invalid pseudo or at-rule” error, with regression coverage for the reported example.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100