03 Pattern plugins

The simplest plugin in Battery is the pattern type. Below we're going to create a plugin that will allow us Battery to recognize and generate classes that use positive and negative integers.

const integerPlugin = {
  type: 'pattern',
  name: 'integer',
  valueIdentifier: /-?\d{1,4}/
}

Here are a couple of properties that can take integer values.

const zIndex = {
  property: 'z-index',
  propertyIdentifier: 'z',
  plugin: 'integer'
}

const order = {
  property: 'order',
  propertyIdentifier: 'order',
  plugin: 'integer'
}

const flexGrow = {
  property: 'flex-grow',
  propertyIdentifier: 'grow',
  plugin: 'integer'
}

The pattern plugin uses a regex to find the valueIdentifier in a class name. In the examples below the values are 1 in z1, 2 in order2, 4 in grow4 and -9999 in z-9999.

const input = ['z1','order2','grow4','z-9999']

.z1 {
  z-index: 1;
}
.order2 {
  order: 2;
}
.grow4 {
  grow: 4;
}
.z-9999 {
  z-index: -9999;
}

As you can see in the example above, the value you write after your propertyIndicator (z,order, grow etc.) gets passed straight through to the value part of the CSS declaration.

Now we've covered both the lookup and the pattern type of plugin. Next we will move onto plugin modifiers which are a way to supercharge both lookup and pattern type plugins.