zss-engine
Version:
A CSS-in-JS transpiler engine for building zero-runtime stylesheets at build time.
69 lines (68 loc) • 1.95 kB
JavaScript
import { hexToColorName } from './hex-to-color-name.js';
const exception = [
'animation-iteration-count',
'animation-duration',
'animation-delay',
'aspect-ratio',
'border-image-slice',
'column-count',
'columns',
'fill-opacity',
'flex',
'flex-grow',
'flex-shrink',
'flood-opacity',
'font-size-adjust',
'font-weight',
'grid-area',
'grid-column',
'grid-column-end',
'grid-column-start',
'grid-row',
'grid-row-end',
'grid-row-start',
'hyphenate-limit-chars',
'initial-letter',
'line-height',
'mask-border-slice',
'math-depth',
'opacity',
'order',
'orphans',
'scale',
'shape-image-threshold',
'stop-opacity',
'stroke-miterlimit',
'stroke-opacity',
'tab-size',
'transition-duration',
'transition-delay',
'widows',
'z-index',
'zoom',
];
export const exceptionCamelCase = exception.map(prop => prop.replace(/-([a-z])/g, (_, char) => char.toUpperCase()));
const convertHexToColorName = (value) => {
return value.replace(/#[0-9a-fA-F]{3,6}\b/g, match => {
return hexToColorName[match.toLowerCase()] || match;
});
};
export const applyCssValue = (value, cssProp) => {
if (typeof value === 'number') {
return exception.includes(cssProp) || cssProp.startsWith('--') ? value.toString() : value + 'px';
}
return convertHexToColorName(value);
};
export const camelToKebabCase = (property) => {
if (/^(ms|Moz|Webkit)/.test(property)) {
property = '-' + property;
}
return (property
.replace(/([A-Z]+)([0-9]+)/g, '$1$2')
.replace(/([a-z0-9])([A-Z])/g, '$1-$2')
.replace(/([A-Z]+)([A-Z][a-z])/g, '$1-$2')
.toLowerCase());
};
export const isAtRule = (prop) => {
return prop.startsWith('@media') || prop.startsWith('@container') || prop.startsWith('@supports') || prop.startsWith('@layer') || prop.startsWith('@scope');
};