correctly rehydrate css custom properties (#866)

robinweser · Feb 12, 2021 · 652d84d · 652d84d
1 parent 12fa962
commit 652d84d
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 2 deletions.
diff --git a/packages/fela-dom/src/dom/rehydration/__tests__/__snapshots__/rehydrateRules-test.js.snap b/packages/fela-dom/src/dom/rehydration/__tests__/__snapshots__/rehydrateRules-test.js.snap
@@ -1,5 +1,19 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Rehydrating rules should rehydrate css custom properties 1`] = `
+Object {
+  "--custom-property12px": Object {
+    "className": "a",
+    "declaration": "--custom-property:12px",
+    "media": "",
+    "pseudo": "",
+    "selector": ".a",
+    "support": "",
+    "type": "RULE",
+  },
+}
+`;
+
 exports[`Rehydrating rules should rehydrate prioritized longhand rules 1`] = `
 Object {
   ":hovercolorred": Object {

diff --git a/packages/fela-dom/src/dom/rehydration/__tests__/rehydrateRules-test.js b/packages/fela-dom/src/dom/rehydration/__tests__/rehydrateRules-test.js
@@ -9,14 +9,18 @@ describe('Rehydrating rules', () => {
     ).toMatchSnapshot()
   })
 
-  it.only('should rehydrate prioritized longhand rules', () => {
+  it('should rehydrate prioritized longhand rules', () => {
     expect(
       rehydrateRules(
         '.a.a{padding-left:20px}.b{padding:10px}.c.c:hover{color:red}'
       )
     ).toMatchSnapshot()
   })
 
+  it('should rehydrate css custom properties', () => {
+    expect(rehydrateRules('.a{--custom-property:12px}')).toMatchSnapshot()
+  })
+
   it('should rehydrate the renderer cache with specifity prefix', () => {
     expect(
       rehydrateRules(

diff --git a/packages/fela-dom/src/dom/rehydration/rehydrateRules.js b/packages/fela-dom/src/dom/rehydration/rehydrateRules.js
@@ -43,7 +43,8 @@ export default function rehydrateRules(
     /* eslint-enable */
 
     const declarationReference = generateDeclarationReference(
-      camelCaseProperty(property),
+      // keep css custom properties as lower-cased props
+      property.indexOf('--') === 0 ? property : camelCaseProperty(property),
       value,
       pseudo,
       media,

diff --git a/packages/fela/src/__tests__/__snapshots__/createRenderer-test.js.snap b/packages/fela/src/__tests__/__snapshots__/createRenderer-test.js.snap
@@ -4,6 +4,20 @@ exports[`Renderer Rendering keyframes should return a valid animation name 1`] =
 
 exports[`Renderer Rendering rules should allow nested props 1`] = `"a b"`;
 
+exports[`Renderer Rendering rules should render css custom properties 1`] = `
+Object {
+  "--custom-property12px": Object {
+    "className": "a",
+    "declaration": "--custom-property:12px",
+    "media": "",
+    "pseudo": "",
+    "selector": ".a",
+    "support": "",
+    "type": "RULE",
+  },
+}
+`;
+
 exports[`Renderer Rendering rules should reuse cached classNames 1`] = `"a b"`;
 
 exports[`Renderer Rendering rules should reuse cached classNames 2`] = `"c b"`;

diff --git a/packages/fela/src/__tests__/createRenderer-test.js b/packages/fela/src/__tests__/createRenderer-test.js
@@ -114,6 +114,17 @@ describe('Renderer', () => {
 
       expect(renderer.cache.colorred.selector).toEqual('.a.a')
     })
+
+    it('should render css custom properties', () => {
+      const rule = () => ({
+        '--custom-property': '12px',
+      })
+
+      const renderer = createRenderer()
+      renderer.renderRule(rule)
+
+      expect(renderer.cache).toMatchSnapshot()
+    })
   })
 
   describe('Rendering keyframes', () => {