Hacktoberfest 2026 : les issues que les mainteneurs ont marquées pour octobre, ouvertes et accessibles aux débutants. Parcourir les issues Hacktoberfest

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

Ouverte
  • Quelque chose ne va pas ?
#241 6 commentaires 3 réactions 0 personnes assignées Voir sur GitHub

Personne n'a encore pris cette issue.

Évaluation

Difficulté
4/5
Temps estimé
3-5 jours
Accessibilité débutants
35/100
Type d'issue
Bug
Clarté
Plutôt claire
Activité
À l'abandon
Stack technique
typescript
Domaine
frontend

Piste de recherche

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.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Description

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

Langage dominant
JavaScript
Étoiles
3.6k
Forks
206
Aucune PR mergée en 30 j

Préparer son environnement

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Autres issues de react/react-strict-dom

Toutes les issues de react/react-strict-dom

Issues similaires

Plus d'issues JavaScript

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.