These are chat archives for brunch/brunch

4th
Aug 2016
Adrian Li
@adrianmcli
Aug 04 2016 12:24
Is there a way to disable the eager loading of stylesheets in Brunch?
For example, I don't want any stylesheets to load unless I do this in my JS files explicitly:
import './styles.css'
Colin Bate
@colinbate
Aug 04 2016 14:09
Have you tried using the entryPoints config? I would be surprised it if works for stylesheets like you expect, but it could in theory. Otherwise you'll need a plugin which treats CSS like JavaScript and does the right thing with it.
I have colinbate/inline-css-brunch but it just returns the CSS as text from the module allowing it to be used with Angular 2
I'm not sure if there is a plugin which drops the CSS text into the page inside style tags. Wouldn't be too hard though.
Now that I think about it, importing stylesheets the way you mention used to work for CSS inside node_modules packages
Colin Bate
@colinbate
Aug 04 2016 14:14
But I recall being told that was a bug :)
Colin Bate
@colinbate
Aug 04 2016 14:21
@jacksonrayhamilton Is your config based on the environment at build time (as in, is the JSON file available at build time) or is the JSON only available at deploy time? I know some apps are built once (in production mode) and then deployed to multiple environments without rebuilding (like staging for example). How you tackle the problem depends on this.
Colin Bate
@colinbate
Aug 04 2016 14:29
I've used jsenv-brunch to inject values into builds based on environment variables
There is also package-brunch which looks like what you want, but looking at the code, I think it is probably broken with NPM 3.
Colin Bate
@colinbate
Aug 04 2016 14:37
Actually it might work with npm 3
Adrian Li
@adrianmcli
Aug 04 2016 15:59
@colinbate thx for the explanation. I think it's probably easier to just go all-in with CSS Modules than to hack around it.
Adrian Li
@adrianmcli
Aug 04 2016 16:09

if I have two files, App.js and App.css. And I import it like this:

import App from './App';

How do I make sure that it's importing the JS file instead of the CSS file? Because right now it's defaulting to CSS, probably due to alphabetical reasons.

My current workaround is to write in the extension explicitly:
import App from './App.js';
Mauro Oviedo
@moviedo
Aug 04 2016 16:10
did't know you could import css file like that
Colin Bate
@colinbate
Aug 04 2016 16:10
You can sort the CSS files to the bottom
One sec, I have an example
Under Usage at the bottom of the README: https://github.com/colinbate/inline-css-brunch
Adrian Li
@adrianmcli
Aug 04 2016 16:13
ah thanks! @colinbate
@moviedo yeah I do it all the time with Webpack apps
Adrian Li
@adrianmcli
Aug 04 2016 16:18

quick update on the CRA thing.
I've made a Brunch Skeleton project styled the same as CRA: https://github.com/adrianmc/cra-with-brunch
I made a command-line tool that clones the repo and installs the packages: https://github.com/adrianmc/create-react-app-brunch

That's about it.

Colin Bate
@colinbate
Aug 04 2016 16:22
Cool. I see you stuck to the Brunch conventions for the skeleton
You are also using CSS Modules which CRA doesn't I believe.
(Not sure how compatible you are interested in being)
Jackson Ray Hamilton
@jacksonrayhamilton
Aug 04 2016 16:29

:point_up: August 4, 2016 7:21 AM @colinbate The config is based on the environment at build time. There isn't a JSON "file" necessarily, rather JSON is generated by the build script, some content static and some determined by environment variables / flags.

Thanks for those links. jsenv-brunch seems pretty close to what I want (it dynamically generates the contents of a JSON file). I think I need a little more flexibility than that though; i.e., I'd kind of like to generate the JSON using more than just environment variables.

Adrian Li
@adrianmcli
Aug 04 2016 16:29
Yeah, I tried to pull out the favicon and index.html, but in the end it made the config file more confusing/ugly.
At the end of the day, a folder called assets with your static assets inside make a whole lot of sense (and is not hard to grasp at all).
Regarding the CSS Modules, I am aware that CRA has held back on it. But without it, everything just seems like such a mess. Not sure what your thoughts are regarding that @colinbate.
Colin Bate
@colinbate
Aug 04 2016 16:31
I certainly like to use them with React (or React-like) apps.
I'm happy for them to be there, I guess at this point, it isn't exactly a drop in replacement for Dan's CRA anyway :)
Adrian Li
@adrianmcli
Aug 04 2016 16:35
:) yeah hopefully it's gonna be better
I was thinking of maybe adding some flags for the CLI tool. Like create-react-app-brunch myApp --css-modules --scss in order to generate different Brunch projects.
Jackson Ray Hamilton
@jacksonrayhamilton
Aug 04 2016 16:59
Regarding CSS modules, I like the idea of localized module names, but in React, they got in my way. Modules like react-css-transition-group expect global, predictable class names, as does querySelector (when writing unit tests), so I frequently had to break out of className={style.foo} and go back to className="foo" or even className={classNames(style.foo, "foo")}, which felt very redundant. So I ended up just using global class names. I wonder if anyone has come up with better solutions to those problems though.