Nest preflight overrides under a CSS selector

[Schniz]

In Tailwind, I can use the important with Selector Strategy to nest the preflight CSS under a specific selector, for gradual migration or widgets.
Is it possible with twind? It seems that twind only supports the boolean strategy 😃

Anyway, wanted to say big props for this amazing project. Thanks for the hard work!

[sastan]

Sorry. That is currently not possible, but I have this on the list for v1.

[Schniz]

It's all cool. Seems that it is possible when providing a custom sheet:

function sheetWithRootSelector(sheet: Sheet, selector: string): Sheet {
  return {
    ...sheet,
    insert(rule, index) {
      // catch all @media matches
      const mediaMatches = rule.match(/^@[^{]+\{/)?.[0];
      if (mediaMatches) {
        rule = rule.replace(mediaMatches, "");
      }
      const patchedRule = rule
        // remove all `html` and `body`
        .replace(/\b(,\s*)?(html|body)\b/g, ``)
        // remove all prefixing commas
        .replace(/^\s*,/, "");
      let ruleWithPrefix = `${selector} ${patchedRule}`;

      let hasHtmlOrBody = /\b(html|body)\b/.test(rule);
      if (hasHtmlOrBody) {
        ruleWithPrefix = `${selector}, ${ruleWithPrefix}`;
      }

      if (mediaMatches) {
        ruleWithPrefix = `${mediaMatches}${ruleWithPrefix}`;
      }

      return sheet.insert(ruleWithPrefix, index);
    },
  };
}

Then we can use it like so:

setup({
  important: true,
  sheet: sheetWithRootSelector(domSheet(), "#my-widget"),
  preflight(preflight) {
    return {
      ...preflight,
      // This is needed because our `body` is the same element as `html` -- which is our selector.
      // Therefore we can't "inherit" the styles, because it will remove the value we set previously.
      body: {
        fontFamily: null,
        lineHeight: null,
      },
    };
  },
});

[sastan]

That is a great solution!

[lveillard]

Inspired me to fix my use case too, thanks!
#141 (reply in thread)