Skip to content

Better autocomplete children #5

Closed

Description

@basarat

The current method of self interpolation (aka & expansion):

typestyle/src/css.d.ts

Lines 1393 to 1405 in f8776f0

/** Provides additional autocomplete for pseudo states + nesting */
interface NestedCSSProperties extends CSSProperties {
/** States */
'&:hover'?: NestedCSSProperties;
'&:active'?: NestedCSSProperties;
'&:disabled'?: NestedCSSProperties;
'&:focus'?: NestedCSSProperties;
/** Children */
'&>*'?: NestedCSSProperties;
'&:first-child'?: NestedCSSProperties;
'&:last-child'?: NestedCSSProperties;
}

interface NestedCSSProperties extends CSSProperties {
  /** States */
  '&:hover'?: NestedCSSProperties;
  '&:active'?: NestedCSSProperties;
  '&:disabled'?: NestedCSSProperties;
  '&:focus'?: NestedCSSProperties;

  /** Children */
  '&>*'?: NestedCSSProperties;
  '&:first-child'?: NestedCSSProperties;
  '&:last-child'?: NestedCSSProperties;
}

Leaves a bit of room for any for things that aren't listed (or can't be listed as they take parameters e.g nth-child).

Might be better to come up with a children concept e.g.

{
  'color' : 'red',
  '&': [
    {selector:':first-child', props:CSSProperties}
  ]
}

Activity

  1. basarat commented on Oct 17, 2016

    @basarat
    ContributorAuthor

    Its a good idea but I don't suspect people needing too many child css selectors so will continue down the path of adding as needed. The current set is good enough 🌹

  2. basarat commented on Oct 17, 2016

    @basarat
    ContributorAuthor

    Another idea:

    {
      'color' : 'red',
      '&': {
         ':first-child': SomeCSSProperties
      }
    }
  3. basarat commented on Oct 17, 2016

    @basarat
    ContributorAuthor

    I think ^ this will go well. Started a discussion here as well : blakeembrey/free-style#37

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions