uxtemple / babel-plugin-react-autoprefix Goto Github PK

View Code? Open in Web Editor NEW

115.0 115.0 7.0 25 KB

Adds vendor prefixes to styles in React elements

JavaScript 92.18% Shell 7.82%

babel-plugin-react-autoprefix's People

Contributors

Stargazers

Watchers

Forkers

joshblack salzhrani jesenko jjhuff richeyryan earemodeling0309

babel-plugin-react-autoprefix's Issues

Plugin doesn't prefix `display: flex` properly

Tried the following in a demo app:

class App {
  render() {
    return <div style={{ display: 'flex' }}>hi</div>;
  }
}

When prefixing { display: 'flex' } I expect the output to be

  { display: 'flex;display:-webkit-flex;display:-ms-flexbox' }

See: https://github.com/petehunt/jsxstyle/blob/master/lib/autoprefix.js#L81

But instead I get:

{ display: [3, 'flex'] }

Fails on unexpected value in `style` prop

Great plugin, just what'd I'd been looking for!

One issue - build fails when the value of style prop does not meet expectations, for example a string or object. There's a good argument that this is an acceptable failure (or at least an optional linter warning/error), however it can cause problems with other tools.

For example, the popular FormatJS uses the style prop to set how numbers should be displayed, eg <FormattedNumber style='currency'>. While they probably shouldn't be using standard HTML attributes as props like this, it unfortunately prevents using both at the same time.

Test script doesn't work on OSX

I'm probably doing something wrong, but running npm test fails with:

➜ bash .bin/test                                                                                                                                            22:43:47
find: illegal option -- t
usage: find [-H | -L | -P] [-EXdsx] [-f path] path ... [expression]
       find [-H | -L | -P] [-EXdsx] -f path [path ...] [expression]

It would be best to eliminate shell scripts so that tests can be run on any platform.

Support nested styles declared outside of the styles attribute

For instance, it would be awesome if this was supported:

const style = {
  foo: {
    alignItems: "center",
    display: "flex",
    width: 100
  }
};
<div style={style.foo} />

Perhaps the plugin will need some sort of marker to tell it to autoprefix some things, e.g.

const style = {
  foo: prefix({
    alignItems: "center",
    display: "flex",
    width: 100
  })
};
<div style={style.foo} />

Or, if smart enough, even:

const style = prefix({
  foo: {
    alignItems: "center",
    display: "flex",
    width: 100
  }
});
<div style={style.foo} />

Quick question: does this support dynamically generated styles?

Does this only work on JSX in-line styles or can it also work on dynamic styles applied inside of a render()?

If I wanted to have some conditional style based on react state/props and generate different style={myCustomStyle} dynamically, does this somehow get run on each render pass?

Thanks,

moz- and webkit-prefixed properties lack leading `-`

Version 0.2.2.

Expected: -webkit-box-align: center; …
Result: webkit-box-align: center; … (lacks leading -)

Screenshot attached with a few examples. Is this an issue with the underlying autoprefix? Happy to provide a pull request if pointed in the right direction.

chrome dev tools:

related console errors (firefox dev edition, same displayed in chrome & safari):

Babel 6 - Template Literal issue

someComponent = () => {
  <div style={{ backgroundImage = `url(${image})`}} />
}

Results in backgroundImage: undefined in the browser. I belive this is caused by this plugin, because removing this plugin solves the issue.

Support objects composition

const anotherStyle = {
  width: 100
};

const style = {
  height: 100,
  ...anotherStyle
};

<div style={style} />

Babel 6 support

For reference: new plugin API.

Here is the error:

