A Webpack plugin for programmatically generating WordPress theme.json with JavaScript from tailwind.config or another configuration file.
- Use JavaScript functions to programmatically generate JSON files.
- Reduce duplicate code by using the Tailwind variables to create
theme.jsonparameters. - Writing JSON as JavaScript is efficient and allows for using variables and functions.
To begin, you'll need to install theme-json-generator.
npm install theme-json-generator --save-devThen add the plugin to your webpack config like so:
// webpack.config.js
const { ThemeJsonPlugin } = require( 'theme-json-generator' );
module.exports = {
plugins: [
new ThemeJsonPlugin({
from: './src/theme.config.js',
to: './theme.json',
}),
],
};| Option | Description | Default | Type |
|---|---|---|---|
from |
Relative path to the config JS file used to generate theme.json. |
theme.config.js |
string |
to |
Relative path to the generated JSON file. If the file does not exist it will be created at runtime. | theme.json |
string |
Note: Do not use absolute filepaths using NodeJS path module in theto or from options. These should be relative file paths based on the location of the originating script.
theme.config.js is the JavaScript file used for compiling theme.json.
This file is essentially as JavaScript version of theme.json where functions and variables are used to build out the contents of the json file.
Code Example
In the code example below, Tailwind config values are passed into the theme.config and are used to generate the theme.json options.
// theme.config.js
const {transform} = require('theme-json-generator'); // Plugin helper for transforming data.
const {theme} = require('../tailwind.config.js'); // Import Tailwind config.
module.exports = {
settings: {
layout: {
contentSize: theme.extend.screens.desktop || '',
},
typography: {
lineHeight: false,
textDecoration: false,
textTransform: false,
dropCap: false,
fontSizes: [],
fontFamilies: [],
},
color: {
palette: transform('palette', theme.extend.colors),
},
blocks: {
'core/button': {
color: {
background: true,
text: true,
gradients: [],
palette: transform('palette', theme.extend.colors),
},
},
'core/pullquote': {
border: {
radius: false,
style: false,
color: false,
width: false,
},
typography: {
fontSizes: [],
},
},
'core/buttons': {
layout: {},
typography: {
fontSizes: [],
},
},
'core/heading': {
color: {
text: true,
background: true,
palette: transform('palette', theme.extend.colors, [
'blue',
'teal',
'cyan',
'black',
]),
link: false,
},
},
},
},
styles: {
typography: {
fontFamily: theme.extend.fontFamily.sans.toString(),
fontSize: theme.extend.fontSize.base,
lineHeight: '1.5',
},
elements: {
link: {
color: {
text: theme.extend.colors.blue,
},
typography: {
textDecoration: 'none',
},
':hover': {
color: {
text: theme.extend.colors.black,
},
},
':focus': {
color: {
text: theme.extend.colors.black,
},
},
},
cite: {
typography: {
fontSize: theme.extend.fontSize['14'],
fontStyle: 'normal',
fontWeight: '800',
textTransform: 'uppercase',
},
},
},
blocks: {
'core/quote': {
typography: {
fontSize: theme.extend.fontSize['20'],
fontWeight: '400',
},
color: {
text: theme.extend.colors.text,
background: theme.extend.colors.bkg,
},
spacing: {
padding: {
top: theme.spacing[5],
right: theme.spacing[5],
bottom: theme.spacing[5],
left: theme.spacing[5],
},
margin: {
bottom: theme.spacing[5],
},
},
},
'core/heading': {
typography: {
fontWeight: '700',
},
color: {
text: theme.extend.colors.heading,
},
spacing: {
margin: {
bottom: theme.spacing[3],
},
},
},
'core/paragraph': {
typography: {
lineHeight: '1.5',
},
color: {
text: theme.extend.colors.text,
},
spacing: {
margin: {
top: '0',
bottom: theme.spacing[5],
},
},
},
},
},
};