@primer/primitives
Version:
Typography, spacing, and color primitives for Primer design system
87 lines (86 loc) • 4.23 kB
JavaScript
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
import { format } from 'prettier';
import { fileHeader, formattedVariables, sortByName } from 'style-dictionary/utils';
const wrapWithSelector = (css, selector) => {
// return without selector
if (selector === false || selector.trim().length === 0)
return css;
// return with selector
return `${selector} { ${css} }`;
};
export const cssAdvanced = (_a) => __awaiter(void 0, [_a], void 0, function* ({ dictionary: originalDictionary, options = {
queries: [],
}, file, }) {
var _b, _c, _d, _e;
// get options
const { outputReferences, usesDtcg, formatting } = options;
// selector
const selector = ((_b = file.options) === null || _b === void 0 ? void 0 : _b.selector) !== undefined ? file.options.selector : ':root';
// query extension property
const queryExtProp = ((_c = file.options) === null || _c === void 0 ? void 0 : _c.queryExtensionProperty) || 'mediaQuery';
// get queries from file options
const queries = ((_d = file.options) === null || _d === void 0 ? void 0 : _d.queries) || [
{
query: undefined,
matcher: () => true,
},
];
// set formatting
const mergedFormatting = Object.assign({ commentStyle: 'long' }, formatting);
// clone dictionary
const dictionary = Object.assign({}, originalDictionary);
// get queries from tokens
for (const designToken of dictionary.allTokens) {
const query = (_e = designToken.$extensions) === null || _e === void 0 ? void 0 : _e[queryExtProp];
// early abort if query does not exist on token
if (!query)
continue;
// if query exists already from other token
const currentQueryIndex = queries.findIndex((q) => q.query === query);
// if query exists
if (currentQueryIndex > -1) {
queries[currentQueryIndex] = Object.assign(Object.assign({}, queries[currentQueryIndex]), { matcher: (token) => queries[currentQueryIndex].matcher(token) ||
token.$extensions[queryExtProp] === queries[currentQueryIndex].query });
}
// if query does not exist
else {
queries.push({
query,
matcher: (token) => { var _a; return ((_a = token.$extensions) === null || _a === void 0 ? void 0 : _a[queryExtProp]) === query; },
});
}
}
// add file header
const output = [yield fileHeader({ file })];
// add single theme css
for (const query of queries) {
const { query: queryString, matcher } = query;
// filter tokens to only include the ones that pass the matcher
const filteredDictionary = Object.assign(Object.assign({}, dictionary), { allTokens: dictionary.allTokens.filter(matcher || (() => true)).sort(sortByName) });
// early abort if no matches
if (!filteredDictionary.allTokens.length)
continue;
// add tokens into root
const css = formattedVariables({
format: 'css',
dictionary: filteredDictionary,
outputReferences,
formatting: mergedFormatting,
usesDtcg,
});
// wrap css
const cssWithSelector = wrapWithSelector(css, query.selector !== undefined ? query.selector : selector);
// add css with or without query
output.push(queryString ? `${queryString} { ${cssWithSelector} }` : cssWithSelector);
}
// return prettified
return yield format(output.join('\n'), { parser: 'css', printWidth: 500 });
});