Skip to content

Commit 566845c

Browse files
authored
fix: dont include scss exports in normal bundle (#102)
1 parent a2d1ab6 commit 566845c

File tree

5 files changed

+59
-56
lines changed

5 files changed

+59
-56
lines changed

packages/core/src/global/_colors.scss

Lines changed: 0 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -24,28 +24,3 @@ $ray-color-gray-10: hsl(0, 0%, 100% - 10%);
2424
$ray-color-gray-30: hsl(0, 0%, 100% - 30%);
2525
$ray-color-gray-50: hsl(0, 0%, 100% - 50%);
2626
$ray-color-gray-60: hsl(0, 0%, 100% - 60%);
27-
28-
:export {
29-
ray-color-white: $ray-color-white;
30-
ray-color-black: $ray-color-black;
31-
ray-color-blue-10: $ray-color-blue-10;
32-
ray-color-blue-20: $ray-color-blue-20;
33-
ray-color-blue-50: $ray-color-blue-50;
34-
ray-color-blue-60: $ray-color-blue-60;
35-
ray-color-blue-70: $ray-color-blue-70;
36-
ray-color-red-10: $ray-color-red-10;
37-
ray-color-red-20: $ray-color-red-20;
38-
ray-color-red-50: $ray-color-red-50;
39-
ray-color-red-60: $ray-color-red-60;
40-
ray-color-red-70: $ray-color-red-70;
41-
ray-color-green-10: $ray-color-green-10;
42-
ray-color-green-20: $ray-color-green-20;
43-
ray-color-green-70: $ray-color-green-70;
44-
ray-color-green-80: $ray-color-green-80;
45-
ray-color-green-90: $ray-color-green-90;
46-
ray-color-gray-02: $ray-color-gray-02;
47-
ray-color-gray-10: $ray-color-gray-10;
48-
ray-color-gray-30: $ray-color-gray-30;
49-
ray-color-gray-50: $ray-color-gray-50;
50-
ray-color-gray-60: $ray-color-gray-60;
51-
}

packages/core/src/global/_variables.scss

Lines changed: 0 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -83,29 +83,3 @@ $ray-layout-grid-max-width: (
8383
) !default;
8484

8585
$ray-layout-grid-default-column-span: 4 !default;
86-
87-
:export {
88-
@each $key, $value in $ray-layout-grid-breakpoints {
89-
ray-breakpoint-#{$key}: $value;
90-
}
91-
92-
@each $key, $value in $ray-layout-grid-columns {
93-
ray-grid-breakpoint-columns-#{$key}: $value;
94-
}
95-
96-
@each $key, $value in $ray-layout-grid-default-margin {
97-
ray-grid-margin-#{$key}: $value;
98-
}
99-
100-
@each $key, $value in $ray-layout-grid-default-gutter {
101-
ray-grid-gutter-#{$key}: $value;
102-
}
103-
104-
@each $key, $value in $ray-layout-grid-column-width {
105-
ray-grid-column-width-#{$key}: $value;
106-
}
107-
108-
@each $key, $value in $ray-layout-grid-max-width {
109-
ray-grid-max-width-#{$key}: $value;
110-
}
111-
}

packages/core/src/ray-exports.scss

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
@import 'global/variables';
2+
3+
:export {
4+
@each $key, $value in $ray-layout-grid-breakpoints {
5+
ray-breakpoint-#{$key}: $value;
6+
}
7+
8+
@each $key, $value in $ray-layout-grid-columns {
9+
ray-grid-breakpoint-columns-#{$key}: $value;
10+
}
11+
12+
@each $key, $value in $ray-layout-grid-default-margin {
13+
ray-grid-margin-#{$key}: $value;
14+
}
15+
16+
@each $key, $value in $ray-layout-grid-default-gutter {
17+
ray-grid-gutter-#{$key}: $value;
18+
}
19+
20+
@each $key, $value in $ray-layout-grid-column-width {
21+
ray-grid-column-width-#{$key}: $value;
22+
}
23+
24+
@each $key, $value in $ray-layout-grid-max-width {
25+
ray-grid-max-width-#{$key}: $value;
26+
}
27+
28+
ray-color-white: $ray-color-white;
29+
ray-color-black: $ray-color-black;
30+
ray-color-blue-10: $ray-color-blue-10;
31+
ray-color-blue-20: $ray-color-blue-20;
32+
ray-color-blue-50: $ray-color-blue-50;
33+
ray-color-blue-60: $ray-color-blue-60;
34+
ray-color-blue-70: $ray-color-blue-70;
35+
ray-color-red-10: $ray-color-red-10;
36+
ray-color-red-20: $ray-color-red-20;
37+
ray-color-red-50: $ray-color-red-50;
38+
ray-color-red-60: $ray-color-red-60;
39+
ray-color-red-70: $ray-color-red-70;
40+
ray-color-green-10: $ray-color-green-10;
41+
ray-color-green-20: $ray-color-green-20;
42+
ray-color-green-70: $ray-color-green-70;
43+
ray-color-green-80: $ray-color-green-80;
44+
ray-color-green-90: $ray-color-green-90;
45+
ray-color-gray-02: $ray-color-gray-02;
46+
ray-color-gray-10: $ray-color-gray-10;
47+
ray-color-gray-30: $ray-color-gray-30;
48+
ray-color-gray-50: $ray-color-gray-50;
49+
ray-color-gray-60: $ray-color-gray-60;
50+
}

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

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
11
import React from 'react';
22
import Color from 'color';
3-
import * as colors from '../../../../core/src/global/_colors.scss';
3+
import * as rayVars from '../../../../core/src/ray-exports.scss';
4+
5+
const colorKeys = Object.keys(rayVars).filter(rayVar =>
6+
rayVar.includes('rayColor')
7+
);
48

59
function toKebab(str) {
610
return str.replace(/([a-z])([A-Z0-9])/g, '$1-$2').toLowerCase();
@@ -18,8 +22,8 @@ function ColorTable() {
1822
</tr>
1923
</thead>
2024
<tbody>
21-
{Object.keys(colors).map(colorKey => {
22-
const color = Color(colors[colorKey]);
25+
{colorKeys.map(colorKey => {
26+
const color = Color(rayVars[colorKey]);
2327
const textColor = color.isDark() ? 'white' : 'black';
2428

2529
return (
@@ -32,7 +36,7 @@ function ColorTable() {
3236
<td>
3337
<div
3438
style={{
35-
backgroundColor: colors[colorKey],
39+
backgroundColor: rayVars[colorKey],
3640
display: 'inline-block',
3741
padding: '.25rem .5rem',
3842
marginRight: '1rem',

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react';
22
import { pickBy, range } from 'lodash';
33

4-
import * as gridVars from '../../../../core/src/global/_variables.scss';
4+
import * as gridVars from '../../../../core/src/ray-exports.scss';
55

66
/* eslint-disable react/prop-types */
77
function GridDocumentation() {

0 commit comments

Comments
 (0)