Vendor prefixing with webpack about react-split-pane HOT 10 CLOSED

Hi Tom,

Apologies for the delay.

I've got it working with webpack and Autoprefixer, as suspected this appears to fix the styling issue in Webkit browsers, so I'll try and send you a PR later this week (just a few of things to tidy up)!

Regards,

Tim

from react-split-pane.

@tomkp nice work with react-split-pane.

This is a vendor-prefixing issue.

I'm happy to submit a pull-request to fix it if no one else is currently working on it?

As far as I can tell, there are a few possible solutions:

• Attempt to detect the browser and then use conditionals to apply appropriate styles.
• Extract styles into external style-sheets (adding vendor prefixes), and then import them into your components (i.e. integrate a css module loader into the build). Something like AutoPrefixer could also be used to automate vendor-prefixing in this case.

If you want me to look at this, let me know if you have any preferences.

Cheers,

Tim

from react-split-pane.

Hi Tim - Thanks for the offer of help - it's appreciated!

I've never been that comfortable with the current approach to vendor prefixing - and would really like to get this fixed.

The second approach - extracting styles and using AutoPrefixer would be my preference. What do you think about introducing webpack to package it up?

I'd be more than happy to merge a PR for this.

Cheers

Tom

from react-split-pane.

OK great, I'll have a go at sorting this out.

Perhaps if you assign the issue to me, then others can see that this is in progress.

Webpack would be my choice.

Being able to chain loaders gives you a lot of flexibility if you ever want to use a different style sheet language (e.g. Less), so unless you have any particular preference I'll use webpack.

Cheers

Tim

from react-split-pane.

Hi @timrobbings - Sorry but I haven't been able to assign this issue to you (not sure why) - but I'd be very happy to accept a PR for it!

from react-split-pane.

Submitted a PR that should fix layout in webkit browsers (but it doesn't yet add the webpack stuff).

I had hoped to have everything working with webpack this week, but the 'tidying up' is proving a bit more disruptive than I had hoped!

Specifically, if we start importing CSS, the tests require updating else they all fail. This requires a few more changes to get working (Mochify seems to struggle with CSS imports).

So, for now I've gone with the least disruptive option, which basically wraps inline-styles to apply prefixes and get it working. Although I'm still happy to submit another PR when I've got the tests working!

Regards,

Tim

from react-split-pane.

Great work thanks!

Have you looked at https://www.npmjs.com/package/ignore-styles - I've used
it before when testing components that import styles...

Cheers

Tom

On 6 October 2016 at 00:18, Tim Robbings [email protected] wrote:

Submitted a PR that should fix layout in webkit browsers (but it doesn't
yet add the webpack stuff).

I had hoped to have everything working with webpack this week, but the
'tidying up' is proving a bit more disruptive than I had hoped!

Specifically, if we start importing CSS, the tests require updating else
they all fail. This requires a few more changes to get working (Mochify
seems to struggle with CSS imports).

So, for now I've gone with the least disruptive option, which basically
wraps inline-styles to apply prefixes and get it working. Although I'm
still happy to submit another PR when I've got the tests working!

Regards,

Tim

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
#120 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAKdQyZwjKoQyB3gMdjBbtSfPW0DDO9lks5qxDBbgaJpZM4J1ANA
.

from react-split-pane.

Hi Tom,

Yes, I had a look at ignore-styles, thanks.

I got to the stage where I had everything building for production using webpack, but I had some difficulty using the Mochify '--require' flag to pass ignore-styles as an option (I'm not 100% sure if this is the correct way to do this?).

I'm also not sure whether this is the right approach, because it means you effectively have two different build tools (webpack for production and browserify for tests), both of which you need to configure to understand CSS imports.

I think the ideal would be to have a webpack config that handles production, demo and test builds, so I'm currently looking into testing with webpack.

Regards,

Tim

from react-split-pane.

I agree - I think we'd be best off using webpack for everything, and ditching the browserify / mochify bits...

from react-split-pane.

@tomkp This issue can be closed I think :-)

from react-split-pane.