Merge pull request #609 from components-ai/selector-functions

Add initial support for selector functions

Author: johno

.changeset/modern-zebras-fry.md

@@ -0,0 +1,5 @@
+---
+'@compai/css-gui': patch
+---
+
+Add initial support for selector functions

packages/gui/src/components/Editor/Controls.tsx

@@ -6,6 +6,7 @@ import {
   isValidElement,
   ReactNode,
   useMemo,
+  useState,
 } from 'react'
 import { camelCase, isNil, mapValues, uniq } from 'lodash-es'
 import { RefreshCw } from 'react-feather'
@@ -37,7 +38,14 @@ import { SchemaInput } from '../inputs/SchemaInput'
 import { EditorDropdown } from '../ui/dropdowns/EditorDropdown'
 import { FieldsetDropdown } from '../ui/dropdowns/FieldsetDropdown'
 import { tokenize } from '../../lib/parse'
-import { addPseudoSyntax } from '../../lib/pseudos'
+import {
+  addPseudoSyntax,
+  getSelectorFunctionArgument,
+  getSelectorFunctionName,
+  isSelectorFunction,
+  removePseudoSyntax,
+  stringifySelectorFunction,
+} from '../../lib/pseudos'
 
 export const getPropertyFromField = (field: KeyArg) => {
   if (Array.isArray(field)) {
@@ -219,7 +227,7 @@ export const Editor = ({
         <div sx={{ ml: 'auto', display: 'flex' }}>
           <IconButton
             onClick={() => onChange(regenerateAll())}
-            sx={{ ml: 'auto', }}
+            sx={{ ml: 'auto' }}
           >
             <RefreshCw size={15} />
           </IconButton>
@@ -320,10 +328,13 @@ type FieldsetControlProps = {
   field: string
 }
 const FieldsetControl = ({ field }: FieldsetControlProps) => {
-  const { getField, removeField } = useEditor()
+  const { getField, removeField, setFields } = useEditor()
+  const [argument, setArgument] = useState(getSelectorFunctionArgument(field))
+
   const styles = getField(field)
   const properties = Object.keys(styles)
   const label = addPseudoSyntax(field)
+  const rawFieldsetName = getSelectorFunctionName(field)
 
   return (
     <section
@@ -350,12 +361,45 @@ const FieldsetControl = ({ field }: FieldsetControlProps) => {
             mb: 0,
           }}
         >
-          {removeInternalCSSClassSyntax(label)}
+          {rawFieldsetName}
+          {isSelectorFunction(rawFieldsetName) ? (
+            <>
+              {'('}
+              <input
+                value={argument}
+                sx={{
+                  width: 64,
+                }}
+                onChange={(e) => {
+                  setArgument(e.target.value)
+                }}
+                onBlur={() => {
+                  setFields(
+                    {
+                      [stringifySelectorFunction(rawFieldsetName, argument)]:
+                        styles,
+                    },
+                    [field]
+                  )
+                }}
+              />
+              {')'}
+            </>
+          ) : null}
         </h3>
         <FieldsetDropdown onRemove={() => removeField(field)} />
       </div>
       <GenericFieldset field={field}>
-        <div sx={{ mb: 3, p: 3, borderWidth: '1px', borderStyle: 'solid', borderColor: 'border', borderRadius: '6px', }}>
+        <div
+          sx={{
+            mb: 3,
+            p: 3,
+            borderWidth: '1px',
+            borderStyle: 'solid',
+            borderColor: 'border',
+            borderRadius: '6px',
+          }}
+        >
           <AddPropertyControl
             field={field}
             styles={styles}

packages/gui/src/data/pseudo-classes.ts

@@ -43,15 +43,25 @@ export const inputPseudoClasses = [
 export const treeStructuralPseudoClasses = [
   'root',
   'empty',
-  'nth-child',
-  'nth-last-child',
   'first-child',
   'last-child',
   'only-child',
-  'nth-of-type',
-  'nth-last-of-type',
   'only-of-type',
 ] as const
+export const selectorFunctionPseudoClasses = [
+  'dir',
+  'has',
+  'host-context',
+  'host',
+  'is',
+  'lang',
+  'not',
+  'nth-child',
+  'nth-last-child',
+  'nth-last-of-type',
+  'nth-of-type',
+  'where',
+]
 export const pseudoClasses = [
   ...linquisticPseudoClasses,
   ...locationPseudoClasses,
@@ -60,4 +70,5 @@ export const pseudoClasses = [
   ...resourceStatePseudoClasses,
   ...inputPseudoClasses,
   ...treeStructuralPseudoClasses,
+  ...selectorFunctionPseudoClasses,
 ] as const

packages/gui/src/data/pseudo-elements.ts

@@ -1,3 +1,5 @@
+export const selectorFunctionPseudoElements = ['part', 'slotted']
+
 export const pseudoElements = [
   'after',
   'backdrop',
@@ -13,4 +15,5 @@ export const pseudoElements = [
   'selection',
   'spelling-error',
   'target-text',
+  ...selectorFunctionPseudoElements,
 ] as const

packages/gui/src/data/selector-functions.ts

@@ -0,0 +1,7 @@
+import { selectorFunctionPseudoClasses } from './pseudo-classes'
+import { selectorFunctionPseudoElements } from './pseudo-elements'
+
+export const selectorFunctions = [
+  ...selectorFunctionPseudoClasses,
+  ...selectorFunctionPseudoElements,
+] as const

packages/gui/src/lib/pseudos.ts

@@ -1,5 +1,6 @@
 import { pseudoClasses } from '../data/pseudo-classes'
 import { pseudoElements } from '../data/pseudo-elements'
+import { selectorFunctions } from '../data/selector-functions'
 
 export const isPseudoClass = (str: string): boolean => {
   return !!pseudoClasses.filter((value) => value === str).length
@@ -9,8 +10,12 @@ export const isPseudoElement = (str: string): boolean => {
   return !!pseudoElements.filter((value) => value === str).length
 }
 
+export const isSelectorFunction = (str: string): boolean => {
+  return !!selectorFunctions.filter((value) => str.startsWith(value)).length
+}
+
 export const isPseudo = (str: string): boolean => {
-  return isPseudoClass(str) || isPseudoElement(str)
+  return isPseudoClass(str) || isPseudoElement(str) || isSelectorFunction(str)
 }
 
 export const hasPseudoSyntax = (str: string): boolean => {
@@ -21,8 +26,23 @@ export const removePseudoSyntax = (str: string): string => {
   return str.replace(/^:+/, '')
 }
 
+export const getSelectorFunctionArgument = (str: string): string => {
+  return str.match(/\(([^)]+)\)/)?.[1] ?? ''
+}
+
+export const getSelectorFunctionName = (str: string): string => {
+  return str.split('(')[0]
+}
+
+export const stringifySelectorFunction = (
+  functionName: string,
+  argument: string
+): string => {
+  return `${addPseudoSyntax(functionName)}(${argument})`
+}
+
 export const addPseudoSyntax = (str: string): string => {
-  if (isPseudoClass(str)) {
+  if (isPseudoClass(str) || isSelectorFunction(str)) {
     return ':' + str
   } else if (isPseudoElement(str)) {
     return '::' + str

packages/gui/src/lib/util.ts

@@ -1,4 +1,4 @@
-import { isPseudoClass, isPseudoElement } from './pseudos'
+import { isPseudoClass, isPseudoElement, isSelectorFunction } from './pseudos'
 import { isElement } from './elements'
 import { lowerCase, startCase, upperFirst } from 'lodash-es'
 import { EditorProps, EditorPropsWithLabel } from '../types/editor'
@@ -31,6 +31,7 @@ export function isNestedSelector(selector: string): boolean {
     isElement(selector) ||
     isPseudoClass(selector) ||
     isPseudoElement(selector) ||
+    isSelectorFunction(selector) ||
     isInternalCSSClass(selector) ||
     false
   )