fix: preserve floating-point numbers in default unit (or unitless)

Author: jedwards1211

src/convertCssToJss.ts

@@ -12,6 +12,7 @@ import * as recast from 'recast'
 import camelCase from 'lodash/camelCase'
 import upperFirst from 'lodash/upperFirst'
 import defaultUnits from './defaultUnits'
+import unitlessProperties from './unitlessProperties'
 import {
   LiteralKind,
   IdentifierKind,
@@ -330,6 +331,8 @@ function convertDeclValue(value: string): string {
   return JSON.parse(value)
 }
 
+const numberPattern = '\\d+(\\.\\d+)?|\\.\\d+'
+
 function convertDecl(decl: postcss.Declaration): ObjectProperty {
   const key = convertProp(decl.prop)
   const declValue = convertDeclValue(decl.value)
@@ -339,9 +342,16 @@ function convertDecl(decl: postcss.Declaration): ObjectProperty {
   } else {
     const defaultUnit = defaultUnits[decl.prop]
     value = j.stringLiteral(declValue)
-    if (defaultUnit != null) {
-      const match = new RegExp(`^(\\d+)${defaultUnit}$`).exec(declValue)
+    if (defaultUnit) {
+      const match = new RegExp(`^(${numberPattern})${defaultUnit}$`).exec(
+        declValue
+      )
       if (match) value = j.numericLiteral(parseFloat(match[1]))
+    } else if (
+      unitlessProperties.has(decl.prop) &&
+      new RegExp(`^(${numberPattern})$`).exec(declValue)
+    ) {
+      value = j.numericLiteral(parseFloat(declValue))
     }
   }
   if (decl.important) {

src/defaultUnits.ts

@@ -1,14 +1,12 @@
 const px = 'px'
 const ms = 'ms'
 const percent = '%'
-const unitless = ''
 
 // copped from jss-plugin-default-unit
 export default {
   // Animation properties
   'animation-delay': ms,
   'animation-duration': ms,
-  'animation-iteration-count': unitless,
 
   // Background properties
   'background-position': px,
@@ -22,9 +20,6 @@ export default {
   'border-bottom-left-radius': px,
   'border-bottom-right-radius': px,
   'border-bottom-width': px,
-  'border-image-outset': unitless,
-  'border-image-slice': unitless,
-  'border-image-width': unitless,
   'border-left': px,
   'border-left-width': px,
   'border-radius': px,
@@ -54,10 +49,6 @@ export default {
   'mask-position-x': px,
   'mask-position-y': px,
   'mask-size': px,
-  'mask-border-outset': unitless,
-  'mask-border-width': unitless,
-  'mask-box-outset': unitless,
-  'mask-box-width': unitless,
 
   // Width and height properties
   height: px,
@@ -73,14 +64,6 @@ export default {
   top: px,
   right: px,
 
-  // Flexbox properties
-  flex: unitless,
-  'flex-grow': unitless,
-  'flex-positive': unitless,
-  'flex-shrink': unitless,
-  'flex-negative': unitless,
-  order: unitless,
-
   // Shadow properties
   'box-shadow': px,
   'text-shadow': px,
@@ -90,15 +73,11 @@ export default {
   'column-rule': px,
   'column-rule-width': px,
   'column-width': px,
-  'column-count': unitless,
 
   // Font and text properties
   'font-size': px,
   'font-size-delta': px,
-  'font-size-adjust': unitless,
-  'font-weight': unitless,
   'letter-spacing': px,
-  'line-height': unitless,
   'text-indent': px,
   'text-stroke': px,
   'text-stroke-width': px,
@@ -133,24 +112,8 @@ export default {
   'flex-basis': px,
 
   // Some random properties
-  'counter-increment': unitless,
-  'counter-reset': unitless,
-  opacity: unitless,
-  orphans: unitless,
-  'nav-index': unitless,
   'shape-margin': px,
   size: px,
-  'tab-size': unitless,
-  widows: unitless,
-  'z-index': unitless,
-  zoom: unitless,
-
-  // CSS2 Screen reader
-  'pitch-range': unitless,
-  richness: unitless,
-  'speech-rate': unitless,
-  stress: unitless,
-  volume: unitless,
 
   // Grid properties
   grid: px,
@@ -161,19 +124,6 @@ export default {
   'grid-template-columns': px,
   'grid-auto-rows': px,
   'grid-auto-columns': px,
-  'grid-row': unitless,
-  'grid-column': unitless,
-
-  // SVG properties
-  'fill-opacity': unitless,
-  'flood-opacity': unitless,
-  'stop-opacity': unitless,
-  'stroke-dasharray': unitless,
-  'stroke-dashoffset': unitless,
-  'stroke-miterlimit': unitless,
-  'stroke-opacity': unitless,
-  'stroke-width': unitless,
-  'shape-image-threshold': unitless,
 
   // Not existing properties.
   // Used to avoid issues with jss-plugin-expand integration.

src/unitlessProperties.ts

@@ -0,0 +1,65 @@
+// copped from jss-plugin-default-unit
+export default new Set([
+  // Animation properties
+  'animation-iteration-count',
+
+  // Border Properties
+  'border-image-outset',
+  'border-image-slice',
+  'border-image-width',
+
+  // Mask properties
+  'mask-border-outset',
+  'mask-border-width',
+  'mask-box-outset',
+  'mask-box-width',
+
+  // Flexbox properties
+  'flex',
+  'flex-grow',
+  'flex-positive',
+  'flex-shrink',
+  'flex-negative',
+  'order',
+
+  // Column properties
+  'column-count',
+
+  // Font and text properties
+  'font-size-adjust',
+  'font-weight',
+  'line-height',
+
+  // Some random properties
+  'counter-increment',
+  'counter-reset',
+  'opacity',
+  'orphans',
+  'nav-index',
+  'tab-size',
+  'widows',
+  'z-index',
+  'zoom',
+
+  // CSS2 Screen reader
+  'pitch-range',
+  'richness',
+  'speech-rate',
+  'stress',
+  'volume',
+
+  // Grid properties
+  'grid-row',
+  'grid-column',
+
+  // SVG properties
+  'fill-opacity',
+  'flood-opacity',
+  'stop-opacity',
+  'stroke-dasharray',
+  'stroke-dashoffset',
+  'stroke-miterlimit',
+  'stroke-opacity',
+  'stroke-width',
+  'shape-image-threshold',
+]) as Set<string>

test/css-to-jss/unitlessFloat.ts

@@ -0,0 +1,17 @@
+export const input = `
+const styles = {
+/* selectionStart */
+.foo {
+  font-size-adjust: 2.35;
+}
+/* selectionEnd */
+}
+`
+
+export const expected = `
+const styles = {
+  foo: {
+    fontSizeAdjust: 2.35,
+  }
+}
+`