Merge pull request #65 from cloud-walker/escape-values

Properly escape custom props

Author: RyanClementsHax

src/index.spec.ts

@@ -1,9 +1,8 @@
-import { Theme } from './config'
-import multiThemePlugin from '.'
-import { MultiThemePluginOptions } from './utils/optionsUtils'
-import { defaultThemeName } from './utils/optionsUtils'
-import { PluginAPI } from 'tailwindcss/types/config'
 import { mock } from 'jest-mock-extended'
+import { PluginAPI } from 'tailwindcss/types/config'
+import multiThemePlugin from '.'
+import { Theme } from './config'
+import { MultiThemePluginOptions, defaultThemeName } from './utils/optionsUtils'
 
 describe('multiThemePlugin', () => {
   describe('handler', () => {
@@ -25,6 +24,9 @@ describe('multiThemePlugin', () => {
               colors: {
                 primary: 'another',
                 secondary: 'something'
+              },
+              spacing: {
+                '0.5': '10px'
               }
             }
           }
@@ -65,7 +67,8 @@ describe('multiThemePlugin', () => {
         expect(api.addBase).toHaveBeenCalledWith({
           [`.escaped-${theme.name}`]: {
             '--colors-primary': 'another',
-            '--colors-secondary': 'something'
+            '--colors-secondary': 'something',
+            '--spacing-0\\.5': '10px'
           }
         })
       }

src/utils/customPropUtils.ts

@@ -1,5 +1,17 @@
 import { isColor, toRgb, withOpacity } from './colorUtils'
 
+/**
+ * Code copied from the tailwind official codebase
+ * @link https://github.com/tailwindlabs/tailwindcss/blob/fbbba6f67f73c3a4f9571649c3fc27006446d8f4/src/lib/regex.js#L70
+ */
+const REGEX_SPECIAL = /[\\^$.*+?()[\]{}|]/g
+const REGEX_HAS_SPECIAL = RegExp(REGEX_SPECIAL.source)
+export const escape = (string?: string): string => {
+  return string && REGEX_HAS_SPECIAL.test(string)
+    ? string.replace(REGEX_SPECIAL, '\\$&')
+    : string || ''
+}
+
 /**
  * @param value - a custom prop value
  * @return the value converted to a string of its rgb components comma separated if it is a color else it returns the value unaltered
@@ -27,9 +39,9 @@ export const toCustomPropName = (valuePath: string[]): string => {
       )}"`
     )
   }
-  return `--${valuePath
-    .filter(step => step.toLowerCase() !== 'default')
-    .join('-')}`
+  return escape(
+    `--${valuePath.filter(step => step.toLowerCase() !== 'default').join('-')}`
+  )
 }
 
 /**

src/utils/themeUtils.spec.ts

@@ -1,10 +1,10 @@
+import { mock } from 'jest-mock-extended'
+import { PluginAPI } from 'tailwindcss/types/config'
+import { PluginUtils, TailwindExtension, Theme } from '../config'
 import {
   resolveThemeExtensionAsCustomProps,
   resolveThemeExtensionsAsTailwindExtension
 } from './themeUtils'
-import { PluginUtils, TailwindExtension, Theme } from '../config'
-import { PluginAPI } from 'tailwindcss/types/config'
-import { mock } from 'jest-mock-extended'
 
 describe('themeUtils', () => {
   let pluginUtils: PluginUtils