Hacktoberfest 2026: die Issues, die Maintainer für den Oktober markiert haben – offen und einsteigerfreundlich. Hacktoberfest-Issues durchsuchen

Cannot specify media query in different module - Invalid pseudo or at-rule.

Offen
  • Stimmt etwas nicht?
#241 6 Kommentare 3 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

Bewertung

Schwierigkeit
4/5
Geschätzter Aufwand
3-5 Tage
Anfängerfreundlichkeit
35/100
Issue-Typ
Bug
Klarheit
Größtenteils klar
Aktivitätsstatus
Veraltet
Tech-Stack
typescript
Bereich
frontend

Rechercherichtung

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.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

bug bug: stylex
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.

  1. Create a basic RSD install
  2. Create a media.stylex.ts file
  3. Add this block to it
export const MEDIA = {
  md: "@media (min-width: 1024px)",
  lg: "@media (min-width: 1920px)",
};
  1. Create a Comp.tsx file
  2. 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

Vorherrschende Sprache
JavaScript
Sterne
3.6k
Forks
206
Keine gemergten PRs in 30 T.

Entwicklungsumgebung

Erste Schritte

  1. Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
  3. Forken Sie das Repository und arbeiten Sie in einem Branch.
  4. Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus react/react-strict-dom

Alle Issues in react/react-strict-dom

Ähnliche Issues

Weitere Issues zu JavaScript

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.