babel-plugin-react-autoprefix - npm Package Compare versions

Comparing version 1.0.0-beta.1 to 1.0.0

index-test.js

@@ -23,5 +23,5 @@ const { transform } = require('babel-core')
 // }, {
-//   name: 'object shorthand',
-//   src: `const display = "flex"; const from={alignItems: "center", display, width: 100};<div style={from} />`,
-//   out: '...'
+  // name: 'object shorthand',
+  // src: `const display = "flex"; const from={alignItems: "center", display, width: 100};<div style={from} />`,
+  // out: '...'
 }, {
@@ -43,3 +43,15 @@ name: 'object spread',
   out: `React.createElement("div",{styleCustom:{"display":"-webkit-box;display:-ms-flexbox;display:flex"}});`,
-  opts: { props: ['styleCustom'] }
+  opts: { matcher: /^styleCustom$/ }
+}, {
+  name: 'variable outside of scope',
+  src: 'const from={alignItems: "center", display: "flex", width: 100};const fn = () => <div style={from} />',
+  out: 'const from={"WebkitBoxAlign":"center","msFlexAlign":"center","alignItems":"center","display":"-webkit-box;display:-ms-flexbox;display:flex","width":100};const fn=()=>React.createElement("div",{style:from});'
+}, {
+  name: 'variable outside, only prefix once',
+  src: 'const from={alignItems: "center", display: "flex", width: 100};<div style={from} />;<span style={from} />',
+  out: 'const from={"WebkitBoxAlign":"center","msFlexAlign":"center","alignItems":"center","display":"-webkit-box;display:-ms-flexbox;display:flex","width":100};React.createElement("div",{style:from});React.createElement("span",{style:from});'
+}, {
+  name: 'respect external variables',
+  src: 'const HEIGHT = 50; <div style={{ height: HEIGHT }} />',
+  out: `const HEIGHT=50;React.createElement("div",{style:{height:HEIGHT}});`
 }];
@@ -46,0 +58,0 @@

index.js

@@ -14,5 +14,10 @@ const autoprefix = require('autoprefix')
     case 'Identifier':
-      binding = path.scope.bindings[node.name]
+      binding = path.scope.getBinding(node.name)
 
       if (binding && binding.path.node.type === 'VariableDeclarator') {
+        // we've already prefixed this object
+        if (binding.path.data.autoprefixed) return
+        // track that we've autoprefixed this so we don't do it multiple times
+        binding.path.data.autoprefixed = true
+
         switch (binding.path.node.init.type) {
@@ -26,3 +31,3 @@ // test: object spread
                 case 'Identifier':
-                  prefix(t, path, path.scope.bindings[arg.name].identifier)
+                  prefix(t, path, path.scope.getBinding(arg.name).identifier)
                   break
@@ -38,3 +43,2 @@
             }
-            // binding.path.node.init.properties = prefix(t, binding.path.node.init.arguments)
             break
@@ -54,4 +58,9 @@
     case 'MemberExpression':
-      binding = path.scope.bindings[node.object.name]
-      if (binding.path.node.type === 'VariableDeclarator' && binding.path.node.init.properties) {
+      binding = path.scope.getBinding(node.object.name)
+      if (binding && binding.path.node.type === 'VariableDeclarator' && binding.path.node.init.properties) {
+        // we've already prefixed this object
+        if (binding.path.data.autoprefixed) return
+        // track that we've autoprefixed this so we don't do it multiple times
+        binding.path.data.autoprefixed = true
+
         const subProperty = binding.path.node.init.properties.find(p => p.key.name === node.property.name)
@@ -73,6 +82,9 @@ prefix(t, path, subProperty.value)
           // we don't process computed properties
-          if (prop.computed) return
+          if (prop.computed || !t.isLiteral(prop.value)) {
+            nextProperties.push(prop)
+            return
+          }
 
-          // ensure that the value is a string
-          if (!t.isLiteral(prop.value)) return
+          // // ensure that the value is a string
+          // if (!t.isLiteral(prop.value)) return
 
@@ -106,21 +118,20 @@ // register property as one we'll try and autoprefix
     JSXAttribute(path, state) {
-      let props = ['style']
-      if (state.opts && Array.isArray(state.opts.props)) {
-        props = props.concat(state.opts.props)
+      const prop = path.node.name.name
+      if (state.opts.matcher) {
+        if (!state.opts.matcher.test(prop)) return
+      } else if (prop !== 'style') {
+        return
       }
 
-      if (props.includes(path.node.name.name)) {
-        // verify this is an object as it's the only type we take
-        if (!t.isJSXExpressionContainer(path.node.value)) return
+      // verify this is an object as it's the only type we take
+      if (!t.isJSXExpressionContainer(path.node.value)) return
 
-        // we've already prefixed this object
-        if (path.data.autoprefixed) return
+      // we've already prefixed this object
+      if (path.data.autoprefixed) return
+      // track that we've autoprefixed this so we don't do it multiple times
+      path.data.autoprefixed = true
 
-        // track that we've autoprefixed this so we don't do it multiple times
-        path.data.autoprefixed = true
-
-        prefix(t, path, path.node.value.expression)
-      }
+      prefix(t, path, path.node.value.expression)
     }
   }
 })

package.json

 {
   "name": "babel-plugin-react-autoprefix",
-  "version": "1.0.0-beta.1",
   "description": "Adds vendor prefixes to inline styles in React elements",
@@ -30,3 +29,4 @@ "repository": "UXtemple/babel-plugin-react-prefix-styles",
     "autoprefix": "^0.1.2"
-  }
+  },
+  "version": "1.0.0"
 }

README.md

@@ -20,3 +20,3 @@ # babel-plugin-react-autoprefix
 
-```json
+```js
 {
@@ -41,4 +41,11 @@ "plugins": ["react-autoprefix"]
 
-# TODO
+## Changing the matching pattern
 
-- Refactor how we deal with `SpreadProperty` nodes.
+The plugin will match `style` props by default. If you want to match other props, like
+`styleSomething`, you can use the plugin's `matcher` option, e.g. in `.babelrc`:
+
+```js
+{
+  "plugins": ["react-autoprefix", { matcher: /^style.*$/ }]
+}
+```

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

11378

increased by16.45%

Lines of code

182

increased by13.75%

Number of low quality alerts

1

decreased by-50%

Number of lines in readme file

50

increased by16.28%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes