feat(scss): export the theme as SCSS file (#231)

elastic · Jun 12, 2019 · ebae6ab · ebae6ab
1 parent d7e1960
commit ebae6ab
Show file tree

Hide file tree

Showing 12 changed files with 73 additions and 36 deletions.
diff --git a/package.json b/package.json
@@ -16,7 +16,8 @@
     "build:clean": "rm -rf ./dist",
     "build:ts": "tsc -p ./tsconfig.json",
     "build:sass": "node-sass src/theme_light.scss dist/theme_light.css --output-style compressed && node-sass src/theme_dark.scss dist/theme_dark.css --output-style compressed && node-sass src/theme_only_light.scss dist/theme_only_light.css --output-style compressed && node-sass src/theme_only_dark.scss dist/theme_only_dark.css --output-style compressed",
-    "build": "yarn build:clean && yarn build:ts && yarn build:sass",
+    "concat:sass": "node scripts/concat_sass.js",
+    "build": "yarn build:clean && yarn build:ts && yarn build:sass && yarn concat:sass",
     "start": "yarn storybook",
     "storybook": "start-storybook -p 9001 -c .storybook",
     "storybook:build": "rm -rf .out && build-storybook -c .storybook -o .out",
@@ -96,6 +97,7 @@
     "prettier-tslint": "^0.4.2",
     "react-docgen-typescript-loader": "^3.0.1",
     "react-docgen-typescript-webpack-plugin": "^1.1.0",
+    "sass-graph": "^3.0.4",
     "sass-loader": "^7.1.0",
     "semantic-release": "^15.13.3",
     "style-loader": "^0.23.1",
@@ -140,4 +142,4 @@
     "node": "10.15.2",
     "yarn": "^1.10.1"
   }
-}
+}
diff --git a/scripts/concat_sass.js b/scripts/concat_sass.js
@@ -0,0 +1,35 @@
+const fs = require('fs');
+const sassGraph = require('sass-graph');
+
+const graph = sassGraph.parseFile('./src/components/_index.scss');
+
+const root = Object.keys(graph.index)[0];
+
+const content = recursiveReadSCSS(root, graph.index[root]);
+
+fs.writeFileSync('./dist/theme.scss', content);
+
+function recursiveReadSCSS(branchId, branch) {
+  if (branch.imports.length === 0) {
+    return fs.readFileSync(branchId, 'utf8');
+  }
+  const file = fs.readFileSync(branchId, 'utf8');
+  const sassFileContent = []
+  branch.imports.forEach((branchId) => {
+    const content = recursiveReadSCSS(branchId, graph.index[branchId]);
+    sassFileContent.push(content);
+  });
+  // remove imports
+  const contentWithoutImports = removeImportsFromFile(file)
+  sassFileContent.push(contentWithoutImports);
+  return sassFileContent.join('\n');
+}
+
+
+function removeImportsFromFile(fileContent) {
+  const lines = fileContent.split(/\r\n|\r|\n/g);
+
+  return lines.filter((line) => {
+    return !line.match(/@import\s/i)
+  }).join('\n');
+}
diff --git a/src/_eui_imports.scss b/src/_eui_imports.scss
@@ -0,0 +1,5 @@
+@import '../node_modules/@elastic/eui/src/global_styling/functions/index';
+@import '../node_modules/@elastic/eui/src/global_styling/variables/index';
+@import '../node_modules/@elastic/eui/src/global_styling/mixins/index';
+@import '../node_modules/@elastic/eui/src/components/tool_tip/variables';
+@import '../node_modules/@elastic/eui/src/components/tool_tip/mixins';
diff --git a/src/components/_index.scss b/src/components/_index.scss
@@ -1,6 +1,3 @@
-@import '../../node_modules/@elastic/eui/src/components/tool_tip/variables';
-@import '../../node_modules/@elastic/eui/src/components/tool_tip/mixins';
-
 @import 'container';
 @import 'annotation';
 @import 'crosshair';

diff --git a/src/style/themes/_colors_dark.scss b/src/style/themes/_colors_dark.scss
diff --git a/src/style/themes/_colors_light.scss b/src/style/themes/_colors_light.scss
diff --git a/src/theme_dark.scss b/src/theme_dark.scss
@@ -1,11 +1,6 @@
 @import '../node_modules/@elastic/eui/src/themes/eui/eui_colors_dark';
 
-// These are Chart variable overwrites used only for this theme.
-@import 'style/themes/colors_dark';
-
-@import '../node_modules/@elastic/eui/src/global_styling/functions/index';
-@import '../node_modules/@elastic/eui/src/global_styling/variables/index';
-@import '../node_modules/@elastic/eui/src/global_styling/mixins/index';
+@import 'eui_imports';
 @import '../node_modules/@elastic/eui/src/global_styling/reset/index';
 
 // Components

diff --git a/src/theme_light.scss b/src/theme_light.scss
@@ -1,11 +1,6 @@
 @import '../node_modules/@elastic/eui/src/themes/eui/eui_colors_light';
 
