thabti / react-native-css Goto Github PK

I get this message at the end of the npm install:

npm WARN [email protected] requires a peer of react-native@>=0.5 but none was installed.

should I ignore it?

So a while back I wrote this...
https://github.com/jspears/postcss-react-native
Its very similar, however it has a few things that react-native-css does not.

• Transitions
• Animations
• Full shorthand support.
• psuedo classes.
• Multi file watching.
• Postcss plugin
• Orientation Change
• Relative units.

--Work Started On --

• Background images.
• Gradients.

If there's interest I'd attempt to do a big old PR, but it would be pretty major. Otherwise maybe there is some useful code for people out there.

Running npm install react-native-css --only=dev I get this error:

[email protected] requires a peer of react-native@>=0.5

Isn't the latest version of react-native 0.23?

Any pointer in the right direction much appreciated! :)

description {
  margin-Bottom: 20;
  fontSize: 18;
  textAlign: center;
  color: #656656;
}

Why margin-Bottom but textAlign? Could we not have marginBottom?

Can i write LESS like CSS just like that in webpages with this tool? If not, is there any plan to support LESS. Thank you very much!

Hi,

Who uses the VSCode, version >= 1.20.0, if you put the css word in a .js or .jsx file, you will can use css-code complete.

Take a look:

And it works normally! Even with interpolation ;)

[EDIT]
Remember that is not a JSON type, so you could not use comma after each item:

Hi,

When I use the property with 'auto', it set like null ¿it is normal?

for example:

img {
  width: 100%;
  height: auto;
}

Generate

"img":{"width":100,"height":null}

Thank you!!

I recently stumbled upon this project as a result of the pain of using styles in react-native and found it to be extremely useful as is (with a couple fixes). However it is only part of the solution as I ideally want to leverage a bulk of styling assets as well as making it easy to change entire themes gracefully. I was able to throw a quick solution together that is able to somewhat replicate how CSS works in the browser and allow implicit styling of components and pushed it into the 'inheritance' branch. For a quick guide of what it does and how it works, look at https://github.com/sabeurthabti/react-native-css/tree/inheritance/examples.

The question is whether or not to actually include this functionality in this project or to push it entirely into a different project. I'm strongly in favor of keeping it in this project for 2 main reasons: 1) It requires the current code to function, 2) it follows strongly with the name of the project.

Key Updates

1. I've added a flag to the client called 'inherit'. This changes the functionality of the normal transform by doing the following:

• It keeps classes intact.
• Text is treated as a special rule and any text properties in parent containers are 'inhertied' into the text property using a special [selector]&inherited key. While this can be referenced directly in the current scheme, it is especially handy when combined with the next change.

2. I've added a component wrapper that looks up matching CSS selectors and automatically injects the corresponding styles into the target component.
   • Component paths are generated via getChildContext implementation.
   • The wrapped component accepts an optional className property, however still responds to just selecting by component name, e.g. 'view > text'.
   • I've created a very lean and simple parser and matcher. Since there is just a small subset of CSS that maps to react-native, I didn't want to bloat runtime code with excess libraries. It works, however I assume several improvements can be made overtime. Styles are highly cached to reduce any performance impact one way or the other.

Suggested purpose

One of the best and worst things about React is that it is a very un-opinionated framework. In fact their goal is to create a framework that uses pure JavaScript conventions without any special designs. The downside is that they don't offer a good direction for styling projects. The current method is cumbersome for large projects. It is especially bad when you want to leverage choosable themes or you have to create white-labeled versions (not an uncommon practice for me).

I believe that SASS is a far superior way of styling compared to the standard react-native way. Speed, flexibility and features like import and extend make it significantly easier to use and maintain compared to the JS styles. Additionally the ability to share partials with traditional web projects is a huge plus. Fundamentally I see these as a more than fair tradeoff compared to the small performance hit of implementing the styling.

Along these lines I propose expanding the scope of the project to incorporate this new line. Additionally this architecture can allow for adding things like media query support or even special properties that can map to non-style properties, ios#shadow would be a good example of this.

@sabeurthabti Let me know if you're open to this change or would prefer I move it to a separate project and just use this as a dependency. My only qualm with that is the name here is so good.

I write the gulp-react-native-css base your code, now with gulp, can get mutil input , and output to mutil dir.

I am keen to get someone involved to carry this project on and push it further. I don't work with React-native actively and I have not contributed to the core of this project.

