styled-components / css-to-react-native Goto Github PK

I think when I was creating this, I wanted to run it in Node natively, so used require. We have imports in some places, so we should probably change everything to that. We could also investigate using rollup to bundle.

I've been using the latest version of react-native-web, which uses css-to-react-native. I've noticed that when I use the short-hand font: bold 14px/16px 'Helvetica'; that I get the following warning

Warning: "fontVariant" is not a valid style property.

StyleSheet generated: {
  "color": "#333",
  "fontStyle": "normal",
  "fontWeight": "bold",
  "fontVariant": [],
  "fontSize": 14,
  "fontFamily": "Helvetica",
  "lineHeight": 16
}

I'm using react-native: ^0.53.0

Would be great to add the same linting we have over at the main repo to make sure the code style is consistent and switching between repos isn't a hard context switch due to superficial code style differences.

We can probably just copy the .eslintrc from the main repo.

RN now to supports percentages now. I.e. { height: "50%" }. We actually mostly support this, so you can write height: 50 or height: 50%, and both will work.

This makes it a little inconsistent, where sometimes you include a unit, and sometimes you don’t. We should try and achieve more consistency by forcing a unit when the value is a length. In the previous example, you would have to write height: 50px.

This would remove ambiguities in the flex shorthand, and would allow us to accept line-heights as a multiple of font-size in the font shorthand.

Not only that, but you could sort of share code between web and native.

const Component = isWeb ? 'div' : View;
const StyledComponent = styled(Component)`
  height: 50px;
`;

This is obviously a breaking change, so we should look towards v2.

It currently goes in order of ['TopRight', 'BottomRight', 'BottomLeft', 'TopLeft'].

It should be ['TopLeft', 'TopRight', 'BottomRight', 'BottomLeft']

Error when parsing some from the following:

https://github.com/tailwindcss/tailwindcss/blob/master/stubs/defaultConfig.stub.js#L222

Example:

fontFamily: {
      serif: [
        'Georgia',
        'Cambria',
        '"Times New Roman"',
        'Times',
        'serif',
      ]
}

Results in error:

error: bundling failed: Error: Failed to parse declaration "fontFamily: Georgia, Cambria, "Times New Roman", Times, serif"

Currently box-shadow transform does not support rgb, rgba, hsl or hsla colors.

Here are a few test cases that are failing:

it('transforms box-shadow with rgb color', () => runTest([
  ['box-shadow', '10px 20px rgb(100, 100, 100)'],
], {
  shadowOffset: { width: 10, height: 20 },
  shadowRadius: 0,
  shadowColor: 'rgb(100, 100, 100)',
}));

it('transforms box-shadow with rgba color', () => runTest([
  ['box-shadow', '10px 20px rgba(100, 100, 100, 0.5)'],
], {
  shadowOffset: { width: 10, height: 20 },
  shadowRadius: 0,
  shadowColor: 'rgba(100, 100, 100, 0.5)',
}));

it('transforms box-shadow with hsl color', () => runTest([
  ['box-shadow', '10px 20px hsl(120, 100%, 50%)'],
], {
  shadowOffset: { width: 10, height: 20 },
  shadowRadius: 0,
  shadowColor: 'hsl(120, 100%, 50%)',
}));

it('transforms box-shadow with hsla color', () => runTest([
  ['box-shadow', '10px 20px hsla(120, 100%, 50%, 0.7)'],
], {
  shadowOffset: { width: 10, height: 20 },
  shadowRadius: 0,
  shadowColor: 'hsla(120, 100%, 50%, 0.7)',
}));

In addition to that, shadowOpacity property set to value 1 should probably be added by default to make sure that the shadow is always visible. I tested it, and I can confirm that the opacity for the shadow can be controlled by using rgba or hsla color's alpha value, so there is no need for shadowOpacity to be something else than 1.

@jacobp100 @mxstbr

Not sure how much or little this module should do.

It could do the whole CSS string -> ReactNative object thing, but it could also just be responsible for the ReactNative specific styles:

import transform from 'css-to-react-native';

// ...

declarations.forEach(decl => { styles[decl.property] = transform(decl.value) })

In this case it would just check if it's one of the special reactnative declarations and then transform just those, otherwise return the value unchanged.

What do you think?

Often for things like font size, it is much more common to see pt or em used instead of px. Are there any plans for adding support for these?

Hi, i'm using styled-components in react-native app
lets say i have Link component:

    import styled from 'styled-components/native';

    const Link = styled.Text`
      color: 'red';

      &:hover {
        color: 'blue';
      }
    `

