Working with Extended At-rules

As of version 1.1, eCSStender supports extending the At-rule syntax. But what does that mean?

As of the current version, eCSStender will support you defining extended at-rules in two ways: via a simple at-rule definition and a keyed at-rule definition.

Simple Extended At-rule Definitions

Simple at-rules follow a syntax similar to that of the @font-face at-rule, to which you are probably familiar:

@font-face {
  font-family: 'Comfortaa';
  font-weight: normal;
  src: url('../../examples/fonts/Comfortaa_Regular');
}

To define a simple extended at-rule, you write "@", followed by your extended at-rule's name, followed by a set of curly braces ("{}") that contain the properties assigned via that at-rule. For example:

@-my-simple-at-rule {
  property-1: value-1;
  property-2: value-2;
}

This at-rule will be exposed by eCSStender as the first member in the eCSStender.at['-my-simple-at-rule'] array. That element would have a value of

{
  'property-1': 'value-1',
  'property-2': 'value-2'
}

Simple at-rule definitions are always stored in an array, just as they are in the case of @font-face. If you have multiple instances of your extended at-rule assigned, each will be stored as a separate member of the array. For example:

@-my-simple-at-rule {
  property-1: value-1;
  property-2: value-2;
}
@-my-simple-at-rule {
  property-1: value-3;
  property-2: value-4;
}

would result in eCSStender.at['-my-simple-at-rule'] being an array with two members:

[{
  'property-1': 'value-1',
  'property-2': 'value-2'
},
{
  'property-1': 'value-3',
  'property-2': 'value-4'
}]

Keyed-definition Extended At-rules

Keyed-definition at-rules are only slightly different in that the definition is being assigned to one or more keys. In this case, the overall extended at-rule is exposed as an object, with each key having a value equal to the properties assigned to it. For example:

@-my-complex-at-rule key-1 {
  property-1: value-1;
  property-2: value-2;
}

In this instance, eCSStender would expose the at-rule as eCSStender.at['-my-complex-at-rule']['key-1'] which would have a value of

{
  'property-1': 'value-1',
  'property-2': 'value-2'
}

Following this same syntax, you can also set multiple keys to the same value:

@-my-complex-at-rule key-1, key-2 {
  property-1: value-1;
  property-2: value-2;
}

In this instance, eCSStender.at['-my-complex-at-rule'] would be an object with two keys, 'key-1' and 'key-2', each of which would be an identical object.

With keyed-definition extended at-rules, unlike simple ones, it is also possible to add new properties and/or override them:

@-my-complex-at-rule key-1, key-2 {
  property-1: value-1;
  property-2: value-2;
}
@-my-complex-at-rule key-2 {
  property-3: value-3;
  property-1: value-4;
}

In this instance, eCSStender.at['-my-complex-at-rule'] would be

{
  'key-1': {
    'property-1': 'value-4',
    'property-2': 'value-2',
    'property-3': 'value-3'
  },
  'key-2': {
    'property-1': 'value-1',
    'property-2': 'value-2'
  }
}

As you would expect, source order determines the final value for each property (as specificity is not a factor).