-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Split up build into build and generate
- Loading branch information
Showing
8 changed files
with
263 additions
and
185 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,128 +1,13 @@ | ||
| import Tool from '../tools/tool'; | ||
| import BuildConfig, { SchemeConfig } from './config'; | ||
| import fs from 'fs'; | ||
| import path from 'path'; | ||
| import { requireFile } from '../utils'; | ||
|
|
||
| export default class BuildCommand { | ||
| private tool: Tool; | ||
| private config: BuildConfig; | ||
| private name: string; | ||
|
|
||
| constructor(tool: Tool, config: BuildConfig) { | ||
| constructor(tool: Tool) { | ||
| this.tool = tool; | ||
| this.config = config; | ||
|
|
||
| this.name = this.getThemeName(); | ||
| } | ||
|
|
||
| private getThemeName() { | ||
| const data = requireFile('package.json'); | ||
| return data.theemo?.name ?? data.name; | ||
| } | ||
|
|
||
| execute() { | ||
| this.tool.build(); | ||
|
|
||
| this.postProcess(); | ||
| } | ||
|
|
||
| private postProcess() { | ||
| if (!this.config.enabled) { | ||
| return; | ||
| } | ||
|
|
||
| const contents = [this.prepareBaseBlock(), ...this.prepareColorSchemes()]; | ||
|
|
||
| if (!fs.existsSync(this.config.output)) { | ||
| fs.mkdirSync(this.config.output); | ||
| } | ||
|
|
||
| const outFile = path.join(this.config.output, `${this.name}.css`); | ||
| fs.writeFileSync(outFile, contents.join('\n')); | ||
|
|
||
| // update package.json with color schemes | ||
| if (this.config.colorSchemes) { | ||
| const packageJson = requireFile('package.json'); | ||
| if (!packageJson.theemo) { | ||
| packageJson.theemo = { | ||
| name: packageJson.name | ||
| }; | ||
| } | ||
| packageJson.theemo.colorSchemes = Object.keys(this.config.colorSchemes); | ||
|
|
||
| const data = JSON.stringify(packageJson, null, ' '); | ||
| const packageFile = path.join(process.cwd(), 'package.json'); | ||
| fs.writeFileSync(packageFile, data); | ||
| } | ||
| } | ||
|
|
||
| private prepareBaseBlock() { | ||
| const basePath = path.join( | ||
| this.config.input, | ||
| this.config.base ?? 'base.css' | ||
| ); | ||
|
|
||
| const baseBlock = this.getBlockFromFile(basePath); | ||
|
|
||
| const selector = `${this.config.activation === 'auto' ? ':root, ' : ''}.${ | ||
| this.name | ||
| }`; | ||
|
|
||
| return `${selector} ${baseBlock}`; | ||
| } | ||
|
|
||
| private prepareColorSchemes() { | ||
| if (!this.config.colorSchemes) { | ||
| return ''; | ||
| } | ||
|
|
||
| const contents = []; | ||
|
|
||
| for (const [scheme, config] of Object.entries(this.config.colorSchemes)) { | ||
| contents.push( | ||
| `/* Color Scheme: ${scheme} */\n${this.prepareColorScheme( | ||
| scheme, | ||
| config as SchemeConfig | ||
| )}` | ||
| ); | ||
| } | ||
|
|
||
| return contents; | ||
| } | ||
|
|
||
| private prepareColorScheme(name: string, config: SchemeConfig) { | ||
| const filePath = path.join(this.config.input, config.file ?? `${name}.css`); | ||
| const block = this.getBlockFromFile(filePath); | ||
| const contents = []; | ||
|
|
||
| // queries | ||
| if (config.activation === 'auto') { | ||
| const queries = []; | ||
|
|
||
| if (name === 'light' || name === 'dark') { | ||
| queries.push(`(prefers-color-scheme: ${name})`); | ||
| } | ||
|
|
||
| if (name === this.config.defaultColorScheme) { | ||
| queries.push('(prefers-color-scheme: none)'); | ||
| } | ||
|
|
||
| if (queries.length > 0) { | ||
| contents.push(`@media ${queries.join(', ')} {\n:root ${block}}`); | ||
| } | ||
| } | ||
|
|
||
| // manual activiate | ||
| if (config.manual) { | ||
| contents.push(`.${this.name}-${name} ${block}`); | ||
| } | ||
|
|
||
| return contents.join('\n\n'); | ||
| } | ||
|
|
||
| private getBlockFromFile(file: string) { | ||
| const contents = fs.readFileSync(file, 'utf-8'); | ||
| return contents.replace(':root ', ''); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,42 +1,7 @@ | ||
| import SyncConfig from './sync/config'; | ||
| import BuildConfig from './build/config'; | ||
| import GenerateConfig from './generate/config'; | ||
|
|
||
| export default interface TheemoConfig { | ||
| sync: SyncConfig; | ||
| build: BuildConfig; | ||
| generate?: GenerateConfig; | ||
| } | ||
|
|
||
| // export const DEFAULT_SYNC_CONFIG = { | ||
| // referencer: undefined, | ||
| // normalizeToken(token: Token): Token { | ||
| // const normalizedToken = { ...token }; | ||
|
|
||
| // normalizedToken.name.replace(/\s/, ''); | ||
| // if (normalizedToken.reference) { | ||
| // normalizedToken.reference.replace(/\s/, ''); | ||
| // } | ||
|
|
||
| // return normalizedToken; | ||
| // }, | ||
|
|
||
| // tool: Tool.StyleDictionary, | ||
| // rootDir: 'properties' | ||
| // }; | ||
|
|
||
| // /** | ||
| // * From https://medium.com/terria/typescript-transforming-optional-properties-to-required-properties-that-may-be-undefined-7482cb4e1585 | ||
| // */ | ||
| // type Complete<T> = { | ||
| // [P in keyof Required<T>]: Pick<T, P> extends Required<Pick<T, P>> | ||
| // ? T[P] | ||
| // : T[P] | undefined; | ||
| // }; | ||
|
|
||
| // export type FigmaConfig = Complete<FigmaUserConfig>; | ||
|
|
||
| // export function getConfig(config: FigmaUserConfig): FigmaConfig { | ||
| // return { | ||
| // ...config, | ||
| // ...DEFAULT_CONFIG | ||
| // }; | ||
| // } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,116 @@ | ||
| import GenerateConfig, { SchemeConfig } from './config'; | ||
| import fs from 'fs'; | ||
| import path from 'path'; | ||
| import { requireFile } from '../utils'; | ||
|
|
||
| export default class GenerateCommand { | ||
| private config: GenerateConfig; | ||
| private name: string; | ||
|
|
||
| constructor(config: GenerateConfig) { | ||
| this.config = config; | ||
|
|
||
| this.name = this.getThemeName(); | ||
| } | ||
|
|
||
| private getThemeName() { | ||
| const data = requireFile('package.json'); | ||
| return data.theemo?.name ?? data.name; | ||
| } | ||
|
|
||
| execute() { | ||
| const contents = [this.prepareBaseBlock(), ...this.prepareColorSchemes()]; | ||
|
|
||
| const output = this.config.output ?? 'dist'; | ||
|
|
||
| if (!fs.existsSync(output)) { | ||
| fs.mkdirSync(output); | ||
| } | ||
|
|
||
| const outFile = path.join(output, `${this.name}.css`); | ||
| fs.writeFileSync(outFile, contents.join('\n')); | ||
|
|
||
| // update package.json with color schemes | ||
| if (this.config.colorSchemes) { | ||
| const packageJson = requireFile('package.json'); | ||
| if (!packageJson.theemo) { | ||
| packageJson.theemo = { | ||
| name: packageJson.name | ||
| }; | ||
| } | ||
| packageJson.theemo.colorSchemes = Object.keys(this.config.colorSchemes); | ||
| packageJson.theemo.file = outFile; | ||
|
|
||
| const data = JSON.stringify(packageJson, null, ' '); | ||
| const packageFile = path.join(process.cwd(), 'package.json'); | ||
| fs.writeFileSync(packageFile, data); | ||
| } | ||
| } | ||
|
|
||
| private prepareBaseBlock() { | ||
| const basePath = path.join( | ||
| this.config.input, | ||
| this.config.base ?? 'base.css' | ||
| ); | ||
|
|
||
| const baseBlock = this.getBlockFromFile(basePath); | ||
|
|
||
| const selector = `${this.config.auto ? ':root, ' : ''}.${this.name}`; | ||
|
|
||
| return `${selector} ${baseBlock}`; | ||
| } | ||
|
|
||
| private prepareColorSchemes() { | ||
| if (!this.config.colorSchemes) { | ||
| return ''; | ||
| } | ||
|
|
||
| const contents = []; | ||
|
|
||
| for (const [scheme, config] of Object.entries(this.config.colorSchemes)) { | ||
| contents.push( | ||
| `/* Color Scheme: ${scheme} */\n${this.prepareColorScheme( | ||
| scheme, | ||
| config as SchemeConfig | ||
| )}` | ||
| ); | ||
| } | ||
|
|
||
| return contents; | ||
| } | ||
|
|
||
| private prepareColorScheme(name: string, config: SchemeConfig) { | ||
| const filePath = path.join(this.config.input, config.file ?? `${name}.css`); | ||
| const block = this.getBlockFromFile(filePath); | ||
| const contents = []; | ||
|
|
||
| // queries | ||
| if (config.auto) { | ||
| const queries = []; | ||
|
|
||
| if (name === 'light' || name === 'dark') { | ||
| queries.push(`(prefers-color-scheme: ${name})`); | ||
| } | ||
|
|
||
| if (name === this.config.defaultColorScheme) { | ||
| queries.push('(prefers-color-scheme: none)'); | ||
| } | ||
|
|
||
| if (queries.length > 0) { | ||
| contents.push(`@media ${queries.join(', ')} {\n:root ${block}}`); | ||
| } | ||
| } | ||
|
|
||
| // manual activiate | ||
| if (config.manual || !config.auto) { | ||
| contents.push(`.${this.name}-${name} ${block}`); | ||
| } | ||
|
|
||
| return contents.join('\n\n'); | ||
| } | ||
|
|
||
| private getBlockFromFile(file: string) { | ||
| const contents = fs.readFileSync(file, 'utf-8'); | ||
| return contents.replace(':root ', ''); | ||
| } | ||
| } |
Oops, something went wrong.