Skip to content
This repository has been archived by the owner on Apr 6, 2021. It is now read-only.

Add support for prefix as a function #177

Merged
merged 2 commits into from
Mar 28, 2021
Merged

Add support for prefix as a function #177

merged 2 commits into from
Mar 28, 2021

Conversation

thecrypticace
Copy link
Collaborator

Closes #159

Due to the implementation of the JIT we must support utility class prefixes in addition to the selectors themselves.

For example for .tw-ml-1 we'd pass .ml and .ml-1 to the prefix function. This is a byproduct of how we handle matching of classes before we generate the rules.

Because of this we'll want to encourage people to use a startsWith check instead of equality or includes:

prefix(selector) {
  if (['.align-bottom', '.ml'].some(prefix => selector.startsWith(prefix))) {
    return 'tw-';
  }

  return '';
},

You can also do this using an anchored regular expression which can be shorter:

prefix(selector) {
  if (/^\.(align-bottom|ml)/.test(selector)) {
    return 'tw-';
  }

  return '';
},

This has the limitation that you must handle selector prefixes. The prefix function will get called with `.ml` before it gets called with `.ml-1`
@thecrypticace thecrypticace marked this pull request as ready for review March 28, 2021 15:28
@thecrypticace thecrypticace changed the title Add support for prefix function Add support for prefix as a function Mar 28, 2021
@adamwathan adamwathan merged commit 55aa371 into main Mar 28, 2021
@adamwathan
Copy link
Member

Thanks dude! 👊

@adamwathan adamwathan deleted the feat/prefix-fn branch March 28, 2021 15:38
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

JIT does not work when prefix callback is specified
2 participants