@lipemat/js-boilerplate
Version:
Dependencies and scripts for a no config JavaScript app
105 lines (104 loc) • 3.63 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const path_1 = require("path");
const fs_1 = require("fs");
const config_1 = require("../helpers/config");
const package_config_1 = require("../helpers/package-config");
const postcss_pretty_1 = __importDefault(require("../lib/postcss-pretty"));
const postcss_clean_1 = __importDefault(require("../lib/postcss-clean"));
const postcssPresetEnv = require('postcss-preset-env');
function isPluginsArray(value) {
return Array.isArray(value);
}
const packageConfig = (0, package_config_1.getPackageConfig)();
/**
* Base postcss-presets-env config.
*
*/
const presetEnv = {
browsers: [...(0, config_1.getBrowsersList)()],
features: {},
};
// Get a list of included postcss plugins based on the browsers list.
const includedPlugins = postcssPresetEnv(presetEnv).plugins.map((plugin) => {
return 'postcssPlugin' in plugin ? plugin.postcssPlugin : '';
});
if ('object' === typeof presetEnv.features && includedPlugins.includes('postcss-focus-visible')) {
presetEnv.features['focus-visible-pseudo-class'] = {
/**
* Fixes `focus-visible` feature for CSS modules.
*
* Only needed if our browsers list includes non-supported browsers
* such as Safari 15.3 and below.
*
* Requires `focus-visible` polyfill to be loaded externally.
* Most will often need it site wide on pages, which do and don't use the JS app.
*
* @link https://unpkg.com/focus-visible@5.2.0/dist/focus-visible.min.js
*/
replaceWith: ':global(.focus-visible)',
};
}
/**
* Provide CSS properties and media queries to all postcss plugins.
*
* If a media-queries files exist, automatically load them.
* If CSS variables exist, automatically load them.
*
* 1. pcss/globals/variables.pcss
* 2. js/src/pcss/variables.pcss
* 3. pcss/globals/media-queries.pcss
* 4. js/src/pcss/media-queries.pcss
*/
const externalFiles = [];
[
(0, path_1.resolve)(packageConfig.packageDirectory, 'pcss/globals/media-queries.pcss'),
(0, path_1.resolve)(packageConfig.packageDirectory, 'pcss/globals/variables.pcss'),
(0, path_1.resolve)(packageConfig.workingDirectory, 'src/pcss/media-queries.pcss'),
(0, path_1.resolve)(packageConfig.workingDirectory, 'src/pcss/variables.pcss'),
].forEach((possibleFile) => {
if ((0, fs_1.existsSync)(possibleFile)) {
externalFiles.push(possibleFile);
}
});
/**
* Put the config together.
*/
const config = {
plugins: [
require('@csstools/postcss-global-data')({
files: externalFiles,
}),
require('postcss-import')({
skipDuplicates: false,
}),
require('postcss-custom-media'),
require('postcss-nested'),
postcssPresetEnv(presetEnv),
require('postcss-color-mod-function'),
require('postcss-sort-media-queries')({
onlyTopLevel: true,
sort: 'mobile-first',
configuration: {
unitlessMqAlwaysFirst: true,
},
}),
],
parser: 'postcss-scss',
};
if (isPluginsArray(config.plugins)) {
if ('production' === process.env.NODE_ENV) {
// For production, we minify it.
config.plugins.push((0, postcss_clean_1.default)({
level: 2,
}));
}
else {
config.plugins.push(postcss_pretty_1.default);
config.sourceMap = true;
}
}
module.exports = config;