Ark/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma synced 2026-03-15 02:04:29 -07:00
Code Issues Packages Projects Releases Wiki Activity

Init v1

Browse Source
This commit is contained in:
Jeremy Thomas
2024-03-21 16:11:54 +00:00
parent 16f1b76881
commit 69877a652c
3261 changed files with 255369 additions and 108913 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
docs/_scripts/.gitignore vendored
View File

@@ -1,5 +0,0 @@
# Folders
/build
/output
/variables

13
docs/_scripts/01-initial.js
View File

@@ -1,13 +0,0 @@
const Metalsmith = require('metalsmith');
const filter = require('metalsmith-filter');
const regex_initial = '**/initial-variables.sass';
const initial_plugin = require('./plugins/01-read-initial-variables');
Metalsmith(__dirname)
.source('../../sass')
.use(filter(regex_initial))
.use(initial_plugin())
.build(function(err) {
if (err) throw err;
});

13
docs/_scripts/02-derived.js
View File

@@ -1,13 +0,0 @@
const Metalsmith = require('metalsmith');
const filter = require('metalsmith-filter');
const regex_derived = '**/derived-variables.sass';
const derived_plugin = require('./plugins/02-read-derived-variables');
Metalsmith(__dirname)
.source('../../sass')
.use(filter(regex_derived))
.use(derived_plugin())
.build(function(err) {
if (err) throw err;
});

13
docs/_scripts/03-other.js
View File

@@ -1,13 +0,0 @@
const Metalsmith = require('metalsmith');
const filter = require('metalsmith-filter');
const regex_sass = '**/*.sass';
const other_plugin = require('./plugins/03-read-other-variables');
Metalsmith(__dirname)
.source('../../sass')
.use(filter(regex_sass))
.use(other_plugin())
.build(function(err) {
if (err) throw err;
});

146
docs/_scripts/parse-vars.js Normal file
View File

