chore(dev-utils): updated sassdoc and variables to use everything.scss

mlaursen · Aug 13, 2021 · a0f0699 · a0f0699
1 parent c7177e6
commit a0f0699
Show file tree

Hide file tree

Showing 6 changed files with 82 additions and 47 deletions.
diff --git a/packages/dev-utils/src/sassdoc.ts b/packages/dev-utils/src/sassdoc.ts
@@ -1,9 +1,9 @@
 import { writeFile } from "fs-extra";
 import { omit } from "lodash";
 import log from "loglevel";
-import { renderSync } from "sass";
 import { join } from "path";
 import { BuiltInParserName } from "prettier";
+import { renderSync } from "sass";
 import {
   ExampleType,
   FunctionItem,
@@ -14,17 +14,19 @@ import {
   VariableItem,
 } from "sassdoc";
 
-import { nonWebpackDist, packagesRoot, src, tempStylesDir } from "./constants";
+import { nonWebpackDist, packagesRoot, src } from "./constants";
 import {
+  combineAllFiles,
   CompiledExample,
   format,
   FormattedFunctionItem,
   FormattedItem,
   FormattedItemLink,
   FormattedMixinItem,
   FormattedVariableItem,
+  getColorVariables,
   getCompiledValue,
-  getPackages,
+  getEverythingScss,
   getSassdoc,
   isFunctionItem,
   isMixinItem,
@@ -100,38 +102,34 @@ function getCompiledValueString(value: VariableValue): string {
     .substring(prefix.length);
 }
 
-function compileExampleCode(code: string): string {
-  const i = code.indexOf(OVERRIDE_VARIABLES_TOKEN);
+function compileExampleCode(code: string, path: string, name: string): string {
+  let data = code;
   let prefix = "";
+  const i = code.indexOf(OVERRIDE_VARIABLES_TOKEN);
   if (i !== -1) {
-    prefix = `@import '@react-md/theme/${nonWebpackDist}/color-palette';
-${code.substring(0, i)}
-`;
-    code = code.substring(i + OVERRIDE_VARIABLES_TOKEN.length);
+    prefix = code.substring(0, i);
+    data = code.substring(i + OVERRIDE_VARIABLES_TOKEN.length);
   }
 
-  const imports = getPackages("scss")
-    .map((p) => `@import '@react-md/${p}/${nonWebpackDist}/mixins';`)
-    .join("\n");
+  // since everything is part of the same stylesheet to prevent the `@import` IO
+  // slowdown, have to update variables to be `!global` so that they will be
+  // overridden/found correctly. (mostly typography)
+  data = `${getColorVariables()}
+${prefix.replace(/;$/g, " !global;")}
 
-  const data = `${prefix}${imports}
-@import '@react-md/icon/${nonWebpackDist}/material-icons';
+${getEverythingScss()}
 
-${code}
-`;
+${data}`;
 
   try {
-    return format(
-      renderSync({
-        data,
-        includePaths: [tempStylesDir],
-      }).css.toString(),
-      "css"
-    );
+    return format(renderSync({ data }).css.toString(), "css");
   } catch (e) {
     log.error("Unable to compile an example with the following code:");
     log.error(code);
     log.error();
+    log.error(`path: ${path}`);
+    log.error(`name: ${name}`);
+    log.error();
     log.error(e.message);
     process.exit(1);
   }
@@ -235,7 +233,7 @@ function formatItem(
       const exampleCode = removeUncompilableCode(code);
       let compiled: string | undefined;
       if (type === "scss" && !description.includes(NO_COMPILE_TOKEN)) {
-        compiled = compileExampleCode(exampleCode);
+        compiled = compileExampleCode(exampleCode, path, name);
       }
 
       return {
@@ -396,6 +394,7 @@ function getPackageRecord(
 }
 
 export async function sassdoc(): Promise<void> {
+  combineAllFiles();
   const documentationSassdoc = join(
     packagesRoot,
     "documentation",

diff --git a/packages/dev-utils/src/utils/styles/combineAllFiles.ts b/packages/dev-utils/src/utils/styles/combineAllFiles.ts
@@ -178,6 +178,19 @@ ${files.join("\n")}
   writeFileSync(everythingScss, formatted);
 }
 
+let cachedColorVariables = "";
+
+export function getColorVariables(): string {
+  if (!cachedColorVariables) {
+    cachedColorVariables = readFileSync(
+      join(packagesRoot, "theme", "src", "_color-palette.scss"),
+      "utf8"
+    );
+  }
+
+  return cachedColorVariables;
+}
+
 let cachedEverythingScss = "";
 
 /**

diff --git a/packages/dev-utils/src/utils/styles/variable.ts b/packages/dev-utils/src/utils/styles/variable.ts
@@ -1,7 +1,9 @@
-import { VariableItem } from "sassdoc";
 import log from "loglevel";
 import { renderSync } from "sass";
-import { tempStylesDir, Primative, SimplePrimative } from "../../constants";
+import { VariableItem } from "sassdoc";
+
+import { Primative, SimplePrimative } from "../../constants";
+import { getEverythingScss } from "./combineAllFiles";
 
 export type VariableValue =
   | SimplePrimative
@@ -48,8 +50,8 @@ function parseValue(value: VariableValue): VariableValue {
     return number;
   }
 
-  // remove additional quotes around strings
-  if (/^('|").+\1$/.test(value)) {
+  // remove additional quotes around strings and remove parens around font-family
+  if (/^('|").+\1$/.test(value) || /^\(.+\)$/.test(value)) {
     value = value.substring(1, value.length - 1);
   }
 
@@ -170,7 +172,6 @@ export function getCompiledValue(
   index?: number
 ): ValuedVariable {
   const {
-    file: { path },
     context: { name, value: originalValue },
     type,
   } = variable;
@@ -183,19 +184,34 @@ export function getCompiledValue(
     process.exit(1);
   }
 
-  const output = renderSync({
-    data: `@use 'sass:meta';
-@use 'sass:math';
+  // this causes the `meta.inspect` to fail since it thinks there are two arguments.
+  if (originalValue === "Roboto, sans-serif") {
+    return { name, value: originalValue };
+  }
 
-@import '${path}';
+  const data = `@use 'sass:meta';
+${getEverythingScss()}
 
 .output {
   --value: #{meta.inspect(${originalValue})};
 }
-`,
-    outputStyle: "expanded",
-    includePaths: [tempStylesDir],
-  }).css.toString();
+`;
+
+  let output = "";
+  try {
+    output = renderSync({
+      data,
+      outputStyle: "expanded",
+    }).css.toString();
+  } catch (e) {
+    log.error(`name: ${name}`);
+    log.error(`value: ${originalValue}`);
+    log.error("");
+
+    log.error(e.message);
+    process.exit(1);
+  }
+
   // since the `rmd-option-selected-content` is unicode, an `@charset` value
   // might also be rendered in the output
   const compiledValue = output

diff --git a/packages/dev-utils/src/variables.ts b/packages/dev-utils/src/variables.ts
@@ -1,6 +1,7 @@
-import { copyStylesTemp, createScssVariables } from "./utils";
+import { combineAllFiles, copyStylesTemp, createScssVariables } from "./utils";
 
 export async function variables(): Promise<void> {
+  combineAllFiles();
   await copyStylesTemp();
   await createScssVariables();
 }
diff --git a/packages/sheet/src/scssVariables.ts b/packages/sheet/src/scssVariables.ts
@@ -9,16 +9,20 @@ export default {
   "rmd-sheet-overlay-z-index": 30,
   "rmd-sheet-elevation": 2,
   "rmd-sheet-raised-elevation": 16,
-  "rmd-sheet-light-background-color": "rmd-dialog-theme-var(background-color)",
+  "rmd-sheet-light-background-color":
+    "var(--rmd-dialog-background-color, var(--rmd-theme-surface, #fff))",
   "rmd-sheet-dark-elevation-background-color": "#242424",
-  "rmd-sheet-dark-background-color": "rmd-dialog-theme-var(background-color)",
-  "rmd-sheet-background-color": "rmd-dialog-theme-var(background-color)",
+  "rmd-sheet-dark-background-color":
+    "var(--rmd-dialog-background-color, var(--rmd-theme-surface, #fff))",
+  "rmd-sheet-background-color":
+    "var(--rmd-dialog-background-color, var(--rmd-theme-surface, #fff))",
   "rmd-sheet-raised-light-background-color":
-    "rmd-dialog-theme-var(background-color)",
+    "var(--rmd-dialog-background-color, var(--rmd-theme-surface, #fff))",
   "rmd-sheet-raised-dark-elevation-background-color": "#353535",
   "rmd-sheet-raised-dark-background-color":
-    "rmd-dialog-theme-var(background-color)",
-  "rmd-sheet-raised-background-color": "rmd-dialog-theme-var(background-color)",
+    "var(--rmd-dialog-background-color, var(--rmd-theme-surface, #fff))",
+  "rmd-sheet-raised-background-color":
+    "var(--rmd-dialog-background-color, var(--rmd-theme-surface, #fff))",
   "rmd-sheet-enter-duration": "0.2s",
   "rmd-sheet-leave-duration": "0.15s",
   "rmd-sheet-touch-margin": "3.5rem",
@@ -31,8 +35,10 @@ export default {
   "rmd-sheet-positions": ["top", "right", "bottom", "left"],
   "rmd-sheet-enabled-positions": ["top", "right", "bottom", "left"],
   "rmd-sheet-theme-values": {
-    "background-color": "rmd-dialog-theme-var(background-color)",
-    "raised-background-color": "rmd-dialog-theme-var(background-color)",
+    "background-color":
+      "var(--rmd-dialog-background-color, var(--rmd-theme-surface, #fff))",
+    "raised-background-color":
+      "var(--rmd-dialog-background-color, var(--rmd-theme-surface, #fff))",
     "touch-width": "calc(100vw - 3.5rem)",
     "static-width": "16rem",
     "touchable-max-height": "calc(100% - 3.5rem)",

diff --git a/packages/typography/src/_variables.scss b/packages/typography/src/_variables.scss
@@ -83,7 +83,7 @@
 
 /// The font family to use throughout the entire application.
 /// @type String
-$rmd-typography-font-family: 'Roboto, sans-serif' !default;
+$rmd-typography-font-family: Roboto, sans-serif !default;
 
 /// The max length a line of text can be on mobile devices.
 /// @type Number