Atomic CSS: Dev friendly class name generation

[jpnelson]

Describe the enhancement

I think it'd be useful if it were possible to generate more readable class names in development, for example:

import { css } from '@linaria/atomic';
export const classes = css`
    background: red;
    padding: 5px;
    outline: 1px;
    display: flex;
`;

could become

export const classes = 'atm_bg_red atm_pd_5 atm_ol_1 atm_d_flex';

(only when NODE_ENV=development)

I think this would be an opt-in behavior too, configured in the linaria config.

Format of the atoms

I think we'd still need to have the format be {prefix}_{property}_{value} but as long as these are all deterministic and unique, they can be anything. We can hash well known properties and values using this, and leave the regular slugifying logic for properties / values we don't recognize (for example, custom properties).

I would consider being inspired by other libraries for the readable versions – for example, tachyons or tailwind have conventions around these shortened prefixes already.

Suggestion – dev classes

Another idea – I'd consider adding development classes to the string that are not atomic, based on the name of the file. For example,

// Component.ts
import { css } from '@linaria/atomic';
export const classes = css`
    background: red;
`;

becomes

export cost classes = 'atm_bg_red devonly_Component';

which might help with readability too. It's otherwise a little tricky to know where the names are coming from. A downside of doing this is that people might accidentally depend on the devonly class, but maybe this could be an option.

Motivation

I think this would be useful to aid in readability of the atoms in the dom, for local development. This is based on some feedback we've received from testing it too.

Possible implementations

I think this should be pretty simple to add to the atomizer logic. We already shorten some common properties, I think we can extend this to a development mode that makes the atoms readable.

Related Issues

https://github.com/callstack/linaria/issues/1015