kristerkari / css-to-react-native-transform Goto Github PK

line-height with multiplier value works in browser, not in React Native:

line-height: 1.41;

line-height: 150%;

This works in RN:

line-height: 24px;

.container {
  background-color: #f00;
}

@media (orientation: landscape) {
  .container {
    background-color: #00f;
  }
}

↓ ↓ ↓ ↓ ↓ ↓

{
  container: {
    backgroundColor: "#f00",
  },
  "@media (orientation: landscape)": {
    container: {
      backgroundColor: "#00f",
    },
  },
}

The devDependency lint-staged was updated from 8.1.3 to 8.1.4.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

lint-staged is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

Transform is breaking at this point.

This is a breaking change, so there are things that need to be migrated.

Calculating styles dynamically makes it possible to add support for viewport units.

• Viewport Width (vw) – A percentage of the full viewport width. 10vw will resolve to 10% of the current viewport width, or 48px on a phone that is 480px wide. The difference between % and vw is most similar to the difference between em and rem. A % length is relative to local context (containing element) width, while a vw length is relative to the full width of the browser window.
• Viewport Height (vh) – A percentage of the full viewport height. 10vh will resolve to 10% of the current viewport height.
• Viewport Minimum (vmin) – A percentage of the viewport width or height, whichever is smaller. 10vmin will resolve to 10% of the current viewport width in portrait orientations, and 10% of the viewport height on landscape orientations.
• Viewport Maximum (vmax) – A percentage of the viewport width or height, whichever is larger. 10vmax will resolve to 10% of the current viewport height in portrait orientations, and 10% of the viewport width on landscape orientations. Sadly, and strangely, vmax units are not yet available on Internet Explorer or Edge.

The way that this would work is that the values would be parsed with units and a flag __viewportUnits: true would be enabled. Those values would then during runtime be compared agains React Native's viewport and transformed to pixel values.

More info:
https://css-tricks.com/fun-viewport-units/

The dependency css-to-react-native was updated from 2.2.2 to 2.3.0.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

css-to-react-native is a direct dependency of this project, and it is very likely causing it to break. If other packages depend on yours, this update is probably also breaking those in turn.

Your Greenkeeper Bot 🌴

There have been updates to the babel7 monorepo:

• • The devDependency @babel/cli was updated from 7.4.3 to 7.4.4.

• The devDependency @babel/core was updated from 7.4.3 to 7.4.4.
• The devDependency @babel/preset-env was updated from 7.4.3 to 7.4.4.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

This monorepo update includes releases of one or more dependencies which all belong to the babel7 group definition.

babel7 is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

.a .b {
background-color:'red'
}

like this.

.foo {
  color: red;
}
.bar {
  font-size: 12px;
}

css2rn(csscode, {
  ignoreRule(selector) {
    if (selector === '.foo') { return true }
  }
})

result:

{
  "bar": { fontSize: 12 }
}

As this transformer now supports viewport units (#18), please could we add support for calc? This would allow us to use rules such as margin-left: calc(50vw - 10px), which could compile to {marginLeft: vw(50)-10} (with vw from https://github.com/joetakara/react-native-expo-viewport-units).