FriendsOfReactJS / FriendsOfReactJS/react-css-themr

Allow a theme composition function as option

Aperta
#27 1 commento 0 reazioni 0 assegnatari Vedi su GitHub
enhancement help wanted
Lingua principale
JavaScript
Stelle
24
Fork
10
Metriche di merge delle PR
Nessuna PR unita negli ultimi 30g

Descrizione

Hi,
thanks for your work, this module has been a tremendous help in my projects!

**Proposition**

Having an option allowing to specify a function that will be used in place of [`getTheme`](https://github.com/javivelasco/react-css-themr/blob/8d12cfdca26c141c549a85e8e3065c45b83be654/src/components/themr.js#L115-L126)
having `contextTheme`, `confTheme` and `propsTheme` as parameters and the resulting theme object as return value.
It would allow specifying manually the merge behavior.

**Use cases:**

1. Change the order of priority between theme sources.

I have a project where i'd like to have this priority order `configuration < context < props` instead of `context < configuration < props`.
Configuration would be present in a component / component library as **functional defaults / reset**, context would allow to have consistent styles between elements throughout the app / site, and props would allow specific components to have different styles.

2. CSS modules composition (example with tachyons)

Let's say i have a component which CSS module is defined by multiple `composes` statements:

header.context.css
```
.header {
composes: f-subheadline f-headline-l from 'tachyons-type-scale';
composes: measure-narrow from 'tachyons-typography';
composes: lh-title from 'tachyons-line-height';
composes: mt0 mb4 from 'tachyons-spacing';
}
```

I'd like to deeply merge it to only modify the bottom margin and inherit the rest of the properties (i could softly merge it but i'd have to rewrite all the other statements, thus defeating the purpose / advantages of this library's approach)

header.props.css
```
.header {
composes: mb2 from 'tachyons-spacing';
}
```

The resulting classname would contain both `mb4` and `mb2` transformed classes, and the one written last in `tachyons` library would take precedence according to css specificity.

Having access to a custom `compose` function would allow defining rules such as:
**If two or more properties from different sources begin with the same 2 letters, only keep the one which comes from the highest priority source**

If i understand properly the caveat in this specific case would be making sure having a `localIdentName`
starting by `[local]` (webpack example) in development and production, because `react-css-themr` only gets the transformed **final** classNames. So only using a hash as a classname would forbid any direct comparison.

Guida per i contributori

Apri la guida per i contributori

Direzione di ricerca

Inizia leggendo src/components/themr.js, in particolare getTheme e la sua gestione di contextTheme, confTheme e propsTheme. Definisci il contratto della funzione di composizione dell’opzione e verifica che possa controllare la priorità di unione e restituire l’oggetto tema risultante, incluso il caso d’uso della composizione di CSS Modules descritto nell’issue.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Valutazione

Stack tecnologico
css, javascript, react
Ambito
frontend
Tipo di issue
Funzionalità
Difficoltà
5/5
Tempo stimato
Più di una settimana
Stato di attività
Ferma
Chiarezza
Abbastanza chiara
Idoneità per principianti
30/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.