Draft spec (24 July 2023): https://tr.designtokens.org/format/
Deprecate JSON output for page components, since the spec is not flexible enough for arbitrary properties.
Introduce the concept of transformer functions. A transformer function will receive an assets as an input and will output the same kind of asset.
Scoping class names in CSS was a transformation applied to typography and page components assets when the output is CSS.
Decoupling this transformation from the rest of the adapter results in cleaner API inbound adapters, without any project-specific logic, so now they can be co-located close to the PenpotClient code.
The 8-digit hexadecimal RGBA syntax is a more standard way to represent colors than the rgba() color function, which is CSS-specific.
The 8-digit hex notation is valid CSS as of the CSS Level 4 spec: https://www.w3.org/TR/css-color-4/#hex-notation
Additionally, the CSS rgba() comma-separated color function is considered *legacy color syntax* as per the CSS Level 4 spec: https://www.w3.org/TR/css-color-4/#legacy-color-syntax
Sass has built-in support for CSS Level 4 color notations: https://sass-lang.com/documentation/values/colors/
The 8-digit hexadecimal RGBA is a drop-in replacement for rgba() values in both CSS and SCSS, so this is functionally compatible if the file is used directly.
BREAKING CHANGE: drops CSS rgba() values in all output formats. It's a soft breaking change for CSS and SCSS outputs, but a hard one for JSON.
BREAKING CHANGE: CSS variables (color) are no longer lowercase. Since CSS custom property names are case sensitive, this would break existing consumers.
zod unions are exclusive, so the UserConfig type couldn't be kept as a union either for having at least a colors, typographies or pages output.
This check has been moved to a runtime zod refine custom validation.
U+1F5BC FRAME WITH PICTURE requires appending a U+FE0F VARIATION SELECTOR-16 so that its emoji representation is forced. This causes terminal emulators to not reserve space for the next character. A hack consisting in using a U+00A0 NO-BREAK SPACE afterwards works, but copying the output and pasting it elsewhere will cause a double space.
Replacing U+1F5BC FRAME WITH PICTURE with another emoji that doesn't have a textual representation like U+1F3A8 ARTIST PALETTE solves this.
Instead of making a new call to the Penpot API to retrieve page components, retrieve them from the Penpot file already downloaded.
Midway, it fixes some Penpot API types from arrays to records.
As observed in fa873130, current classname PoC tranformation is prone to name clashing errors because it replaces everything not matching `/[a-zA-Z_-|0-9]/g` with underscores. However, as names from typography assets coming from Penpot can hold these values (and often they will, because designers consider emoji useful specially in asset names), the tranformation needed a more thorough algorhythm to avoid clashing errors.
This implementation follows the CSS specification and browser behaviours, which allow more than those characters in class names (including non-ASCII Unicode characters, and even escaped ASCII characters that CSS uses in its syntax), to output valid CSS class nameswith a minimum surface of clashing possibilities.
Since any transformation will decrease the entropy because CSS syntax is a subset of Unicode, there are inevitable clash zones, though. Those zones are reduced to two easily observable cases: duplicated names with explicit underscores instead of spaces, and duplicated names with surrounding whitespace; e.g. "My typography", "My_typography", " My typography" or "My typography " will clash if any pair of those ever happen together.
BREAKING CHANGE: class names generation is no longer case insensitive.
