A method to contain theme-ui styles & others with SliceMachine Slices

I have been making use of theme-ui for developing my slices in Prismic's SliceMachine. In addition to TailwindCSS I actually find the two work well in this case, as well as being similar.

Granted theme-ui is probably more React than Vue directed, but in the case of Vue I will use Tailwind or Bulma, which will give the same result and ability to split stuff.

Splitting files to target slices. (not splitting hairs)

So there is a way that I noticed early on that you can place all the slice styles in the central theme-ui file theme.js

Basically, you create a new slice, Hero. You make a style entry for that variation. You make a new slice, Features and make that entry. And so on. Noting that you might want to add more variations each slice type.

So what you might end up having, and I did a little bit and why I want/have been moving to this style:

 1 
 2export default {
 3    slices: {
 4        hero: {
 5            default: {
 6                // ... a whole bunch of styles
 7            },
 8            variation1: {
 9                // ... a whole bunch of styles
10            },
11            variation2: {
12                // ... a whole bunch of styles
13            },
14        },
15        feature: {
16            default: {
17                // ... a whole bunch of styles
18            },
19            variation1: {
20                // ... a whole bunch of styles
21            },
22            variation2: {
23                // ... a whole bunch of styles
24            },
25        },
26        anotherSlice: {
27            default: {
28                // ... a whole bunch of styles
29            },
30            variation1: {
31                // ... a whole bunch of styles
32            },
33            variation2: {
34                // ... a whole bunch of styles
35            },
36        },
37        content: {
38            default: {
39                // ... a whole bunch of styles
40            },
41            variation1: {
42                // ... a whole bunch of styles
43            },
44            variation2: {
45                // ... a whole bunch of styles
46            },
47        },
48    }
49}

So it might get rather long winded. 😐

A solution to the problem

This solution might not tickle the fancy of everyone, but I like it :). So to explain my solution to the problem of too many variations for each slice in the main theme-ui file.

Basically, it is mimicking the pattern of Next.js (by extension React) by placing a style definition inside the slice folder.

 1export const highlight = {
 2    default: {
 3        wrapper: {
 4            paddingX: ['2', '4'],
 5            paddingY: ['1', '2'],
 6            background: `linear-gradient(95deg, var(--distributor-highlight) 30%, rgba(255, 255, 255, 0) 66%)`,
 7            margin: 'auto',
 8            textAlign: 'center',
 9            position: 'relative',
10            overflow: 'hidden',
11            width: '100%',
12        },
13    },
14}

This is a two fold benefit from my perspective.

Benefit 1

You know where to look if you want to edit that slices styles or need to reference what is going on. You can place some overrides you can reference onto the other styles and so forth.

You don't need to then scroll (or search, I know) for the correct section.

So you end up with a neat directory structure like so:

1.
2└── slices/
3    ├── Hero
4    ├── index.js{x}
5    ├── model.json
6    └── module.theme.js *

You can then import module.theme.js the new file in the directory. Name it what you prefer though.

Benefit 2 !

Your slice is now independent of the rest of the slice library and more reusable.

Why? you ask...

Simple, people are inherently lazy.

And if you have a design pattern or would like a good base to work of for your new slice library, you can just pull a slice in.

Also maybe it works better for some ideas I have too, LOL... ^{💭 (Let's see how many get this far)}

How to make use of this pattern then

You would make use of these individual styles like you would if you split your theme-ui colors, typography and other styles into separate files in the base styles directory.

You would do the following maybe in the main file theme.js:

 1import { highlight } from "slices/highlight/module.theme";
 2 
 3export default {
 4 
 5    // ... other styles.
 6    slices: {
 7        ...highlight,
 8    },
 9    //... other styles.
10}

1/**
2 * And when you are using it, it's like this:
3 */
4 
5<Flex
6    variant="slices.highlight.wrapper"
7>
8    Something Here :)
9</Flex>

Basic as that. Import, destructure and enjoy.

I hope you enjoyed this short thing, maybe message if you see something wrong.