diff --git a/tailwind.config.js b/tailwind.config.js index 03ef7bc29..f7ff6a5c3 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,6 +1,6 @@ const { createGlobPatternsForDependencies } = require("@nrwl/react/tailwind"); const { join } = require("path"); -const extend = require("dist/design-system/tokens/js/theme"); +const extend = require("./dist/design-system/tokens/js/theme"); /** @type {import('tailwindcss').Config} */ module.exports = { diff --git a/tools/executors/typescript/utilities/design-token-parsers/parsers/to-tailwind/to-tailwind.parser.ts b/tools/executors/typescript/utilities/design-token-parsers/parsers/to-tailwind/to-tailwind.parser.ts index 47270a12f..725cea150 100644 --- a/tools/executors/typescript/utilities/design-token-parsers/parsers/to-tailwind/to-tailwind.parser.ts +++ b/tools/executors/typescript/utilities/design-token-parsers/parsers/to-tailwind/to-tailwind.parser.ts @@ -1,23 +1,27 @@ import { ConsoleLogger } from "@open-system/core-typescript-utilities"; -import deepmerge from 'deepmerge'; -import * as _ from 'lodash'; -import os from 'os'; -import prettier from 'prettier'; -import { IToken, PartialRecord, TokensType } from '../../types'; -import { LibsType } from '../global-libs'; -import { ColorsFormat, FormatName, TailwindTokenClass, TailwindType } from './to-tailwind.type'; -import * as TokensClass from './tokens'; +import deepmerge from "deepmerge"; +import * as _ from "lodash"; +import os from "os"; +import { IToken, PartialRecord, TokensType } from "../../types"; +import { LibsType } from "../global-libs"; +import { + ColorsFormat, + FormatName, + TailwindTokenClass, + TailwindType, +} from "./to-tailwind.type"; +import * as TokensClass from "./tokens"; export type OutputDataType = string; export type InputDataType = Array< - Pick & Record + Pick & Record >; export type FormatTokenType = Partial<{ colorFormat: { format: ColorsFormat; }; fontSizeFormat: { - unit: 'px' | 'rem'; + unit: "px" | "rem"; }; }>; export type OptionsType = @@ -25,9 +29,9 @@ export type OptionsType = formatName: FormatName; formatTokens: FormatTokenType; formatConfig: Partial<{ - module: 'es6' | 'commonjs'; + module: "es6" | "commonjs"; objectName: string; - endOfLine: 'auto' | 'lf' | 'crlf' | 'cr'; + endOfLine: "auto" | "lf" | "crlf" | "cr"; tabWidth: number; useTabs: boolean; singleQuote: boolean; @@ -53,18 +57,20 @@ class ToTailwind { styles: Partial> = {}; constructor(tokens: InputDataType, options: OptionsType) { this.options = options; - this.objectName = options?.formatConfig?.objectName ?? 'theme'; + this.objectName = options?.formatConfig?.objectName ?? "theme"; this.exportDefault = options?.formatConfig?.exportDefault ?? true; - this.module = options?.formatConfig?.module ?? 'es6'; + this.module = options?.formatConfig?.module ?? "es6"; this.tokens = tokens; - this.tokensGroupedByType = _.groupBy(tokens, 'type'); + this.tokensGroupedByType = _.groupBy(tokens, "type"); this.styles = {}; } exec() { - const tokenTypes = Object.keys(this.tokensGroupedByType) as Array; + const tokenTypes = Object.keys( + this.tokensGroupedByType + ) as Array; this.styles = tokenTypes.reduce( (acc, tokenType) => ({ ...acc, ...this.setGlobal(tokenType) }), - {}, + {} ); return this.finalize(JSON.stringify(this.styles)); } @@ -73,45 +79,44 @@ class ToTailwind { const TokenHandler = getClassByType(tokenType); if (!TokenHandler) return {}; - const tokenByType = this.tokensGroupedByType[tokenType].reduce((acc, token) => { - const instance = new TokenHandler(token); - const tailwindTokens = instance.generate(this.options, this.tokens); - return deepmerge(acc, tailwindTokens); - }, {}); + const tokenByType = this.tokensGroupedByType[tokenType].reduce( + (acc, token) => { + const instance = new TokenHandler(token); + const tailwindTokens = instance.generate(this.options, this.tokens); + return deepmerge(acc, tailwindTokens); + }, + {} + ); - return TokenHandler.afterGenerate ? TokenHandler.afterGenerate(tokenByType) : tokenByType; + return TokenHandler.afterGenerate + ? TokenHandler.afterGenerate(tokenByType) + : tokenByType; } finalize(result: string) { - return prettier.format( - (() => { - if (this.module === 'es6' && this.exportDefault) - return `const ${this.objectName} = ${result} ${`;${os.EOL + os.EOL}export default ${ - this.objectName - };`}`; - else if (this.module === 'es6' && !this.exportDefault) - return `export const ${this.objectName} = ${result};`; - else if (this.module === 'commonjs' && this.exportDefault) - return `const ${this.objectName} = ${result}; ${`${os.EOL + os.EOL}module.exports = ${ - this.objectName - };`}`; - else - return `const ${this.objectName} = ${result}; ${`${os.EOL + os.EOL}module.exports = {${ - this.objectName - }};`}`; - })(), - { - ...this.options?.formatConfig, - parser: 'babel', - }, - ); + return (() => { + if (this.module === "es6" && this.exportDefault) + return `const ${this.objectName} = ${result} ${`;${ + os.EOL + os.EOL + }export default ${this.objectName};`}`; + else if (this.module === "es6" && !this.exportDefault) + return `export const ${this.objectName} = ${result};`; + else if (this.module === "commonjs" && this.exportDefault) + return `const ${this.objectName} = ${result}; ${`${ + os.EOL + os.EOL + }module.exports = ${this.objectName};`}`; + else + return `const ${this.objectName} = ${result}; ${`${ + os.EOL + os.EOL + }module.exports = {${this.objectName}};`}`; + })(); } } export default async function ( tokens: InputDataType, options: OptionsType, - { _ }: Pick, + { _ }: Pick ): Promise { try { const parserInstance = new ToTailwind(tokens, options);