Comments (2)
Since esbuild passes through all CSS it doesn't understand, your example seems like it should already work fine. What needs to be added to esbuild for you to consider esbuild to have support? Just nicer formatting for the @position-try
rule? Anything else?
from esbuild.
Shorthand
position-try: <'position-try-order'>? <'position-try-options'>
Input
.foo {
position-try-order: most-width;
position-try-options: flip-block;
}
Expected
Note: I've kept all the whitespace for ease of reading.
.foo {
position-try: most-width flip-block;
}
When position-anchor
is present, <anchor-element>
can be omitted from anchor()
and anchor-size()
Input
.foo {
position: absolute;
position-anchor: --target-something;
top: anchor(--target-something bottom, 20px);
width: calc(anchor-size(--target-something block) * 2);
}
/* Demo: https://codepen.io/web-dot-dev/pen/ZEMpBzP */
.container {
position: absolute;
position-anchor: --handle-1;
inset: anchor(--handle-1 top) anchor(--handle-2 right)
anchor(--handle-2 bottom) anchor(--handle-1 left);
}
Expected
.foo {
position: absolute;
position-anchor: --target-something;
top: anchor(bottom, 20px);
width: calc(anchor-size(block) * 2);
}
.container {
position: absolute;
position-anchor: --handle-1;
inset: anchor(top) anchor(--handle-2 right)
anchor(--handle-2 bottom) anchor(left);
}
Converts keywords in anchor()
to percentages.
https://drafts.csswg.org/css-anchor-position-1/#valdef-anchor-center
Refers to a position a corresponding percentage between the start and end sides, with 0% being equivalent to start and 100% being equivalent to end.
center is equivalent to 50%.
The @position-try Rule
- Only specific attributes are allowed in
@position-try
, if others are present we need to throw a hint. - Remove the extra whitespace.
Convert to anchor(inside)
Demo:
Note:
inside/outside
was only implemented in Chrome 127.
Input
.foo {
left: anchor(var(--target) left);
right: anchor(var(--target) right);
top: anchor(var(--target) top);
bottom: anchor(var(--target) bottom);
}
.bar {
inset: anchor(start) anchor(end) anchor(end) anchor(start);
}
Expected
.foo {
inset: anchor(var(--target) inside);
}
.bar {
inset: anchor(inside);
}
There are more details to discover, I've just listed the most common ones.
from esbuild.
Related Issues (20)
- Question: How did you build a JS/TS parser from scratch? HOT 2
- Empty init functions generated for side-effect-free ESM modules HOT 4
- When transform nullish coalescing it transform != null which may lead to wrong result HOT 3
- Generate TypeScript declarations files for TypeScript projects with isolatedDeclarations enabled
- How can I use 'neutral' platform without getting 'The package "x" wasn't found on the file system but is built into node.' error? HOT 2
- DirectAdmin cannot backup application due to hardlink in esbuild HOT 2
- Import attributes should be enabled for `node18` and >= `node20` targets HOT 2
- Code splitting is creating many small unnecessary chunks HOT 1
- Class missing metadata field in certain cases
- Support for the new "${configDir}" template variable coming in TS v5.5.0 HOT 2
- esbuild tried to read "../../.." , in vite , using npm run dev HOT 2
- Destructuring bug in Safari when renamed parameter property is identical to the function name
- Class binding references in static field initializers should be resolved to the decorated class HOT 3
- `browsers` field not taken into account when using `exports`. HOT 1
- esbuild doesn't respect noImplicitUseStrict option in tsconfig.json HOT 1
- On-resolve result suffix property also requires path property?
- Substituting multi-use constants results in a larger bundle HOT 5
- Importing with a type attribute of "css" is not supported HOT 7
- Feature Request: Add polyfill for CSS `light-dark()`
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 esbuild.