Comments (6)
Please see the docs for the correct media query syntax https://stylexjs.com/docs/learn/styling-ui/defining-styles/#media-queries-and-other--rules
from stylex.
Thank you for clarification!
from stylex.
Overlapping media queries can currently break. Use this instead:
gridTemplateColumns: {
default: "repeat(4, minmax(0, 1fr))",
"@media (max-width: 1100px) and (min-width: 900px)": "repeat(3, minmax(0, 1fr))",
"@media (max-width: 900px) and (min-width: 700px)": "repeat(2, minmax(0, 1fr))",
"@media (max-width: 700px)": "1fr",
},
I know this is annoying and this will done automatically soon.
from stylex.
thank you, I deleted my post since: i thought it was my fault.
got it to work following the docs:
gridTemplateColumns: {
default: "repeat(3, minmax(0, 1fr))",
'@media (max-width: 700px)': "1fr",
'@media (min-width: 1240px)': "repeat(4, minmax(0, 1fr))",
},
your solution is better!
from stylex.
Thanks @necolas.
Unless I miss something, the syntax doesn't solve the issue
const styles = stylex.create({
foo: {
color: {
default: "red",
'@media (min-width: 10px)': "blue",
"@media (min-width: 20px)": "green"
}
}
});
gets babel transformed to
stylex.inject(".x1e2nbdu{color:red}", 3000);
stylex.inject("@media (min-width: 10px){.xw7d59y.xw7d59y{color:blue}}", 3200);
stylex.inject("@media (min-width: 20px){.xwdmb1y.xwdmb1y{color:green}}", 3200);
Notice @media (min-width: 10px){.xw7d59y.xw7d59y{color:blue}}
has the same priority as @media (min-width: 20px){.xwdmb1y.xwdmb1y{color:green}}
.
What I look for is that @media (min-width: 20px){...}
should have the higher priority than @media (min-width: 10px){...}
.
from stylex.
@liamqma It is your responsibility to ensure that your "conditions" when applying various values for a property do not conflict.
const styles = stylex.create({
foo: {
color: {
default: "red",
'@media (min-width: 10px) and (max-width: 20px)': "blue",
"@media (min-width: 20px)": "green"
}
}
});
There is an ESLint rule planned to detect conflicts and we're also discussing the possibility of automating more of this in the compiler itself.
from stylex.
Related Issues (20)
- Focus for input type range HOT 1
- Integration with Create React App by default, including types support for typescript HOT 2
- RFC: esbuild plugin HOT 2
- An option for the babel plugin that transforms the debug/dev classes. HOT 2
- Support Older React Versions HOT 3
- CSS Properties don't get written (esbuild) HOT 1
- Add ability to customise class names generation so we can use one letter classnames. HOT 5
- StyleX Plugin for Bun.sh Bundler HOT 6
- gridTemplateRows 0fr is being compiled to 0px, which breaks css transition HOT 4
- esbuild plugin with write:false should set file name HOT 3
- [RFC] Define value for multiple pseudo-classes at one HOT 2
- [@styles/open-props]: Has any plan/progress to support `ESM`? HOT 2
- Strange :not(#\\#) selector HOT 1
- Add option to support vertical writing modes in modern browsers
- How can I use container queries with StyleX? HOT 1
- I can't make changes to the interface (next.js & react) HOT 1
- Media query specificity order. Certian properties broken (`gridColumn`) HOT 3
- Only static values are allowed inside of a stylex.create() call. HOT 5
- Need help with Qwik.
- '0px' vars are compiled to '0' which leads to error at best, unpredicatable results at worst HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from stylex.