fix(custom-properties): use default key name if pluralize returns empty

[wahidrahim]

This fixes a bug in custom-properties where keys such as "s" are not generated correctly. This is due to the pluralize package not handling "s" in an expected way in this context of themes.

Essentially

pluralize("s", 1) === ""

This will not be corrected on pluralize, see: plurals/pluralize#36

This poses a problem for theme keys which is using "s" as a key to indicate "small", for example.

Bug

Consider a theme where we have radius sizes defined as:

const theme: Theme = {
  // ...
  radii: {
    0: '0px',
    s: '2px',
    m: '4px',
    l: '8px',
    xl: '16px',
  },
}

This will create an incorrect CSS var, for the "s" key:

--theme-ui-radius-0: 0px;
--theme-ui-radius-: 2px; /* Incorrect */
--theme-ui-radius-m: 4px;
--theme-ui-radius-l: 8px;
--theme-ui-radius-xl: 16px;

And you also get the invalid CSS custom property warning:

theme-ui] Theme key "2px" found will produce an invalid CSS custom property. Keys must only contain the following: A-Z, a-z, 0-9, hyphen, underscore.

Solution

Since pluralize can at times return empty strings, in such cases it is better to just use the key itself. With this fix the output for the radius CSS custom properties are as expected:

--theme-ui-radius-0: 0px;
--theme-ui-radius-s: 2px;
--theme-ui-radius-m: 4px;
--theme-ui-radius-l: 8px;
--theme-ui-radius-xl: 16px;

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated
theme-ui	✅ Ready (Inspect)	Visit Preview	💬 Add your feedback	Feb 3, 2023 at 7:57PM (UTC)

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 91f14e9:

Sandbox	Source
next-theme-ui-example	Configuration
gatsby-plugin-theme-ui-example	Configuration

[lachlanjc]

Thank you for the thorough info & tests! Looks great

[hasparus]

🚀 PR was released in v0.15.5 🚀