Refactor build system to support CSS modules

[vishnugopal]

Short description

This builds infrastructure for a single rollup build that supports:

• CSS modules
• Code splitting just like how antd does it.
• Conversion of SVG to inline data urls.

This also removes the previous webpack builder as that is no longer necessary with this workflow.

Test Plan

This adds infrastructure to support CSS modules. Nothing has yet been made CSS module yet, as that needs additional changes in Twist & Todoist, but the builder has been completely changed. To test:

1. Checkout reactist
2. npm run build
3. Checkout twist-web
4. npm i; npm run reactist:link; npm run start
5. Make sure everything works fine.
6. Do same steps for todoist-web

Note there are 2 PRs, one Twist, and one Todoist that have to be reviewed with this together.

PR Checklist

• [ ] Added tests for bugs / new features
• Updated docs (storybooks, readme)
• Described changes in CHANGELOG.md
• Executed npm run lint and made sure no errors / warnings were shown
• Executed npm run test and made sure all tests are passing
• Bumped version in package.json
• Updated all static build artifacts (npm run build-all)

[stkao05]

Unsure if these commands could work in the across platform matter. Another option could consider is to do these work in a nodejs script.

[stkao05]

Test and work on my ends. Here is one comment regarding build setup

CommonJS build (/dist)

• We probably do not need to bundle every components together. Adopting the same structure /es probably makes more sense. The only difference between /dist/ and /es is that the one uses the CommonJS module and the other uses ES module. Other than that everything should be the same.
• Should not need to minify. It is commonly handled by the user's bundler to handle

[henningmu]

Do you think it would make sense to put this into a bash script (separate file) and add a couple of comments?

[vishnugopal]

We probably do not need to bundle every components together.

antd & most other libraries have a convention that dist/ is actually bundled, and intended to be used directly in the browser. I've made a couple of changes now:

1. dist/ continues to be bundled to be used in the browser.
2. lib/ contains unbundled CJS as you suggested.

Do you think it would make sense to put this into a bash script (separate file) and add a couple of comments?

Done! 🙂

[stkao05]

antd & most other libraries have a convention that dist/ is actually bundled, and intended to be used directly in the browser.

I am not sure if it is a common convention for main (from package.json) to contain a single bundle, and also not sure if the use case for direct use in the browser is common. It also creates an issue for users who use CommonJS in their bundle tool as they would need to bundle everything.

If we want to create a "browser usage" bundle, maybe we can create another build folder dist_browser for this

[stkao05]

Would be great to address the CommonJS dist issue but isn't a blocking issue.

[vishnugopal]

Agree, I'll:

• Change main to lib/index.js instead.

This also echoes antd's approach.

[gnapse]

It seems v6 has broken TS support. When I install it in Twist I get TS failings all over. When I inspect the node_modules/@doist/reactist/dist/ folder there's much less in it than when I install a pre-v6 version.

Here's what I see when I install v6:

$ ls -l node_modules/@doist/reactist/dist/
-rw-r--r--  1 ernesto  staff    68K Oct 26  1985 reactist.cjs.development.js
-rw-r--r--  1 ernesto  staff   140K Oct 26  1985 reactist.cjs.development.js.map
-rw-r--r--  1 ernesto  staff    31K Oct 26  1985 reactist.cjs.production.min.js
-rw-r--r--  1 ernesto  staff   114K Oct 26  1985 reactist.cjs.production.min.js.map

vs. on v5.2.0:

$ ls -l node_modules/@doist/reactist/dist/
drwxr-xr-x   5 ernesto  staff   160B Jul 23 11:58 Avatar/
drwxr-xr-x   5 ernesto  staff   160B Jul 23 11:58 Button/
drwxr-xr-x   5 ernesto  staff   160B Jul 23 11:58 Checkbox/
drwxr-xr-x   5 ernesto  staff   160B Jul 23 11:58 ColorPicker/
drwxr-xr-x   5 ernesto  staff   160B Jul 23 11:58 Dropdown/
drwxr-xr-x   5 ernesto  staff   160B Jul 23 11:58 ErrorMessage/
drwxr-xr-x   5 ernesto  staff   160B Jul 23 11:58 Icon/
drwxr-xr-x   5 ernesto  staff   160B Jul 23 11:58 Input/
drwxr-xr-x   4 ernesto  staff   128B Jul 23 11:58 KeyCapturer/
drwxr-xr-x   4 ernesto  staff   128B Jul 23 11:58 KeyboardShortcut/
drwxr-xr-x   5 ernesto  staff   160B Jul 23 11:58 Loading/
drwxr-xr-x   5 ernesto  staff   160B Jul 23 11:58 MenuButton/
drwxr-xr-x   5 ernesto  staff   160B Jul 23 11:58 Modal/
drwxr-xr-x   5 ernesto  staff   160B Jul 23 11:58 Popover/
drwxr-xr-x   5 ernesto  staff   160B Jul 23 11:58 ProgressBar/
drwxr-xr-x   5 ernesto  staff   160B Jul 23 11:58 RangeInput/
drwxr-xr-x   5 ernesto  staff   160B Jul 23 11:58 Select/
drwxr-xr-x   5 ernesto  staff   160B Jul 23 11:58 Tabs/
drwxr-xr-x   5 ernesto  staff   160B Jul 23 11:58 Time/
drwxr-xr-x   5 ernesto  staff   160B Jul 23 11:58 Tip/
drwxr-xr-x   5 ernesto  staff   160B Jul 23 11:58 Tooltip/
-rw-r--r--   1 ernesto  staff   2.1K Oct 26  1985 _rollupPluginBabelHelpers-0886f29f.js
-rw-r--r--   1 ernesto  staff   198B Oct 26  1985 _rollupPluginBabelHelpers-0886f29f.js.map
drwxr-xr-x  25 ernesto  staff   800B Jul 23 11:58 components/
drwxr-xr-x   4 ernesto  staff   128B Jul 23 11:58 index/
-rw-r--r--   1 ernesto  staff   1.3K Oct 26  1985 index.d.ts
-rw-r--r--   1 ernesto  staff   194B Oct 26  1985 index.js
-rw-r--r--   1 ernesto  staff    68K Oct 26  1985 reactist.cjs.development.js
-rw-r--r--   1 ernesto  staff   140K Oct 26  1985 reactist.cjs.development.js.map
-rw-r--r--   1 ernesto  staff    31K Oct 26  1985 reactist.cjs.production.min.js
-rw-r--r--   1 ernesto  staff   114K Oct 26  1985 reactist.cjs.production.min.js.map
-rw-r--r--   1 ernesto  staff    24K Oct 26  1985 reactist.css

[vishnugopal]

I had moved typings over to lib/index.d.ts but forgot to add lib/ to the files key in package.json. It's strange that everything seemed to work when doing reactist:link