-
-
Notifications
You must be signed in to change notification settings - Fork 35
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
47508fb
commit 455c26f
Showing
4 changed files
with
52 additions
and
19 deletions.
There are no files selected for viewing
22 changes: 5 additions & 17 deletions
22
packages/pigment-css-react/src/utils/generateThemeSource.ts
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,24 +1,12 @@ | ||
import type { Theme } from './extendTheme'; | ||
import { generateThemeTokens } from './generateCss'; | ||
|
||
export function generateThemeSource(theme: Theme | undefined) { | ||
export function generateThemeSource(theme?: Theme) { | ||
if (!theme) { | ||
return `export default {}`; | ||
} | ||
const hasBreakpoints = !!theme.unstable_args?.breakpoints; | ||
const hasTransitions = !!theme.unstable_args?.transitions; | ||
const breakpointsImport = hasBreakpoints | ||
? "import createBreakpoints from '@mui/system/createTheme/createBreakpoints';\n" | ||
: ''; | ||
const transitionsImport = hasTransitions | ||
? `import createTransitions from '${process.env.PACKAGE_NAME}/createTransitions';\n` | ||
: ''; | ||
const source = `${breakpointsImport}${transitionsImport} | ||
const theme = ${JSON.stringify(generateThemeTokens(theme))}; | ||
${hasBreakpoints ? `theme.breakpoints = createBreakpoints(${JSON.stringify(theme.unstable_args.breakpoints)});\n` : ''} | ||
${hasTransitions ? `theme.transitions = createTransitions(${JSON.stringify(theme.unstable_args.transitions)});\n` : ''} | ||
export default theme; | ||
`; | ||
|
||
return source; | ||
if (typeof theme.toRuntimeSource !== 'function') { | ||
return `export default ${JSON.stringify(generateThemeTokens(theme))};`; | ||
} | ||
return theme.toRuntimeSource.call(theme, theme); | ||
} |
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
45 changes: 45 additions & 0 deletions
45
packages/pigment-css-react/tests/useTheme/generateThemeSource.test.ts
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,45 @@ | ||
import { expect } from 'chai'; | ||
import { generateThemeSource } from '../../src/utils'; | ||
|
||
describe('Pigment CSS - generateThemeSource', () => { | ||
it('should export empty theme if theme is undefined', () => { | ||
expect(generateThemeSource()).to.equal(`export default {}`); | ||
}); | ||
|
||
it('should generate basic theme code with theme json', () => { | ||
const result = generateThemeSource({ | ||
vars: { | ||
palette: { | ||
primary: { | ||
main: 'red', | ||
secondary: 'blue', | ||
}, | ||
}, | ||
}, | ||
}); | ||
|
||
expect(result).to.equal( | ||
`export default {"vars":{"palette":{"primary":{"main":"red","secondary":"blue"}}}};`, | ||
); | ||
}); | ||
|
||
it('should generate theme from toRuntimeSource method if present', () => { | ||
const result = generateThemeSource({ | ||
vars: { | ||
palette: { | ||
primary: { | ||
main: 'red', | ||
secondary: 'blue', | ||
}, | ||
}, | ||
}, | ||
toRuntimeSource(theme: any) { | ||
return `const theme = ${JSON.stringify(theme)};export default theme;`; | ||
}, | ||
}); | ||
|
||
expect(result).to.equal( | ||
`const theme = {"vars":{"palette":{"primary":{"main":"red","secondary":"blue"}}}};export default theme;`, | ||
); | ||
}); | ||
}); |
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