@@ -0,0 +1,146 @@
const fs = require("fs");
const splitLines = (t) => {
return t.split(/\r\n|\r|\n/);
};
const FILES = [
"base/animations.scss",
"base/generic.scss",
"base/minireset.scss",
"base/skeleton.scss",
"components/breadcrumb.scss",
"components/card.scss",
"components/dropdown.scss",
"components/menu.scss",
"components/message.scss",
"components/modal.scss",
"components/navbar.scss",
"components/pagination.scss",
"components/panel.scss",
"components/tabs.scss",
"elements/block.scss",
"elements/box.scss",
"elements/button.scss",
"elements/content.scss",
"elements/delete.scss",
"elements/icon.scss",
"elements/image.scss",
"elements/loader.scss",
"elements/notification.scss",
"elements/progress.scss",
"elements/table.scss",
"elements/tag.scss",
"elements/title.scss",
"form/checkbox-radio.scss",
"form/file.scss",
"form/input-textarea.scss",
"form/select.scss",
"form/shared.scss",
"form/tools.scss",
"grid/columns.scss",
"grid/grid.scss",
"layout/container.scss",
"layout/footer.scss",
"layout/hero.scss",
"layout/level.scss",
"layout/media.scss",
"layout/section.scss",
"utilities/controls.scss",
"utilities/derived-variables.scss",
"utilities/initial-variables.scss",
];
const DATA_PATH = "../_data/variables/";
const parseFile = (path) => {
let output = {
"sass-vars": [],
"css-vars": [],
};
fs.readFile(`../../sass/${path}`, "utf8", (err, data) => {
if (err) {
console.error(err);
return;
}
// const sassVarRegex = /^\$([a-z0-9-]+):(.+)!default;$/gm;
const sassVarRegex = /^\$([a-z0-9-]+):([^;]*)!default;/gm;
const sassMatches = data.matchAll(sassVarRegex);
for (const match of sassMatches) {
let name = match[1].trim();
let value = match[2].trim();
// const getvarRegex = /^cv\.getVar\("([a-z0-9-]+)"\)/;
const getvarRegex = /(#{)?(cv\.getVar\(")([a-z0-9-]+)("\))(})?/g;
const getvarMatch = value.match(getvarRegex);
if (getvarMatch) {
const varName = getvarMatch[3];
value = value.replace(getvarRegex, `var(--bulma-$3)`);
// console.log(getvarMatch[3]);
// value = `var(--bulma-${varName})`;
}
output["sass-vars"].push({
name,
value,
});
}
const registerRegex = /register-vars[^;]*/g;
const registerVars = data.match(registerRegex);
if (registerVars) {
const singleVarRegex = /"([a-z0-9-]+)":(.+)[ ,]?\n/gm;
const singleVars = registerVars[0].matchAll(singleVarRegex);
for (const match of singleVars) {
let name = match[1].trim();
let value = match[2].trim();
// #{$breadcrumb-item-color}
const curlyRegex = /#{\$([a-z0-9-]+)}/;
const curlyValue = value.match(curlyRegex);
if (curlyValue) {
// breadcrumb-item-color
// Get the actual value from the Sass variable
const found = output["sass-vars"].find(
(sassVar) => sassVar["name"] === curlyValue[1],
);
if (found) {
// Add CSS var to Sass variable
found["css-var"] = name;
value = found["value"];
}
}
output["css-vars"].push({
name,
value,
});
}
}
const jsonOutput = JSON.stringify(output, null, " ");
const jsonPath = DATA_PATH + path.replace(".scss", ".json");
fs.writeFile(jsonPath, jsonOutput, (err) => {
if (err) {
console.error(err);
return;
}
console.log(`The file ${jsonPath} was saved!`);
});
});
};
parseFile("components/card.scss");
FILES.forEach((file) => {
parseFile(file);
});

30
docs/_scripts/plugins/01-read-initial-variables.js
View File

@@ -1,30 +0,0 @@
module.exports = plugin;
const utils = require('./utils');
function plugin() {
return (files, metalsmith, done) => {
setImmediate(done);
Object.keys(files).forEach(file_path => {
const {file_name, lines} = utils.getLines(files, file_path);
let variables = {
by_name: {},
list: [],
file_path,
};
lines.forEach(line => {
const variable = utils.parseLine(line);
if (variable != false) {
variables.by_name[variable.name] = variable;
variables.list.push(variable.name);
}
});
utils.writeFile(file_path, variables);
});
};
}

40
docs/_scripts/plugins/02-read-derived-variables.js
View File

@@ -1,40 +0,0 @@
module.exports = plugin;
const utils = require('./utils');
const fs = require('fs');
let initial_variables = JSON.parse(fs.readFileSync(utils.files.initial_variables));
let derived_variables = JSON.parse(fs.readFileSync(utils.files.derived_variables));
function plugin() {
return (files, metalsmith, done) => {
setImmediate(done);
Object.keys(files).forEach(file_path => {
const {file_name, lines} = utils.getLines(files, file_path);
let variables = {
by_name: {},
list: [],
file_path,
};
lines.forEach(line => {
const variable = utils.parseLine(line);
if (variable != false) {
const computed_data = utils.getComputedData(variable.name, variable.value, variable.type, initial_variables, derived_variables);
if (Object.keys(computed_data).length > 0) {
variable.computed_type = computed_data.computed_type;
variable.computed_value = computed_data.computed_value;
}
variables.by_name[variable.name] = variable;
variables.list.push(variable.name);
}
});
utils.writeFile(file_path, variables);
});
};
}

46
docs/_scripts/plugins/03-read-other-variables.js
View File

@@ -1,46 +0,0 @@
module.exports = plugin;
const utils = require('./utils');
const fs = require('fs');
let initial_variables = JSON.parse(fs.readFileSync(utils.files.initial_variables));
let derived_variables = JSON.parse(fs.readFileSync(utils.files.derived_variables));
function plugin() {
return (files, metalsmith, done) => {
setImmediate(done);
Object.keys(files).forEach(file_path => {
// if (file_path.startsWith('utilities')) {
// return;
// }
const {file_name, lines} = utils.getLines(files, file_path);
let variables = {
by_name: {},
list: [],
file_path,
};
lines.forEach(line => {
const variable = utils.parseLine(line);
if (variable != false) {
const computed_data = utils.getComputedData(variable.name, variable.value, variable.type, initial_variables, derived_variables);
if (Object.keys(computed_data).length > 0) {
variable.computed_type = computed_data.computed_type;
variable.computed_value = computed_data.computed_value;
}
variables.by_name[variable.name] = variable;
variables.list.push(variable.name);
}
});
if (variables.list.length > 0) {
utils.writeFile(file_path, variables);
}
});
};
}

213
docs/_scripts/plugins/utils.js
View File

@@ -1,213 +0,0 @@
const fs = require('fs');
const path = require('path');
const base_path = '../_data/variables/';
const css_keywords = ['null', 'ease-out', 'optimizeLegibility'];
const regex_unitless = /^([0-9]+\.[0-9]+)$/;
let utils = {
getVariableType: (name, value) => {
if (!value) {
return 'string';
}
if (name == '$sizes') {
return 'map';
}
if (
value.startsWith('hsl') ||
value.startsWith('#') ||
value.startsWith('rgb')
) {
return 'color';
} else if (css_keywords.includes(value)) {
return 'keyword';
} else if (value.startsWith('mergeColorMaps')) {
return 'map';
} else if (value.startsWith('findColorInvert')) {
return 'function';
} else if (value.startsWith('$')) {
return 'variable';
} else if (value.startsWith('BlinkMacSystemFont') || value == 'monospace') {
return 'font-family';
} else if (value == 'true' || value == 'false') {
return 'boolean';
} else if (name.endsWith('shadow')) {
return 'shadow';
} else if (value.endsWith('ms')) {
return 'duration';
} else if (value.includes('+')) {
return 'computed';
} else if (value.endsWith('00') || value == 'normal') {
return 'font-weight';
} else if (
value.endsWith('px') ||
value.endsWith('em') ||
value.includes('px ') ||
value.includes('em ')
) {
return 'size';
} else if (value.includes('$')) {
return 'compound';
} else if (value.match(regex_unitless)) {
return 'unitless';
}
return 'string';
},
parseLine: (line) => {
if (line.startsWith('$') && line.endsWith('!default')) {
const colon_index = line.indexOf(':');
const variable_name = line.substring(0, colon_index).trim();
const default_index = line.indexOf('!default');
let variable_value = line
.substring(colon_index + 1, default_index)
.trim();
return (variable = {
name: variable_name,
value: variable_value,
type: utils.getVariableType(variable_name, variable_value),
});
}
return false;
},
getLines: (files, file_path) => {
const file = files[file_path];
const slash_index = file_path.lastIndexOf('/');
const dot_index = file_path.lastIndexOf('.');
const file_name = file_path.substring(slash_index + 1, dot_index);
return {
file_name,
lines: file.contents.toString().split(/(?:\r\n|\r|\n)/g),
};
},
writeFile: (file_path, data) => {
const json_data = JSON.stringify(data, null, ' ');
const json_file_path = base_path + file_path.replace('.sass', '.json');
utils.ensureDirectoryExistence(json_file_path);
fs.writeFile(json_file_path, json_data, (err) => {
if (err) {
return console.log(err);
}
console.log(`The file ${json_file_path} was saved!`);
});
},
getInitialValue: (value, type, initial_variables) => {
if (value.startsWith('$') && value in initial_variables.by_name) {
const second_value = initial_variables.by_name[value].value;
if (
second_value.startsWith('$') &&
second_value in initial_variables.by_name
) {
const third_value = initial_variables.by_name[second_value].value;
return third_value;
}
return second_value;
}
return value;
},
getComputedData: (
name,
value,
type,
initial_variables,
derived_variables = {}
) => {
let computed_value = '';
if (value.startsWith('$')) {
let second_value;
if (value in initial_variables.by_name) {
second_value = initial_variables.by_name[value].value;
} else if (
derived_variables.by_name &&
value in derived_variables.by_name
) {
second_value = derived_variables.by_name[value].value;
}
if (second_value && second_value.startsWith('$')) {
let third_value;
if (second_value in initial_variables.by_name) {
third_value = initial_variables.by_name[second_value].value;
} else if (
derived_variables.by_name &&
second_value in derived_variables.by_name
) {
third_value = derived_variables.by_name[second_value].value;
}
computed_value = third_value;
} else {
computed_value = second_value;
}
} else if (value.startsWith('findColorInvert')) {
// e.g. $turquoise-invert -> findColorInvert($turquoise)
if (value.endsWith('($yellow)')) {
computed_value = 'rgba(0, 0, 0, 0.7)';
} else {
computed_value = '#fff';
}
}
if (computed_value && computed_value != '') {
// e.g. $primary-invert -> $turquoise-invert -> findColorInvert($turquoise)
if (computed_value.startsWith('findColorInvert')) {
if (computed_value.endsWith('($yellow)')) {
computed_value = 'rgba(0, 0, 0, 0.7)';
} else {
computed_value = '#fff';
}
}
const computed_type = utils.getVariableType(name, computed_value);
if (computed_value.startsWith('mergeColorMaps')) {
computed_value = 'Bulma colors';
}
return {
computed_type,
computed_value,
};
}
return {};
},
ensureDirectoryExistence: (file_path) => {
var dirname = path.dirname(file_path);
if (fs.existsSync(dirname)) {
return true;
}
utils.ensureDirectoryExistence(dirname);
fs.mkdirSync(dirname);
},
};
utils.files = {};
utils.files.initial_variables = `${base_path}utilities/initial-variables.json`;
utils.files.derived_variables = `${base_path}utilities/derived-variables.json`;
module.exports = utils;