WorkerReturnData

Ok now things are getting real. Here's the WorkerReturnData type. Yes, this is actually Typescript. No, you don't need to write any Typescript in your plugin. Typescript is just the cleanest way to display this information.

type WorkerReturnData = {
   html?: string;
   css?: string;
   rulesets?: Array<{ selector: string, declarations: Array<[ string, string ]> }>
};

// example rulesets
const rulesets = [
   { selector: ":root", declarations: [
      ["--space-1", "1px"]
   ]}
]

This is everything you can return to selectoplasm. Note that declarations is an array of tuples, where the first element of the tuple is the property and the second element is the value.

For the rulesets, I recommend adding this helper function to the top of any worker that creates rulesets:

const ruleset = (selector, declarations) => ({ selector, declarations })

A quick note if you're unfamiliar with this particular quirk of arrow functions: when returning an object you have to wrap it in parentheses, otherwise javascript thinks it's the opening brace of the function.

Here's how you can create both design tokens and utility classes:

const rulesets = [
   ruleset(":root", [
      ["--space-1", "1px"],
      ["--space-2", "2px"]
   ]),
   ruleset(".p1", [
      ["padding", "--space-1"]
   ]),
   ruleset(".px1", [
      ["padding-left:", "--space-1"], // don't write var in the value
      ["padding-right", "--space-1"]
   ])
]

Now, as for the HTML and CSS return objects:

The HTML object is used to update your plugin preview, for instance if you have a dynamic list that the user can add and remove elements from. But you can update this in your worker for any reason you need to, and your preview will update.

The CSS object is for any dynamic css you want to put into your stylesheet but don't want to be a token or an unpackable ruleset. A good example of this being used is the l-threshold token in the colors-oklch plugin.