Interest in Integrating?

[speajus2]

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.

[thabti]

Hi @speajus2 - I will review this over the weekend, thanks for reaching out.

@jpomazal thoughts?

[jpomazal]

Nice work, but I would suggest integrating specific components rather than a straight merge. My goal is to provide drop in support for CSS including implicit styling based on ancestral context with no additional dependencies or setup and with the absolute minimum performance tradeoff. I'm finishing up a included babel plugin to automatically transpile the CSS/SCSS into JS and add it into the dependency tree using nothing more than the bundled packager to help fulfill that goal.

@speajus2, I would direct you to the work I'm currently doing in the inheritance branch, the latest documentation on my fork https://github.com/timous/react-native-css/tree/inheritance/examples.

Currently the transpiler only outputs a StyleSheet.create object, but if we break that into two outputs, supported styles in the StyleSheet.create and unsupported styles in a plain object, we can add in the support for animations, etc. leveraging the components you've created.

Another important goal I would like to hit is to make the project a no-op in a browser environment. Leveraging the browser's style resolver and ability to offload animations, etc. to the GPU would be desirable in most situations. This requires any functionality to be compatible with browser supported CSS (only modern browsers, there's got to be a line). The main hurdle here is react-native-web, which inlines all of its styling and will take precedence over anything in a stylesheet. Additionally, the natives component name will need to be selectable, probably by adding data-display-name or something to the DOM elements.

I'm planning to add the future changes to my current branch, any help would be great:

• Improved text support. Instead of simply filtering out text styles on non-text selectors, break the result into two rules with one targeting text with the text only styles. I've already included support for relative units into font-size declarations.
• Fork styles into supported and not supported outputs. This will allow for future support of animation, box-shadow, etc. as the style resolver will return the standard style reference and the additional styles that can be addressed at runtime.
• Support media queries for size and orientation, this should be able to help make RN more responsive.
• Added support for animations, box-shadow, etc.
• Support for react-native-web using the no-op principle.
• Performance improvements, I'm sure there are better ways to do the resolution then what I came up with late at night and less than sober.

[jspears]

Reply Inline -- Email Style ---

Nice work, but I would suggest integrating specific components rather than a straight merge.

Thanks and of course, just wanted to get a convo started if ya'll where interested. (Sorry this is my main account, have others should of used this one @speajus2

My goal is to provide drop in support for CSS including implicit styling based on ancestral context with no additional dependencies or setup and with the absolute minimum performance tradeoff. I'm finishing up a included babel plugin to automatically transpile the CSS/SCSS into JS and add it into the dependency tree using nothing more than the bundled packager to help fulfill that goal.

Well Using Postcss allows for a lot more combinations of preprocessors and is relatively popular. Not to say it couldn't be used in conjunction with the transpile to JS, just might make css pipelines more consistent.

@speajus2, I would direct you to the work I'm currently doing in the inheritance branch, the latest documentation on my fork https://github.com/timous/react-native-css/tree/inheritance/examples.

Nice, will have to take a much closer look.

Currently the transpiler only outputs a StyleSheet.create object, but if we break that into two outputs, supported styles in the StyleSheet.create and unsupported styles in a plain object, we can add in the support for animations, etc. leveraging the components you've created.

Yeah, this definitely has some oddities. Part of me likes including the component from the CSS. gives a lot of flexibility, and would making a pure DOM version would not be hard.

Another important goal I would like to hit is to make the project a no-op in a browser environment. Leveraging the browser's style resolver and ability to offload animations, etc. to the GPU would be desirable in most situations. This requires any functionality to be compatible with browser supported CSS (only modern browsers, there's got to be a line). The main hurdle here is react-native-web, which inlines all of its styling and will take precedence over anything in a stylesheet. Additionally, the natives component name will need to be selectable, probably by adding data-display-name or something to the DOM elements.

I played a bit with react-native-web. Its a bit meta, and the inline styles will be an issue and it had quite a ways to go. I have different thoughts on how to get to one code base across web and mobile, mostly using a DI approach https://github.com/subschema/subschema.

I'm planning to add the future changes to my current branch, any help would be great:
I'll check out this branch and take a better look. Rather not continue my project as don't have the commitment to it, it was mostly a thought experiment. Creating a CSS engine for React Native to me seems like the correct approach. I wrote one in Java (15+) years ago, so know that the last 10% is 110% of the work. Especially without really being in control of rendering.

Improved text support. Instead of simply filtering out text styles on non-text selectors, break the result into two rules with one targeting text with the text only styles. I've already included support for relative units into font-size declarations.

nice, percentage is relatively easy but em/rem are tricky without a real inheritance understanding, which my thing lacks.

Fork styles into supported and not supported outputs. This will allow for future support of animation, box-shadow, etc. as the style resolver will return the standard style reference and the additional styles that can be addressed at runtime.
Support media queries for size and orientation, this should be able to help make RN more responsive.

Mine has media query stuff, feel free to borrow. That part is relatively modular.

Added support for animations, box-shadow, etc.
Support for react-native-web using the no-op principle.
Performance improvements, I'm sure there are better ways to do the resolution then what I >>came up with late at night and less than sober.

I will take a look see... Maybe something will pop out.

—
You are receiving this because you were mentioned.

[jpomazal]

@speajus2 I like the idea of adding PostCSS support or using it in the background, but I don't want to require any additional setup to use it. While it is gaining a large following it is far from ubiquitous and I feel using this project should require nothing more than vanilla CSS. However, there is no problem with being opinionated about recommending a better workflow in the docs.

I would love having a robust DI system in React, but I would want to retain the simplicity and expressiveness of JSX. I personally think Components + JSX would be fabulously expressive in non-UI applications, like data workflows. That being said, I do want to be able to write components (i.e. the dependencies) once and be run on any presentation platform and react-native-web appears to me the best path towards that in regards to web, although I do get how it is a little meta given how React started. Optimally the universality that would eventually include server, TV and archaic things like email. Fundamentally, RN can in theory work on all these platforms while standard React can't (although you could in theory do what react-native-web did and create representations of all the supported HTML tags using RN components, a crazy amount of work but maybe a future project). My goal would be "React is React is React" across all platforms.

[thabti]

I tend to agree with the path that @jpomazal is taking the project. A babel plugin works much better than post-css, as most project use babel and we can attach on that usage. A gradual merge can be something that works for both us. You have have done amazing things, and we can figure out how to best merge both projects. I will make you contributor.

I cannot contribute much more than provide the project and you guys can shape it. I don't get to develop on RN as much as I would like. I would love to hand this project to @jpomazal, @alexmick and hopefully yourself @jspears /@speajus2.