Scoped preflight for gradual migration

[holic]

I'm adding twind to an existing React project with its own CSS (via emotion). I noticed that twind styles are well isolated to the components that use them, but once the component unmounts, some of the base styles (resets, I think) linger on the page.

Is there a recommended approach to cleanly removing these when the component is unmounted?

[holic]

To clarify, I think I want to keep the preflight in place. I tried setup({ preflight: false }) and that had more side effects than I'd like. I don't mind if I have to fix up any side effects of using Twind with other things on the page, just want to ensure that Twind styles clean up as the components unmount.

[sastan]

Why do you want them to be removed? They are in a style element. Your emotion styles are kept as well.

[holic]

There's is some overlap between the twind base styles/resets and the existing styles on the page that I am trying to resolve. We're introducing twind incrementally, and the overlap in styles makes it hard to do so.

Maybe what I'm looking for is a virtual sheet that is mounted alongside each component that uses twind?

[holic]

An example of a twind base style that gets injected when I'm using it with a component:

When that component is mounted on the page, anything of those elements with a margin get reset. So, for example, a set of plain <p> tags styled by Bootstrap will all lose their bottom margin.

I am okay with this problem/overlap existing when the component is mounted, but it remains when the component is unmounted.

[sastan]

I see! Got you. The preflight causes issues. You want a scoped preflight. That may be difficult because the additional scope like .tw h1 increases the specificity and therefore overrules the utility classes. See this example

To solve that you must then increase the specificity of all Twind generated classes for example using the override variant. Here is an idea

Sadly Twind does not have a configurable way to increase the specificity for all generated classes.

[holic]

Oh perfect, this might be exactly what I need. Will report back. Thank you for the quick help!

[holic]

Oof, yeah, the specificity does not play nicely with other things. For example, all of react-select's default styles get reset when in a .tw container.

Any other ideas?

[sastan]

No preflight – but a base style that is applied to all elements that are styled with Twind: Example

Or with hashed classes there is no need for a custom tw function: Example

[hastebrot]

These examples helped me to use Twind scoped in ObservableHQ notebooks without resetting the styles provided by ObservableHQ.

Demp: https://next.observablehq.com/@hastebrot/using-twind@181

BTW: Thanks for this amazing library!

[sastan]

@holic Did the last comment help?

[holic]

Thanks for checking back in. I think it helped somewhat. There’s this disappearing bottom border thing I discovered when there’s no preflight that I’m trying to debug, but needed to move on to something else yesterday. Will be poking at this some more on Monday.

…

On Mar 5, 2021, at 6:51 AM, Sascha Tandel ***@***.***> wrote:  @holic Did the last comment help? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or unsubscribe.

[holic]

Here's the issue I was seeing. With preflight disabled, some of the borders don't appear. If you remove preflight: false, you'll see the bottom border on the h1. Any idea what's going on here?

As far as I can tell from the Chrome inspector, these borders should appear - they aren't grayed out/struckthrough like I would expect if they were being overridden by other styles.

[holic]

Ah, maybe it's the lack of this in the base style?

Specifically the missing solid without the preflight causes the border not to appear.

If I add border-solid without the preflight, it shows up but seems to override the border widths so the full border appears.

It's not until I add both border-solid and border-0 that it works as expected.

[sastan]

Have you checked this comment: #134 (comment)

It is working there. Example

[sastan]

BTW: I changed the title because we may be on to something here. That could evolve into an own module like twind/scoped

import { tw, setup } from 'twind/scoped'

[holic]

Have you checked this comment: #134 (comment)

It is working there. Example

I did but Typescript was complaining about those spreads.

Even if I add // @ts-ignore here, I'm seeing ~the same results.

Here's a better reproduction of how I'm using twind and where it's not working.

Maybe it's because the borderBox key was losing its * selector? This seems to do the trick.

---

Edit: Nope, that's bad too, because then all downstream components get unset (e.g. a Bootstrap input field loses its border). Maybe we need all descendant selectors/classes to be prefixed with .tw too?

I might just live with the simple preflight: false for now and work around the border issue with border-solid border-0. I can't think of a great way to isolate the styles.

[sastan]

I did but Typescript was complaining about those spreads.

You need to cast them:

import type { CSSRules } from 'twind'

setup({
  // Define base style for all Twind rules
  preflight: ({ html, body, '*,::before,::after': borderBox, }) => ({
    '.tw': {
      // Order is important
      ...(body as CSSRules),
      ...(html  as CSSRules),
      ...(borderBox  as CSSRules),
      margin: '0',
      padding: '0',
      '&::before,&::after': borderBox
    }
  }),
})

Maybe we need all descendant selectors/classes to be prefixed with .tw too?

Then we ran into specificity issues again. .tw button > .border-1

Maybe we should get the apply route you already started. Mixing different CSS frameworks is really tough.

