Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Rename brand colors from SCSS variables to custom color function
const { writeFileSync, readFileSync, readdirSync, statSync } = require('fs');
const { join } = require('path');
function isExt(filepath, ext) {
return filepath.endsWith(ext);
function walkDir(dir, ext, callback) {
readdirSync(dir).forEach( f => {
let dirPath = join(dir, f);
let isDirectory = statSync(dirPath).isDirectory();
isDirectory ?
walkDir(dirPath, ext, callback) :
isExt(join(dir, f), ext) ?
callback(join(dir, f)) : '';
const colors =
'primary-blue': 'color(primary-blue)',
'very-dark-grey': 'color(very-dark-grey)',
'light-base': 'color(light-base)',
'black': 'color(black)',
'bg-grey': 'color(bg-grey)',
'main-yellow': 'color(main-yellow)',
'light-blue': 'color(light-blue)',
'standard-grey': 'color(standard-grey)',
'light-grey': 'color(light-grey)',
'lighter-grey': 'color(lighter-grey)',
'error-red': 'color(error-red)',
'green': 'color(green)',
'warning-orange': 'color(warning-orange)',
'medium-blue': 'color(medium-blue)',
'error-red-bg': 'color(error-red-bg)',
'success-green': 'color(success-green)',
'success-green-bg': 'color(success-green-bg)',
'warning-orange-bg': 'color(warning-orange-bg)',
'info-blue-bg': 'color(info-blue-bg)',
walkDir('libs', 'scss', (filepath) => {
try {
let data = readFileSync(filepath, 'utf8');
console.log(`Replacing vars in ${filepath}`)
for (let c in colors) {
data = data.replace(new RegExp('\\$' + c + '\;', 'gm'), colors[c]+';')
writeFileSync(filepath, data, 'utf8');
} catch (e) {
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment