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

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

3 participants