Refactor postcss.js
Moved creation of Processor from utility file to styles.js to allow for future customization of `postcss` and `autoprefixer`.
This commit is contained in:
@@ -1,7 +1,7 @@
|
|||||||
import loconfig from '../../loconfig.json';
|
import loconfig from '../../loconfig.json';
|
||||||
import message from '../utils/message.js';
|
import message from '../utils/message.js';
|
||||||
import notification from '../utils/notification.js';
|
import notification from '../utils/notification.js';
|
||||||
import postcss from '../utils/postcss.js';
|
import postcss, { autoprefixer } from '../utils/postcss.js';
|
||||||
import template from '../utils/template.js';
|
import template from '../utils/template.js';
|
||||||
import { writeFile } from 'node:fs/promises';
|
import { writeFile } from 'node:fs/promises';
|
||||||
import { basename } from 'node:path';
|
import { basename } from 'node:path';
|
||||||
@@ -10,6 +10,9 @@ import sass from 'node-sass';
|
|||||||
|
|
||||||
const sassRender = promisify(sass.render);
|
const sassRender = promisify(sass.render);
|
||||||
|
|
||||||
|
const isPostCSSAvailable = (postcss && autoprefixer);
|
||||||
|
let postcssProcessor;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Compiles and minifies main Sass files to CSS.
|
* Compiles and minifies main Sass files to CSS.
|
||||||
*
|
*
|
||||||
@@ -39,8 +42,14 @@ export default async function compileStyles() {
|
|||||||
sourceMapContents: true
|
sourceMapContents: true
|
||||||
});
|
});
|
||||||
|
|
||||||
if (postcss) {
|
if (isPostCSSAvailable) {
|
||||||
result = await postcss.process(result.css, {
|
if (typeof postcssProcessor === 'undefined') {
|
||||||
|
postcssProcessor = postcss([
|
||||||
|
autoprefixer,
|
||||||
|
]);
|
||||||
|
}
|
||||||
|
|
||||||
|
result = await postcssProcessor.process(result.css, {
|
||||||
from: outfile,
|
from: outfile,
|
||||||
to: outfile,
|
to: outfile,
|
||||||
map: {
|
map: {
|
||||||
|
|||||||
@@ -1,14 +1,25 @@
|
|||||||
/**
|
/**
|
||||||
* @file If available, returns the PostCSS processor with any plugins.
|
* @file If available, returns the PostCSS Processor creator and
|
||||||
|
* any the Autoprefixer PostCSS plugin.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
try {
|
let postcss, autoprefixer;
|
||||||
var { default: postcss } = await import('postcss');
|
|
||||||
let { default: autoprefixer } = await import('autoprefixer');
|
|
||||||
|
|
||||||
postcss = postcss([ autoprefixer ]);
|
try {
|
||||||
|
postcss = await import('postcss');
|
||||||
|
postcss = postcss.default;
|
||||||
|
|
||||||
|
autoprefixer = await import('autoprefixer');
|
||||||
|
autoprefixer = autoprefixer.default;
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
postcss = null;
|
postcss = null;
|
||||||
|
autoprefixer = null;
|
||||||
}
|
}
|
||||||
|
|
||||||
export default postcss;
|
export default postcss;
|
||||||
|
export const plugins = [
|
||||||
|
autoprefixer,
|
||||||
|
];
|
||||||
|
export {
|
||||||
|
autoprefixer
|
||||||
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user