Prefixed token issue

package.json

@@ -124,7 +124,8 @@
       "@dash-ui/styles": "<rootDir>/src/index.ts"
     },
     "testMatch": [
-      "<rootDir>/{server/src,src}/**/?(*.)test.ts"
+      "<rootDir>/src/**/*(*.)@(spec|test).[jt]s?(x)",
+      "<rootDir>/server/src/**/*(*.)@(spec|test).[jt]s?(x)"
     ],
     "collectCoverageFrom": [
       "**/src/**/*.ts"

src/create-styles.ts

@@ -788,8 +788,9 @@ function serializeTokens(
       vars[key] = result.vars
       css += result.css
     } else {
+      const allowedKey = key.replace(/^[^\w-]+/g, '')
       let name = cssCase(
-        names.length > 0 ? names.join('-') + '-' + key : key
+        names.length > 0 ? names.join('-') + '-' + allowedKey : allowedKey
       ).replace(cssDisallowedRe, '-')
       vars[key] =
         'var(' +

src/index.test.ts

@@ -143,6 +143,31 @@ describe('createStyles()', () => {
     expect(style.css('primary')).toEqual('color:var(--color-primary);')
     expect(myStyles.theme('light')).toEqual('ui-light-theme')
   })
+
+  it('should remove special character(s) from the start of the token key.', () => {
+    const myStyles = createStyles({
+      tokens: {
+        space: {
+          $1: '5px',
+          $2: '10px',
+        },
+        color: {
+          red: {$100: 'red'},
+        },
+      },
+    })
+
+    const style = myStyles({
+      primary: ({space, color}) => ({
+        paddingLeft: space.$2,
+        color: color.red.$100,
+      }),
+    })
+
+    expect(style.css('primary')).toEqual(
+      'padding-left:var(--space-2);color:var(--color-red-100);'
+    )
+  })
 })
 
 describe('styles()', () => {

test/resolve-snapshot.js

@@ -4,14 +4,16 @@ const snapshots = '__snapshots__'
 module.exports = {
   resolveSnapshotPath: (testPath, snapshotExtension) =>
     path.join(
-      testPath.split('/').slice(0, -1).join('/'),
-      snapshots,
-      testPath.split('/').pop() + snapshotExtension
+      path.join(path.dirname(testPath), snapshots),
+      path.basename(testPath) + snapshotExtension
     ),
+
   resolveTestPath: (snapshotFilePath, snapshotExtension) =>
     path.join(
-      snapshotFilePath.split('/').slice(0, -2).join('/'),
-      snapshotFilePath.split('/').pop().slice(0, -snapshotExtension.length)
+      path.dirname(snapshotFilePath),
+      '..',
+      path.basename(snapshotFilePath, snapshotExtension)
     ),
-  testPathForConsistencyCheck: 'src/foo.test.js',
+
+  testPathForConsistencyCheck: path.join('src', 'foo.test.js'),
 }