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.json
parameters. - 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-dev
Then 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],
},
},
},
},
},
};