babel-plugin-styled-components-attr - npm Package Compare versions

Comparing version 0.0.2 to 0.0.3

package.json

 {
   "name": "babel-plugin-styled-components-attr",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "CSS attr function in your styled components",
@@ -26,2 +26,3 @@ "main": "src/index.js",
     "jest-cli": "^20.0.4",
+    "jest-styled-components": "^3.0.0",
     "npm-run-all": "^4.0.2",
@@ -28,0 +29,0 @@ "react": "^15.5.4",

README.md

 # babel-plugin-styled-components-attr
 
-## babel-plugin-styled-components-attr
 
+use the CSS attr function in your styled-components code.
+
+
+
 [![npm version](https://badge.fury.io/js/babel-plugin-styled-components-attr.svg)](https://badge.fury.io/js/babel-plugin-styled-components-attr)
@@ -9,4 +12,11 @@ [![Build Status](https://travis-ci.org/tkh44/babel-plugin-styled-components-attr.svg?branch=master)](https://travis-ci.org/tkh44/babel-plugin-styled-components-attr)
 
+<img style="max-height: 200px;" width="320px" src="https://user-images.githubusercontent.com/662750/27061725-7bfa4d92-4fa3-11e7-8e7b-cf40e1a5bd21.png"/>
 
--   [Install](#install)
+```jsx
+const Input = styled.input`
+  color: attr(color);
+  width: attr(width %);
+  margin: attr(margin px, 16);
+`
+```
 
@@ -13,0 +23,0 @@ ## Install

src/__tests__/react.js

 /* eslint-disable jsx-quotes,no-useless-escape,no-template-curly-in-string */
 /* eslint-env jest */
+import 'jest-styled-components'
 import React from 'react'
@@ -9,10 +10,13 @@ import renderer from 'react-test-renderer'
   test('attr', () => {
+    const baseText = css`color: attr(color, #a9e34b);`
+
     const H1 = styled.h1`
       font-size: attr(fontSize);
       margin: attr(margin rem, 4);
+      ${baseText}
     `
 
-    const Title = ({title}) => {
+    const Title = ({ title }) => {
       return (
-        <H1 fontSize={48}>
+        <H1 color="#495057" fontSize={48}>
           {title}
@@ -23,12 +27,14 @@ </H1>
 
-    const tree = renderer
-      .create(
-        <Title/>
-      )
-      .toJSON()
+    const tree = renderer.create(<Title />).toJSON()
 
-    expect(tree).toMatchSnapshot()
+    expect(tree).toMatchStyledComponentsSnapshot()
   })
 
   test('call expression', () => {
+    const Input = styled.input`
+      color: attr(color);
+      width: attr(width %);
+      margin: attr(margin px, 16);
+    `
+
     const H1 = styled('h1')`
@@ -43,2 +49,3 @@ font-size: attr(fontSize);
           hello world
+          <Input color="#ffffff" width={48} margin={16} />
         </H1>
@@ -48,3 +55,3 @@ )
 
-    expect(tree).toMatchSnapshot()
+    expect(tree).toMatchStyledComponentsSnapshot()
   })
@@ -55,10 +62,11 @@
     const H1 = styled('h1')`
+      height: attr(height);
       font-size: ${fontSize}px;
     `
 
-    const H2 = styled(H1)`font-size: ${({scale}) => fontSize * scale}`
+    const H2 = styled(H1)`font-size: ${({ scale }) => fontSize * scale}`
 
     const tree = renderer
       .create(
-        <H2 scale={2} className={'legacy__class'}>
+        <H2 scale={2} height={48} className={'legacy__class'}>
           hello world
@@ -69,4 +77,14 @@ </H2>
 
-    expect(tree).toMatchSnapshot()
+    expect(tree).toMatchStyledComponentsSnapshot()
   })
+
+  test('default value does not show when real value is 0', () => {
+    const H1 = styled('h1')`
+      height: attr(height px, 99);
+    `
+
+    const tree = renderer.create(<H1 height={0} />).toJSON()
+
+    expect(tree).toMatchStyledComponentsSnapshot()
+  })
 })

src/index.js

@@ -122,42 +122,47 @@ module.exports = function (babel) {
 
-  return {
-    name: 'babel-plugin-styled-attr',
-    visitor: {
-      TemplateLiteral (path) {
-        const parentPath = path.find(path => path.isTaggedTemplateExpression())
-        if (!parentPath) {
-          return
-        }
-        let parentTag = parentPath.node.tag
+  const Visitor = {
+    TemplateLiteral (path) {
+      const parentPath = path.find(path => path.isTaggedTemplateExpression())
+      if (!parentPath) {
+        return
+      }
+      let parentTag = parentPath.node.tag
 
-        // grab correct tab is styled.input.attrs type is used
-        if (
-          t.isMemberExpression(parentTag.callee) &&
-          t.isMemberExpression(parentTag.callee.object) &&
-          parentTag.callee.object.object.name === 'styled'
-        ) {
-          parentTag = parentTag.callee.object
-        }
+      // grab correct tab is styled.input.attrs type is used
+      if (
+        t.isMemberExpression(parentTag.callee) &&
+        t.isMemberExpression(parentTag.callee.object) &&
+        parentTag.callee.object.object.name === 'styled'
+      ) {
+        parentTag = parentTag.callee.object
+      }
 
-        if (parentTag.name === 'css') {
-          // css`...`
-          path.replaceWith(findAndReplaceAttrs(path))
-        } else if (
-          // styled.h1`...`
-          t.isMemberExpression(parentTag) &&
-          parentTag.object.name === 'styled' &&
-          t.isTemplateLiteral(path.node)
-        ) {
-          path.replaceWith(findAndReplaceAttrs(path))
-        } else if (
-          // styled('h1')`...`
-          t.isCallExpression(parentPath.node.tag) &&
-          parentPath.node.tag.callee.name === 'styled' &&
-          t.isTemplateLiteral(path.node)
-        ) {
-          path.replaceWith(findAndReplaceAttrs(path))
-        }
+      if (parentTag.name === 'css') {
+        // css`...`
+        path.replaceWith(findAndReplaceAttrs(path))
+      } else if (
+        // styled.h1`...`
+      t.isMemberExpression(parentTag) &&
+      parentTag.object.name === 'styled' &&
+      t.isTemplateLiteral(path.node)
+      ) {
+        path.replaceWith(findAndReplaceAttrs(path))
+      } else if (
+        // styled('h1')`...`
+      t.isCallExpression(parentPath.node.tag) &&
+      parentPath.node.tag.callee.name === 'styled' &&
+      t.isTemplateLiteral(path.node)
+      ) {
+        path.replaceWith(findAndReplaceAttrs(path))
       }
     }
   }
+
+  return {
+    visitor: {
+      TaggedTemplateExpression (path) {
+        path.traverse(Visitor)
+      }
+    }
+  }
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

21102

increased by7.87%

Number of package files

9

increased by12.5%

Lines of code

356

increased by5.01%

Number of lines in readme file

111

increased by9.9%

Worsened metrics

Dev dependency count

18

increased by5.88%

No dependency changes