Resolve #40 with component selectors

Author: lttb

src/createStyled.js

@@ -42,7 +42,7 @@ const createStyled = (jss: Function) => (baseStyles: BaseStylesType = {}): Style
     const {tagName, style} = getStyledArgs(tagNameOrStyledElement)
     const elementStyle = {...style, ...ownStyle}
 
-    return styled({tagName, baseStyles, elementStyle, mountSheet})
+    return styled({tagName, baseStyles, elementStyle, mountSheet, jss})
   }
 
   Object.defineProperty(styledWrapper, 'sheet', ({

src/styled.js

@@ -14,29 +14,30 @@ import type {
 type StyledArgs = {
   tagName: string,
   elementStyle: ComponentStyleType,
-  mountSheet: Function
+  mountSheet: Function,
+  jss: Function
 }
 
-const styled = ({tagName, elementStyle, mountSheet}: StyledArgs) => {
+const styled = ({tagName, elementStyle, mountSheet, jss}: StyledArgs) => {
   const {dynamicStyle, staticStyle} = getSeparatedStyles(elementStyle)
   const staticTagName = staticStyle && generateTagName(tagName)
 
   const availableDynamicTagNames = []
   const classMap = {}
 
-  return class StyledElement extends Component<StyledElementPropsType> {
+  let staticClassName
+
+  class StyledElement extends Component<StyledElementPropsType> {
     static tagName: string = tagName
     static style: ComponentStyleType = elementStyle
 
-    dynamicTagName = ''
-
-    sheet: JssSheet
-
     constructor(props: StyledElementPropsType) {
       super(props)
       if (!this.dynamicTagName && dynamicStyle) {
         this.dynamicTagName = availableDynamicTagNames.pop() || generateTagName(tagName)
       }
+
+      this.staticClassName = staticClassName
     }
 
     componentWillMount() {
@@ -66,6 +67,12 @@ const styled = ({tagName, elementStyle, mountSheet}: StyledArgs) => {
       availableDynamicTagNames.push(this.dynamicTagName)
     }
 
+    dynamicTagName = ''
+
+    sheet: JssSheet
+
+    staticClassName = ''
+
     updateSheet(props: StyledElementPropsType) {
       let rule
       let ruleIndex = 0
@@ -83,6 +90,7 @@ const styled = ({tagName, elementStyle, mountSheet}: StyledArgs) => {
 
       const props = filterProps(tagName, attrs)
       const tagClass = composeClasses([
+        this.staticClassName,
         staticTagName && this.sheet.classes[staticTagName],
         this.dynamicTagName && this.sheet.classes[this.dynamicTagName],
         className
@@ -91,6 +99,22 @@ const styled = ({tagName, elementStyle, mountSheet}: StyledArgs) => {
       return createElement(tagName, {...props, className: tagClass}, children)
     }
   }
+
+  // $FlowIgnore
+  StyledElement.valueOf = () => {
+    if (!staticClassName) {
+      staticClassName = `.${jss.generateClassName({
+        key: generateTagName('static')
+      })}`
+    }
+
+    return staticClassName
+  }
+
+  // $FlowIgnore
+  StyledElement.toString = StyledElement.valueOf
+
+  return StyledElement
 }
 
 export default styled

src/tests/__snapshots__/functional.spec.jsx.snap

@@ -100,6 +100,48 @@ exports[`functional tests should update props and unmount 2`] = `
 }"
 `;
 
+exports[`functional tests should use Styled Component classname in string 1`] = `
+".div-4-id:not(:first-child) .static-2-id {
+  display: none;
+}
+.div-4-id:not(:last-child) .static-3-id {
+  visibility: hidden;
+}
+.div-4-id .static-2-id {
+  color: green;
+}
+.div-1-id {
+  color: red;
+}
+.img-5-id {
+  width: 30px;
+}"
+`;
+
+exports[`functional tests should use Styled Component classname in string 2`] = `
+<StyledElement>
+  <div
+    className="div-4-id"
+  >
+    <StyledElement>
+      <div
+        className=".static-2-id div-1-id"
+      >
+        name
+      </div>
+    </StyledElement>
+    <StyledElement
+      width={30}
+    >
+      <img
+        className=".static-3-id img-5-id"
+        width={30}
+      />
+    </StyledElement>
+  </div>
+</StyledElement>
+`;
+
 exports[`functional tests should use props on remount 1`] = `
 ".button-1-id {
   color: black;

src/tests/functional.spec.jsx

@@ -134,4 +134,36 @@ describe('functional tests', () => {
 
     wrapper.unmount()
   })
+
+  it('should use Styled Component classname in string', () => {
+    const AuthorName = styled('div')({color: 'red'})
+    const Avatar = styled('img')({width: props => props.width})
+
+    const Message = styled('div')({
+      [`&:not(:first-child) ${AuthorName}`]: {
+        display: 'none'
+      },
+      [`&:not(:last-child) ${Avatar}`]: {
+        visibility: 'hidden'
+      },
+      [`& ${AuthorName}`]: {
+        color: 'green'
+      }
+    })
+
+    const wrapper = mount(
+      <Message>
+        <AuthorName>name</AuthorName>
+        <Avatar width={30} />
+      </Message>
+    )
+
+    const {sheet} = styled
+
+    assertSheet(sheet)
+
+    expect(wrapper).toMatchSnapshot()
+
+    wrapper.unmount()
+  })
 })