`generateSubtreeStyles` returns a string which is hard to manipulate
- Dominant language
- JavaScript
- Stars
- 5.3k
- Forks
- 187
- PR merge metrics
- No merged PRs in 30d
Description
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:
```js
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
Contributor guide
No contributing guide indexed for this repository
Research direction
Start by reading the generateSubtreeStyles entry point and the custom selector example in src/utils/withRTLExtension.js. Clarify the structured output shape and conversion API, then verify that custom handlers can manipulate the generated style blocks without changing the resulting CSS.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 28/100