Remove pseudos with vendor prefixes and pseudos that use information …

…from other elements
atlassian-labs · Sep 13, 2023 · 5bc3e89 · 5bc3e89
1 parent bbb706f
commit 5bc3e89
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 201 deletions.
diff --git a/packages/react/src/css-map/index.js.flow b/packages/react/src/css-map/index.js.flow
@@ -19,32 +19,21 @@ import type { Pseudos } from './pseudos';
 declare type CssProps = $ReadOnly<Properties<string | number>>;
 declare type AllPseudos = $ObjMapi<
   { [k: Pseudos]: any },
-  <key>(key) => { ...CssProps, ...WhitelistedPseudo }
+  <key>(key) => { ...CssProps, ...AllPseudos }
 >;
-declare type ExcludedPseudos =
-  | '&:first-in-type'
-  | '&:first-child'
-  | '&:nth-child'
-  | '&:nth-last-child'
-  | '&:nth-last-of-type'
-  | '&:nth-of-type';
-declare type WhitelistedPseudo = Omit<AllPseudos, ExcludedPseudos>;
 declare type AtRuleSecondHalf = string;
 declare type WhitelistedAtRule = $ObjMapi<
   { [k: AtRules]: any },
   <atRuleFirstHalf>(atRuleFirstHalf) => $ObjMapi<
     { [k: AtRuleSecondHalf]: any },
     <atRuleSecondHalf>(atRuleSecondHalf) => {
       ...CssProps,
-      ...WhitelistedPseudo,
+      ...AllPseudos,
       ...WhitelistedAtRule,
     }
   >
 >;
-declare type WhitelistedSelector = {
-  ...WhitelistedPseudo,
-  ...WhitelistedAtRule,
-};
+declare type WhitelistedSelector = { ...AllPseudos, ...WhitelistedAtRule };
 declare type ExtendedSelector = {
   ...{
     [key: string]: CssProps | ExtendedSelector,
@@ -110,10 +99,9 @@ declare type ExtendedSelectors = {
   selectors?: ExtendedSelector,
   ...
 };
-declare type Variants<VariantName: string> = Record<
-  VariantName,
-  { ...CssProps, ...WhitelistedSelector, ...ExtendedSelectors }
->;
+declare type Variants<VariantName: string> = {
+  [key: VariantName]: { ...CssProps, ...WhitelistedSelector, ...ExtendedSelectors },
+};
 declare type ReturnType<VariantName: string> = { [key: VariantName]: CssProps };
 /**
  * ## cssMap

diff --git a/packages/react/src/css-map/index.ts b/packages/react/src/css-map/index.ts
@@ -18,28 +18,18 @@ import type { Pseudos } from './pseudos';
  */
 type CssProps = Readonly<Properties<string | number>>;
 
-type AllPseudos = { [key in Pseudos]?: CssProps & WhitelistedPseudo };
-// We discourage use of 'nested' selectors (selectors that can target other elements)
-// such as :first-in-type and :first-child.
-type ExcludedPseudos =
-  | '&:first-in-type'
-  | '&:first-child'
-  | '&:nth-child'
-  | '&:nth-last-child'
-  | '&:nth-last-of-type'
-  | '&:nth-of-type';
-type WhitelistedPseudo = Omit<AllPseudos, ExcludedPseudos>;
+type AllPseudos = { [key in Pseudos]?: CssProps & AllPseudos };
 
 // The `screen and (max-width: 768px)` part of `@media screen and (max-width: 768px)`.
 // Ideally we would do type checking to forbid this from containing the `@media` part,
 // but TypeScript doesn't provide a good way to do this.
 type AtRuleSecondHalf = string;
 type WhitelistedAtRule = {
   [atRuleFirstHalf in AtRules]?: {
-    [atRuleSecondHalf in AtRuleSecondHalf]: CssProps & WhitelistedPseudo & WhitelistedAtRule;
+    [atRuleSecondHalf in AtRuleSecondHalf]: CssProps & AllPseudos & WhitelistedAtRule;
   };
 };
-type WhitelistedSelector = WhitelistedPseudo & WhitelistedAtRule;
+type WhitelistedSelector = AllPseudos & WhitelistedAtRule;
 
 type ExtendedSelector = { [key: string]: CssProps | ExtendedSelector } & {
   /**

diff --git a/packages/react/src/css-map/pseudos.js.flow b/packages/react/src/css-map/pseudos.js.flow
@@ -4,74 +4,7 @@
  * Flowgen v1.21.0
  * @flow
  */
-declare type AdvancedPseudos =
-  | '&:-moz-any()'
-  | '&:-moz-dir'
-  | '&:-webkit-any()'
-  | '&::cue'
-  | '&::cue-region'
-  | '&::part'
-  | '&::slotted'
-  | '&::view-transition-group'
-  | '&::view-transition-image-pair'
-  | '&::view-transition-new'
-  | '&::view-transition-old'
-  | '&:dir'
-  | '&:has'
-  | '&:host'
-  | '&:host-context'
-  | '&:is'
-  | '&:lang'
-  | '&:matches()'
-  | '&:not'
-  | '&:nth-child'
-  | '&:nth-last-child'
-  | '&:nth-last-of-type'
-  | '&:nth-of-type'
-  | '&:where';
-declare type SimplePseudos =
-  | '&:-khtml-any-link'
-  | '&:-moz-any-link'
-  | '&:-moz-focusring'
-  | '&:-moz-full-screen'
-  | '&:-moz-placeholder'
-  | '&:-moz-read-only'
-  | '&:-moz-read-write'
-  | '&:-moz-ui-invalid'
-  | '&:-moz-ui-valid'
-  | '&:-ms-fullscreen'
-  | '&:-ms-input-placeholder'
-  | '&:-webkit-any-link'
-  | '&:-webkit-full-screen'
-  | '&::-moz-placeholder'
-  | '&::-moz-progress-bar'
-  | '&::-moz-range-progress'
-  | '&::-moz-range-thumb'
-  | '&::-moz-range-track'
-  | '&::-moz-selection'
-  | '&::-ms-backdrop'
-  | '&::-ms-browse'
-  | '&::-ms-check'
-  | '&::-ms-clear'
-  | '&::-ms-expand'
-  | '&::-ms-fill'
-  | '&::-ms-fill-lower'
-  | '&::-ms-fill-upper'
-  | '&::-ms-input-placeholder'
-  | '&::-ms-reveal'
-  | '&::-ms-thumb'
-  | '&::-ms-ticks-after'
-  | '&::-ms-ticks-before'
-  | '&::-ms-tooltip'
-  | '&::-ms-track'
-  | '&::-ms-value'
-  | '&::-webkit-backdrop'
-  | '&::-webkit-input-placeholder'
-  | '&::-webkit-progress-bar'
-  | '&::-webkit-progress-inner-value'
-  | '&::-webkit-progress-value'
-  | '&::-webkit-slider-runnable-track'
-  | '&::-webkit-slider-thumb'
+export type Pseudos =
   | '&::after'
   | '&::backdrop'
   | '&::before'
@@ -87,9 +20,7 @@ declare type SimplePseudos =
   | '&::target-text'
   | '&::view-transition'
   | '&:active'
-  | '&:after'
   | '&:any-link'
-  | '&:before'
   | '&:blank'
   | '&:checked'
   | '&:current'
@@ -99,10 +30,6 @@ declare type SimplePseudos =
   | '&:empty'
   | '&:enabled'
   | '&:first'
-  | '&:first-child'
-  | '&:first-letter'
-  | '&:first-line'
-  | '&:first-of-type'
   | '&:focus'
   | '&:focus-visible'
   | '&:focus-within'
@@ -112,15 +39,11 @@ declare type SimplePseudos =
   | '&:in-range'
   | '&:indeterminate'
   | '&:invalid'
-  | '&:last-child'
-  | '&:last-of-type'
   | '&:left'
   | '&:link'
   | '&:local-link'
   | '&:nth-col'
   | '&:nth-last-col'
-  | '&:only-child'
-  | '&:only-of-type'
   | '&:optional'
   | '&:out-of-range'
   | '&:past'
@@ -140,4 +63,3 @@ declare type SimplePseudos =
   | '&:user-valid'
   | '&:valid'
   | '&:visited';
-export type Pseudos = AdvancedPseudos | SimplePseudos;
diff --git a/packages/react/src/css-map/pseudos.ts b/packages/react/src/css-map/pseudos.ts
@@ -2,75 +2,11 @@
 // but with & added in the front, so that we target the current element
 // (instead of a child element)
 
-type AdvancedPseudos =
-  | '&:-moz-any()'
-  | '&:-moz-dir'
-  | '&:-webkit-any()'
-  | '&::cue'
-  | '&::cue-region'
-  | '&::part'
-  | '&::slotted'
-  | '&::view-transition-group'
-  | '&::view-transition-image-pair'
-  | '&::view-transition-new'
-  | '&::view-transition-old'
-  | '&:dir'
-  | '&:has'
-  | '&:host'
-  | '&:host-context'
-  | '&:is'
-  | '&:lang'
-  | '&:matches()'
-  | '&:not'
-  | '&:nth-child'
-  | '&:nth-last-child'
-  | '&:nth-last-of-type'
-  | '&:nth-of-type'
-  | '&:where';
+// We also exclude anything that requires providing an argument
+// (e.g. &:not(...) ), and anything that uses information from elements
+// outside of the current element (e.g. &:first-of-type)
 
-type SimplePseudos =
-  | '&:-khtml-any-link'
-  | '&:-moz-any-link'
-  | '&:-moz-focusring'
-  | '&:-moz-full-screen'
-  | '&:-moz-placeholder'
-  | '&:-moz-read-only'
-  | '&:-moz-read-write'
-  | '&:-moz-ui-invalid'
-  | '&:-moz-ui-valid'
-  | '&:-ms-fullscreen'
-  | '&:-ms-input-placeholder'
-  | '&:-webkit-any-link'
-  | '&:-webkit-full-screen'
-  | '&::-moz-placeholder'
-  | '&::-moz-progress-bar'
-  | '&::-moz-range-progress'
-  | '&::-moz-range-thumb'
-  | '&::-moz-range-track'
-  | '&::-moz-selection'
-  | '&::-ms-backdrop'
-  | '&::-ms-browse'
-  | '&::-ms-check'
-  | '&::-ms-clear'
-  | '&::-ms-expand'
-  | '&::-ms-fill'
-  | '&::-ms-fill-lower'
-  | '&::-ms-fill-upper'
-  | '&::-ms-input-placeholder'
-  | '&::-ms-reveal'
-  | '&::-ms-thumb'
-  | '&::-ms-ticks-after'
-  | '&::-ms-ticks-before'
-  | '&::-ms-tooltip'
-  | '&::-ms-track'
-  | '&::-ms-value'
-  | '&::-webkit-backdrop'
-  | '&::-webkit-input-placeholder'
-  | '&::-webkit-progress-bar'
-  | '&::-webkit-progress-inner-value'
-  | '&::-webkit-progress-value'
-  | '&::-webkit-slider-runnable-track'
-  | '&::-webkit-slider-thumb'
+export type Pseudos =
   | '&::after'
   | '&::backdrop'
   | '&::before'
@@ -86,43 +22,28 @@ type SimplePseudos =
   | '&::target-text'
   | '&::view-transition'
   | '&:active'
-  | '&:after'
-  | '&:any-link'
-  | '&:before'
+  | '&:autofill'
   | '&:blank'
   | '&:checked'
-  | '&:current'
   | '&:default'
   | '&:defined'
   | '&:disabled'
   | '&:empty'
   | '&:enabled'
   | '&:first'
-  | '&:first-child'
-  | '&:first-letter'
-  | '&:first-line'
-  | '&:first-of-type'
   | '&:focus'
   | '&:focus-visible'
   | '&:focus-within'
   | '&:fullscreen'
-  | '&:future'
   | '&:hover'
   | '&:in-range'
   | '&:indeterminate'
   | '&:invalid'
-  | '&:last-child'
-  | '&:last-of-type'
   | '&:left'
   | '&:link'
   | '&:local-link'
-  | '&:nth-col'
-  | '&:nth-last-col'
-  | '&:only-child'
-  | '&:only-of-type'
   | '&:optional'
   | '&:out-of-range'
-  | '&:past'
   | '&:paused'
   | '&:picture-in-picture'
   | '&:placeholder-shown'
@@ -131,13 +52,8 @@ type SimplePseudos =
   | '&:read-write'
   | '&:required'
   | '&:right'
-  | '&:root'
-  | '&:scope'
   | '&:target'
-  | '&:target-within'
   | '&:user-invalid'
   | '&:user-valid'
   | '&:valid'
   | '&:visited';
-
-export type Pseudos = AdvancedPseudos | SimplePseudos;
diff --git a/scripts/flow-types.sh b/scripts/flow-types.sh
@@ -65,8 +65,12 @@ generate() {
     # Refactor interface to object type to allow spreading
     sed -i.bak -E 's/export interface StyledProps \{/export type StyledProps = \{/g' "$file" && rm "$file.bak"
 
-    # Fix records to object type
-    sed -i.bak -E 's/Record<(.+), (.+)>/{[key: \1]: \2}/g' "$file" && rm "$file.bak"
+    # Fix records to object type. `s` flag and `-0777` makes perl
+    # match multiline.
+    #
+    # Assumes that the first argument to Record does not contain
+    # commas (otherwise this hacky script will break...)
+    perl -i.bak -0777 -pe 's/Record<(.+?),(.+?)>;/{[key: $1]: $2}/gs' "$file" && rm "$file.bak"
 
     # Change spread to allow correct type matching in flow
     sed -i.bak -E 's/\[key: string\]: CssFunction<TProps>,/...CSSProps<TProps>,\n[key: string]: CssFunction<TProps>,/g' "$file" && rm "$file.bak"