Fix: styles ordering

Author: birdofpreyru

__tests__/__snapshots__/index.js.snap

@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Package exports expected interface 1`] = `
+Object {
+  "Avatar": [Function],
+  "Button": [Function],
+  "DangerButton": [Function],
+  "DataScienceTrackEventTag": [Function],
+  "DataScienceTrackTag": [Function],
+  "DesignTrackEventTag": [Function],
+  "DesignTrackTag": [Function],
+  "DevelopmentTrackEventTag": [Function],
+  "DevelopmentTrackTag": [Function],
+  "GhostButton": [Function],
+  "PrimaryButton": [Function],
+  "SecondaryButton": [Function],
+  "Tag": [Function],
+}
+`;

__tests__/index.js

@@ -1,21 +1,5 @@
 import iface from '../src';
 
 test('Package exports expected interface', () => {
-  expect(iface).toHaveProperty('Avatar');
-
-  /* components/buttons */
-  expect(iface).toHaveProperty('Button');
-  expect(iface).toHaveProperty('DangerButton');
-  expect(iface).toHaveProperty('GhostButton');
-  expect(iface).toHaveProperty('PrimaryButton');
-  expect(iface).toHaveProperty('SecondaryButton');
-
-  /* components/tags */
-  expect(iface).toHaveProperty('Tag');
-  expect(iface).toHaveProperty('DataScienceTrackTag');
-  expect(iface).toHaveProperty('DataScienceTrackEventTag');
-  expect(iface).toHaveProperty('DesignTrackTag');
-  expect(iface).toHaveProperty('DesignTrackEventTag');
-  expect(iface).toHaveProperty('DevelopmentTrackTag');
-  expect(iface).toHaveProperty('DevelopmentTrackEventTag');
+  expect(iface).toMatchSnapshot();
 });

package-lock.json

@@ -32,12 +32,12 @@
     "lint:scss": "./node_modules/.bin/stylelint **/*.scss --syntax scss",
     "test": "npm run lint && npm run jest"
   },
-  "version": "0.4.2",
+  "version": "0.4.3",
   "dependencies": {
     "react": "^16.4.1",
     "react-css-super-themr": "^2.2.0",
     "react-dom": "^16.4.1",
-    "topcoder-react-utils": "^0.6.5"
+    "topcoder-react-utils": "^0.6.7"
   },
   "devDependencies": {
     "autoprefixer": "^8.6.3",

package.json

@@ -1,7 +1,6 @@
-import 'styles/global.scss';
-import Avatar from 'components/Avatar';
-import * as buttons from 'components/buttons';
-import * as tags from 'components/tags';
+/* NOTE: Order of imports is important here, this is also the reason to
+ * avoid `import` instructions, as they are silently re-ordered on top by
+ * the compiler. */
 
 /* eslint-disable global-require */
 if (process.env.NODE_ENV === 'production') {
@@ -11,6 +10,12 @@ if (process.env.NODE_ENV === 'production') {
 }
 /* eslint-enable global-require */
 
+require('styles/global.scss');
+
+const Avatar = require('components/Avatar').default;
+const buttons = require('components/buttons');
+const tags = require('components/tags');
+
 module.exports = {
   Avatar,
   ...buttons,