Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: new typings #594

Draft
wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

chore: new typings #594

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
54 changes: 27 additions & 27 deletions e2e/typescript/src/assets/fixture-reset.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -132,41 +132,41 @@ assertType({
});

assertType({
'.bar': { color: 'beige' },
'.foo': { padding: '5px' },
'.qux': { paddingLeft: '5px' },
'&.bar': { color: 'beige' },
'&.foo': { padding: '5px' },
'&.qux': { paddingLeft: '5px' },
});

assertType({
'.bar': { '--color': 'red' },
'&.bar': { '--color': 'red' },
});
assertType({
'.bar': { animationName: { from: {}, to: {} } },
'&.bar': { animationName: { from: {}, to: {} } },
});

// Nested custom selectors
//

assertType({
'.foo': {
'.bar': { flexShrink: 0 },
'.baz': { flexShrink: 'initial' },
'.qux': { opacity: 0 },
'.fred': { zIndex: 0 },
'.thud': { zIndex: 1 },
'&.foo': {
'&.bar': { flexShrink: 0 },
'&.baz': { flexShrink: 'initial' },
'&.qux': { opacity: 0 },
'&.fred': { zIndex: 0 },
'&.thud': { zIndex: 1 },
},
'.bar': {
'.baz': { color: 'beige' },
'.qux': { paddingLeft: '5px' },
'&.bar': {
'&.baz': { color: 'beige' },
'&.qux': { paddingLeft: '5px' },
},
'.baz': {
'.qux': {
'&.baz': {
'&.qux': {
'--color': 'red',
},
},
'.qux': {
'.bar': { flexShrink: 'var(--bar)' },
'.baz': { opacity: 'var(--baz)' },
'&.qux': {
'&.bar': { flexShrink: 'var(--bar)' },
'&.baz': { opacity: 'var(--baz)' },
},
});

Expand Down Expand Up @@ -326,8 +326,8 @@ assertType({
//

assertType({
'.foo': {
'.baz': {
'&.foo': {
'&.baz': {
// @ts-expect-error "1" is invalid value for "overflowX"
overflowX: '1',
padding: 0,
Expand All @@ -337,37 +337,37 @@ assertType({
},
});
assertType({
'.foo': {
'&.foo': {
// @ts-expect-error outline-box is an invalid value for box-sizing
boxSizing: 'outline-box',

'.bar': {
'&.bar': {
// @ts-expect-error outline-box is an invalid value for box-sizing
boxSizing: 'outline-box', // < no error here, TS only reports the error for the whole object
},
},
});
assertType({
'.foo': {
'&.foo': {
// @ts-expect-error outline-box is an invalid value for box-sizing
boxSizing: 'outline-box',
zIndex: 1,

'.bar': {
'&.bar': {
// @ts-expect-error outline-box is an invalid value for box-sizing
boxSizing: 'outline-box',
zIndex: 1,
},
},
});
assertType({
'.foo': {
'&.foo': {
// @ts-expect-error Object is not assignable to CSS property
zIndex: { color: 'red' },
// @ts-expect-error Object is not assignable to CSS property
opacity: { color: 'red' },

'.bar': {
'&.bar': {
// @ts-expect-error Object is not assignable to CSS property
zIndex: { color: 'red' },
// @ts-expect-error Object is not assignable to CSS property
Expand Down
110 changes: 80 additions & 30 deletions e2e/typescript/src/assets/fixture.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,15 @@ assertType({
},
});

assertType({
':hover': { animationName: { from: {}, to: {} } },
});
assertType({
'&.bar': {
animationName: { from: {}, to: {} },
},
});

assertType({
// @ts-expect-error "200" is not a valid CSS value for "height"
animationName: {
Expand All @@ -43,6 +52,16 @@ assertType({
from: { '--opacity': 0 },
},
});
assertType({
animationName: {
from: {
// @ts-expect-error Only strings can be used as values for CSS variables
'&.foo': {
color: 'red',
},
},
},
});

// Basic styles
//
Expand All @@ -55,6 +74,13 @@ assertType({ zIndex: 1 });
assertType({ paddingLeft: '5px' });
assertType({ color: 'beige' });

assertType({ WebkitBackgroundSize: 'initial' });

// @ts-expect-error Properties should be camelCase
assertType({ 'padding-left': 'beige' });
// @ts-expect-error Properties should be camelCase
assertType({ '-webkit-scrollbar': 'beige' });

// CSS variables
//

Expand Down Expand Up @@ -102,23 +128,25 @@ assertType({
assertType({
':hover': { content: "'foo'" },
});
assertType({
':hover': { animationName: { from: {}, to: {} } },
});

assertType({
// @ts-expect-error Values of selectors can be only objects
':hover': 'red',
});
assertType({
// @ts-expect-error ":foo" is not valid pseudo selector
':foo': { flexShrink: 0 },
});

// Custom selectors
// Complex pseudo selectors
//

assertType({
':hover:focus': { flexShrink: 0 },
':hover:active': { flexShrink: 'initial' },
':hover:visited': { zIndex: 0 },
':hover:focus-visible': { zIndex: 1 },
':hover &.foo': { zIndex: 1 },
});

assertType({
Expand All @@ -129,40 +157,62 @@ assertType({
});

assertType({
'.bar': { color: 'beige' },
'.foo': { paddingLeft: '5px' },
// @ts-expect-error Values of selectors can be only objects
':hover:focus': 'red',
});
assertType({
// @ts-expect-error ":foo" is not valid pseudo selector
':foo:hover': { flexShrink: 0 },
});
assertType({
// @ts-expect-error ":foo" is not valid pseudo selector
':foo &.bar': { flexShrink: 0 },
});

// Custom selectors
//

assertType({
'&.bar': { color: 'beige' },
'&.foo': { paddingLeft: '5px' },
});

assertType({
'.bar': { '--color': 'red' },
'&.bar': { '--color': 'red' },
});

assertType({
'.bar': { animationName: { from: {}, to: {} } },
// @ts-expect-error Values of selectors can be only objects
'&.bar': 'red',
});
assertType({
// @ts-expect-error Custom selector should start with "&"
'.bar': { color: 'beige' },
});

// Nested custom selectors
//

assertType({
'.foo': {
'.bar': { flexShrink: 0 },
'.baz': { flexShrink: 'initial' },
'.qux': { opacity: 0 },
'.fred': { zIndex: 0 },
'.thud': { zIndex: 1 },
'&.foo': {
'&.bar': { flexShrink: 0 },
'&.baz': { flexShrink: 'initial' },
'&.qux': { opacity: 0 },
'&.fred': { zIndex: 0 },
'&.thud': { zIndex: 1 },
},
'.bar': {
'.baz': { color: 'beige' },
'.qux': { paddingLeft: '5px' },
'&.bar': {
'&.baz': { color: 'beige' },
'&.qux': { paddingLeft: '5px' },
},
'.baz': {
'.qux': {
'&.baz': {
'&.qux': {
'--color': 'red',
},
},
'.qux': {
'.bar': { flexShrink: 'var(--bar)' },
'.baz': { opacity: 'var(--baz)' },
'&.qux': {
'&.bar': { flexShrink: 'var(--bar)' },
'&.baz': { opacity: 'var(--baz)' },
},
});

Expand Down Expand Up @@ -315,8 +365,8 @@ assertType({
//

assertType({
'.foo': {
'.baz': {
'&.foo': {
'&.baz': {
// @ts-expect-error outline-box is an invalid value for box-sizing
overflowX: '1',
// @ts-expect-error "5" is an invalid value for paddingLeft
Expand All @@ -325,37 +375,37 @@ assertType({
},
});
assertType({
'.foo': {
'&.foo': {
// @ts-expect-error outline-box is an invalid value for box-sizing
boxSizing: 'outline-box',

'.bar': {
'&.bar': {
// @ts-expect-error outline-box is an invalid value for box-sizing
boxSizing: 'outline-box',
},
},
});
assertType({
'.foo': {
'&.foo': {
// @ts-expect-error outline-box is an invalid value for box-sizing
boxSizing: 'outline-box',
zIndex: 1,

'.bar': {
'&.bar': {
// @ts-expect-error outline-box is an invalid value for box-sizing
boxSizing: 'outline-box',
zIndex: 1,
},
},
});
assertType({
'.foo': {
'&.foo': {
// @ts-expect-error Object is not assignable to CSS property
zIndex: { color: 'red' },
// @ts-expect-error Object is not assignable to CSS property
opacity: { color: 'red' },

'.bar': {
'&.bar': {
// @ts-expect-error Object is not assignable to CSS property
zIndex: { color: 'red' },
// @ts-expect-error Object is not assignable to CSS property
Expand Down
15 changes: 7 additions & 8 deletions packages/babel-preset/__fixtures__/object-sequence-expr/code.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,11 @@ const switchClassName = 'fui-Switch';
let _a: Record<string, GriffelStyle>;

export const useStyles = makeStyles({
root:
((_a = {}),
(_a[':hover .' + switchClassName] = {
':before': {
backgroundColor: 'red',
},
}),
_a),
root: ((_a = {}),
(_a[':hover .' + switchClassName] = {
':before': {
backgroundColor: 'red',
} as GriffelStyle,
}),
_a) as any,
});
15 changes: 6 additions & 9 deletions packages/babel-preset/src/assets/normalizeStyleRules.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import type { GriffelAnimation, GriffelStyle } from '@griffel/core';
import type { GriffelAnimation, GriffelResetStyle, GriffelResetAnimation, GriffelStyle } from '@griffel/core';
import { tokenize } from 'stylis';

import { isAssetUrl } from './isAssetUrl';
Expand Down Expand Up @@ -47,14 +47,11 @@ export function normalizeStyleRule(
}, '');
}

export function normalizeStyleRules(
path: typeof import('path'),
projectRoot: string,
filename: string,
stylesBySlots: Record<string /* slot */, GriffelStyle> | GriffelStyle,
): Record<string /* slot */, GriffelStyle> {
export function normalizeStyleRules<
Styles extends GriffelStyle | GriffelAnimation | GriffelResetStyle | GriffelResetAnimation,
>(path: typeof import('path'), projectRoot: string, filename: string, styles: Styles): Styles {
return Object.fromEntries(
Object.entries(stylesBySlots).map(([key, value]) => {
Object.entries(styles).map(([key, value]) => {
if (typeof value === 'undefined' || value === null) {
return [key, value];
}
Expand All @@ -65,7 +62,7 @@ export function normalizeStyleRules(
key,
value.map(rule => {
if (typeof rule === 'object') {
return normalizeStyleRules(path, projectRoot, filename, rule as GriffelAnimation);
return normalizeStyleRules(path, projectRoot, filename, rule);
}

return normalizeStyleRule(path, projectRoot, filename, rule);
Expand Down
Loading
Loading