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

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() {