Skip to content

Commit f035bfc

Browse files
devongovettdevongovett
authored
Implement view transitions level 2 (#885)
1 parent 7f29035 commit f035bfc

File tree

13 files changed

+849
-58
lines changed

13 files changed

+849
-58
lines changed

‎napi/src/transformer.rs‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -312,6 +312,7 @@ impl<'i> Visitor<'i, AtRule<'i>> for JsVisitor {
312312
CssRule::Nesting(..) => "nesting",
313313
CssRule::Viewport(..) => "viewport",
314314
CssRule::StartingStyle(..) => "starting-style",
315+
CssRule::ViewTransition(..) => "view-transition",
315316
CssRule::Unknown(v) => {
316317
let name = v.name.as_ref();
317318
if let Some(visit) = rule_map.custom(stage, "unknown", name) {

‎node/ast.d.ts‎

Lines changed: 97 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
/* tslint:disable */
1+
/* eslint-disable */
22
/**
33
* This file was automatically generated by json-schema-to-typescript.
44
* DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
@@ -89,6 +89,10 @@ export type Rule<D = Declaration, M = MediaQuery> = | {
8989
type: "starting-style";
9090
value: StartingStyleRule<D, M>;
9191
}
92+
| {
93+
type: "view-transition";
94+
value: ViewTransitionRule;
95+
}
9296
| {
9397
type: "ignored";
9498
}
@@ -2342,6 +2346,12 @@ export type PropertyId =
23422346
| {
23432347
property: "view-transition-name";
23442348
}
2349+
| {
2350+
property: "view-transition-class";
2351+
}
2352+
| {
2353+
property: "view-transition-group";
2354+
}
23452355
| {
23462356
property: "color-scheme";
23472357
}
@@ -3819,7 +3829,15 @@ export type Declaration =
38193829
}
38203830
| {
38213831
property: "view-transition-name";
3822-
value: String;
3832+
value: ViewTransitionName;
3833+
}
3834+
| {
3835+
property: "view-transition-class";
3836+
value: NoneOrCustomIdentList;
3837+
}
3838+
| {
3839+
property: "view-transition-group";
3840+
value: ViewTransitionGroup;
38233841
}
38243842
| {
38253843
property: "color-scheme";
@@ -6406,6 +6424,21 @@ export type ContainerNameList =
64066424
type: "names";
64076425
value: String[];
64086426
};
6427+
/**
6428+
* A value for the [view-transition-name](https://drafts.csswg.org/css-view-transitions-1/#view-transition-name-prop) property.
6429+
*/
6430+
export type ViewTransitionName =
6431+
"none" | "auto" | String;
6432+
/**
6433+
* The `none` keyword, or a space-separated list of custom idents.
6434+
*/
6435+
export type NoneOrCustomIdentList =
6436+
"none" | String[];
6437+
/**
6438+
* A value for the [view-transition-group](https://drafts.csswg.org/css-view-transitions-2/#view-transition-group-prop) property.
6439+
*/
6440+
export type ViewTransitionGroup =
6441+
"normal" | "contain" | "nearest" | String;
64096442
/**
64106443
* A [CSS-wide keyword](https://drafts.csswg.org/css-cascade-5/#defaulting-keywords).
64116444
*/
@@ -6733,6 +6766,16 @@ export type PseudoClass =
67336766
kind: "autofill";
67346767
vendorPrefix: VendorPrefix;
67356768
}
6769+
| {
6770+
kind: "active-view-transition";
6771+
}
6772+
| {
6773+
kind: "active-view-transition-type";
6774+
/**
6775+
* A view transition type.
6776+
*/
6777+
type: String[];
6778+
}
67366779
| {
67376780
kind: "local";
67386781
/**
@@ -6864,28 +6907,28 @@ export type PseudoElement =
68646907
/**
68656908
* A part name selector.
68666909
*/
6867-
partName: ViewTransitionPartName;
6910+
part: ViewTransitionPartSelector;
68686911
}
68696912
| {
68706913
kind: "view-transition-image-pair";
68716914
/**
68726915
* A part name selector.
68736916
*/
6874-
partName: ViewTransitionPartName;
6917+
part: ViewTransitionPartSelector;
68756918
}
68766919
| {
68776920
kind: "view-transition-old";
68786921
/**
68796922
* A part name selector.
68806923
*/
6881-
partName: ViewTransitionPartName;
6924+
part: ViewTransitionPartSelector;
68826925
}
68836926
| {
68846927
kind: "view-transition-new";
68856928
/**
68866929
* A part name selector.
68876930
*/
6888-
partName: ViewTransitionPartName;
6931+
part: ViewTransitionPartSelector;
68896932
}
68906933
| {
68916934
kind: "custom";
@@ -7413,6 +7456,28 @@ export type StyleQuery<D = Declaration> = | {
74137456
operator: Operator;
74147457
type: "operation";
74157458
};
7459+
/**
7460+
* A property within a `@view-transition` rule.
7461+
*
7462+
* See [ViewTransitionRule](ViewTransitionRule).
7463+
*/
7464+
export type ViewTransitionProperty =
7465+
| {
7466+
property: "navigation";
7467+
value: Navigation;
7468+
}
7469+
| {
7470+
property: "types";
7471+
value: NoneOrCustomIdentList;
7472+
}
7473+
| {
7474+
property: "custom";
7475+
value: CustomProperty;
7476+
};
7477+
/**
7478+
* A value for the [navigation](https://drafts.csswg.org/css-view-transitions-2/#view-transition-navigation-descriptor) property in a `@view-transition` rule.
7479+
*/
7480+
export type Navigation = "none" | "auto";
74167481
export type DefaultAtRule = null;
74177482

74187483
/**
@@ -9126,6 +9191,19 @@ export interface AttrOperation {
91269191
operator: AttrSelectorOperator;
91279192
value: string;
91289193
}
9194+
/**
9195+
* A [view transition part selector](https://w3c.github.io/csswg-drafts/css-view-transitions-1/#typedef-pt-name-selector).
9196+
*/
9197+
export interface ViewTransitionPartSelector {
9198+
/**
9199+
* A list of view transition classes.
9200+
*/
9201+
classes: String[];
9202+
/**
9203+
* The view transition part name.
9204+
*/
9205+
name?: ViewTransitionPartName | null;
9206+
}
91299207
/**
91309208
* A [@keyframes](https://drafts.csswg.org/css-animations/#keyframes) rule.
91319209
*/
@@ -9545,6 +9623,19 @@ export interface StartingStyleRule<D = Declaration, M = MediaQuery> {
95459623
*/
95469624
rules: Rule<D, M>[];
95479625
}
9626+
/**
9627+
* A [@view-transition](https://drafts.csswg.org/css-view-transitions-2/#view-transition-rule) rule.
9628+
*/
9629+
export interface ViewTransitionRule {
9630+
/**
9631+
* The location of the rule in the source file.
9632+
*/
9633+
loc: Location2;
9634+
/**
9635+
* Declarations in the `@view-transition` rule.
9636+
*/
9637+
properties: ViewTransitionProperty[];
9638+
}
95489639
/**
95499640
* An unknown at-rule, stored as raw tokens.
95509641
*/

‎scripts/build-ast.js‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -75,6 +75,27 @@ compileFromFile('node/ast.json', {
7575
if (types[2].type === 'TSTypeLiteral' && types[2].members[0].key.name === 'timelinerange') {
7676
path.get('typeAnnotation.types.2').replaceWith(path.node.typeAnnotation.types[2].members[0].typeAnnotation.typeAnnotation);
7777
}
78+
} else if (
79+
path.node.id.name === 'NoneOrCustomIdentList' &&
80+
path.node.typeAnnotation.type === 'TSUnionType' &&
81+
path.node.typeAnnotation.types[1].type === 'TSTypeLiteral' &&
82+
path.node.typeAnnotation.types[1].members[0].key.name === 'idents'
83+
) {
84+
path.get('typeAnnotation.types.1').replaceWith(path.node.typeAnnotation.types[1].members[0].typeAnnotation.typeAnnotation);
85+
} else if (
86+
path.node.id.name === 'ViewTransitionGroup' &&
87+
path.node.typeAnnotation.type === 'TSUnionType' &&
88+
path.node.typeAnnotation.types[3].type === 'TSTypeLiteral' &&
89+
path.node.typeAnnotation.types[3].members[0].key.name === 'custom'
90+
) {
91+
path.get('typeAnnotation.types.3').replaceWith(path.node.typeAnnotation.types[3].members[0].typeAnnotation.typeAnnotation);
92+
} else if (
93+
path.node.id.name === 'ViewTransitionName' &&
94+
path.node.typeAnnotation.type === 'TSUnionType' &&
95+
path.node.typeAnnotation.types[2].type === 'TSTypeLiteral' &&
96+
path.node.typeAnnotation.types[2].members[0].key.name === 'custom'
97+
) {
98+
path.get('typeAnnotation.types.2').replaceWith(path.node.typeAnnotation.types[2].members[0].typeAnnotation.typeAnnotation);
7899
}
79100
}
80101
});

‎scripts/build-prefixes.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -331,6 +331,7 @@ let mdnFeatures = {
331331
lightDark: mdn.css.types.color['light-dark'].__compat.support,
332332
accentSystemColor: mdn.css.types.color['system-color'].accentcolor_accentcolortext.__compat.support,
333333
animationTimelineShorthand: mdn.css.properties.animation['animation-timeline_included'].__compat.support,
334+
viewTransition: mdn.css.selectors['view-transition'].__compat.support,
334335
};
335336

336337
for (let key in mdn.css.types.length) {

‎src/compat.rs‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -212,6 +212,7 @@ pub enum Feature {
212212
VbUnit,
213213
VhUnit,
214214
ViUnit,
215+
ViewTransition,
215216
ViewportPercentageUnitsDynamic,
216217
ViewportPercentageUnitsLarge,
217218
ViewportPercentageUnitsSmall,
@@ -3464,6 +3465,46 @@ impl Feature {
34643465
return false;
34653466
}
34663467
}
3468+
Feature::ViewTransition => {
3469+
if let Some(version) = browsers.chrome {
3470+
if version < 7143424 {
3471+
return false;
3472+
}
3473+
}
3474+
if let Some(version) = browsers.edge {
3475+
if version < 7143424 {
3476+
return false;
3477+
}
3478+
}
3479+
if let Some(version) = browsers.opera {
3480+
if version < 4849664 {
3481+
return false;
3482+
}
3483+
}
3484+
if let Some(version) = browsers.safari {
3485+
if version < 1179648 {
3486+
return false;
3487+
}
3488+
}
3489+
if let Some(version) = browsers.ios_saf {
3490+
if version < 1179648 {
3491+
return false;
3492+
}
3493+
}
3494+
if let Some(version) = browsers.samsung {
3495+
if version < 1376256 {
3496+
return false;
3497+
}
3498+
}
3499+
if let Some(version) = browsers.android {
3500+
if version < 7143424 {
3501+
return false;
3502+
}
3503+
}
3504+
if browsers.firefox.is_some() || browsers.ie.is_some() {
3505+
return false;
3506+
}
3507+
}
34673508
Feature::QUnit => {
34683509
if let Some(version) = browsers.chrome {
34693510
if version < 4128768 {

0 commit comments

Comments
 (0)