I will stop looking for solutions. But if you need any help or have questions please reach out to me.

I would like to move this issue into discussions because I do not really see this as an issue with twind or something that could be solved by twind.

Would that be OK with you?

[holic]

That seems reasonable! Thanks for all the help 🙏

[sastan]

Just a reminder for later: we could use the :where selector which always has 0 specificity.

[aweber1]

@holic @sastan
FWIW, I needed scoped preflight as well but took it in a slightly different direction. I have a twind-styled micro-app that is "embedded" within a site with existing styling, so want to scope the twind preflight to just my embedded components. The code below will prefix all the preflight CSS rules with a custom class name that is scoped to my embedded app/components.

Works great for my use case, hope others might find value!

// styles.ts
import { tw as baseTw, setup, CSSRules, CSSRuleValue } from 'twind';

const resetWrapperClassName = 'my-reset-wrapper';

setup({
  preflight: prefixPreflight,
});

export const tw = (...tokens: any) => `${resetWrapperClassName} ${baseTw(...tokens)}`;

function prefixPreflight({ html, body, '*,::before,::after': borderBox, ...otherCssRules }: CSSRules) {
  const prefixedRules: Record<string, CSSRuleValue> = {};
  Object.keys(otherCssRules).forEach((cssRuleKey) => {
    // some rules contain multiple selectors, e.g. "h1,h2,h3,h4,h5,h6"
    // we need to split those into separate prefixed rules and assign the same css properties to each.
    cssRuleKey.split(',').forEach((cssSelector) => {
      const prefixedSelector = `.${resetWrapperClassName} ${cssSelector}`;
      // merge rules if some already exist
      if (prefixedRules[prefixedSelector]) {
        prefixedRules[prefixedSelector] = {
          ...(prefixedRules[prefixedSelector] as any),
          ...(otherCssRules[cssRuleKey] as any),
        };
      } else {
        prefixedRules[prefixedSelector] = otherCssRules[cssRuleKey];
      }
    });
  });

  return {
    [`.${resetWrapperClassName}`]: {
      // Order is important
      ...(body as CSSRules),
      ...(html as CSSRules),
      ...(borderBox as CSSRules),
      margin: '0',
      padding: '0',
      '&::before,&::after': borderBox,
    },
    [`.${resetWrapperClassName} *, .${resetWrapperClassName} *::before, .${resetWrapperClassName} *::after`]: borderBox,
    ...prefixedRules,
  };
}

[danielweck]

Reminds me of this:
https://github.com/thomaspark/scoper/blob/5de04619ca20221663e480faa7b7288bcef24e2e/scoper.js#L10-L34

[marbemac]

Doesn't this suffer from the specificity issues though?

.sl is our prefix in this case:

Because the preflight rules are prefixed, they end up with a higher specificity than the tailwind classes:

In this case our button ends up with 0 padding from the preflight, rather than the px-3 we intend.

[marbemac]

What could be pretty snazzy if if we could "scope/prefix" everything - e.g. if scope is .my-app, all preflight rules AND all tailwind classes that are added to the document are prefixed by that scope, thus solving the specificity issue 🤔.

[lveillard]

Hello! We would love to have a TwindWrapper that enables twind only for its children and grand children.

The examples in esm.codes have disppeared and a long time has passed so I was wondering if there is a better /simple way to create this wrapper that isolates the twind runtime classes.

Thanks!

[lveillard]

This works but i have absolutely no idea what it does. I just used temporally the Frankenstein family name, mixed everything I've found, cleaned it a bit and added types 😅

const sheetWithRootSelector = (sheet: Sheet, selector: string): Sheet => ({
  ...sheet,
  insert: (rule: string, index: number, ruleObj: SheetRule) => {
    const mediaMatches = rule.match(/^@[^{]+\{/);
    const mediaQuery = mediaMatches ? mediaMatches[0] : '';
    const cleanedRule = rule
      .replace(mediaQuery, '')
      .replace(/\b(,\s*)?(html|body)\b/g, '')
      .replace(/^\s*,/, '');

    let prefixedRule = `${selector} ${cleanedRule}`;

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

    const finalRule = mediaQuery ? `${mediaQuery}${prefixedRule}` : prefixedRule;

    return sheet.insert(finalRule, index, ruleObj);
  },
});

const TwindWrapper = ({ children }: { children: React.ReactNode }) => {
  const [isLoaded, setIsLoaded] = useState(false);

  useEffect(() => {
    const config = defineConfig({
      presets: [presetAutoprefix(), presetTailwind()],
    });

    setup(config, sheetWithRootSelector(cssom(), '#twindWrapper'));
    setIsLoaded(true);
  }, []);

  if (!isLoaded) {
    return null;
  }
  return <div id="twindWrapper">{children}</div>;
};