thabti / react-native-css Goto Github PK
View Code? Open in Web Editor NEWStyle React-Native components with css
License: MIT License
Style React-Native components with css
License: MIT License
Pretty straightforward request. It would be great if this util was available as a gulp plugin.
[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>
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
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! :)
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.
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.
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
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.
--Work Started On --
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.
React-native-css should be more forgiving.
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?
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.
line-height
must end in px.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;
}
If I use Linux, this package work correctly but in windows... --pretty params doesn't work and only the first class is interpreted...
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 would like to have ability to use ...StyleSheet.absoluteFillObject
for styles.
I am aware of this issue, and will be looking for a fix.
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.
For instance:
textAlignVertical: "middle"
to textAlignVertical: "center"
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.
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;}
}
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]
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
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 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?
I write the gulp-react-native-css base your code, now with gulp, can get mutil input , and output to mutil dir.
How can I properly use the shadowOpacity: {height, width}?
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.
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"
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.
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}
.
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.
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.
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!
[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
description {
margin-Bottom: 20;
fontSize: 18;
textAlign: center;
color: #656656;
}
Why margin-Bottom
but textAlign
? Could we not have marginBottom
?
I assume it should work since the module simply creates a json structure. Just asking to be sure that it works.
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!
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.