Comments (7)
@markdalgleish thank you! I think we can close this issue.
from vanilla-extract.
We could potentially also provide runtime APIs for setting vanilla vars on elements.
from vanilla-extract.
@duarten I think your use-case is already catered to by the createInlineTheme
API?
from vanilla-extract.
I'd probably model this as something like getVarName
that accepts a var created by vanilla-extract.
from vanilla-extract.
On that last point, thinking we could provide APIs like this:
setElementVar(el, themeVars.mode, 'dark')
assignElementVars(el, themeVars.space, {
small: '4px',
medium: '8px',
large: '12px'
})
from vanilla-extract.
I think I have another use case for such an API. Consider a Responsive<Height>>
, given
interface Responsive<T> { mobile: T, tablet: T, desktop: T }
type Height = 1 | 2 | 3 ... | "full"
To minimize the amount of classes generated, we could want to generate the following styles:
export const heightMobileVar = createVar();
export const heightTabletVar = createVar();
// ...
export const responsiveHeight = style({
'@media': {
'screen': {
height: heightMobileVar,
},
'screen and (min-width: 768px)': {
height: heightTabletVar
},
// ...
},
});
In my component, I would map from Responsive<Height>
to an assignment of theme values to those height variables. Something like the following:
// Theme values
const heights = {
1: "1px",
2: "2px",
// ...
fill: "100%",
} as const;
// createVars would be a new API
const heightVars: Record<screens, string> = createVars({ ... });
// assignVars would return a CSSProperties object.
<Component style={assignVars(heightVars, mapResponsive(heightProp, asLookup(heights))) ... />
from vanilla-extract.
Opened a PR for imperatively setting vars on elements at runtime: #25
from vanilla-extract.
Related Issues (20)
- issue with Typescript and Sprinkles HOT 1
- vanilla-extract/vite-plugin v4.0.4 does not work with custom TS paths/aliases in Astro HOT 6
- Errors running the Remix example on Windows OS HOT 3
- Windows css resolution HOT 2
- Empty layer definition duplicated HOT 2
- Broken link in documentation HOT 2
- Vite plugin fails to produce updated styles when run in watch mode HOT 7
- 4.x: Uncaught TypeError: e.constructor is not a function HOT 3
- Issue with selecting a child of a recipe HOT 2
- Cannot build a next app with Turbopack (Styles were unable to be assigned to a file) HOT 2
- Error 'No CSS for file' with vite watch mode HOT 9
- [VITE] Libraries shipping vanilla extract css loaded out of order when using vite HOT 1
- Next.js: Styles not loading after navigation with mixed pages/app HOT 3
- Error when updating Next.js to 14.2.2 version while using lodash-es in a @vanilla-extract/css file HOT 2
- Doesn't work since v4 HOT 2
- vite plugin fails to resolve files when full path starts with `/app` (remix, docker)
- 4.x breaks vite pre-rendering HOT 1
- Multline strings + webpack + storybook gives syntax error HOT 5
- @vanilla-extract/[email protected] hangs Vite build HOT 5
- Bad Error message when trying to use props values as Css values HOT 7
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 vanilla-extract.