then i 'compile' my RN code with react-native-web

all is great expect that hover is not working (text color remains red on hover)

my guess is that css-to-react-native is removing the hover definition

any idea how to fix this?

Using margin: 0 auto; throws an error.

Here's a unit test to copy/paste:

  expect(transformCss([['margin', '0 auto']])).toEqual({
    marginTop: 0,
    marginRight: 'auto',
    marginBottom: 0,
    marginLeft: 'auto',
  })

So on SC we've seen some complaints about properties being able to be unitless, e.g. padding-top: 2, but not shorthands: padding: 2px.

This probably comes from the difference here: https://github.com/styled-components/css-to-react-native/blob/master/src/index.js#L8

And here: https://github.com/styled-components/css-to-react-native/blob/master/src/tokenTypes.js#L31

Since most directions don't expect unitless numbers: https://github.com/styled-components/css-to-react-native/blob/master/src/transforms/util.js#L6

The question is, since this seems like an inconsistency, do we want to change this? :)

cc @mxstbr @jacobp100

Like, is there a way to write something like:

/* Buttons.css.js */
export const primary `
  background-color: green;
  padding: 15px 30px;
`

export const danger `
  background-color: red;
  padding: 15px 30px;
`

/* Form.js */
import * as Buttons from './css/Buttons.css'

<Text style={Buttons.primary}>Submit</Text>
<Text style={Buttons.danger}>Delete</Text>

And have css-to-react-native transform it somehow?

Sorry, I see how it works for people who might want to write a plugin for it, but not for casual users just trying to avoid writing standard RN style objects.

When I use the shorthand key paddingor margin, the following error is thrown if one of the values contains a dot.

No possible parsings (@5: '.').

Component :

const Banner = styled.View`
  padding : 21 23.5 18.5 23.5;
`;

But the following works great :

const Banner = styled.View`
  padding-top : 21;
  padding-right : 23.5;
  padding-bottom : 18.5;
  padding-left : 23.5;
`;

in StyleSheet we can have this:

separatorAndroid: {
    marginTop: 0,
    marginBottom: 0,
    marginLeft: 0,
    marginRight: 0,
    ...Platform.select({
      ios: {
        height: 0,
        backgroundColor: '#ffffff',
      },
      android: {
        height: 10,
        backgroundColor: '#EEEEEE',
      },
    }),
  },

how this works on styled-components?

How do I set includeFontPadding: false in css? RN expects the value to be a Boolean.

Given this:

const TaskScrollWrapper = styled.ScrollView`
  padding: 10;
  background-color: red;
`;

const NewTaskBanner = styled.Text`
  font-size: 18px;
  text-align: center;
`;

  const content = (
    <TaskScrollWrapper>
      <NewTaskBanner> Hello World</NewTaskBanner>
    </TaskScrollWrapper>
  );

Then I get an error with RN "react-native": "0.42.0", this is with "styled-components": "^1.4.5",.

Of course it does work when I drop the 'px', Thanks.

We currently clone the nodes array whenever we match. We could actually do this just with an index into the same array instead.

While trying to track down a dependency on fbjs I found that a) the last couple of versions of css-to-react-native published to npm aren't listed in the release history (I guess a tag wasn't created/pushed) and b) the dependency on fbjs was removed a while ago but not yet published.

Would it be possible to publish a new version (and tag, for the release history)?

Yoga has support for things like border-start, which is the border-left on LTR, and border-right on RTL. Source

Should our shorthands use this instead of left/right?

I.e. padding: 1px 2px 3px 4px would have padding-end: 2px rather than padding-right: 2px.

Closing styled-components/styled-components#517 and moving it here.

const Button = styled(View)`
   margin: ${({ margin }) => margin};
`

// Expected usage with shorthands

const MyComponent = () => (
  <Button margin="10 20" />
)

// Above fails with: ExceptionsManager.js:71 JSON value '10 20' of type NSString cannot be converted to NSNumber

Possible duplicate: styled-components/styled-components#403

RN supports the values 'none', 'underline', 'line-through', and 'underline line-through'. This means the order is important for RN but not for CSS. We should support putting these the other way round.

Hello,

I tried adding a text-shadow to a Text styled component, by using this code

export const AppName = Text.extend`
  ${{
    textShadowColor: 'black',
    textShadowOffset: { width: -4, height: 1 },
    textShadowRadius: 14,
  }}
`;

