Always hash values that contain a calc()

src/get-class-name.js

@@ -12,16 +12,15 @@ export default function getClassName(propertyInfo, value) {
   } = propertyInfo
   let valueKey
 
-  // Shortcut the global keywords and safe values
-  if (
-    safeValue ||
-    value === 'inherit' ||
-    value === 'initial' ||
-    value === 'unset'
-  ) {
+  // Shortcut the global keywords
+  if (value === 'inherit' || value === 'initial' || value === 'unset') {
     valueKey = value
-  } else if (complexValue) {
+    // Always hash values that contain a calc() because the operators get
+    // stripped which can result in class name collisions
+  } else if (complexValue || value.includes('calc(')) {
     valueKey = hash(value)
+  } else if (safeValue) {
+    valueKey = value
   } else {
     valueKey = getSafeValue(value)
   }

test/get-class-name.js

@@ -27,6 +27,14 @@ test('hashes complex values', t => {
 })
 
 test('removes all unsafe values by default', t => {
-  const result = getClassName({className: 'w'}, '50.5% calc(50.5% + 20px)')
-  t.is(result, '📦w_50-5prcnt-calc50-5prcnt--20px')
+  const result = getClassName({className: 'w'}, '50.5%')
+  t.is(result, '📦w_50-5prcnt')
+})
+
+test('always hashes values that contain a calc()', t => {
+  const result = getClassName(
+    {className: 'w', safeValue: true},
+    'calc(50% + 20px)'
+  )
+  t.is(result, '📦w_1vuvdht')
 })

test/snapshots/box.js.md

@@ -9,7 +9,7 @@ Generated by [AVA](https://ava.li).
 > DOM
 
     <div
-      className="📦clearfix 📦bg-clr_red 📦bg-img_181xl07 📦bg-siz_cover 📦bg-pos_center 📦bg-orgn_border-box 📦bg-rpt_no-repeat 📦bg-clp_padding-box 📦bg-blnd-md_multiply 📦w_calc25prcnt---10px 📦h_100px 📦min-w_100px 📦min-h_100px 📦max-w_100prcnt 📦max-h_100prcnt 📦bblr_5px 📦bbrr_5px 📦btlr_5px 📦btrr_5px 📦bs_1yidkis 📦b-btm_1px-solid-black 📦b-lft_1px-solid-black 📦b-rgt_1px-solid-black 📦b-top_1px-solid-black 📦b-btm-clr_red 📦b-lft-clr_red 📦b-rgt-clr_red 📦b-top-clr_red 📦b-btm-stl_dashed 📦b-lft-stl_dashed 📦b-rgt-stl_dashed 📦b-top-stl_dashed 📦b-btm-wdt_2px 📦b-lft-wdt_2px 📦b-rgt-wdt_2px 📦b-top-wdt_2px 📦flx_1 📦algn-itms_center 📦algn-slf_center 📦algn-cnt_center 📦just-cnt_center 📦just-self_center 📦flx-drct_column 📦flx-wrap_wrap 📦flx-grow_1 📦flx-srnk_1 📦flx-basis_10px 📦order_1 📦crsr_pointer 📦usr-slct_none 📦vsblt_visible 📦ptr-evts_auto 📦dspl_flex 📦flt_left 📦clr_both 📦z-idx_1 📦box-szg_border-box 📦ls_1j8swju 📦ls-typ_lower-greek 📦ls-img_iu2jf4 📦ls-pos_inside 📦opct_1 📦ovflw-x_auto 📦ovflw-y_auto 📦pst_relative 📦top_10px 📦rgt_10px 📦btm_10px 📦lft_10px 📦mb_10px 📦ml_10px 📦mr_10px 📦mt_10px 📦pb_10px 📦pl_10px 📦pr_10px 📦pt_10px 📦txt-algn_right 📦txt-deco_underline-dotted 📦txt-trns_capitalize 📦txt-shdw_1kcg6ht 📦txt-ovrf_ellipsis 📦color_blue 📦fnt_foz7o3 📦fnt-fam_1bil31i 📦fnt-sze_14px 📦fnt-stl_italic 📦f-vari_small-caps 📦f-wght_bold 📦ln-ht_1-2 📦wrd-brk_normal 📦wrd-wrp_break-word 📦ltr-spc_0-4em 📦tfrm_yf7huz"
+      className="📦clearfix 📦bg-clr_red 📦bg-img_181xl07 📦bg-siz_cover 📦bg-pos_center 📦bg-orgn_border-box 📦bg-rpt_no-repeat 📦bg-clp_padding-box 📦bg-blnd-md_multiply 📦w_10ae43h 📦h_100px 📦min-w_100px 📦min-h_100px 📦max-w_100prcnt 📦max-h_100prcnt 📦bblr_5px 📦bbrr_5px 📦btlr_5px 📦btrr_5px 📦bs_1yidkis 📦b-btm_1px-solid-black 📦b-lft_1px-solid-black 📦b-rgt_1px-solid-black 📦b-top_1px-solid-black 📦b-btm-clr_red 📦b-lft-clr_red 📦b-rgt-clr_red 📦b-top-clr_red 📦b-btm-stl_dashed 📦b-lft-stl_dashed 📦b-rgt-stl_dashed 📦b-top-stl_dashed 📦b-btm-wdt_2px 📦b-lft-wdt_2px 📦b-rgt-wdt_2px 📦b-top-wdt_2px 📦flx_1 📦algn-itms_center 📦algn-slf_center 📦algn-cnt_center 📦just-cnt_center 📦just-self_center 📦flx-drct_column 📦flx-wrap_wrap 📦flx-grow_1 📦flx-srnk_1 📦flx-basis_10px 📦order_1 📦crsr_pointer 📦usr-slct_none 📦vsblt_visible 📦ptr-evts_auto 📦dspl_flex 📦flt_left 📦clr_both 📦z-idx_1 📦box-szg_border-box 📦ls_1j8swju 📦ls-typ_lower-greek 📦ls-img_iu2jf4 📦ls-pos_inside 📦opct_1 📦ovflw-x_auto 📦ovflw-y_auto 📦pst_relative 📦top_10px 📦rgt_10px 📦btm_10px 📦lft_10px 📦mb_10px 📦ml_10px 📦mr_10px 📦mt_10px 📦pb_10px 📦pl_10px 📦pr_10px 📦pt_10px 📦txt-algn_right 📦txt-deco_underline-dotted 📦txt-trns_capitalize 📦txt-shdw_1kcg6ht 📦txt-ovrf_ellipsis 📦color_blue 📦fnt_foz7o3 📦fnt-fam_1bil31i 📦fnt-sze_14px 📦fnt-stl_italic 📦f-vari_small-caps 📦f-wght_bold 📦ln-ht_1-2 📦wrd-brk_normal 📦wrd-wrp_break-word 📦ltr-spc_0-4em 📦tfrm_yf7huz"
       contentEditable={true}
     />
 
@@ -45,7 +45,7 @@ Generated by [AVA](https://ava.li).
     .📦bg-blnd-md_multiply {␊
       background-blend-mode: multiply;␊
     }␊
-    .📦w_calc25prcnt---10px {␊
+    .📦w_10ae43h {␊
       width: calc(25% - 10px);␊
     }␊
     .📦h_100px {␊