管理画面に表示されるバージョンを動的に更新したい。
postcss使ってるから、package.jsonと同時に更新してみよう！
postcssとpostcss-replaceの導入
postcssに関しては省略。
postcss-replace
https://github.com/gridonic/postcss-replace
npm install--save-dev postcss-replace
meta.cssを作る
このデータはWordPressしか読まないんですから、ファイルは隔離していいでしょう。
postcss/meta.css
/*
Theme Name: my_theme
Theme URI: https://example.com/
Author: me
Author URI: https://me.me
Description: This is my theme
Version: {{ version }}
License: GNU General Public License v3
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: my_theme
*/{{ version }}が変数になります。
postcssの設定
postcss.config.js
constpack=require('./package.json')constpackVer=pack.versionmodule.exports={plugins:[require('postcss-replace')({data:{'version':packVer}}),],};data: {'CSS内の変数名': 渡す変数}で変数を指定。
書き出し
cssnanoとかに関してはコメントを抹消してしまうため場合分けしましょう。
postcss.config.js
// 前略module.exports={plugins:[// 中略// 圧縮process.env.NODE_ENV!=="meta"&&require('cssnano')({autoprefixer:false}),],};こんな感じにして
cross-env NODE_ENV=meta postcss ./postcss/meta.css -o ./style.css
こうすればWordPressテーマのメタ情報だけがstyle.cssに書き出されます。
それ以外の部分はpurgecssとか使うでしょうから、こんな感じで別に分ければ良いでしょう。