fix: dont include scss exports in normal bundle (#102)

Author: adamraider

packages/core/src/global/_colors.scss

@@ -24,28 +24,3 @@ $ray-color-gray-10: hsl(0, 0%, 100% - 10%);
 $ray-color-gray-30: hsl(0, 0%, 100% - 30%);
 $ray-color-gray-50: hsl(0, 0%, 100% - 50%);
 $ray-color-gray-60: hsl(0, 0%, 100% - 60%);
-
-:export {
-  ray-color-white: $ray-color-white;
-  ray-color-black: $ray-color-black;
-  ray-color-blue-10: $ray-color-blue-10;
-  ray-color-blue-20: $ray-color-blue-20;
-  ray-color-blue-50: $ray-color-blue-50;
-  ray-color-blue-60: $ray-color-blue-60;
-  ray-color-blue-70: $ray-color-blue-70;
-  ray-color-red-10: $ray-color-red-10;
-  ray-color-red-20: $ray-color-red-20;
-  ray-color-red-50: $ray-color-red-50;
-  ray-color-red-60: $ray-color-red-60;
-  ray-color-red-70: $ray-color-red-70;
-  ray-color-green-10: $ray-color-green-10;
-  ray-color-green-20: $ray-color-green-20;
-  ray-color-green-70: $ray-color-green-70;
-  ray-color-green-80: $ray-color-green-80;
-  ray-color-green-90: $ray-color-green-90;
-  ray-color-gray-02: $ray-color-gray-02;
-  ray-color-gray-10: $ray-color-gray-10;
-  ray-color-gray-30: $ray-color-gray-30;
-  ray-color-gray-50: $ray-color-gray-50;
-  ray-color-gray-60: $ray-color-gray-60;
-}

packages/core/src/global/_variables.scss

@@ -83,29 +83,3 @@ $ray-layout-grid-max-width: (
 ) !default;
 
 $ray-layout-grid-default-column-span: 4 !default;
-
-:export {
-  @each $key, $value in $ray-layout-grid-breakpoints {
-    ray-breakpoint-#{$key}: $value;
-  }
-
-  @each $key, $value in $ray-layout-grid-columns {
-    ray-grid-breakpoint-columns-#{$key}: $value;
-  }
-
-  @each $key, $value in $ray-layout-grid-default-margin {
-    ray-grid-margin-#{$key}: $value;
-  }
-
-  @each $key, $value in $ray-layout-grid-default-gutter {
-    ray-grid-gutter-#{$key}: $value;
-  }
-
-  @each $key, $value in $ray-layout-grid-column-width {
-    ray-grid-column-width-#{$key}: $value;
-  }
-
-  @each $key, $value in $ray-layout-grid-max-width {
-    ray-grid-max-width-#{$key}: $value;
-  }
-}

packages/core/src/ray-exports.scss

@@ -0,0 +1,50 @@
+@import 'global/variables';
+
+:export {
+  @each $key, $value in $ray-layout-grid-breakpoints {
+    ray-breakpoint-#{$key}: $value;
+  }
+
+  @each $key, $value in $ray-layout-grid-columns {
+    ray-grid-breakpoint-columns-#{$key}: $value;
+  }
+
+  @each $key, $value in $ray-layout-grid-default-margin {
+    ray-grid-margin-#{$key}: $value;
+  }
+
+  @each $key, $value in $ray-layout-grid-default-gutter {
+    ray-grid-gutter-#{$key}: $value;
+  }
+
+  @each $key, $value in $ray-layout-grid-column-width {
+    ray-grid-column-width-#{$key}: $value;
+  }
+
+  @each $key, $value in $ray-layout-grid-max-width {
+    ray-grid-max-width-#{$key}: $value;
+  }
+
+  ray-color-white: $ray-color-white;
+  ray-color-black: $ray-color-black;
+  ray-color-blue-10: $ray-color-blue-10;
+  ray-color-blue-20: $ray-color-blue-20;
+  ray-color-blue-50: $ray-color-blue-50;
+  ray-color-blue-60: $ray-color-blue-60;
+  ray-color-blue-70: $ray-color-blue-70;
+  ray-color-red-10: $ray-color-red-10;
+  ray-color-red-20: $ray-color-red-20;
+  ray-color-red-50: $ray-color-red-50;
+  ray-color-red-60: $ray-color-red-60;
+  ray-color-red-70: $ray-color-red-70;
+  ray-color-green-10: $ray-color-green-10;
+  ray-color-green-20: $ray-color-green-20;
+  ray-color-green-70: $ray-color-green-70;
+  ray-color-green-80: $ray-color-green-80;
+  ray-color-green-90: $ray-color-green-90;
+  ray-color-gray-02: $ray-color-gray-02;
+  ray-color-gray-10: $ray-color-gray-10;
+  ray-color-gray-30: $ray-color-gray-30;
+  ray-color-gray-50: $ray-color-gray-50;
+  ray-color-gray-60: $ray-color-gray-60;
+}

packages/docs-app/src/components/ColorTable/index.js

@@ -1,6 +1,10 @@
 import React from 'react';
 import Color from 'color';
-import * as colors from '../../../../core/src/global/_colors.scss';
+import * as rayVars from '../../../../core/src/ray-exports.scss';
+
+const colorKeys = Object.keys(rayVars).filter(rayVar =>
+  rayVar.includes('rayColor')
+);
 
 function toKebab(str) {
   return str.replace(/([a-z])([A-Z0-9])/g, '$1-$2').toLowerCase();
@@ -18,8 +22,8 @@ function ColorTable() {
         </tr>
       </thead>
       <tbody>
-        {Object.keys(colors).map(colorKey => {
-          const color = Color(colors[colorKey]);
+        {colorKeys.map(colorKey => {
+          const color = Color(rayVars[colorKey]);
           const textColor = color.isDark() ? 'white' : 'black';
 
           return (
@@ -32,7 +36,7 @@ function ColorTable() {
               <td>
                 <div
                   style={{
-                    backgroundColor: colors[colorKey],
+                    backgroundColor: rayVars[colorKey],
                     display: 'inline-block',
                     padding: '.25rem .5rem',
                     marginRight: '1rem',

packages/docs-app/src/components/GridDocumentation/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { pickBy, range } from 'lodash';
 
-import * as gridVars from '../../../../core/src/global/_variables.scss';
+import * as gridVars from '../../../../core/src/ray-exports.scss';
 
 /* eslint-disable react/prop-types */
 function GridDocumentation() {