Custom CSS through functions
We love using Stitches for many reasons, but the ability to add our own custom utility functions that we can use to extend our CSS is an incredibly powerful feature.
Utils are functions we write that create our own CSS properties.
Traditionally, they are defined in the utils object found in stitches.config.js.
To keep that file as clean as possible, we've split them out to a utils.js file in the Tokens folder (Design/Tokens).
In this file, we keep all our css short-hand properties. These are properties that already exist in css that we map to an abbreviated value. For example:
pt: (value) => ({
paddingTop: value,
}),
Now instead of writing out paddingTop every time, we can simply use pt and it maps to the same property.
We also combine properties for convenience:
mx: (value) => ({
marginLeft: value,
marginRight: value,
}),
If we know we're going to use the same value for both marginLeft and marginRight, we can use mx instead. Two birds with one stone.
You will find yourself referencing this file a lot at first, but you will get the hang of it in no time. We have a pretty extensive list of properties in there already but if you come across any that you may find helpful please feel free to add them - just make sure the abbreviated property isn't already accounted for!
In stitches.config.js, we import the utils.js file and spread it out within the utils object.
Afterwards you will see that we list a few very valuable custom properties as well, such as box, align and ratio.
These rely on different helper functions imported from the Utils folder (not to be confused with the utils.js file above).
They are more complex and as such, have their own dedicated documentation page. You can find them listed in the sidebar. 👈