`generateSubtreeStyles` returns a string which is hard to manipulate

[majapw]

Hello!

I have written a custom selector handler for Aphrodite which aims to prefix the style definitions with a particular context (https://github.com/airbnb/react-with-styles-interface-aphrodite/blob/9c68a90f9670b089a88c81bbcdf4937bb60f034a/src/utils/withRTLExtension.js). One thing I've found though is that manipulating the string generated by generateSubtreeStyles is a bit difficult and not super performant (I'm currently relying on regex replace with a regex that could break in some unlikely edgecases). I think it would be interesting and possibly beneficial for the callback to the selector handler to generate an object or array of the style blocks. The handler would then have the responsibility of turning this output into a string.

I'm envisioning something as simple as:

import createStylesStringFromObj from 'aphrodite/.../...';

function customSelectorHandler(selector, baseSelector, generateSubtreeStylesObj) {
  if (selector !== CUSTOM_SELECTOR) {
    return null;
  }

  const generated = generateSubtreeStylesObj(baseSelector);

  // do some manipulation of the subtree styles object here

  return createStylesStringFromObj(generated);
}

I'm not sure that this is a best approach but am interested in the work being done on custom handler support itself. :)

FYI @ljharb

[lencioni]

@majapw it looks like that string manipulation approach is no longer a thing. Is that right?

If this is no longer a thing do you think making this change would still be valuable?

If this is still a thing can you point me to the new location of the magic?

[majapw]

We're no longer using this approach but I feel like it would still be valuable to anyone writing custom selectors to have access to the object (rather than the string).