Implement attributes parameter while creating a styled component

README.md

@@ -190,6 +190,21 @@ And into your `Wrapper` component:
   `;
 ```
 
+### HTML Attributes
+
+While creating a styled component you can pass an object that describes html attibutes of this component.
+
+```JSX
+import styled from 'vue-styled-components';
+
+const StyledImage = styled('img', {}, { src: 'image.jpg', alt: 'Test image' })`
+  width: 50px;
+  height: 50px;
+`;
+
+export default StyledImage;
+```
+
 ### Style component constructors as `router-link`
 
 You can style also Vue component constructors as `router-link` from `vue-router` and other components

src/constructors/styled.js

@@ -3,12 +3,12 @@ import domElements from '../utils/domElements'
 import isValidElementType from '../utils/isValidElementType'
 
 export default (createStyledComponent) => {
-  const styled = (tagName, props = {}) => {
+  const styled = (tagName, props = {}, attrs = {}) => {
     if (!isValidElementType(tagName)) {
       throw new Error(tagName + ' is not allowed for styled tag type.')
     }
     return (cssRules, ...interpolations) => (
-      createStyledComponent(tagName, css(cssRules, ...interpolations), props)
+      createStyledComponent(tagName, css(cssRules, ...interpolations), props, attrs)
     )
   }
 

src/models/StyledComponent.js

@@ -1,12 +1,15 @@
 export default (ComponentStyle) => {
-  const createStyledComponent = (target, rules, props) => {
+  const createStyledComponent = (target, rules, props, attrs) => {
     const prevProps = target && typeof target !== 'string'
       ? (typeof target === 'object' ? target.props : (typeof target === 'function' ? target.options.props : {}))
       : {}
     const mergedProps = Object.assign({}, prevProps, props)
 
     const componentStyle = new ComponentStyle(rules)
 
+    // Null check
+    const attributes = attrs || {}
+
     const StyledComponent = {
       inject: {
         $theme: {
@@ -30,6 +33,7 @@ export default (ComponentStyle) => {
           target,
           {
             class: [this.generatedClassName],
+            attrs: attributes,
             props: this.$props,
             domProps: {
               value: this.value

src/test/attributes.test.js

@@ -0,0 +1,58 @@
+import Vue from 'vue/dist/vue';
+import expect from 'expect'
+
+import styleSheet from '../models/StyleSheet'
+import { resetStyled, expectCSSMatches } from './utils'
+
+let styled
+
+describe('attributes', () => {
+  /**
+   * Make sure the setup is the same for every test
+   */
+  beforeEach(() => {
+    styled = resetStyled()
+  })
+
+  it('should add html attributes to an element', () => {
+    const Comp = styled('img', {}, { src: 'image.jpg' })`
+      width: 50px;
+    `
+    const vm = new Vue(Comp).$mount()
+    expect(vm._vnode.data.attrs).toEqual({ src: 'image.jpg' })
+  })
+
+  it('should add several html attributes to an element', () => {
+    const Comp = styled('img', {}, { src: 'image.jpg', alt: 'Test image' })`
+      width: 50px;
+    `
+    const vm = new Vue(Comp).$mount()
+    expect(vm._vnode.data.attrs).toEqual({ src: 'image.jpg', alt: 'Test image' })
+  })
+
+  it('should work as expected with empty attributes object provided', () => {
+    const Comp = styled('img', {}, {})`
+      width: 50px;
+    `
+    const vm = new Vue(Comp).$mount()
+    expectCSSMatches('.a {width: 50px;}')
+  })
+
+  it('should work as expected with null attributes object provided', () => {
+    const Comp = styled('img', {}, null)`
+      width: 50px;
+    `
+    const vm = new Vue(Comp).$mount()
+    expectCSSMatches('.a {width: 50px;}')
+    expect(vm._vnode.data.attrs).toEqual({})
+  })
+
+  it('should work as expected without attributes provided', () => {
+    const Comp = styled('img')`
+      width: 50px;
+    `
+    const vm = new Vue(Comp).$mount()
+    expectCSSMatches('.a {width: 50px;}')
+    expect(vm._vnode.data.attrs).toEqual({})
+  })
+})