Unfortunately, this does not work (tested on iOS with latest version of styled components).
As a workaround, I don't use styled-componenets for that particular component.

Any solution?
Many thanks

I had opened up an issue over on styled-components here about the borderRadius property on native.

It seems going from version 1.0.11 to 1.1.1 in styled-components regressed how borderRadius would work.

borderTopLeftRadius etc. seemingly have no effect when developing for native from what I can tell in the simulator and what works is simply using borderRadius.

After having a dive into the source, I think this just requires a slight change to the grammar file to only output borderRadius.

I'll submit a PR for this.

@jh3y

I have been experimenting with the idea of using stylelint to verify that you can only use the CSS properties that css-to-react-native supports, like the standard stylelint rule https://github.com/stylelint/stylelint/tree/master/lib/rules/property-no-unknown.

I have though of creating a couple of tools to help with this.

First thing I was thinking of would be to create a new repo that would list all properties that css-to-react-native supports. The same idea as https://github.com/betit/known-css-properties, but with a simpler implementation. Those props could then be updated whenever there are new properties supported or old ones deprecated.

Next thing would be to create a stylelint plugin, e.g. react-native/no-unknown-css-properties. The rule would clearly state that it is meant to be used with tools that use this CSS parser.

There could also be a rule called react-native/no-unknown-style-properties, which would only allow properties that are supported by React Native by default.

What do you think @jacobp100 @mxstbr ?

Currently with a multiplier value for line-height:

transformCss([['line-height', '1.5']])

The result is this:

{ lineHeight: 1.5 }

React Native treats it as a pixel value instead of a multiplier. We can only calculate the multiplier if we know the font-size of the Text element.

Maybe we should only allow pixels (or other units) to be used with line-height and throw an error for a multiplier?

ping @jacobp100

Error when parsing some from the following:

https://github.com/tailwindcss/tailwindcss/blob/master/stubs/defaultConfig.stub.js#L185

Example:

default: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)'

Results in error:

error: bundling failed: Error: Failed to parse declaration "boxShadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)"

It seems like percentage values are failing on transforms.

the default value for the flex shorthand (0 1 auto) fails to be parsed by css-to-react-native when passed through styled-components

repro case:

import { styled } from 'styled-components/native'

const MyComponent = styled.View`
  flex: 0 1 auto;
`

I'm not set on the name, this was literally the first thing I could come up with. If you have a better idea just shout and I'll rename it!

We should support place-items and place-content

I miss the map with all the existing properties in React Native and the equivalent in Styled Components.

This would be very useful for both beginners and consultants alike.

A simple table with all properties:

The shorthand property

flex: 0 1;

Should be parsed to

flex-grow: 0;
flex-shrink: 1;

reproduction on the node repl:

require('css-to-react-native').default([['flex', '0 1']])

I'm looking for a repo to convert react-native styling into CSS; do you know of a repo that does that/would it be easy to convert this one to do that as well?

Environment

## System:
 - OS: macOS 10.14.4
 - CPU: (8) x64 Intel(R) Core(TM) i7-8559U CPU @ 2.70GHz
 - Memory: 407.75 MB / 16.00 GB
 - Shell: 5.3 - /bin/zsh
## Binaries:
 - Node: 11.12.0 - ~/.nvm/versions/node/v11.12.0/bin/node
 - Yarn: 1.15.2 - /usr/local/bin/yarn
 - npm: 6.7.0 - ~/.nvm/versions/node/v11.12.0/bin/npm
 - Watchman: 4.9.0 - /usr/local/bin/watchman
## npmPackages:
 - styled-components: ^4.2.0 => 4.2.0

Reproduction

This happens on React native, to reproduce it just do:

const Something = styled.View`
 flex: 1/2;
`

Steps to reproduce

Expected Behavior

it must set the view to a half of the full available space.

Actual Behavior

it throws an error informing that it cannot parse flex: 1/2

I had a parsing error on the following css:

flex: 1 1 0%;

I'm pretty sure this is legal css, the unit (% in this case) is optional?

Error printed out as:

Error: Failed to parse declaration "flex: 1 1 0%"

Here is the line in tailwind default config, I can work around this, but maybe it makes sense to support optional units on 0 ¯_(ツ)_/¯ :

https://github.com/tailwindcss/tailwindcss/blob/beff1383533973baeb33436d7c31651b9ea751a8/stubs/defaultConfig.stub.js#L209

