Comments (1)
Hey! So supporting responsive variants is something that macaron doesn't currently support, due to the fact that it also couples runtime style insertion, and macaron's main aim is to move style generation to compile time.
One way to do this while not generating styles at runtime though, something that can be added to macaron as well in the future, is to use window.matchMedia
API and check if it is matching the breakpoint, something like:
function getScreen() {
if (window.matchMedia("(max-width: 768px)")) {
return "sm";
} else if (window.matchMedia("(max-width: 1024px)")) {
return "md"
} else {
return "lg";
}
}
const screenSize = getScreenSize();
<Box d={screenSize == 'md' ? 'grid' : 'flex'} />
from macaron.
Related Issues (20)
- Shipping native Macaron functions along with design system HOT 1
- Svelte/general vite support? HOT 4
- Sprinkles-like API HOT 4
- Esbuild example with .html HOT 1
- Macro system does not support calling a function which calls `styled` HOT 6
- [plugin:vite:import-analysis] Failed to parse source for import analysis because the content contains invalid JS syntax. If you are using JSX, make sure to name the file with the .jsx or .tsx extension. HOT 4
- Question: is it possible to use child selectors?
- styled first parameter needs extended typing HOT 2
- Dynamic styling example in docs doesn't work HOT 4
- Forward prop types when styling a custom component HOT 7
- Ability to extend babel config in Vite? HOT 2
- Prop "as" of styled components can be a component HOT 4
- Console warning when sourcemaps are enabled HOT 2
- Integration of Kobalte or Ark with Macaron: Is it Possible to Combine Them? HOT 2
- Vite build watch doesn't work with Macaron HOT 7
- styled components don't overwrite their parent when they come from another file
- qwik js support HOT 3
- Dynamic styling example in docs (still) doesn't work HOT 2
- [URGENT] Vite 5.0.10 upgrade not working with Macaron HOT 4
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 macaron.