Skip to content

Commit a0f0699

Browse files
mlaursenmlaursen
committed
chore(dev-utils): updated sassdoc and variables to use everything.scss
1 parent c7177e6 commit a0f0699

File tree

6 files changed

+82
-47
lines changed

6 files changed

+82
-47
lines changed

‎packages/dev-utils/src/sassdoc.ts

+23-24
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import { writeFile } from "fs-extra";
22
import { omit } from "lodash";
33
import log from "loglevel";
4-
import { renderSync } from "sass";
54
import { join } from "path";
65
import { BuiltInParserName } from "prettier";
6+
import { renderSync } from "sass";
77
import {
88
ExampleType,
99
FunctionItem,
@@ -14,17 +14,19 @@ import {
1414
VariableItem,
1515
} from "sassdoc";
1616

17-
import { nonWebpackDist, packagesRoot, src, tempStylesDir } from "./constants";
17+
import { nonWebpackDist, packagesRoot, src } from "./constants";
1818
import {
19+
combineAllFiles,
1920
CompiledExample,
2021
format,
2122
FormattedFunctionItem,
2223
FormattedItem,
2324
FormattedItemLink,
2425
FormattedMixinItem,
2526
FormattedVariableItem,
27+
getColorVariables,
2628
getCompiledValue,
27-
getPackages,
29+
getEverythingScss,
2830
getSassdoc,
2931
isFunctionItem,
3032
isMixinItem,
@@ -100,38 +102,34 @@ function getCompiledValueString(value: VariableValue): string {
100102
.substring(prefix.length);
101103
}
102104

103-
function compileExampleCode(code: string): string {
104-
const i = code.indexOf(OVERRIDE_VARIABLES_TOKEN);
105+
function compileExampleCode(code: string, path: string, name: string): string {
106+
let data = code;
105107
let prefix = "";
108+
const i = code.indexOf(OVERRIDE_VARIABLES_TOKEN);
106109
if (i !== -1) {
107-
prefix = `@import '@react-md/theme/${nonWebpackDist}/color-palette';
108-
${code.substring(0, i)}
109-
`;
110-
code = code.substring(i + OVERRIDE_VARIABLES_TOKEN.length);
110+
prefix = code.substring(0, i);
111+
data = code.substring(i + OVERRIDE_VARIABLES_TOKEN.length);
111112
}
112113

113-
const imports = getPackages("scss")
114-
.map((p) => `@import '@react-md/${p}/${nonWebpackDist}/mixins';`)
115-
.join("\n");
114+
// since everything is part of the same stylesheet to prevent the `@import` IO
115+
// slowdown, have to update variables to be `!global` so that they will be
116+
// overridden/found correctly. (mostly typography)
117+
data = `${getColorVariables()}
118+
${prefix.replace(/;$/g, " !global;")}
116119
117-
const data = `${prefix}${imports}
118-
@import '@react-md/icon/${nonWebpackDist}/material-icons';
120+
${getEverythingScss()}
119121
120-
${code}
121-
`;
122+
${data}`;
122123

123124
try {
124-
return format(
125-
renderSync({
126-
data,
127-
includePaths: [tempStylesDir],
128-
}).css.toString(),
129-
"css"
130-
);
125+
return format(renderSync({ data }).css.toString(), "css");
131126
} catch (e) {
132127
log.error("Unable to compile an example with the following code:");
133128
log.error(code);
134129
log.error();
130+
log.error(`path: ${path}`);
131+
log.error(`name: ${name}`);
132+
log.error();
135133
log.error(e.message);
136134
process.exit(1);
137135
}
@@ -235,7 +233,7 @@ function formatItem(
235233
const exampleCode = removeUncompilableCode(code);
236234
let compiled: string | undefined;
237235
if (type === "scss" && !description.includes(NO_COMPILE_TOKEN)) {
238-
compiled = compileExampleCode(exampleCode);
236+
compiled = compileExampleCode(exampleCode, path, name);
239237
}
240238

241239
return {
@@ -396,6 +394,7 @@ function getPackageRecord(
396394
}
397395

398396
export async function sassdoc(): Promise<void> {
397+
combineAllFiles();
399398
const documentationSassdoc = join(
400399
packagesRoot,
401400
"documentation",

‎packages/dev-utils/src/utils/styles/combineAllFiles.ts

+13
Original file line numberDiff line numberDiff line change
@@ -178,6 +178,19 @@ ${files.join("\n")}
178178
writeFileSync(everythingScss, formatted);
179179
}
180180

181+
let cachedColorVariables = "";
182+
183+
export function getColorVariables(): string {
184+
if (!cachedColorVariables) {
185+
cachedColorVariables = readFileSync(
186+
join(packagesRoot, "theme", "src", "_color-palette.scss"),
187+
"utf8"
188+
);
189+
}
190+
191+
return cachedColorVariables;
192+
}
193+
181194
let cachedEverythingScss = "";
182195

183196
/**

‎packages/dev-utils/src/utils/styles/variable.ts

+29-13
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
1-
import { VariableItem } from "sassdoc";
21
import log from "loglevel";
32
import { renderSync } from "sass";
4-
import { tempStylesDir, Primative, SimplePrimative } from "../../constants";
3+
import { VariableItem } from "sassdoc";
4+
5+
import { Primative, SimplePrimative } from "../../constants";
6+
import { getEverythingScss } from "./combineAllFiles";
57

68
export type VariableValue =
79
| SimplePrimative
@@ -48,8 +50,8 @@ function parseValue(value: VariableValue): VariableValue {
4850
return number;
4951
}
5052

51-
// remove additional quotes around strings
52-
if (/^('|").+\1$/.test(value)) {
53+
// remove additional quotes around strings and remove parens around font-family
54+
if (/^('|").+\1$/.test(value) || /^\(.+\)$/.test(value)) {
5355
value = value.substring(1, value.length - 1);
5456
}
5557

@@ -170,7 +172,6 @@ export function getCompiledValue(
170172
index?: number
171173
): ValuedVariable {
172174
const {
173-
file: { path },
174175
context: { name, value: originalValue },
175176
type,
176177
} = variable;
@@ -183,19 +184,34 @@ export function getCompiledValue(
183184
process.exit(1);
184185
}
185186

186-
const output = renderSync({
187-
data: `@use 'sass:meta';
188-
@use 'sass:math';
187+
// this causes the `meta.inspect` to fail since it thinks there are two arguments.
188+
if (originalValue === "Roboto, sans-serif") {
189+
return { name, value: originalValue };
190+
}
189191

190-
@import '${path}';
192+
const data = `@use 'sass:meta';
193+
${getEverythingScss()}
191194
192195
.output {
193196
--value: #{meta.inspect(${originalValue})};
194197
}
195-
`,
196-
outputStyle: "expanded",
197-
includePaths: [tempStylesDir],
198-
}).css.toString();
198+
`;
199+
200+
let output = "";
201+
try {
202+
output = renderSync({
203+
data,
204+
outputStyle: "expanded",
205+
}).css.toString();
206+
} catch (e) {
207+
log.error(`name: ${name}`);
208+
log.error(`value: ${originalValue}`);
209+
log.error("");
210+
211+
log.error(e.message);
212+
process.exit(1);
213+
}
214+
199215
// since the `rmd-option-selected-content` is unicode, an `@charset` value
200216
// might also be rendered in the output
201217
const compiledValue = output

‎packages/dev-utils/src/variables.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
1-
import { copyStylesTemp, createScssVariables } from "./utils";
1+
import { combineAllFiles, copyStylesTemp, createScssVariables } from "./utils";
22

33
export async function variables(): Promise<void> {
4+
combineAllFiles();
45
await copyStylesTemp();
56
await createScssVariables();
67
}

‎packages/sheet/src/scssVariables.ts

+14-8
Original file line numberDiff line numberDiff line change
@@ -9,16 +9,20 @@ export default {
99
"rmd-sheet-overlay-z-index": 30,
1010
"rmd-sheet-elevation": 2,
1111
"rmd-sheet-raised-elevation": 16,
12-
"rmd-sheet-light-background-color": "rmd-dialog-theme-var(background-color)",
12+
"rmd-sheet-light-background-color":
13+
"var(--rmd-dialog-background-color, var(--rmd-theme-surface, #fff))",
1314
"rmd-sheet-dark-elevation-background-color": "#242424",
14-
"rmd-sheet-dark-background-color": "rmd-dialog-theme-var(background-color)",
15-
"rmd-sheet-background-color": "rmd-dialog-theme-var(background-color)",
15+
"rmd-sheet-dark-background-color":
16+
"var(--rmd-dialog-background-color, var(--rmd-theme-surface, #fff))",
17+
"rmd-sheet-background-color":
18+
"var(--rmd-dialog-background-color, var(--rmd-theme-surface, #fff))",
1619
"rmd-sheet-raised-light-background-color":
17-
"rmd-dialog-theme-var(background-color)",
20+
"var(--rmd-dialog-background-color, var(--rmd-theme-surface, #fff))",
1821
"rmd-sheet-raised-dark-elevation-background-color": "#353535",
1922
"rmd-sheet-raised-dark-background-color":
20-
"rmd-dialog-theme-var(background-color)",
21-
"rmd-sheet-raised-background-color": "rmd-dialog-theme-var(background-color)",
23+
"var(--rmd-dialog-background-color, var(--rmd-theme-surface, #fff))",
24+
"rmd-sheet-raised-background-color":
25+
"var(--rmd-dialog-background-color, var(--rmd-theme-surface, #fff))",
2226
"rmd-sheet-enter-duration": "0.2s",
2327
"rmd-sheet-leave-duration": "0.15s",
2428
"rmd-sheet-touch-margin": "3.5rem",
@@ -31,8 +35,10 @@ export default {
3135
"rmd-sheet-positions": ["top", "right", "bottom", "left"],
3236
"rmd-sheet-enabled-positions": ["top", "right", "bottom", "left"],
3337
"rmd-sheet-theme-values": {
34-
"background-color": "rmd-dialog-theme-var(background-color)",
35-
"raised-background-color": "rmd-dialog-theme-var(background-color)",
38+
"background-color":
39+
"var(--rmd-dialog-background-color, var(--rmd-theme-surface, #fff))",
40+
"raised-background-color":
41+
"var(--rmd-dialog-background-color, var(--rmd-theme-surface, #fff))",
3642
"touch-width": "calc(100vw - 3.5rem)",
3743
"static-width": "16rem",
3844
"touchable-max-height": "calc(100% - 3.5rem)",

‎packages/typography/src/_variables.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,7 @@
8383

8484
/// The font family to use throughout the entire application.
8585
/// @type String
86-
$rmd-typography-font-family: 'Roboto, sans-serif' !default;
86+
$rmd-typography-font-family: Roboto, sans-serif !default;
8787

8888
/// The max length a line of text can be on mobile devices.
8989
/// @type Number

0 commit comments

Comments
 (0)