Emit TypeScript type definitions for variables extracted from themes

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 - Added documentation entry in `EuiPagination` for `activePage` prop. ([#1740](https://github.com/elastic/eui/pull/1740))
 - Changed `EuiButton` to use "m" as it's default `size` prop ([#1742](https://github.com/elastic/eui/pull/1742))
+- Enhanced the build process to emit TypeScript types for the variables extracted from the themes ([#1750](https://github.com/elastic/eui/pull/1750))
 
 ## [`9.4.2`](https://github.com/elastic/eui/tree/v9.4.2)
 

package.json

@@ -15,7 +15,7 @@
     "test-docker": "docker pull $npm_package_docker_image && docker run --rm -i -e GIT_COMMITTER_NAME=test -e GIT_COMMITTER_EMAIL=test --user=$(id -u):$(id -g) -e HOME=/tmp -v $(pwd):/app -w /app $npm_package_docker_image bash -c 'npm config set spin false && /opt/yarn*/bin/yarn && npm run test && npm run build'",
     "sync-docs": "node ./scripts/docs-sync.js",
     "build-docs": "webpack --config=src-docs/webpack.config.js",
-    "build": "yarn extract-i18n-strings && node ./scripts/compile-clean.js && node ./scripts/compile-eui.js && node ./scripts/compile-scss.js",
+    "build": "yarn extract-i18n-strings && node ./scripts/compile-clean.js && node ./scripts/compile-eui.js && node ./scripts/compile-scss.js $npm_package_name",
     "extract-i18n-strings": "node ./scripts/babel/fetch-i18n-strings",
     "lint": "yarn lint-es && yarn lint-ts && yarn lint-sass && yarn lint-framer",
     "lint-fix": "yarn lint-es-fix && yarn lint-ts-fix",

scripts/compile-scss.js

@@ -6,6 +6,7 @@ const globModule = require('glob');
 const chalk = require('chalk');
 const postcss = require('postcss');
 const sassExtract = require('sass-extract');
+const { deriveSassVariableTypes } = require('./derive-sass-variable-types');
 const sassExtractJsPlugin = require('./sass-extract-js-plugin');
 
 const postcssConfiguration = require('../src-docs/postcss.config.js');
@@ -18,11 +19,15 @@ const postcssConfigurationWithMinification = {
   ...postcssConfiguration,
   plugins: [
     ...postcssConfiguration.plugins,
-    require('cssnano')({ preset: 'default' })
+    require('cssnano')({ preset: 'default' }),
   ],
 };
 
-async function compileScssFiles(sourcePattern, destinationDirectory) {
+async function compileScssFiles(
+  sourcePattern,
+  destinationDirectory,
+  packageName
+) {
   try {
     await mkdir(destinationDirectory);
   } catch (err) {
@@ -42,7 +47,9 @@ async function compileScssFiles(sourcePattern, destinationDirectory) {
         const outputFilenames = await compileScssFile(
           inputFilename,
           path.join(destinationDirectory, `eui_${name}.css`),
-          path.join(destinationDirectory, `eui_${name}.json`)
+          path.join(destinationDirectory, `eui_${name}.json`),
+          path.join(destinationDirectory, `eui_${name}.json.d.ts`),
+          packageName
         );
 
         console.log(
@@ -51,14 +58,27 @@ async function compileScssFiles(sourcePattern, destinationDirectory) {
             .join(', ')}`
         );
       } catch (error) {
-        console.log(chalk`{red ✗} Failed to compile {gray ${inputFilename}} with ${error.stack}`);
+        console.log(
+          chalk`{red ✗} Failed to compile {gray ${inputFilename}} with ${
+            error.stack
+          }`
+        );
       }
     })
   );
 }
 
-async function compileScssFile(inputFilename, outputCssFilename, outputVarsFilename) {
-  const outputCssMinifiedFilename = outputCssFilename.replace(/\.css$/, '.min.css');
+async function compileScssFile(
+  inputFilename,
+  outputCssFilename,
+  outputVarsFilename,
+  outputVarTypesFilename,
+  packageName
+) {
+  const outputCssMinifiedFilename = outputCssFilename.replace(
+    /\.css$/,
+    '.min.css'
+  );
 
   const { css: renderedCss, vars: extractedVars } = await sassExtract.render(
     {
@@ -70,12 +90,23 @@ async function compileScssFile(inputFilename, outputCssFilename, outputVarsFilen
     }
   );
 
-  const { css: postprocessedCss } = await postcss(postcssConfiguration).process(renderedCss, {
-    from: outputCssFilename,
-    to: outputCssFilename,
-  });
+  const extractedVarTypes = await deriveSassVariableTypes(
+    extractedVars,
+    `${packageName}/${outputVarsFilename}`,
+    outputVarTypesFilename
+  );
+
+  const { css: postprocessedCss } = await postcss(postcssConfiguration).process(
+    renderedCss,
+    {
+      from: outputCssFilename,
+      to: outputCssFilename,
+    }
+  );
 
-  const { css: postprocessedMinifiedCss } = await postcss(postcssConfigurationWithMinification).process(renderedCss, {
+  const { css: postprocessedMinifiedCss } = await postcss(
+    postcssConfigurationWithMinification
+  ).process(renderedCss, {
     from: outputCssFilename,
     to: outputCssMinifiedFilename,
   });
@@ -84,9 +115,24 @@ async function compileScssFile(inputFilename, outputCssFilename, outputVarsFilen
     writeFile(outputCssFilename, postprocessedCss),
     writeFile(outputCssMinifiedFilename, postprocessedMinifiedCss),
     writeFile(outputVarsFilename, JSON.stringify(extractedVars, undefined, 2)),
+    writeFile(outputVarTypesFilename, extractedVarTypes),
   ]);
 
-  return [outputCssFilename, outputVarsFilename];
+  return [
+    outputCssFilename,
+    outputCssMinifiedFilename,
+    outputVarsFilename,
+    outputVarTypesFilename,
+  ];
 }
 
-compileScssFiles(path.join('src', 'theme_*.scss'), 'dist');
+if (require.main === module) {
+  const [nodeBin, scriptName, euiPackageName] = process.argv;
+
+  if (process.argv.length < 3) {
+    console.log(chalk`{bold Usage:} ${nodeBin} ${scriptName} eui-package-name`);
+    process.exit(1);
+  }
+
+  compileScssFiles(path.join('src', 'theme_*.scss'), 'dist', euiPackageName);
+}

scripts/derive-sass-variable-types.js

@@ -0,0 +1,75 @@
+const ts = require('typescript');
+const prettier = require('prettier');
+
+async function deriveSassVariableTypes(
+  extractedVars,
+  extractedVarsModuleName,
+  extractedVarTypesFilename
+) {
+  const extractedVarsModuleDeclaration = ts.createModuleDeclaration(
+    undefined,
+    [ts.createModifier(ts.SyntaxKind.DeclareKeyword)],
+    ts.createStringLiteral(extractedVarsModuleName),
+    ts.createModuleBlock([
+      ts.createVariableStatement(
+        undefined,
+        ts.createVariableDeclarationList(
+          [
+            ts.createVariableDeclaration(
+              'sassVariables',
+              deriveValueType(extractedVars)
+            ),
+          ],
+          ts.NodeFlags.Const
+        )
+      ),
+      ts.createExportAssignment(
+        undefined,
+        undefined,
+        undefined,
+        ts.createIdentifier('sassVariables')
+      ),
+    ]),
+    ts.NodeFlags.None
+  );
+
+  const moduleSource = ts
+    .createPrinter({ newLine: ts.NewLineKind.LineFeed })
+    .printNode(
+      ts.EmitHint.Unspecified,
+      extractedVarsModuleDeclaration,
+      ts.createSourceFile(extractedVarTypesFilename, '', ts.ScriptTarget.Latest)
+    );
+
+  const prettierOptions = await prettier.resolveConfig(extractedVarTypesFilename);
+  const prettifiedModuleSource = prettier.format(moduleSource, prettierOptions);
+
+  return prettifiedModuleSource;
+}
+
+function deriveValueType(extractedValue) {
+  switch (typeof extractedValue) {
+    case 'object':
+      return ts.createTypeLiteralNode(
+        Object.keys(extractedValue).map(key =>
+          ts.createPropertySignature(
+            undefined,
+            ts.createStringLiteral(key),
+            undefined,
+            deriveValueType(extractedValue[key]),
+            undefined
+          )
+        )
+      );
+    case 'string':
+      return ts.createKeywordTypeNode(ts.SyntaxKind.StringKeyword);
+    case 'number':
+      return ts.createKeywordTypeNode(ts.SyntaxKind.NumberKeyword);
+    default:
+      return ts.createKeywordTypeNode(ts.SyntaxKind.AnyKeyword);
+  }
+}
+
+module.exports = {
+  deriveSassVariableTypes,
+};