Drop SCSS in favor of CSSNext

[dvdzkwsk]

Thoughts? Opinions? Using Sass is a pretty opinionated decision for the starter kit, and while CSSNext is still fairly niche, it at least acts as more of a transpiler for CSS (a la Babel for JS) rather than being abstraction over CSS. Also, Sass is not exactly needed out of the box for a starter kit, and anybody who wants to add app-wide styles is likely to have their own preference for Sass vs. Less vs. what-have-you and will be able to implement the loader of their choosing on their own.

[patrickheeney]

In my opinion it is too soon, but that could be my lack of understanding. Foundation and Bootstrap are both using Sass in the newest versions so it seems to have the most adoption among css frameworks. There has to be some sort of css transpiler so whatever the decision it will either alienate the majority or the minority.

On another note, the default usage of bootstrap in my opinion leaves things to be desired. In most applications you are likely to extend off of bootstrap and not include the CDN version. However the switch to css-modules seems to contract the usage of bootstrap as well, so that aspect should probably be considered (global vs local styles).

[dvdzkwsk]

Thanks for your feedback @patrickheeney , it's definitely not something that's slated for the starter kit but it's been bouncing around in my head. As far as the default usage of bootstrap, I'm actually probably going to just remove the CDN link entirely... I personally am not a huge fan of bootstrap and don't want to have it as a dependency of the kit (hence the lack of integration), but it was there for some non-awful styling. I'll definitely give that side of things more thought though, regardless of the sass vs. cssnext decision.

[neverfox]

I like the idea and have already started playing with https://github.com/cssnext/postcss-cssnext in a recent project, but I can understand the hesitation.

As for bootstrap, I would be more inclined to make the starter kit use a more React-centric framework like material-ui if any styling framework is included. It's a bit of a clash of philosophies with any CSS styling approach though, as they go pretty hardcore with the inline styling approach. That said, I use it all the time with this kit, and one of the first things I often find myself doing is integrating it.

[patrickheeney]

Just as a quick idea (no research went into this). How hard would it be to document 3-4 common css frameworks (foundation , bootstrap, material-ui, etc) and possibly making a config entry in the config/index. Basically how hard would it be as a generic config to support multiple css projects with webpack. Its my thinking that the webpack config is pretty similar, just need to document a scss vs css module type functionality.

[dvdzkwsk]

@patrickheeney I really like the idea of pluggable configurations, it's something that I think webpack as a whole could benefit from. In the meantime, I'm sure there's a way to set this up locally in the starter kit; the only problem I can foresee is that the project then has a bunch of potentially large unused dependencies.

[patrickheeney]

@davezuko What if it is not bundled with any and you just supply documentation.

npm install bootstrap --save
npm run css:setup --platform bootstrap //edits .env CSSPLATFORM=bootstrap
//config.index.js - css_framework: process.env.CSSPLATFORM || null;
//webpack.css.js - if (css_framework === 'bootstrap') modify webpack config
//add @import "../node_modules/bootstrap/scss/bootstrap.scss to app.scss

The setup could be done with only a few steps. Its likely just a matter of how many would you want to support in the most minimal way. I am still not sure how different the webpack config would be, it may be just documentation like using bootstrap (use this in config.js for the CSS config line).

EDIT. For example I am using bootstrap now and all I had to do was turn off css_modules and import bootstrap in the app.scss file and it all worked great.

[sethreidnz]

Just as a side thought what do you think of yeoman? If you made rhis a generator you could have it ask these config questions and have different dependencies depending on the end user's choice.

[patrickheeney]

I think if it was a complicated setup or required a lot of boilerplate it might be worth it. Probably better then rolling your own bootstrap process. Hopefully there is a way to do it minimally without another dependency though. If config/index.js is flexible enough it could just be copy and paste this in the css section that toggles on/off the necessary functionality.

[patrickheeney]

Just a concept idea:

//config/index.js
css_framework: 'css'

//config/_base.js at the bottom
if (config.css_framework === 'css') {
      webpackConfig.module.loaders.push({
        test: /\.css$/,
        loaders: [
          'style-loader',
         'css-loader?sourceMap'
        ]
      });
} else if (config.css_framework === 'css_modules') {
      webpackConfig.module.loaders.push({
        test: /\.css$/,
        loaders: [
          'style-loader',
         'css-loader?sourceMap'
        ]
      },{
        test: /\.scss$/,
        loaders: [
          'style-loader',
          'postcss-loader',
          'sass-loader',
         [
         'css-loader?modules',
         'sourceMap',
         'importLoaders=1',
         'localIdentName=[name]__[local]___[hash:base64:5]'
         ].join('&')
        ]
      });
}

That is all I am really seeing so far.

[dvdzkwsk]

@patrickheeney I have an idea for something like adapters or plugins or something within webpack (e.g. ~/build/webpack/adapters) that you can toggle on/off almost like middleware. My ideal webpack setup is something like:

someWebpackConfig
  .use(cssModules())
  .use(sassLoader())

Which is probably totally unfeasible, but it would be nice to provide some clean API for incorporating webpack functionality.

[dvdzkwsk]

Closing this for now, since SCSS won't be dropped. I'll open another issue when the time is right for improving configurability.

[gaearon]

FWIW I never understood why people use SCSS or Less with React. Component model perfectly compensates for most of the stuff people do with preprocessors. The rest can be achieved with PostCSS.

[neverfox]

I have to say I'm with @gaearon on this one, but I don't have much of a dog in the fight.

[patrickheeney]

@gaearon @neverfox Just need time I think. I am personally excited to start using this stuff eventually, but with react, redux, webpack, hot loaders, (stateless/functional) components, es6+, babel, karma, relay, graphql, express, etc... its a full time job to keep the JS up to date before even thinking about css.

[therealmarv]

but with react, redux, webpack, hot loaders, (stateless/functional) components, es6+, babel, karma, relay, graphql, express, etc... its a full time job to keep the JS up to date

THIS is a fundamental platform problem in general.