fix(styled): fix nested states (#221)

Author: gregberge

packages/core/src/transform.test.ts

@@ -7,9 +7,9 @@ const props = {
   },
 }
 
-const transformToStr = (s) =>
+const transformToStr = (s: string) =>
   transform(s)
-    .map((x) => (typeof x === 'function' ? x(props) : x))
+    .map((x: Function | string) => (typeof x === 'function' ? x(props) : x))
     .join('')
 
 describe('#transform', () => {
@@ -71,4 +71,10 @@ describe('#transform', () => {
       'div{color:#000;}@media(min-width:1920px){div{color:#000;}}div{color:#000;}',
     )
   })
+
+  it('handles nested states', () => {
+    expect(transformToStr('&:hover:not(:active) { color: black; }')).toBe(
+      '&:hover:not(:active) { color: #000; }',
+    )
+  })
 })

packages/core/src/transform.ts

@@ -5,8 +5,8 @@ import { propGetters } from './propGetters'
 // prop name is an ident: word chars, underscore and dash.
 const PROP_CHAR = `[-\\w]`
 
-// prop value consists of non-semis unless backslash-escaped.
-const VALUE_CHAR = `(?:\\\\.|[^\\\\;])`
+// prop value consists of non-semis and no curly braces unless backslash-escaped.
+const VALUE_CHAR = `(?:\\\\.|[^\\\\;{}])`
 
 // prettier-ignore
 const PROP_PATT = (