I’ve put a quick demo implementation using pegJS for parsing. While it doesn’t currently show the full potential, I think if we do start allowing shorthands, like border: 1px solid, it’ll be very useful to be using something like this. However, it could also be overkill.

How do people want to handle parsing?

Hello,

It seems that it has been quite a long time since the last version was released and there are quite a few features in master.

What about releasing a new version (2.1.0) ?

ping @jacobp100

I was looking for a lib to convert a string to react object.

I used this lib to do so, I believe the following function could be a good addition to the current library. Feel free to add it!

import isPlainObject from 'lodash.isplainobject';
import map from 'lodash.map';
import { getPropertyName } from 'css-to-react-native';

/**
 * Takes a standard css string and returns an object of {"key": "value"} that is react-compatible
 * Relies on https://github.com/styled-components/css-to-react-native#api to resolve the property name (getPropertyName)
 *
 * @example getPropertyName('border-width'); // => 'borderWidth'
 *
 * If the given "css" param is an object, it will be returned untouched
 * Any unexpected type/value will return an empty object
 *
 * @param css
 * @return {{}|*}
 */
export const cssToReactStyle = (css) => {
  // If object is given, return object (could be react style object mistakenly provided)
  if (isPlainObject(css)) {
    return css;
  }

  // If falsy, then probably empty string or null, nothing to be done there
  if (!css) {
    return {};
  }

  // Only accepts strings
  if (typeof css !== 'string') {
    // TODO sentry
    console.error(`Unexpected type "${typeof css}" when expecting string, with value "${css}"`);
    return {};
  }

  const style = {};
  const rules = css.split(';');
  map(rules, (rule) => {
    let [key, value] = rule.split(':');

    if (key && value) {
      key = key.trim();
      value = value.trim();

      style[getPropertyName(key)] = value;
    }
  });

  return style;
};

Currently, when you define font, you currently have to wrap the font family in quotation marks: font: 12 “Helvetica”. When you define the font-family property, you define it without quotes: font-family: Helvetica. There is an inconsistency between the two.

The CSS spec has confusing behaviour, where you can omit quotes in some cases. (See valid family names here).

We can either require quotes on both of these properties, which will break existing code, or follow the spec by allowing some font names to be defined without quotes.

Working with styled-components and react-native-web can be frustrating, because things like:

const StyledView = styled(View)`
  &:hover { /* some hover state */ }
`

will just refuse to compile on the web without throwing an error. It'd be really helpful for multi-platform projects to know when our web-specific syntax is getting stripped so that we can refactor correctly.

We support box-shadow, but not text-shadow. RN supports everything we need to do this.

Error
Error: Failed to parse declaration "border: none"

Test repo
https://github.com/romainbraun/rn59-border-none-regression

Steps

• Create new react native project
• Add styled-components
• Use a styled view with the border: none property
• Run the app

Expected behaviour
The view has no border

Actual Behaviour
The app errors

Notes

• Using border: 0; works fine.
• Tested it with RN 0.57.8, 0.58, 0.59, and styled-components 4.2, 3.4.5 IIRC

We should look at moving the tests into multiple files now.

OS: Android only
Weird: Only happens when Remote JS Debugging is disabled
styled-components: v2.0.0-7
css-to-react-native: v2.0.1

undefined is not a function (evaluating 'tokenDescriptors[typeof Symbol === "function" ? Symbol.iterator : "@@iterator"]()')
match
    TokenStream.js:45:29
exports
    flex.js:21:24
getStylesForProperty
    index.js:35:37
<unknown>
    index.js:49:53
default
    index.js:45:22
<unknown>
    InlineStyle.js:74:60
generateStyleObject
    InlineStyle.js:59:8
generateAndInjectStyles
    StyledNativeComponent.js:123:47
<unknown>
    StyledNativeComponent.js:91:65
subscribe
    create-broadcast.js:33:15
componentWillMount
    StyledNativeComponent.js:83:39
<unknown>
    ReactCompositeComponent.js:325:16

Hi,

Following on the issue I opened there: styled-components/styled-components#203 could this new module dedicated to RN be the home to support media query on RN ?

It will likely bring some dependencies so I am wondering if we want to have RN material all in one module (this one ?) or should we create specialized RN modules ?

Since this is (as of [email protected]) a core part of our ReactNative support, it'd be great to add a .travis.yml and run tests on CI.

The module does the exact opposite. You take StyleSheet object and turn it into a CSS string with the transform function:

import CSS from "css-to-react-native";

