CSS Objects

CSSNode

CSSNode

The CSSNode is the foundational class that CSS objects extend from.

Types of CSSNode

CSSComponent

The CSSComponent class represents semantically significant objects in CSS. It extends CSSNode and has no direct representation.

{
  value: ( CSSNumber | CSSString | CSSIdentifier | CSSDelimiter | CSSBlock )[];
}

CSSComment

The CSSComment class represents comments in CSS. It extends CSSNode.

{
  value: string</^\/\*([^*]|\*[^\/])*\*\/$/[1]>;
}

Examples of CSSComment

new CSSComment({ value: `some comment` }) // `/*some comment*/`
new CSSComment({ value: ` another comment ` }) // `/* another comment */`

CSSWhitespace

The CSSWhitespace class represents groupings of CSS whitespace, including spaces, tabs, form feeds, line feeds, and carriage returns. It extends CSSNode.

{
  value: string</^[ \t\n\f\r]+$/>;
}

Examples of CSSWhitespace

new CSSWhitespace({ value: `\n \t` }) // `\n \t`

Types of CSSComponent

CSSNumber

The CSSNumber class that represent numerics in CSS, including integers, floats, percentages, and dimensions. It extends CSSComponent.

{
  value: string</^[+-]?([0-9]+(\.[0-9]*)?|\.[0-9]+)([Ee]-?[0-9]+)?$/>;
  unit: string</^(-?([-A-Z_a-z�-ÿ]|\\[^\n\f\r])([-0-9A-Z_a-z�-ÿ]|\\[^\n\f\r])*)?$/>;
}

Examples of CSSNumber

new CSSNumber({ value: `1.5`, unit: `em` }) // 1.5em
new CSSNumber({ value: `1.5`, unit: `%` }) // 1.5%
new CSSNumber({ value: `1.5`, unit: `` }) // 1.5

CSSString

The CSSString class represents strings delimited by quotes. It extends CSSComponent.

{
  value: string</^("([^"\\\n\f\r]|\\.)*"|'([^'\\\n\f\r]|\\.)*')$/[2|3]>;
  delimiter: ( `"` | `'` );
}

Examples of CSSString

new CSSString({ value: `hello world`, delimiter: `"` }) // `"hello world"`
new CSSString({ value: `hello 'world'`, delimiter: `'` }) // `'hello \'world\''`

CSSIdentifier

The CSSIdentifier class represents identifying references in CSS. It extends CSSComponent.

{
  value: string</^-?([-A-Z_a-z�-ÿ]|\\[^\n\f\r])([-0-9A-Z_a-z�-ÿ]|\\[^\n\f\r])*$/>;
}

Examples of CSSIdentifier

new CSSIdentifier({ value: `color` }) // `color`
new CSSIdentifier({ value: `--color` }) // `--color`

CSSHashIdentifier

The CSSHashIdentifier class represents hash-prefixed references in CSS. It extends CSSIdentifier.

{
  value: string</^#(([-0-9A-Z_a-z�-ÿ]|\\[^\n\f\r])+)$/[1]>;
}

Examples of CSSHashIdentifier

new CSSIdentifier({ value: `ff0` }) // `#ff0`
new CSSIdentifier({ value: `main` }) // `#main`

CSSAtIdentifier

The CSSAtIdentifier class represents at-prefixed references in CSS. It extends CSSIdentifier.

{
  value: string</^@(-?([-A-Z_a-z�-ÿ]|\\[^\n\f\r])([-0-9A-Z_a-z�-ÿ]|\\[^\n\f\r])*)$/[1]>;
}

Examples of CSSAtIdentifier

new CSSAtIdentifier({ value: `media` }) // `@media`
new CSSAtIdentifier({ value: `supports` }) // `@supports`

CSSDelimiter

The CSSDelimiter class represents boundaries in CSS. It extends CSSComponent.

{
  value: string</^[\W\w]$/>;
}

Examples of CSSDelimiter

new CSSDelimiter({ value: `@` }) // `@`
new CSSDelimiter({ value: `%` }) // `%`

CSSBlock

The CSSBlock class represents groupings of nodes delimited by brackets. It extends CSSComponent.

{
  value: CSSNode[];
  delimiter: CSSDelimiter<`` | `(` | `[` | `{`>;
}

Examples of CSSBlock

new CSSBlock({
  value: [
    new CSSIdentifier({ value: `display` }),
    new CSSDelimiter({ value: `:` }),
    new CSSWhitespace({ value: ` ` }),
    new CSSIdentifier({ value: `grid` })
  ],
  delimiter: new CSSDelimiter({ value: `(` })
}) // `(display: grid)`

new CSSBlock({
  value: [ new CSSIdentifier({ value: `class` }) ],
  delimiter: new CSSDelimiter({ value: `[` })
}) // `[class]`

CSSFunction

