fix(style): bundle momentum-ui styling modules

akoushke · lalli-flores · commit 9701887f5b7f · 2019-09-11T14:25:47.000-07:00
diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js
@@ -13,10 +13,7 @@ module.exports = async ({config, mode}) => {
       {
         loader: 'sass-resources-loader',
         options: {
-          resources: [
-            path.resolve(__dirname, '../src/styles/index.scss'),
-            path.resolve(__dirname, '../momentum-ui.scss'),
-          ],
+          resources: [path.resolve(__dirname, '../src/styles/index.scss')],
         },
       },
     ],
diff --git a/README.md b/README.md
@@ -17,8 +17,8 @@
 
 **Webex Components** is a set of [React](https://reactjs.org) components following Webex standard styling, aimed at react developers that want to embed the components into their applications.
 
-
 ## Table of Contents
+
 - [Install](#install)
 - [Usage](#usage)
 - [Contributing](#contributing)
@@ -29,84 +29,78 @@
 ## Install
 
 ```bash
-npm install --save @webex/components @momentum-ui/react
+npm install --save @webex/components
 ```
 
 ## Usage
-**Webex Components** are built with [Momentum UI](https://github.com/momentum-design/momentum-ui) React components. We need to externally import all the fonts, icons, images and core *CSS* manually. There are two ways to do this:
-
-### 1. CSS
-1. Copy the `@momentum-ui/core/fonts` directory to the 'fonts' directory for your site.
-2. Copy the `@momentum-ui/core/images` directory to the 'images' directory for your site.
-3. Copy the `@momentum-ui/core/css/momentum-ui.min.css` to your styles/css directory.
-4. In the `<head>`, of your HTML reference the location of your momentum-ui.min.css:
-
-    `<link rel='stylesheet' href='path/to/momentum-ui/css/momentum-ui.min.css'>`
-
-***
-### 2. SCSS
-1. Add `$brand-font-folder` and `$icon-font-path` variables to the top of your app's Sass file.
 
+We need to externally import all the fonts, icons, images and core _CSS_ manually. Import `@webex/components/dist/webexComponents.css` into your main entry file. There are two ways to do this:
 
-    ```scss
-    $brand-font-folder: "~@momentum-ui/core/fonts";
-    $icon-font-path: "~@momentum-ui/icons/fonts";
-    ```
+### 1. JavaScript
 
-2. Import `@momentum-ui/core/scss/momentum-ui-components` into your main entry Sass file AFTER the variables.
+```js
+import '@webex/components/dist/webexComponents.css';
+```
 
-    ```scss
-    @import "~@momentum-ui/core/scss/momentum-ui-components";
-    ```
+### 2. Html
 
-3. Compile Sass files using your static compiler or bundler (Webpack, Grunt, Gulp, etc.)
-***
+```html
+<head>
+  <link rel="stylesheet" type="text/css" href="node_modules/@webex/components/dist/webexComponents.css" />
+</head>
+```
 
-Once Momentum styles have been imported into your project, you can start using the components. For example:
+Once Webex styles have been imported into your project, you can start using the components. For example:
 
-  ```js
-  import {WebexAvatar} from '@webex/components';
+```js
+import {WebexAvatar} from '@webex/components';
 
-  function App() {
-    return (
-      <div className='App'>
-        <WebexAvatar title='Webex Avatar' />
-      </div>
-    );
-  }
+function App() {
+  return (
+    <div className="App">
+      <WebexAvatar title="Webex Avatar" />
+    </div>
+  );
+}
 
-  export default App;
-  ```
+export default App;
+```
 
-*Happy Coding!*
+_Happy Coding!_
 
 ## Contributing
+
 We'd love for you to contribute to our source code and to make **Webex Components** even better than it is today! Here are some [guidelines](https://github.com/webex/components/blob/master/CONTRIBUTING.md) that we'd like you to follow.
 
 ### Issues
+
 Please open an [issue](https://github.com/webex/components/issues) and we will get to it in an orderly manner.
 Please leave as much as information as possible for a better understanding.
+
 ### Contributing Code
+
 We are using [Webex Style Guide eslint rule](https://github.com/webex/web-styleguide/tree/master/packages/node_modules/%40webex/eslint-config-react) and [prettier](https://github.com/prettier/prettier) to lint the code style.
 You can "prettify" your code before committing via:
 
-  ```bash
-  npm run prettier:write
-  ```
+```bash
+npm run prettier:write
+```
 
 ### Release Process
+
 There is a list of commit types provided [here](https://github.com/webex/components/blob/master/CONTRIBUTING.md#type). However, not all commits trigger our release process.
 We are using [semantic-release](https://github.com/semantic-release/semantic-release) to fully automate the version management and package publishing.
 By default `semantic-release` uses the [Angular Commit Message Conventions](https://github.com/angular/angular.js/blob/master/DEVELOPERS.md#-git-commit-guidelines) and triggers release and publishing based on the following rules:
 
-|Commit|Release type|
-|------|------------|
-|Commit with type `BREAKING CHANGE` | Major release|
-|Commit with type `feat`| Minor release|
-|Commit with type `fix` | Patch release|
-|Commit with type `perf`| Patch release|
+| Commit                             | Release type  |
+| ---------------------------------- | ------------- |
+| Commit with type `BREAKING CHANGE` | Major release |
+| Commit with type `feat`            | Minor release |
+| Commit with type `fix`             | Patch release |
+| Commit with type `perf`            | Patch release |
 
 #### Commit linter
+
 We are using [commitlint](https://github.com/conventional-changelog/commitlint) to lintify the commit messages.
 Please make sure to choose the appropriate commit [type](https://github.com/webex/components/blob/master/CONTRIBUTING.md#type), [scope](https://github.com/webex/components/blob/master/CONTRIBUTING.md#scope) and [subject](https://github.com/webex/components/blob/master/CONTRIBUTING.md#scope).
 
@@ -115,9 +109,11 @@ Please make sure to choose the appropriate commit [type](https://github.com/webe
 [MIT License](https://opensource.org/licenses/MIT)
 
 ## Support
+
 For more developer resources, tutorials and support, visit the Webex developer portal, https://developer.webex.com.
 
 ## Team
-| [![Adam Weeks](https://github.com/adamweeks.png?size=100)](https://github.com/adamweeks)| [![Arash Koushkebaghi](https://github.com/akoushke.png?size=100)](https://github.com/akoushke)| [![Lalli Flores](https://github.com/lalli-flores.png?size=100)](https://github.com/lalli-flores)| [![Timothy Scheuering](https://github.com/InteractiveTimmy.png?size=100)](https://github.com/InteractiveTimmy)|[![David Hoff](https://github.com/harborhoffer.png?size=100)](https://github.com/harborhoffer)
-|-----|-----|-----|-----|----|
-|[Adam Weeks](https://github.com/adamweeks)|[Arash Koushkebaghi](https://github.com/akoushke)|[Lalli Flores](https://github.com/lalli-flores) | [Timothy Scheuering](https://github.com/InteractiveTimmy) | [David Hoff](https://github.com/harborhoffer)
+
+| [![Adam Weeks](https://github.com/adamweeks.png?size=100)](https://github.com/adamweeks) | [![Arash Koushkebaghi](https://github.com/akoushke.png?size=100)](https://github.com/akoushke) | [![Lalli Flores](https://github.com/lalli-flores.png?size=100)](https://github.com/lalli-flores) | [![Timothy Scheuering](https://github.com/InteractiveTimmy.png?size=100)](https://github.com/InteractiveTimmy) | [![David Hoff](https://github.com/harborhoffer.png?size=100)](https://github.com/harborhoffer) |
+| ---------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- |
+| [Adam Weeks](https://github.com/adamweeks)                                               | [Arash Koushkebaghi](https://github.com/akoushke)                                              | [Lalli Flores](https://github.com/lalli-flores)                                                  | [Timothy Scheuering](https://github.com/InteractiveTimmy)                                                      | [David Hoff](https://github.com/harborhoffer)                                                  |
diff --git a/rollup.config.js b/rollup.config.js
@@ -24,7 +24,22 @@ export default [
       output('UMDWebexComponents', 'umd'),
       output('ESMWebexComponents', 'esm'),
     ],
-    plugins: [resolve(), babel(), commonJS(), json(), scss()],
+    plugins: [
+      resolve(),
+      babel(),
+      commonJS(),
+      json(),
+      scss({
+        includePaths: ['node_modules'],
+        output: 'dist/webexComponents.css',
+        failOnError: true,
+        // remove `~` from node_modules import declarations.
+        // more info: https://github.com/facebook/create-react-app/issues/2859#issuecomment-318059618
+        importer(path) {
+          return {file: path[0] === '~' ? path.slice(1) : path};
+        },
+      }),
+    ],
     onwarn(warning, warn) {
       // skip circular dependency warnings from @momentum-ui/react library
       if (warning.code === 'CIRCULAR_DEPENDENCY') return;
diff --git a/src/styles/index.scss b/src/styles/index.scss
@@ -1 +1,2 @@
+@import 'momentum-ui.scss';
 @import 'mixins';
diff --git a/src/styles/momentum-ui.scss b/src/styles/momentum-ui.scss

Original file line number	Diff line number	Diff line change
`@@ -1 +1,2 @@`
	`1`	`+@import 'momentum-ui.scss';`
`1`	`2`	`@import 'mixins';`