How can we scope the global styles under one element?

[blenderskool]

I'm trying to use twin.macro in a project which has polluted global styles, and I want neither it affecting components built with twin.macro, nor twin.macro's global styles affecting them.

A solution I could come up for this was scoping the global styles from twin.macro under one element, for example:

import styled from 'styled-components';
import { globalStyles } from 'twin.macro';

const GlobalStylesScope = styled.div(globalStyles);

function App() {
  return (
    <>
      <GlobalStylesScope>
        <button>Preflight applied</button>
      </GlobalStylesScope>
      <button>Preflight not applied</button>
    </>
  );
}

The problem I'm facing here is that the styles generated using tailwind classes (via twin.macro) is on an outer scope, and thus the global styles have higher specificity, resulting in resets from global styles taking higher priority than the utilities themselves.

import styled from 'styled-components';
import { globalStyles } from 'twin.macro';

const GlobalStylesScope = styled.div(globalStyles);

function App() {
  return (
    <GlobalStylesScope>
      <button tw="bg-black">Background color is unchanged</button>
    </GlobalStylesScope>
  );
}

The only approach I could think of to solve this would be if twin.macro could generate styles with some scope applied. Example:

import styled from 'styled-components';
import { globalStyles } from 'twin.macro';

const GlobalStylesScope = styled.div(globalStyles);

function App() {
  return (
    <GlobalStylesScope id="my-element">
      <button tw="bg-black">Black button</button>
    </GlobalStylesScope>
  );
}

/*
Style generated for the button would look something like:
#my-element .generated-classname {
  background-color: black;
}
*/

This could work as ids have more specificity than classnames. Open to any ideas / other approaches that could solve this 🙂

[ben-rogerson]

Perhaps the new css :scope feature could help you here - I haven't tested this with styled-components before, but it seems like it could create a new scope for you but unsure it'll play nice with the global styles yet - please report back with your findings!

Something like:

import styled from 'styled-components';
import { globalStyles } from 'twin.macro';

const GlobalStylesScope = styled.div({ '@scope (#my-element)': globalStyles });

[blenderskool]

@ben-rogerson Thanks for the help, I think you meant @scope feature. I just tested this in a vanilla CSS playground and this seems like the perfect solution for my problem. But it's still in its infancy which means I cannot use it my project right now 🥲

I did find an alternate solution to this which is similar to the idea I was hoping worked. Turns out, styled-components exposes a StyleSheetManager component that modifies how styled-components generates class names for a React sub-tree. It also takes stylisPlugins as a prop which gives granular control over how styles and class names are generated.

There is a stylis plugin - stylis-plugin-extra-scope, that boosts the specificity of styles generated by adding additional scopes in front of the class names. A combination of these worked exactly how I wanted!

import styled, { StyleSheetManager } from 'styled-components';
import { globalStyles } from 'twin.macro';
import extraScopePlugin from 'stylis-plugin-extra-scope';

const GlobalStylesScope = styled.div(globalStyles);

function App() {
  return (
    <>
      <GlobalStylesScope id="my-element">
        <StyleSheetManager stylisPlugins={[extraScopePlugin("#my-element")]}>
          <button tw="bg-black">Black button</button>
        </StyleSheetManager>
      </GlobalStylesScope>

      <button>Default button</button>
    </>
  );
}

The only thing left to solve was that the extraScopePlugin does not work with latest version of styled-components as it uses stylis v4. But I was able to come up with some thing custom by following an already open PR on their repo to get things to work fine. I'll test it a bit more extensively now.