The CSSFunction class represents groupings of nodes bound by specific references in CSS. It extends CSSBlock.

{
  name: CSSIdentifier;
  delimiter: CSSDelimiter<`(`>;
  value: CSSNode[];
}

Examples of CSSFunction

new CSSFunction({
  name: new CSSIdentifier({ value: `var` }),
  value: [
    new CSSIdentifier({ value: `--color` }),
    new CSSDelimiter({ value: `,` }),
    new CSSWhitespace({ value: ` ` })
    new CSSIdentifier({ value: `currentColor` })
  ]
}) // `var(--color, currentColor)`
new CSSFunction({
  name: new CSSIdentifier({ value: `calc` }),
  value: [
    new CSSNumber({ value: `100`, unit: `%` }),
    new CSSWhitespace({ value: ` ` }),
    new CSSDelimiter({ value: `/` }),
    new CSSWhitespace({ value: ` ` })
    new CSSNumber({ value: `3`, unit: `` })
  ]
}) // `calc(100% / 3)`

CSSConstruct

The CSSConstruct is the foundational class that canonical CSS objects extend from. It extends CSSNode and has no direct representation.

Types of CSSConstruct

CSSDeclaration

The CSSDeclaration class represents a configurable feature in CSS. It extends CSSConstruct.

{
  name: CSSIdentifier;
  value: CSSComponent[];
  important: [
    ...( CSSWhitespace | CSSComment )[],
    CSSDelimiter<`!`>,
    CSSIdentifier<`important`>,
    ...( CSSWhitespace | CSSComment )[],
  ];
}

Examples of CSSDeclaration

new CSSDeclaration({
  name: new CSSIdentifier({ value: `color` }),
  value: [ new CSSIdentifier({ value: `blue` }) ],
  important: [
    new CSSWhitespace({ value: ` ` }),
    new CSSDelimiter({ value: `!` }),
    new CSSIdentifier({ value: `important` })
  ]
}) // color: blue !important

CSSRule

The CSSRule class represents a grouping of constructs bound by specific selectors or specific conditions in CSS. It extends CSSNode and has no direct representation.

CSSStyleRule

The CSSStyleRule class represents a grouping of constructs bound by specific selectors in CSS. It extends CSSRule.

{
  selectors: CSSSelector[];
  value: ( CSSDeclaration | CSSRule )[];
}

new CSSStyleRule({
  selectors: [
    new CSSSelector({ value: `ul` })
  ],
  value: [
    new CSSDeclaration({
      name: CSSIdentifier({ value: `list-style` }),
      value: [ CSSWhitespace({ value: ` ` })]
    })
  ]
})

CSSAtRule

The CSSAtRule class represents groupings of constructs bound by references and specific conditions in CSS. It extends CSSRule.

{
  name: CSSIdentifier;
  prelude: CSSSelector[];
  value: CSSConstruct[];
}

CSSSheet

The CSSSheet class represents groupings of rules in CSS. It extends CSSConstruct.

{
  value: ( CSSWhitespace | CSSComment | CSSRule )[];
}

CSSSelector

The CSSSelector class represents conditions of elements in CSS. It extends CSSConstruct and has no direct representation.

CSSSimpleSelector

The CSSSimpleSelector class represents a single condition of an element in CSS. It extends CSSSelector.

{
  value: (
    [ CSSDelimiter<`*`> ] |
    [ CSSIdentifier ] |
    [ CSSDelimiter<`#` | `.`>, CSSIdentifier ] |
    [ CSSDelimiter<`:`>, ( CSSIdentifier | CSSFunction ) ] |
    [ CSSDelimiter<`:`>, CSSDelimiter<`:`>, ( CSSIdentifier | CSSFunction ) ]
  );
}

Examples of CSSSimpleSelector

new CSSSimpleSelector({
  value: [
    new CSSDelimiter({ value: `*` })
  ]
}) // `*`

new CSSSimpleSelector({
  value: [
    new CSSIdentifier({ value: `div` })
  ]
}) // `div`

new CSSSimpleSelector({
  value: [
    new CSSDelimiter({ value: `:` }),
    new CSSIdentifier({ value: `first-child` })
  ]
}) // `:first-child`

CSSCombinatorSelector

The CSSCombinatorSelector class represents a relationship between elements in CSS. It extends CSSSelector.

{
  value: [
    ...( CSSWhitespace | CSSComment )[],
    ( CSSWhitespace | CSSDelimiter<`>` | `+` | `~` | `||`> ),
    ...( CSSWhitespace | CSSComment )[],
  ];
}

Examples of CSSCombinatorSelector

new CSSCombinatorSelector({
  value: [
    new CSSWhitespace({ value: ` ` }),
    new CSSDelimiter({ value: `>` }),
    new CSSWhitespace({ value: ` ` })
  ]
}) // ` > `

jonathantneal/README.md