No styling default?

[sidot3291]

If I wanted to make a styling plugin compatible with create-react-app, what expectations could I rely on? Can this be specified more clearly - from the Readme I only gather what I can't do.

[mxstbr]

What exactly is a "styling plugin"? That strongly depends on what you're trying to do, but generally all user-land styling plugins (e.g. JSS) work just fine.

[sidot3291]

As an example, a simple grid system where I want the user to be able to adjust the gutter/column width.

[ghost]

That's just normal CSS, you shouldn't over complicate it by using 'styling plugins'.

[mxstbr]

Essentially, a create-react-app created app is just react and CSS, so any CSS library will work fine!

[sidot3291]

@mxstbr Let's use the example of Bootstrap. It depends on a lot of different variables that can be user-customized.

There are 2 ways to customize these variables today.

1. Using a preprocessor like SASS or LESS. This puts the variables in your codebase.
2. Using Bootstrap's online "customize" page: http://getbootstrap.com/customize/

I understand that using the "customize" page would work fine, but's it's also a bit of a headache. Every time you want to change a variable you're stuck going through the UI again for every variable.

I also understand that create-react-app doesn't have SASS or LESS, so those wouldn't work.

Where I'm lost is here: if I want to port Bootstrap for better compatibility with create-react-app, so users can customize these variables within their codebase instead of using the online UI, what should I do?

I can't find any recommendation. Should all CSS libraries be making online customization UIs? Is the plan that users wanting to integrate third-party CSS frameworks will forever need to "eject" to get direct variable customization?

[gaearon]

We intend to keep Less/SASS out of scope of this project for now.
If I had your problem I would likely:

1. Create a package that depends on Bootstrap
2. Add tweaks I need
3. Add a build step to this package consisting of a single command to build the CSS
4. Use the result, rebuild if necessary

I don’t see how why this would require a customization UI or anything. This is not really different from when you want to write a library: you create a package, write some code, add a transpilation step, and then use it in your project if you need to.

If you absolutely don’t want to create another package, by all means, add a custom rebuild-my-bootstrap command to scripts in your package.json that would use the Less/SASS CLIs to do what you want, and use the build output in the React app.