Plain export JSS to simple CSS classes

[cudr]

Is your feature request related to a problem? Please describe.
Hey! Thanks for this awesome library, this is a question or feature request.

Describe the solution you'd like
Is there a way to export plain css with simple class names?

For example, convert this:

const theme = {
    colors: {
        red: 'red',
        green: 'green',
        brown: 'brown'
    },
    sizes: {
        l: '40px',
        m: '32px',
        s: '24px'
    }
}

const button = {
    color: '$red',
    variants: {
        variant: {
            primary: {
                color: '$green'
            },
            secondary: {
                color: '$brown'
            }
        },
        size: {
            l: {
                height: '$sizes$l'
            },
            m: {
                height: '$sizes$m'
            },
            s: {
                height: '$sizes$s'
            }
        }
    }
}

to css like:

:root {
  --colors-red: red;
  --colors-green: green;
  --colors-brown: brown;

  --sizes-l: 40px;
  --sizes-m: 32px;
  --sizes-s: 24px;
}

:root {
  --button-color: var(--colors-red);
  --button-variant-primary-color: var(--colors-green);
  --button-variant-secondary-color: var(--colors-brown);

  --button-size-l-height: var(--sizes-l);
  --button-size-m-height: var(--sizes-m);
  --button-size-s-height: var(--sizes-s);
}

.button {
  color: var(--button-color);
}
.button-variant-primary {
  color: var(--button-variant-primary-color);
}
.button-variant-secondary {
  color: var(--button-variant-secondary-color);
}
.button-size-l {
  height: var(--button-size-l-height);
}
.button-size-m {
  height: var(--button-size-m-height);
}
.button-size-m {
  height: var(--button-size-m-height);
}

I think this should be implemented by some stage of preparing the theme -> and converting by @stitches/stringify to css.

Additional context
Strongly agree with #477 motivation, it will be an killer feature.

[peduarte]

Hi. Thanks for this. Moving to a discussion

[mryechkin]

Would love to see this feature - was just going to post a similar request. We're looking to be able to provide users not just with ready-made React components, but also plain CSS that they can use without needing React in the stack.

So for instance if we currently have something like:

// ./Button.js
import { styled } from './stitches.config';

export default const Button = styled('button', {
  backgroundColor: '$coral',
  fontSize: '$sm',
  px: '$6',
  py: '$4',
  '&:hover': {
    backgroundColor: '$coral_dark',
  },
  variants: {
    small: {
      true: {
        px: '$4',
        py: '$2',
      },
    },
  },
});

We'd also like to provide some way for our library to export the CSS on its own, so that users can utilize it in simple HTML + JS projects, without the dependency on React.

I'm currently exploring if we can do something like this:

// ./Button.js
import { css, styled } from './stitches-config';

const styles = {
  // style defs
};

const ButtonCSS = css(styles);

export { ButtonCSS };

export default const Button = styled('button', styles);

..but not sure if this would be the right approach?

[mryechkin]

So trying out my approach above.. This seems to work?

import { ButtonCSS, globalStyles } from 'my-library';

globalStyles();

document.querySelector('#app').innerHTML = `
  <button id="my-button">Click Me!</button>
`;

const btn = document.getElementById('my-button');
btn.classList.add(ButtonCSS());

It feels a bit hacky, and definitely more of an escape hatch than the recommended pattern - but at least this way our users can have something they can use in plain JS projects (or other frameworks).

Would love to get other opinions on this approach though!

EDIT: Spoke too soon 😅

It gets even more hacky once there's more than one class name specified. Doing the above throws this error:

Uncaught DOMException: Failed to execute 'add' on 'DOMTokenList': The token provided ('c-jlsuTB c-jlsuTB-gRlIOO-small-true') contains HTML space characters, which are not valid in tokens.

So users would need to check for spaces and add the classes one-by-one instead. Doable, but kind of a pain. Still, thought I'd share!

[mryechkin]

A few more tweaks.. thinking of giving this pattern a shot. It seems to work and do what I expect it to, however would love some feedback if there are any potential issues with this approach.

In my component library (my-library):

// ./stitches.config.js
import { createStitches } from '@stitches/react';

export const {
  config
  createTheme,
  css,
  getCssText,
  globalCss,
  keyframes,
  styled,
  theme,
} = createStitches({
  // default theme
});

export const globalStyles = globalCss({
  '*': { margin: 0, padding: 0 },
});

// ./src/components/Button.js
import { styled } from '../../stitches.config';

export const ButtonStyle = {
  // style defs
};

export default const Button = styled('button', ButtonStyle);

// ./src/components/index.js
export { default as Button, ButtonStyle } from './Button';

And here's consuming it in another project:

React:

import { Button } from 'my-library';

const css = {
  // custom overrides if needed
};

<Button css={css}>Click Me</Button>

Plain JavaScript:

import { ButtonStyles, css } from 'my-library':

function applyCSS(el, css) {
  const cn = css?.className?.split(' ');
  cn.map((className) => {
    el.classList.add(className);
  });
}

const css = {
  // custom overrides if needed
};

applyCSS(document.querySelector('#my-button'), css({ ...ButtonStyles, ...css })());

@peduarte @jonathantneal would appreciate if you could provide some guidance on doing it this way 🙏 I'm still in the exploratory stage, so want to make sure I'm not heading down the wrong path.

[peduarte]

This is very interesting! I dont think theres a wrong path, not many people have explored this usage. Excited to see what you will come up with.

[achan-godaddy]

I'm not sure about classes, but it's definitely relatively easy to extract the theme custom props (vars) to a css file using something like postcss to help generate it the same way that tailwind generates theirs from a tailwind config if that's something we're interested in.

[achan-godaddy]

I shouldn't say easy, relatively possible is probably a better way to put this 😄