Khan / Khan/aphrodite

`generateSubtreeStyles` returns a string which is hard to manipulate

Open
#271 2 comments 1 reaction 0 assignees View on GitHub
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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.