CSS({
    test: {
        color: "#ff0000"
    }
}); // Returns CSS string: ".test { color: #ff0000; }"

But I thought this is what it was supposed to do:

import CSS from "css-to-react-native";

CSS(`
    .test {
        color: #ff0000
    }
`); // Should return: { test: { color: "#ff0000" } }

What am I missing? There is nothing documented on how to actually convert CSS to a React Native StyleSheet object.

Thanks in advance!

Environment

We are experiencing issue on travis while using semantic-release.

This happen because of a package having being fixed [email protected] for semantic-release to work and styled-components having an outdated node-fetch through isomorphic-fetch.

Users that use both semantic-release and styled-components will have issues.

• semantic-release/github#129
• semantic-release/semantic-release#995

Related issues:

• styled-components/styled-components#2247 (comment)
• #98
• facebook/fbjs#325
• matthew-andrews/isomorphic-fetch#179

Reproduction

https://travis-ci.org/yeutech-lab/rollup-umd-documentation/jobs/459847412

$ npm ls node-fetch
@yeutech-lab/[email protected] /home/dka/workspace/github.com/yeutech-lab/rollup-umd-documentation
├─┬ @semantic-release/[email protected]
│ └─┬ @octokit/[email protected]
│   └── [email protected] 
└─┬ [email protected]
  └─┬ [email protected]
    └─┬ [email protected]
      └─┬ [email protected]
        └── [email protected] 

Steps to reproduce

• semantic-release: v15.12.1
• styled-components: v4.1.1

Expected Behavior

To have [email protected]

Actual Behavior

Styled-components bring [email protected] and breaks semantic-release.

Solution

• short term: npm install [email protected] --save-dev
• long term: Upgrade chain of dependencies, require help of https://github.com/matthew-andrews/isomorphic-fetch/, https://github.com/facebook/fbjs, https://github.com/styled-components/css-to-react-native/ and https://github.com/styled-components/styled-components

Hello

After investigating with @Trobyss we found an issue with styled-components after migrating on 0.61-rc3 to test on ANDROID.

ANDROID ONLY
"react": "16.9.0",
"react-native": "0.61.0-rc.3",
"styled-components": "^4.3.2"

You can freely switch between Bug and BuggingView to see the difference.
The text is correctly displaying above the background in absolute, but not the background of the text container.

Without styled-components, this works.

import React from "react";
import { Text, View } from "react-native";
import styled from "styled-components/native";

const Bug = () => {
  return (
    <View style={{ flex: 1 }}>
      <BuggingView />
      <PageWrapper>
        <Text>
          This should appear above backgroundThis should appear above background This should appear above background This should appear
          above above background This should appear above background This should appear above background This should appear above background
          This This should appear above background This should appear above background This should appear above background This should
          appear above background This should appear above background This should appear above background This should appear above
          background This should appear above background This should appear above background This should appear above background This should
          appear above background This should appear above background This should appear above background This should appear above
          background This should appear above background This should appear above background This should appear above background This should
          appear above background This should appear above background This should appear above background This should appear above
          background This should appear above background
        </Text>
      </PageWrapper>
    </View>
  );
};

const BuggingView = styled.View`
  height: 200;
  position: absolute;
  background-color: blue;
  top: 0;
  right: 0;
  left: 0;
`;
const PageWrapper = styled.View`
  background-color: red;
  padding: 20px; 
  border-radius: 8px;
  flex: 1;
  margin: 20px;
`;

const NotBug = () => (
  <View style={{ flex: 1 }}>
    <View style={{ height: 200, backgroundColor: 'blue', position: "absolute", top: 0, right: 0, left: 0 }} />
    <View style={{ backgroundColor: "red", padding: 20, flex: 1, margin: 20 }}>
      <Text>
        This should appear above backgroundThis should appear above background This should appear above background This should appear above
        above background This should appear above background This should appear above background This should appear above background This
        This should appear above background This should appear above background This should appear above background This should appear above
        background This should appear above background This should appear above background This should appear above background This should
        appear above background This should appear above background This should appear above background This should appear above background
        This should appear above background This should appear above background This should appear above background This should appear above
        background This should appear above background This should appear above background This should appear above background This should
        appear above background This should appear above background This should appear above background This should appear above background
      </Text>
    </View>
  </View>
);

export default Bug;

Any idea what would cause that ? as you can see this works with latest expo version : https://snack.expo.io/@afigueiredo/1fe053

Best regards