ERROR in ./src/index.js
Module build failed: TypeError: Plugin is not a function
    at exports.default (<project_path>/node_modules/babel-plugin-react-autoprefix/index.js:91:10)
    at Function.memoisePluginContainer (<project_path>/node_modules/babel-core/lib/transformation/file/options/option-manager.js:127:13)
    at Function.normalisePlugin (<project_path>/node_modules/babel-core/lib/transformation/file/options/option-manager.js:161:32)
    at <project_path>/node_modules/babel-core/lib/transformation/file/options/option-manager.js:197:30
    at Array.map (native)
    at Function.normalisePlugins (<project_path>/node_modules/babel-core/lib/transformation/file/options/option-manager.js:173:20)
    at OptionManager.mergeOptions (<project_path>/node_modules/babel-core/lib/transformation/file/options/option-manager.js:271:36)
    at OptionManager.addConfig (<project_path>/node_modules/babel-core/lib/transformation/file/options/option-manager.js:221:10)
    at OptionManager.findConfigs (<project_path>/node_modules/babel-core/lib/transformation/file/options/option-manager.js:364:16)
    at OptionManager.init (<project_path>/node_modules/babel-core/lib/transformation/file/options/option-manager.js:412:12)
 @ multi main

Support object shorthands

const height = 100;

const style = {
  height
};

<div style={style} />

Error: "Block-scoped declarations (let, const, function, class) not yet supported outside strict mode"

I am getting the following error when adding this module to my project (tried searching around, but can't find anyone else with this problem on this module):

/myproject/node_modules/babel-plugin-react-autoprefix/index.js:10
  let binding
  ^^^

SyntaxError: Block-scoped declarations (let, const, function, class) not yet supported outside strict mode
    at exports.runInThisContext (vm.js:53:16)
    at Module._compile (module.js:374:25)
    at Module._extensions..js (module.js:417:10)
    at Object.require.extensions.(anonymous function) [as .js] (/myproject/node_modules/babel-register/lib/node.js:152:7)
    at Module.load (module.js:344:32)
    at Function.Module._load (module.js:301:12)
    at Module.require (module.js:354:17)
    at require (internal/module.js:12:17)
    at /myproject/node_modules/babel-core/lib/transformation/file/options/option-manager.js:174:20
    at Array.map (native)

Adding a 'use strict'; to the index.js helps it get a bit further:

/myproject/node_modules/babel-plugin-react-autoprefix/index.js:112
module.exports = ({ types: t }) => ({
                  ^

SyntaxError: Unexpected token {
    at exports.runInThisContext (vm.js:53:16)
    at Module._compile (module.js:374:25)
    at Module._extensions..js (module.js:417:10)
    at Object.require.extensions.(anonymous function) [as .js] (/myproject/node_modules/babel-register/lib/node.js:152:7)
    at Module.load (module.js:344:32)
    at Function.Module._load (module.js:301:12)
    at Module.require (module.js:354:17)
    at require (internal/module.js:12:17)
    at /myproject/node_modules/babel-core/lib/transformation/file/options/option-manager.js:174:20
    at Array.map (native)

Seems like it's using modern features, but the runtime is not expecting them. My .babelrc configuration is as follows:

{
  "presets": ["latest", "react", "stage-0"],
  "plugins": [
    "react-autoprefix",
    "react-hot-loader/babel",
    "transform-object-rest-spread",
    "transform-flow-strip-types",
    ["react-intl", {
        "messagesDir": "../build/messages/",
        "enforceDescriptions": true
    }],
  ],
  "retainLines": true
}

uxtemple / babel-plugin-react-autoprefix Goto Github PK

babel-plugin-react-autoprefix's People

Contributors

Stargazers

Watchers

Forkers

babel-plugin-react-autoprefix's Issues

Plugin doesn't prefix `display: flex` properly

Fails on unexpected value in `style` prop

Test script doesn't work on OSX

Support nested styles declared outside of the styles attribute

Quick question: does this support dynamically generated styles?

moz- and webkit-prefixed properties lack leading `-`

Babel 6 - Template Literal issue

Support objects composition

Babel 6 support

Support object shorthands

Error: "Block-scoped declarations (let, const, function, class) not yet supported outside strict mode"

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent