feat(styled-system): add first-letter pseudo (#7441)

chakra-ui · Mar 17, 2023 · 600ec11 · 600ec11 · vercel · Mar 17, 2023
1 parent 275c450
commit 600ec11
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 0 deletions.
diff --git a/.changeset/flat-bags-protect.md b/.changeset/flat-bags-protect.md
@@ -0,0 +1,5 @@
+---
+"@chakra-ui/styled-system": patch
+---
+
+Add ::first-letter pseudo element to style props
diff --git a/packages/core/styled-system/src/pseudos.ts b/packages/core/styled-system/src/pseudos.ts
@@ -159,6 +159,16 @@ export const pseudoSelectors = {
    * Styles for CSS Selector `&:first-of-type`
    */
   _first: "&:first-of-type",
+  /**
+   * Styles for CSS selector `&::first-letter`
+   *
+   * NOTE: This selector is only applied for block-level elements and not preceded by an image or table.
+   * @example
+   * ```jsx
+   * <Text _firstLetter={{ textDecoration: 'underline' }}>Once upon a time</Text>
+   * ```
+   */
+  _firstLetter: "&::first-letter",
   /**
    * Styles for CSS Selector `&:last-of-type`
    */