mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-14 11:14:24 +00:00
Get default assignments automatically
This commit is contained in:
Jeremy Thomas
parent
5b91a89ee2
commit
d79c6dbc3c
@ -27,7 +27,6 @@ $input-icon-active-color: var(--text, #{$text}) !default
|
||||
$input-radius: var(--radius, #{$radius}) !default
|
||||
|
||||
=input
|
||||
|
||||
@extend %control
|
||||
background-color: var(--input-background-color)
|
||||
border-color: var(--input-border-color)
|
||||
|
||||
@ -182,7 +182,7 @@ $control-font-size: var(--size-normal, #{$size-normal}) !default
|
||||
.select
|
||||
&:focus
|
||||
& ~ .icon
|
||||
color: $input-icon-active-color
|
||||
color: var(--input-icon-active-color)
|
||||
&.is-small ~ .icon
|
||||
font-size: var(--size-small, #{$size-small})
|
||||
&.is-medium ~ .icon
|
||||
@ -190,23 +190,23 @@ $control-font-size: var(--size-normal, #{$size-normal}) !default
|
||||
&.is-large ~ .icon
|
||||
font-size: var(--size-large, #{$size-large})
|
||||
.icon
|
||||
color: $input-icon-color
|
||||
height: $input-height
|
||||
color: var(--input-icon-color)
|
||||
height: var(--input-height)
|
||||
pointer-events: none
|
||||
position: absolute
|
||||
top: 0
|
||||
width: $input-height
|
||||
width: var(--input-height)
|
||||
z-index: 4
|
||||
&.has-icons-left
|
||||
.input,
|
||||
.select select
|
||||
padding-left: $input-height
|
||||
padding-left: var(--input-height)
|
||||
.icon.is-left
|
||||
left: 0
|
||||
&.has-icons-right
|
||||
.input,
|
||||
.select select
|
||||
padding-right: $input-height
|
||||
padding-right: var(--input-height)
|
||||
.icon.is-right
|
||||
right: 0
|
||||
&.is-loading
|
||||
|
||||
@ -127,3 +127,24 @@
|
||||
--control-line-height: #{$control-line-height}
|
||||
--control-padding-vertical: #{$control-padding-vertical}
|
||||
--control-padding-horizontal: #{$control-padding-horizontal}
|
||||
// Inputs
|
||||
--input-color: #{$input-color}
|
||||
--input-background-color: #{$input-background-color}
|
||||
--input-border-color: #{$input-border-color}
|
||||
--input-height: #{$input-height}
|
||||
--input-shadow: #{$input-shadow}
|
||||
--input-placeholder-color: #{$input-placeholder-color}
|
||||
--input-hover-color: #{$input-hover-color}
|
||||
--input-hover-border-color: #{$input-hover-border-color}
|
||||
--input-focus-color: #{$input-focus-color}
|
||||
--input-focus-border-color: #{$input-focus-border-color}
|
||||
--input-focus-box-shadow-size: #{$input-focus-box-shadow-size}
|
||||
--input-focus-box-shadow-color: #{$input-focus-box-shadow-color}
|
||||
--input-disabled-color: #{$input-disabled-color}
|
||||
--input-disabled-background-color: #{$input-disabled-background-color}
|
||||
--input-disabled-border-color: #{$input-disabled-border-color}
|
||||
--input-disabled-placeholder-color: #{$input-disabled-placeholder-color}
|
||||
--input-arrow: #{$input-arrow}
|
||||
--input-icon-color: #{$input-icon-color}
|
||||
--input-icon-active-color: #{$input-icon-active-color}
|
||||
--input-radius: #{$input-radius}
|
||||
|
||||
@ -6,134 +6,6 @@ const regexAssign = /--[a-z-]*:/g;
|
||||
const regexUsage = /var\(--[a-z-]*\)/g;
|
||||
const LOG_EVERYTHING = false;
|
||||
|
||||
const DEFAULT_ASSIGNMENTS = [
|
||||
'--black',
|
||||
'--black-70',
|
||||
'--black-bis',
|
||||
'--black-ter',
|
||||
'--grey-darker',
|
||||
'--grey-dark',
|
||||
'--grey',
|
||||
'--grey-light',
|
||||
'--grey-lighter',
|
||||
'--grey-lightest',
|
||||
'--white-ter',
|
||||
'--white-bis',
|
||||
'--white',
|
||||
'--orange',
|
||||
'--yellow',
|
||||
'--green',
|
||||
'--turquoise',
|
||||
'--cyan',
|
||||
'--blue',
|
||||
'--purple',
|
||||
'--red',
|
||||
'--family-sans-serif',
|
||||
'--family-monospace',
|
||||
'--render-mode',
|
||||
'--size-1',
|
||||
'--size-2',
|
||||
'--size-3',
|
||||
'--size-4',
|
||||
'--size-5',
|
||||
'--size-6',
|
||||
'--size-7',
|
||||
'--weight-light',
|
||||
'--weight-normal',
|
||||
'--weight-medium',
|
||||
'--weight-semibold',
|
||||
'--weight-bold',
|
||||
'--block-spacing',
|
||||
'--easing',
|
||||
'--radius-small',
|
||||
'--radius',
|
||||
'--radius-large',
|
||||
'--radius-rounded',
|
||||
'--speed',
|
||||
'--primary',
|
||||
'--info',
|
||||
'--success',
|
||||
'--warning',
|
||||
'--danger',
|
||||
'--light',
|
||||
'--dark',
|
||||
'--orange-invert',
|
||||
'--yellow-invert',
|
||||
'--green-invert',
|
||||
'--turquoise-invert',
|
||||
'--cyan-invert',
|
||||
'--blue-invert',
|
||||
'--purple-invert',
|
||||
'--red-invert',
|
||||
'--primary-invert',
|
||||
'--primary-light',
|
||||
'--primary-dark',
|
||||
'--info-invert',
|
||||
'--info-light',
|
||||
'--info-dark',
|
||||
'--success-invert',
|
||||
'--success-light',
|
||||
'--success-dark',
|
||||
'--warning-invert',
|
||||
'--warning-light',
|
||||
'--warning-dark',
|
||||
'--danger-invert',
|
||||
'--danger-light',
|
||||
'--danger-dark',
|
||||
'--light-invert',
|
||||
'--light-light',
|
||||
'--light-dark',
|
||||
'--dark-invert',
|
||||
'--dark-light',
|
||||
'--dark-dark',
|
||||
'--scheme-main',
|
||||
'--scheme-main-bis',
|
||||
'--scheme-main-ter',
|
||||
'--scheme-invert',
|
||||
'--scheme-invert-rgb',
|
||||
'--scheme-invert-bis',
|
||||
'--scheme-invert-ter',
|
||||
'--background',
|
||||
'--border',
|
||||
'--border-rgb',
|
||||
'--border-hover',
|
||||
'--border-light',
|
||||
'--border-light-hover',
|
||||
'--text',
|
||||
'--text-invert',
|
||||
'--text-light',
|
||||
'--text-strong',
|
||||
'--code',
|
||||
'--code-background',
|
||||
'--pre',
|
||||
'--pre-background',
|
||||
'--link',
|
||||
'--link-invert',
|
||||
'--link-light',
|
||||
'--link-dark',
|
||||
'--link-visited',
|
||||
'--link-hover',
|
||||
'--link-hover-border',
|
||||
'--link-focus',
|
||||
'--link-focus-border',
|
||||
'--link-active',
|
||||
'--link-active-border',
|
||||
'--family-primary',
|
||||
'--family-secondary',
|
||||
'--family-code',
|
||||
'--size-small',
|
||||
'--size-normal',
|
||||
'--size-medium',
|
||||
'--size-large',
|
||||
'--control-radius',
|
||||
'--control-radius-small',
|
||||
'--control-border-width',
|
||||
'--control-height',
|
||||
'--control-line-height',
|
||||
'--control-padding-vertical',
|
||||
'--control-padding-horizontal',
|
||||
];
|
||||
|
||||
function logThis(message) {
|
||||
if (LOG_EVERYTHING) {
|
||||
console.log(message);
|
||||
@ -146,28 +18,32 @@ function plugin() {
|
||||
|
||||
let hasErrors = false;
|
||||
|
||||
const cssvars = fs.readFileSync(`../sass/themes/default.sass`, "utf8");
|
||||
let defaultAssignments = cssvars.match(regexAssign);
|
||||
defaultAssignments = defaultAssignments.map(assignment => assignment.replace(':', ''));
|
||||
|
||||
Object.keys(files).forEach(filePath => {
|
||||
const {fileName, lines} = utils.getLines(files, filePath);
|
||||
const file = files[filePath];
|
||||
const contents = file.contents.toString();
|
||||
const assignments = contents.match(regexAssign);
|
||||
|
||||
let fileAssignments = [];
|
||||
let allAssignments = [];
|
||||
let errorCount = 0;
|
||||
|
||||
if (!assignments) {
|
||||
if (assignments) {
|
||||
// --foobar: ==> --foobar
|
||||
fileAssignments = assignments.map(assignment => assignment.replace(':', ''));
|
||||
allAssignments = [...defaultAssignments, ...fileAssignments];
|
||||
} else {
|
||||
logThis(`${filePath} has no CSS var assignments`);
|
||||
errorCount++;
|
||||
return;
|
||||
allAssignments = [...defaultAssignments];
|
||||
}
|
||||
|
||||
const fileAssignments = assignments.map(assignment => assignment.replace(':', ''));
|
||||
const allAssignments = [...fileAssignments, ...DEFAULT_ASSIGNMENTS];
|
||||
|
||||
let usages = contents.match(regexUsage);
|
||||
|
||||
if (!usages) {
|
||||
logThis(`${filePath} has no CSS var usages`);
|
||||
errorCount++;
|
||||
return;
|
||||
}
|
||||
|
||||
@ -178,11 +54,6 @@ function plugin() {
|
||||
return usage;
|
||||
});
|
||||
|
||||
if (filePath.endsWith('shared.sass')) {
|
||||
console.log('ZLOG usages', usages);
|
||||
console.log('ZLOG assignments', fileAssignments);
|
||||
}
|
||||
|
||||
usages.forEach(usage => {
|
||||
if (!allAssignments.includes(usage)) {
|
||||
console.log(`${usage} is not assigned`);
|
||||
@ -198,7 +69,7 @@ function plugin() {
|
||||
});
|
||||
|
||||
if (errorCount) {
|
||||
console.log(`There are some errors in ${filePath}`);
|
||||
console.log(`There are some errors in ${filePath}.`);
|
||||
hasErrors = true;
|
||||
} else {
|
||||
logThis(`${filePath} is all good!`);
|
||||
@ -206,7 +77,7 @@ function plugin() {
|
||||
});
|
||||
|
||||
if (hasErrors) {
|
||||
console.log(`There are some errors`);
|
||||
console.log(`There are some errors.`);
|
||||
} else {
|
||||
console.log(`All CSS variables are used and assigned correctly!`);
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user