Reference other treat file from within a treat file

[enisdenjo]

Seems like with #128 we no longer can reference other treat files from within treat files.

I actually depended on this behaviour in various places, one of them being special styles on components when placed in other components. My question is pretty simple: why not allow this? I thought this behaviour is actually very nice for easy and understandable composition.

For example, with the following treats I get special Svg component styles (sizes/colors/etc.) when placed within a Button:

// Svg.treat.ts

import { style } from 'treat';

export const root = style({ ...defaultSvgStyles });

// Button.treat.ts

import { style } from 'treat';
import { root as svgRoot } from './Svg.treat';

export const root = style({ ...defaultButtonStyles });

globalStyle(`${root} > ${svgRoot}`, () => ({
  ...specialSvgStylesWhenInsideAButton
}));

Follow-up question: how would I achieve this without importing other treat files?

[enisdenjo]

Can be done by creating a placeholder class in the encapsulating style:

// Svg.treat.ts stays the same

// Button.treat.ts

import { style } from 'treat';

export const root = style({ ...defaultButtonStyles });

export const svg = style({ ...noStylesJustAClassPlacholder });

globalStyle(`${root} > ${svg}`, () => ({
  ...specialSvgStylesWhenInsideAButton
}));

then include both the encapsulating and the component's styles, and spread the classes:

// Svg.tsx
import { root } from './Svg.treat';
import { svg } from './Button.treat';

function Svg() {
  return <svg className={root + ' ' + svg}>...</svg>;
}

But this feels kinda' off simply because now I have to make placeholder classes and manually spread them for every component that gets special styles when nested.