Plugin best practices

A set of guidelines and tips to create plugins that work well for as much users as possible.

Selector and Value parsers

It is tempting to use string find/replace or regex operations to modify CSS in a plugin. These are easy ways that work well for simple cases.

However they fail when bits have escape sequences (\) or maybe they are part of a string.

/* looking for selector `:fancy-selector` */

:fancy-selector {}

\:fancy-selector {} /* escaping changes ":" */

[data-example=":fancy-selector"] {} /* strings in attribute selectors */

/* looking for value `fancy-value` */

.example {
  order: fancy-value; /* keyword value */
}

.example {
  content: "fancy-value"; /* string value */
}

• Selector Parser
• Value Parser
• For at-rules it is best to use the selector and/or value parser depending on your case.