If you're interest in this project please email me: [email protected]

I am aware of this issue, and will be looking for a fix.

Two value shorthands, e.g. padding:10px 20px, are expanding only into Top and Bottom using the Left, Right values, e.g. {paddingTop:20, paddingBottom:20}.

Additionally, border-width and border-radius are also shorthands however aren't treated as such, e.g. border-width: 1px 0 is converted to {borderWidth: 10}.

Not sure why this is failing. Apparently input is not defined as a file.

tbuck:Desktop $ react-native-css input.css output.js
React-native-css - v1.2.2

/usr/local/lib/node_modules/react-native-css/build/index.js:28
        if (input.includes('scss')) {
                  ^
TypeError: Object /Users/tbuckley/Desktop/input.css has no method 'includes'
    at Object.parse (/usr/local/lib/node_modules/react-native-css/build/index.js:28:13)
    at Object.<anonymous> (/usr/local/lib/node_modules/react-native-css/bin/react-native-css:20:6)
    at Module._compile (module.js:456:26)
    at Object.Module._extensions..js (module.js:474:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:312:12)
    at Function.Module.runMain (module.js:497:10)
    at startup (node.js:119:16)
    at node.js:906:3

Hi guys,
I love your module.

One thing about nesting. I see that this sass:

mainContainer {
  flex: 1;
  padding: 30px;
  backgroundColor: #FF9900;
  flexDirection: column;

  headerText {
    color: white;
  }
}

Is converted into:

"mainContainer headerText":{"color":"white"}

Which means I need to select it in react like this:

<Text style={styles['mainContainer headerText']}>Header</Text>

Was this how you intended it to work? Or you have a better suggestion about how to use it?

[email protected]
[email protected]
Android 7.1.1
Only happens when remote debugging is turned off.
Crapping out on line 95 of build/index

 for (var _iterator = stylesheet.rules[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {

This line was transpiled from src/index at line 65:

 65 for (const rule of stylesheet.rules) {

Looks like the guys at styled components faced the same issue and removed dependency on (for of) styled-components/css-to-react-native#31

This css

.row {
  padding: 10px;
  padding-left: 5px;
  flex-direction: row;
  margin-bottom: 2px;
}

will compile to

row: {
  paddingTop: 10,
  paddingBottom: 10,
  paddingRight: 10,
  paddingLeft: "5px",
  flexDirection: row,
  marginBottom: "2px",
}

which is not valid for a React Native Stylesheet.

I believe this is because the padding-left overrides the padding just above and that isn't properly managed.

I've forked the repo, written a regression test and will try to submit a PR with a fix.

Hi !

Thank you for creating this package.

I tried to generate shadowOffset, but it look like it was not supported by this package.
https://facebook.github.io/react-native/docs/shadow-props.html

cardContainer {
  flex: 1;
  background-color: #fff;
  margin-top: 5;
  padding: 8;
  border-top-width: 0.5;
  border-top-color: #fafafa;
  border-bottom-width: 0.5;
  border-bottom-color: #666;
  shadow-offset: { width: 1; height: 1;}
}

Hi, I must say that you have done a great job by internally integrating with SASS. I want to know, do you have any plans for integrating with other css preprocessors specially with Stylus.

Hi all,

I was trying to use this package and faced a simple problem. The package.json is setting: "main": "build/index.js", but, in the npmjs repo, there is not build folder. It seems that build is in the .gitignore file and its is being taken into account as .npmignore when publishing it.

https://docs.npmjs.com/misc/developers#keeping-files-out-of-your-package

when I want to use react-native-css like this

react-native-css ./styles/css/new.css ./styles/js/style.js

then

/Users/lxxyx/.nvm/versions/node/v5.8.0/lib/node_modules/.react-native-css_npminstall/react-native-css/1.2.29/react-native-css/build/index.js:58
          cb(styleSheet);
          ^

TypeError: cb is not a function
    at /Users/lxxyx/.nvm/versions/node/v5.8.0/lib/node_modules/.react-native-css_npminstall/react-native-css/1.2.29/react-native-css/build/index.js:58:11
    at tryToString (fs.js:414:3)
    at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:401:12)

I had try sass scss and css
but i got same question.

My OS is mac osx 10.10 and node.js 5.7/5.8(5.7,5.8,4.4LTS got same question)

Thank you

I would like to have ability to use ...StyleSheet.absoluteFillObject for styles.

To someone new to React Native and unfamiliar with styling in it, the description of this repo makes it sound like it will allow you to write components with id and class attributes and style them with CSS like you would style HTML elements in a browser. I had hoped to use this to reuse our CSS when converting an existing React application to React Native.

The reality is that it just creates a React Native Stylesheet object mapping CSS selectors to rules; it's still necessary to explicitly look up rule sets by selector to use them, rendering this tool useless for my use case, and only helpful for a very niche set of scenarios. This could be clearer in the repo description.

Perhaps remove the sentences "Style React-Native components with css and built in support for SASS" and "Write your React-Native component styles in CSS/SCSS" from the description and instead put something like "Generate a React Native Stylesheet from your CSS with the selectors as keys." That would be equally clear to people who understand React Native without confusing newbies.

I assume it should work since the module simply creates a json structure. Just asking to be sure that it works.

For instance:

• text-decoration should be converted to textDecorationLine
• flex-grow to flex
• vertical-align to textAlignVertical
• textAlignVertical: "middle" to textAlignVertical: "center"
• transforms to an array, eg: translate(100) scaleY(100) to [{ translate: 100, scaleY: 100 }]
• position: fixed to position: "absolute"
• border-(top|right|bottom|left): 0|none to border(Top|Right|Bottom|Left)Width: 0

This would help to re-use existing CSS.

React-native StyleSheet apparently doesn't accept dash "-" in the names unlike css. React interprets dash as an indicator for multiple classes.
So react-native-css shouldn't just create names with dashes in the output file.
I would say it should output an error when generating js file.

We should add validation for CSS properties that would generate invalid RN values and display a warning in the console for these values and preferably show the file and line number. This is useful for catching values that would behave unexpectedly in RN, especially when porting web assets.

• Any size values that aren't ended with px (or if the unit is omitted). %, em, pt, etc.
• Values that use 'auto' or calc(...)
• Non-single value flex properties
• line-height must end in px.
• Unsupported properties, e.g. float, background, etc. This probably should be an optional flag to show individual properties on this. Ignore these properties with one warning per file if flag is not set.
• Mixing properties that would not be supported on the same component.

This would be especially useful since the authors of many CSS assets probably won't know the supported styles of RN or intend their styling to be used in RN.

Given the following, the JS object will only contain "text": {color: "#FFF"} and nothing after that.

text {
    color: $light
}
center {
    text-align: center;
    align-items: center;
    align-self: center;
    justify-content: center;
}

Hi, I got an issue:
My SCSS:
txt {
color: #00f;
font-weight: 400;
}
is translated to JS:
module.exports = require('react-native').StyleSheet.create({
"txt": {
"color": "#00f",
"fontWeight": 400
}
});
but React Native throws an error that 400 has to be within double quotes like "400"

React-native-css should be more forgiving.

Thanks for the package. Shall we include default standard style rules for iOS written in css (e.g. default colors, font sizes)? I think it'll be very helpful.

I have a problem.
I install react-native-css through npm successfully，

but when I run "react-native-css" in terminal, it console a mistake as this.

bash: react-native-css: command not found

I can't figure it out.

How can I properly use the shadowOpacity: {height, width}?

Right now if there is a property in the input CSS that is not supported by React Native, it will crash. It would be good to just ignore them.

Pretty straightforward request. It would be great if this util was available as a gulp plugin.

Trying to use your awesome module as an npm script in my project, but when I do something like:

node_modules/react-native-css/bin/react-native-css -i src/styles/_scss/*.scss -o src/styles/*.styles.js -w

It looks like your script is taking the * literally… How can I watch multiple files?

Thanks a bunch. This is really cool!

If I use Linux, this package work correctly but in windows... --pretty params doesn't work and only the first class is interpreted...

[email protected]
[email protected]
Android 7.1.1

code:

    const runningColor = 'green';

    const lss = RNC`
     bla {
        background-color: ${runningColor};
      }
    `

    return <View style={lss.bla}></View>

Error:

Just to announce we are releasing version two:

- Remove sass/scss support, this is a huge overhead for little benefit. 
- No CLI, we believe that this is an unnecessary context switch
- NO I/O, no longer writing files, we do everything at runtime.  

Old code is still available on the v1 branch and we can continue pushing that development.