chore: new typings

microsoft · Aug 9, 2024 · 43cdeeb · 43cdeeb
1 parent fb21c43
commit 43cdeeb
Show file tree

Hide file tree

Showing 20 changed files with 278 additions and 140 deletions.
diff --git a/e2e/typescript/src/assets/fixture-reset.ts b/e2e/typescript/src/assets/fixture-reset.ts
@@ -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)' },
   },
 });
 
@@ -326,8 +326,8 @@ assertType({
 //
 
 assertType({
-  '.foo': {
-    '.baz': {
+  '&.foo': {
+    '&.baz': {
       // @ts-expect-error "1" is invalid value for "overflowX"
       overflowX: '1',
       padding: 0,
@@ -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

diff --git a/e2e/typescript/src/assets/fixture.ts b/e2e/typescript/src/assets/fixture.ts
@@ -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: {
@@ -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
 //
@@ -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
 //
 
@@ -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({
@@ -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)' },
   },
 });
 
@@ -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
@@ -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

diff --git a/packages/babel-preset/__fixtures__/object-sequence-expr/code.ts b/packages/babel-preset/__fixtures__/object-sequence-expr/code.ts
@@ -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,
 });
diff --git a/packages/babel-preset/src/assets/normalizeStyleRules.ts b/packages/babel-preset/src/assets/normalizeStyleRules.ts
@@ -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';
@@ -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];
       }
@@ -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);