-// This is the default Charts theme.
-@import 'style/themes/colors_light';
-
-@import '../node_modules/@elastic/eui/src/global_styling/functions/index';
-@import '../node_modules/@elastic/eui/src/global_styling/variables/index';
-@import '../node_modules/@elastic/eui/src/global_styling/mixins/index';
+@import 'eui_imports';
 @import '../node_modules/@elastic/eui/src/global_styling/reset/index';
 
 // Components

diff --git a/src/theme_only_dark.scss b/src/theme_only_dark.scss
@@ -1,11 +1,6 @@
 @import '../node_modules/@elastic/eui/src/themes/eui/eui_colors_dark';
 
-// These are Chart variable overwrites used only for this theme.
-@import 'style/themes/colors_dark';
-
-@import '../node_modules/@elastic/eui/src/global_styling/functions/index';
-@import '../node_modules/@elastic/eui/src/global_styling/variables/index';
-@import '../node_modules/@elastic/eui/src/global_styling/mixins/index';
+@import 'eui_imports';
 
 // Components
 @import 'components/index';
diff --git a/src/theme_only_light.scss b/src/theme_only_light.scss
@@ -1,11 +1,6 @@
 @import '../node_modules/@elastic/eui/src/themes/eui/eui_colors_light';
 
-// This is the default Charts theme.
-@import 'style/themes/colors_light';
-
-@import '../node_modules/@elastic/eui/src/global_styling/functions/index';
-@import '../node_modules/@elastic/eui/src/global_styling/variables/index';
-@import '../node_modules/@elastic/eui/src/global_styling/mixins/index';
+@import 'eui_imports';
 
 // Components
 @import 'components/index';
diff --git a/wiki/consuming.md b/wiki/consuming.md
@@ -42,5 +42,5 @@ If using Elastic Charts in the same project that is already compiling EUI's Sass
 @import '~@elastic/eui/src/global_styling/variables/index';
 @import '~@elastic/eui/src/global_styling/mixins/index';
 @import '~@elastic/eui/src/global_styling/reset/index';
-@import '~@elastic/charts/src/theme_only_light';
+@import '~@elastic/charts/dist/theme';
 ```
diff --git a/yarn.lock b/yarn.lock
@@ -7968,7 +7968,7 @@ jest@^24.1.0:
     import-local "^2.0.0"
     jest-cli "^24.8.0"
 
-js-base64@^2.1.8:
+js-base64@^2.1.8, js-base64@^2.4.3:
   version "2.5.1"
   resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.5.1.tgz#1efa39ef2c5f7980bb1784ade4a8af2de3291121"
   integrity sha512-M7kLczedRMYX4L8Mdh4MzyAMM9O5osx+4FcOQuTvr3A9F2D9S5JXheN0ewNbrvK2UatkTRhL5ejGmGSjNMiZuw==
@@ -12011,6 +12011,16 @@ sass-graph@^2.2.4:
     scss-tokenizer "^0.2.3"
     yargs "^7.0.0"
 
+sass-graph@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/sass-graph/-/sass-graph-3.0.4.tgz#4fce0fe917f310adc781e74caf4962f89ef9509f"
+  integrity sha512-Dbl2+sbnAOtRgLjRK9aj6zZS+rYdrmJ7Zwu+WzF0beWgk3ZaT0JPIzNHhRox//ekhdi1W6m55ufLnHZbziMsgQ==
+  dependencies:
+    glob "^7.0.0"
+    lodash "^4.17.11"
+    scss-tokenizer "^0.3.0"
+    yargs "^12.0.2"
+
 sass-loader@^7.1.0:
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/sass-loader/-/sass-loader-7.1.0.tgz#16fd5138cb8b424bf8a759528a1972d72aad069d"
@@ -12068,6 +12078,14 @@ scss-tokenizer@^0.2.3:
     js-base64 "^2.1.8"
     source-map "^0.4.2"
 
+scss-tokenizer@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/scss-tokenizer/-/scss-tokenizer-0.3.0.tgz#ef7edc3bc438b25cd6ffacf1aa5b9ad5813bf260"
+  integrity sha512-14Zl9GcbBvOT9057ZKjpz5yPOyUWG2ojd9D5io28wHRYsOrs7U95Q+KNL87+32p8rc+LvDpbu/i9ZYjM9Q+FsQ==
+  dependencies:
+    js-base64 "^2.4.3"
+    source-map "^0.7.1"
+
 select-hose@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/select-hose/-/select-hose-2.0.0.tgz#625d8658f865af43ec962bfc376a37359a4994ca"
@@ -12522,6 +12540,11 @@ source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.0, source-map@~0.6.1:
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
   integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
 
+source-map@^0.7.1:
+  version "0.7.3"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.7.3.tgz#5302f8169031735226544092e64981f751750383"
+  integrity sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==
+
 space-separated-tokens@^1.0.0:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/space-separated-tokens/-/space-separated-tokens-1.1.4.tgz#27910835ae00d0adfcdbd0ad7e611fb9544351fa"