Preserve Custom Properties

[jonathantneal]

This changes the internal hyphenAndVendorPrefixCssProp function to a prevent isVendorPrefixed from returning a false positive when evaluating a custom property. It also adds a custom property test that would currently fail.

Current Behavior

A custom property like --whatever is transformed into ---whatever.

This is caused by a vendor prefix check that checks for uppercase letters and falsely matches dashes.

const isVendorPrefixed = cssProp[0] === cssProp[0].toUpperCase()

// ( `-` === `-`.toUpperCase() ) === true // 😿🧻

Proposed Behavior

A custom property like --whatever remains --whatever.

The vendor prefix check would explicitly check for an uppercase letter.

const isVendorPrefixed = /^[A-Z]/.test(cssProp);

// /^[A-Z]/.test(`-`) === false // 😸 🎉 

---

Resolves #267

[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 cc1d517:

Sandbox	Source
Stitches CI: Next.js	Configuration
Stitches CI: CRA	Configuration

[peduarte]

LGTM 😍

[peduarte]

@jonathantneal I added the following test case in the react package, just to validate it works well there too:

test.only('Renders basic component with css variable', () => {
	const H1 = styled('h1', {
		'--test': 'oioi',
		fontSize: 18,
	});

	expect(renderer.create(<H1 className="hi">hello world</H1>).toJSON()).toMatchSnapshot();
});

And I get the following snapshot:

exports[`styled Renders basic component with css variable 1`] = `
{
  "orderedAppliedStyles": [
    "._eoEivG {font-size: 18px;}",
    "._idMeSv {---test: oioi;}"
  ],
  "props": {
    "className": "hi _idMeSv _eoEivG scid-dWnSgo"
  },
  "children": [
    "hello world"
  ]
}
`;

Note how the CSS Variable still contains 3 dashes ("._idMeSv {---test: oioi;}")

---

UPDATE: It works after rebuilding core! 🤕