477 lines
20 KiB
JavaScript
477 lines
20 KiB
JavaScript
import autoprefixer from 'autoprefixer';
|
|
import browserslist from 'browserslist';
|
|
import cssdb from 'cssdb';
|
|
import postcssAttributeCaseInsensitive from 'postcss-attribute-case-insensitive';
|
|
import postcssBlankPseudo from 'css-blank-pseudo/postcss';
|
|
import postcssColorFunctionalNotation from 'postcss-color-functional-notation';
|
|
import postcssColorGray from 'postcss-color-gray';
|
|
import postcssColorHexAlpha from 'postcss-color-hex-alpha';
|
|
import postcssColorModFunction from 'postcss-color-mod-function';
|
|
import postcssColorRebeccapurple from 'postcss-color-rebeccapurple';
|
|
import postcssCustomMedia from 'postcss-custom-media';
|
|
import postcssCustomProperties from 'postcss-custom-properties';
|
|
import postcssCustomSelectors from 'postcss-custom-selectors';
|
|
import postcssDirPseudoClass from 'postcss-dir-pseudo-class';
|
|
import postcssDoublePositionGradients from 'postcss-double-position-gradients';
|
|
import postcssEnvFunction from 'postcss-env-function';
|
|
import postcssFocusVisible from 'postcss-focus-visible';
|
|
import postcssFocusWithin from 'postcss-focus-within';
|
|
import postcssFontVariant from 'postcss-font-variant';
|
|
import postcss from 'postcss';
|
|
import postcssGapProperties from 'postcss-gap-properties';
|
|
import postcssHasPseudo from 'css-has-pseudo/postcss';
|
|
import postcssImageSetPolyfill from 'postcss-image-set-function';
|
|
import postcssInitial from 'postcss-initial';
|
|
import postcssLabFunction from 'postcss-lab-function';
|
|
import postcssLogical from 'postcss-logical';
|
|
import postcssMediaMinmax from 'postcss-media-minmax';
|
|
import postcssNesting from 'postcss-nesting';
|
|
import postcssOverflowShorthand from 'postcss-overflow-shorthand';
|
|
import postcssPageBreak from 'postcss-page-break';
|
|
import postcssPlace from 'postcss-place';
|
|
import postcssPrefersColorScheme from 'css-prefers-color-scheme/postcss';
|
|
import postcssPseudoClassAnyLink from 'postcss-pseudo-class-any-link';
|
|
import postcssReplaceOverflowWrap from 'postcss-replace-overflow-wrap';
|
|
import postcssSelectorMatches from 'postcss-selector-matches';
|
|
import postcssSelectorNot from 'postcss-selector-not';
|
|
import { features, feature } from 'caniuse-lite';
|
|
import fs from 'fs';
|
|
import path from 'path';
|
|
|
|
var postcssFontFamilySystemUi = postcss.plugin('postcss-system-ui-font', () => root => {
|
|
root.walkDecls(propertyRegExp, decl => {
|
|
decl.value = decl.value.replace(systemUiMatch, systemUiReplace);
|
|
});
|
|
});
|
|
const propertyRegExp = /(?:^(?:-|\\002d){2})|(?:^font(?:-family)?$)/i;
|
|
const whitespace = '[\\f\\n\\r\\x09\\x20]';
|
|
const systemUiFamily = ['system-ui',
|
|
/* macOS 10.11-10.12 */
|
|
'-apple-system',
|
|
/* Windows 6+ */
|
|
'Segoe UI',
|
|
/* Android 4+ */
|
|
'Roboto',
|
|
/* Ubuntu 10.10+ */
|
|
'Ubuntu',
|
|
/* Gnome 3+ */
|
|
'Cantarell',
|
|
/* KDE Plasma 5+ */
|
|
'Noto Sans',
|
|
/* fallback */
|
|
'sans-serif'];
|
|
const systemUiMatch = new RegExp(`(^|,|${whitespace}+)(?:system-ui${whitespace}*)(?:,${whitespace}*(?:${systemUiFamily.join('|')})${whitespace}*)?(,|$)`, 'i');
|
|
const systemUiReplace = `$1${systemUiFamily.join(', ')}$2`;
|
|
|
|
var plugins = {
|
|
'all-property': postcssInitial,
|
|
'any-link-pseudo-class': postcssPseudoClassAnyLink,
|
|
'blank-pseudo-class': postcssBlankPseudo,
|
|
'break-properties': postcssPageBreak,
|
|
'case-insensitive-attributes': postcssAttributeCaseInsensitive,
|
|
'color-functional-notation': postcssColorFunctionalNotation,
|
|
'color-mod-function': postcssColorModFunction,
|
|
'custom-media-queries': postcssCustomMedia,
|
|
'custom-properties': postcssCustomProperties,
|
|
'custom-selectors': postcssCustomSelectors,
|
|
'dir-pseudo-class': postcssDirPseudoClass,
|
|
'double-position-gradients': postcssDoublePositionGradients,
|
|
'environment-variables': postcssEnvFunction,
|
|
'focus-visible-pseudo-class': postcssFocusVisible,
|
|
'focus-within-pseudo-class': postcssFocusWithin,
|
|
'font-variant-property': postcssFontVariant,
|
|
'gap-properties': postcssGapProperties,
|
|
'gray-function': postcssColorGray,
|
|
'has-pseudo-class': postcssHasPseudo,
|
|
'hexadecimal-alpha-notation': postcssColorHexAlpha,
|
|
'image-set-function': postcssImageSetPolyfill,
|
|
'lab-function': postcssLabFunction,
|
|
'logical-properties-and-values': postcssLogical,
|
|
'matches-pseudo-class': postcssSelectorMatches,
|
|
'media-query-ranges': postcssMediaMinmax,
|
|
'nesting-rules': postcssNesting,
|
|
'not-pseudo-class': postcssSelectorNot,
|
|
'overflow-property': postcssOverflowShorthand,
|
|
'overflow-wrap-property': postcssReplaceOverflowWrap,
|
|
'place-properties': postcssPlace,
|
|
'prefers-color-scheme-query': postcssPrefersColorScheme,
|
|
'rebeccapurple-color': postcssColorRebeccapurple,
|
|
'system-ui-font-family': postcssFontFamilySystemUi
|
|
};
|
|
|
|
// return a list of features to be inserted before or after cssdb features
|
|
function getTransformedInsertions(insertions, placement) {
|
|
return Object.keys(insertions).map(id => [].concat(insertions[id]).map(plugin => ({
|
|
[placement]: true,
|
|
plugin,
|
|
id
|
|
}))).reduce((array, feature$$1) => array.concat(feature$$1), []);
|
|
}
|
|
|
|
function getUnsupportedBrowsersByFeature(feature$$1) {
|
|
const caniuseFeature = features[feature$$1]; // if feature support can be determined
|
|
|
|
if (caniuseFeature) {
|
|
const stats = feature(caniuseFeature).stats; // return an array of browsers and versions that do not support the feature
|
|
|
|
const results = Object.keys(stats).reduce((browsers, browser) => browsers.concat(Object.keys(stats[browser]).filter(version => stats[browser][version].indexOf('y') !== 0).map(version => `${browser} ${version}`)), []);
|
|
return results;
|
|
} else {
|
|
// otherwise, return that the feature does not work in any browser
|
|
return ['> 0%'];
|
|
}
|
|
}
|
|
|
|
// ids ordered by required execution, then alphabetically
|
|
var idsByExecutionOrder = ['custom-media-queries', 'custom-properties', 'environment-variables', // run environment-variables here to access transpiled custom media params and properties
|
|
'image-set-function', // run images-set-function before nesting-rules so that it may fix nested media
|
|
'media-query-ranges', // run media-query-range and
|
|
'prefers-color-scheme-query', // run prefers-color-scheme-query here to prevent duplicate transpilation after nesting-rules
|
|
'nesting-rules', 'custom-selectors', // run custom-selectors after nesting-rules to correctly transpile &:--custom-selector
|
|
'any-link-pseudo-class', 'case-insensitive-attributes', 'focus-visible-pseudo-class', 'focus-within-pseudo-class', 'matches-pseudo-class', // run matches-pseudo-class and
|
|
'not-pseudo-class', // run not-pseudo-class after other selectors have been transpiled
|
|
'logical-properties-and-values', // run logical-properties-and-values before dir-pseudo-class
|
|
'dir-pseudo-class', 'all-property', // run all-property before other property polyfills
|
|
'color-functional-notation', 'double-position-gradients', 'gray-function', 'hexadecimal-alpha-notation', 'lab-function', 'rebeccapurple-color', 'color-mod-function', // run color-mod after other color modifications have finished
|
|
'blank-pseudo-class', 'break-properties', 'font-variant-property', 'has-pseudo-class', 'gap-properties', 'overflow-property', 'overflow-wrap-property', 'place-properties', 'system-ui-font-family'];
|
|
|
|
function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
|
|
try {
|
|
var info = gen[key](arg);
|
|
var value = info.value;
|
|
} catch (error) {
|
|
reject(error);
|
|
return;
|
|
}
|
|
|
|
if (info.done) {
|
|
resolve(value);
|
|
} else {
|
|
Promise.resolve(value).then(_next, _throw);
|
|
}
|
|
}
|
|
|
|
function _asyncToGenerator(fn) {
|
|
return function () {
|
|
var self = this,
|
|
args = arguments;
|
|
return new Promise(function (resolve, reject) {
|
|
var gen = fn.apply(self, args);
|
|
|
|
function _next(value) {
|
|
asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
|
|
}
|
|
|
|
function _throw(err) {
|
|
asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
|
|
}
|
|
|
|
_next(undefined);
|
|
});
|
|
};
|
|
}
|
|
|
|
/* Write Exports to CSS File
|
|
/* ========================================================================== */
|
|
|
|
function getCustomMediaAsCss(customMedia) {
|
|
const cssContent = Object.keys(customMedia).reduce((cssLines, name) => {
|
|
cssLines.push(`@custom-media ${name} ${customMedia[name]};`);
|
|
return cssLines;
|
|
}, []).join('\n');
|
|
const css = `${cssContent}\n`;
|
|
return css;
|
|
}
|
|
|
|
function getCustomPropertiesAsCss(customProperties) {
|
|
const cssContent = Object.keys(customProperties).reduce((cssLines, name) => {
|
|
cssLines.push(`\t${name}: ${customProperties[name]};`);
|
|
return cssLines;
|
|
}, []).join('\n');
|
|
const css = `:root {\n${cssContent}\n}\n`;
|
|
return css;
|
|
}
|
|
|
|
function getCustomSelectorsAsCss(customSelectors) {
|
|
const cssContent = Object.keys(customSelectors).reduce((cssLines, name) => {
|
|
cssLines.push(`@custom-selector ${name} ${customSelectors[name]};`);
|
|
return cssLines;
|
|
}, []).join('\n');
|
|
const css = `${cssContent}\n`;
|
|
return css;
|
|
}
|
|
|
|
function writeExportsToCssFile(_x, _x2, _x3, _x4) {
|
|
return _writeExportsToCssFile.apply(this, arguments);
|
|
}
|
|
/* Write Exports to JSON file
|
|
/* ========================================================================== */
|
|
|
|
|
|
function _writeExportsToCssFile() {
|
|
_writeExportsToCssFile = _asyncToGenerator(function* (to, customMedia, customProperties, customSelectors) {
|
|
const customPropertiesAsCss = getCustomPropertiesAsCss(customProperties);
|
|
const customMediaAsCss = getCustomMediaAsCss(customMedia);
|
|
const customSelectorsAsCss = getCustomSelectorsAsCss(customSelectors);
|
|
const css = `${customMediaAsCss}\n${customSelectorsAsCss}\n${customPropertiesAsCss}`;
|
|
yield writeFile(to, css);
|
|
});
|
|
return _writeExportsToCssFile.apply(this, arguments);
|
|
}
|
|
|
|
function writeExportsToJsonFile(_x5, _x6, _x7, _x8) {
|
|
return _writeExportsToJsonFile.apply(this, arguments);
|
|
}
|
|
/* Write Exports to Common JS file
|
|
/* ========================================================================== */
|
|
|
|
|
|
function _writeExportsToJsonFile() {
|
|
_writeExportsToJsonFile = _asyncToGenerator(function* (to, customMedia, customProperties, customSelectors) {
|
|
const jsonContent = JSON.stringify({
|
|
'custom-media': customMedia,
|
|
'custom-properties': customProperties,
|
|
'custom-selectors': customSelectors
|
|
}, null, ' ');
|
|
const json = `${jsonContent}\n`;
|
|
yield writeFile(to, json);
|
|
});
|
|
return _writeExportsToJsonFile.apply(this, arguments);
|
|
}
|
|
|
|
function getObjectWithKeyAsCjs(key, object) {
|
|
const jsContents = Object.keys(object).reduce((jsLines, name) => {
|
|
jsLines.push(`\t\t'${escapeForJS(name)}': '${escapeForJS(object[name])}'`);
|
|
return jsLines;
|
|
}, []).join(',\n');
|
|
const cjs = `\n\t${key}: {\n${jsContents}\n\t}`;
|
|
return cjs;
|
|
}
|
|
|
|
function writeExportsToCjsFile(_x9, _x10, _x11, _x12) {
|
|
return _writeExportsToCjsFile.apply(this, arguments);
|
|
}
|
|
/* Write Exports to Module JS file
|
|
/* ========================================================================== */
|
|
|
|
|
|
function _writeExportsToCjsFile() {
|
|
_writeExportsToCjsFile = _asyncToGenerator(function* (to, customMedia, customProperties, customSelectors) {
|
|
const customMediaAsCjs = getObjectWithKeyAsCjs('customMedia', customMedia);
|
|
const customPropertiesAsCjs = getObjectWithKeyAsCjs('customProperties', customProperties);
|
|
const customSelectorsAsCjs = getObjectWithKeyAsCjs('customSelectors', customSelectors);
|
|
const cjs = `module.exports = {${customMediaAsCjs},${customPropertiesAsCjs},${customSelectorsAsCjs}\n};\n`;
|
|
yield writeFile(to, cjs);
|
|
});
|
|
return _writeExportsToCjsFile.apply(this, arguments);
|
|
}
|
|
|
|
function getObjectWithKeyAsMjs(key, object) {
|
|
const mjsContents = Object.keys(object).reduce((mjsLines, name) => {
|
|
mjsLines.push(`\t'${escapeForJS(name)}': '${escapeForJS(object[name])}'`);
|
|
return mjsLines;
|
|
}, []).join(',\n');
|
|
const mjs = `export const ${key} = {\n${mjsContents}\n};\n`;
|
|
return mjs;
|
|
}
|
|
|
|
function writeExportsToMjsFile(_x13, _x14, _x15, _x16) {
|
|
return _writeExportsToMjsFile.apply(this, arguments);
|
|
}
|
|
/* Write Exports to Exports
|
|
/* ========================================================================== */
|
|
|
|
|
|
function _writeExportsToMjsFile() {
|
|
_writeExportsToMjsFile = _asyncToGenerator(function* (to, customMedia, customProperties, customSelectors) {
|
|
const customMediaAsMjs = getObjectWithKeyAsMjs('customMedia', customMedia);
|
|
const customPropertiesAsMjs = getObjectWithKeyAsMjs('customProperties', customProperties);
|
|
const customSelectorsAsMjs = getObjectWithKeyAsMjs('customSelectors', customSelectors);
|
|
const mjs = `${customMediaAsMjs}\n${customPropertiesAsMjs}\n${customSelectorsAsMjs}`;
|
|
yield writeFile(to, mjs);
|
|
});
|
|
return _writeExportsToMjsFile.apply(this, arguments);
|
|
}
|
|
|
|
function writeToExports(customExports, destinations) {
|
|
return Promise.all([].concat(destinations).map(
|
|
/*#__PURE__*/
|
|
function () {
|
|
var _ref = _asyncToGenerator(function* (destination) {
|
|
if (destination instanceof Function) {
|
|
yield destination({
|
|
customMedia: getObjectWithStringifiedKeys(customExports.customMedia),
|
|
customProperties: getObjectWithStringifiedKeys(customExports.customProperties),
|
|
customSelectors: getObjectWithStringifiedKeys(customExports.customSelectors)
|
|
});
|
|
} else {
|
|
// read the destination as an object
|
|
const opts = destination === Object(destination) ? destination : {
|
|
to: String(destination)
|
|
}; // transformer for Exports into a JSON-compatible object
|
|
|
|
const toJSON = opts.toJSON || getObjectWithStringifiedKeys;
|
|
|
|
if ('customMedia' in opts || 'customProperties' in opts || 'customSelectors' in opts) {
|
|
// write directly to an object as customProperties
|
|
opts.customMedia = toJSON(customExports.customMedia);
|
|
opts.customProperties = toJSON(customExports.customProperties);
|
|
opts.customSelectors = toJSON(customExports.customSelectors);
|
|
} else if ('custom-media' in opts || 'custom-properties' in opts || 'custom-selectors' in opts) {
|
|
// write directly to an object as custom-properties
|
|
opts['custom-media'] = toJSON(customExports.customMedia);
|
|
opts['custom-properties'] = toJSON(customExports.customProperties);
|
|
opts['custom-selectors'] = toJSON(customExports.customSelectors);
|
|
} else {
|
|
// destination pathname
|
|
const to = String(opts.to || ''); // type of file being written to
|
|
|
|
const type = (opts.type || path.extname(opts.to).slice(1)).toLowerCase(); // transformed Exports
|
|
|
|
const customMediaJSON = toJSON(customExports.customMedia);
|
|
const customPropertiesJSON = toJSON(customExports.customProperties);
|
|
const customSelectorsJSON = toJSON(customExports.customSelectors);
|
|
|
|
if (type === 'css') {
|
|
yield writeExportsToCssFile(to, customMediaJSON, customPropertiesJSON, customSelectorsJSON);
|
|
}
|
|
|
|
if (type === 'js') {
|
|
yield writeExportsToCjsFile(to, customMediaJSON, customPropertiesJSON, customSelectorsJSON);
|
|
}
|
|
|
|
if (type === 'json') {
|
|
yield writeExportsToJsonFile(to, customMediaJSON, customPropertiesJSON, customSelectorsJSON);
|
|
}
|
|
|
|
if (type === 'mjs') {
|
|
yield writeExportsToMjsFile(to, customMediaJSON, customPropertiesJSON, customSelectorsJSON);
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
return function (_x17) {
|
|
return _ref.apply(this, arguments);
|
|
};
|
|
}()));
|
|
}
|
|
/* Helper utilities
|
|
/* ========================================================================== */
|
|
|
|
function getObjectWithStringifiedKeys(object) {
|
|
return Object.keys(object).reduce((objectJSON, key) => {
|
|
objectJSON[key] = String(object[key]);
|
|
return objectJSON;
|
|
}, {});
|
|
}
|
|
|
|
function writeFile(to, text) {
|
|
return new Promise((resolve, reject) => {
|
|
fs.writeFile(to, text, error => {
|
|
if (error) {
|
|
reject(error);
|
|
} else {
|
|
resolve();
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
function escapeForJS(string) {
|
|
return string.replace(/\\([\s\S])|(')/g, '\\$1$2').replace(/\n/g, '\\n').replace(/\r/g, '\\r');
|
|
}
|
|
|
|
var postcss$1 = postcss.plugin('postcss-preset-env', opts => {
|
|
// initialize options
|
|
const features$$1 = Object(Object(opts).features);
|
|
const insertBefore = Object(Object(opts).insertBefore);
|
|
const insertAfter = Object(Object(opts).insertAfter);
|
|
const browsers = Object(opts).browsers;
|
|
const stage = 'stage' in Object(opts) ? opts.stage === false ? 5 : parseInt(opts.stage) || 0 : 2;
|
|
const autoprefixerOptions = Object(opts).autoprefixer;
|
|
const sharedOpts = initializeSharedOpts(Object(opts));
|
|
const stagedAutoprefixer = autoprefixerOptions === false ? () => {} : autoprefixer(Object.assign({
|
|
browsers
|
|
}, autoprefixerOptions)); // polyfillable features (those with an available postcss plugin)
|
|
|
|
const polyfillableFeatures = cssdb.concat( // additional features to be inserted before cssdb features
|
|
getTransformedInsertions(insertBefore, 'insertBefore'), // additional features to be inserted after cssdb features
|
|
getTransformedInsertions(insertAfter, 'insertAfter')).filter( // inserted features or features with an available postcss plugin
|
|
feature$$1 => feature$$1.insertBefore || feature$$1.id in plugins).sort( // features sorted by execution order and then insertion order
|
|
(a, b) => idsByExecutionOrder.indexOf(a.id) - idsByExecutionOrder.indexOf(b.id) || (a.insertBefore ? -1 : b.insertBefore ? 1 : 0) || (a.insertAfter ? 1 : b.insertAfter ? -1 : 0)).map( // polyfillable features as an object
|
|
feature$$1 => {
|
|
// target browsers for the polyfill
|
|
const unsupportedBrowsers = getUnsupportedBrowsersByFeature(feature$$1.caniuse);
|
|
return feature$$1.insertBefore || feature$$1.insertAfter ? {
|
|
browsers: unsupportedBrowsers,
|
|
plugin: feature$$1.plugin,
|
|
id: `${feature$$1.insertBefore ? 'before' : 'after'}-${feature$$1.id}`,
|
|
stage: 6
|
|
} : {
|
|
browsers: unsupportedBrowsers,
|
|
plugin: plugins[feature$$1.id],
|
|
id: feature$$1.id,
|
|
stage: feature$$1.stage
|
|
};
|
|
}); // staged features (those at or above the selected stage)
|
|
|
|
const stagedFeatures = polyfillableFeatures.filter(feature$$1 => feature$$1.id in features$$1 ? features$$1[feature$$1.id] : feature$$1.stage >= stage).map(feature$$1 => ({
|
|
browsers: feature$$1.browsers,
|
|
plugin: typeof feature$$1.plugin.process === 'function' ? features$$1[feature$$1.id] === true ? sharedOpts // if the plugin is enabled and has shared options
|
|
? feature$$1.plugin(Object.assign({}, sharedOpts)) // otherwise, if the plugin is enabled
|
|
: feature$$1.plugin() : sharedOpts // if the plugin has shared options and individual options
|
|
? feature$$1.plugin(Object.assign({}, sharedOpts, features$$1[feature$$1.id])) // if the plugin has individual options
|
|
: feature$$1.plugin(Object.assign({}, features$$1[feature$$1.id])) // if the plugin is already initialized
|
|
: feature$$1.plugin,
|
|
id: feature$$1.id
|
|
}));
|
|
return (root, result) => {
|
|
// browsers supported by the configuration
|
|
const supportedBrowsers = browserslist(browsers, {
|
|
path: result.root.source && result.root.source.input && result.root.source.input.file,
|
|
ignoreUnknownVersions: true
|
|
}); // features supported by the stage and browsers
|
|
|
|
const supportedFeatures = stagedFeatures.filter(feature$$1 => supportedBrowsers.some(supportedBrowser => browserslist(feature$$1.browsers, {
|
|
ignoreUnknownVersions: true
|
|
}).some(polyfillBrowser => polyfillBrowser === supportedBrowser))); // polyfills run in execution order
|
|
|
|
const polyfills = supportedFeatures.reduce((promise, feature$$1) => promise.then(() => feature$$1.plugin(result.root, result)), Promise.resolve()).then(() => stagedAutoprefixer(result.root, result)).then(() => {
|
|
if (Object(opts).exportTo) {
|
|
writeToExports(sharedOpts.exportTo, opts.exportTo);
|
|
}
|
|
});
|
|
return polyfills;
|
|
};
|
|
});
|
|
|
|
const initializeSharedOpts = opts => {
|
|
if ('importFrom' in opts || 'exportTo' in opts || 'preserve' in opts) {
|
|
const sharedOpts = {};
|
|
|
|
if ('importFrom' in opts) {
|
|
sharedOpts.importFrom = opts.importFrom;
|
|
}
|
|
|
|
if ('exportTo' in opts) {
|
|
sharedOpts.exportTo = {
|
|
customMedia: {},
|
|
customProperties: {},
|
|
customSelectors: {}
|
|
};
|
|
}
|
|
|
|
if ('preserve' in opts) {
|
|
sharedOpts.preserve = opts.preserve;
|
|
}
|
|
|
|
return sharedOpts;
|
|
}
|
|
|
|
return false;
|
|
};
|
|
|
|
export default postcss$1;
|
|
//# sourceMappingURL=index.mjs.map
|