Как синхронизировать асинхронною функцию?

Question

[SomeHuman2]

Здравствуйте, я минимизирую css с помощью css-nano, однако он может работать только в асинхронном режиме.
Пример функции минимизации с использованием css-nano

const postcss = require("postcss");
const cssnano = require("cssnano");
const cssNanoPresetAdvanced = require("cssnano-preset-advanced");

let MINIFY_CSS = function (code) {
          postcss(cssnano({ preset: cssNanoPresetAdvanced }))
            .process(code)
            .then(function (result) {
              console.log(result.css);
            });
        },

использовать можно к примеру
MINIFY_CSS("html{background:green;}")
Однако проблемы начинаются когда я пытаюсь возвращать значение, а не просто выводить в консоль. Это необходимо для работоспособности цепочек кода к примеру

EXTRACT_CSS(MINIFY_CSS(require("!!raw-loader!sass-loader!./MyScss.scss")))

Моя попытка в виде

let MINIFY_CSS= function (code) {
          let minified;
          async () => {
            await postcss(cssnano({ preset: cssNanoPresetAdvanced }))
              .process(code)
              .then(function (result) {
                minified = result.css;
              });
          };
          console.log(minified);
          return minified;
        },

Выводит undefined, что значит что значение возвращается до завершения асинхронной функции и нечего не работает...
Как я могу улучшить свой код или синхронизировать асинхронною функцию?

Comments

[Алексей Дубровин]

Эм у вас код работает ровно так как вы написали.
Подумайте в этом ключе. ( Скорее вы не до конца поняли как промис работает)
Почему в 1 случае с консолью у вас он дожидается вызова. А в другом нет.
Перепишите её сначала без (async/await)

[Lynn «Кофеман»]

> Как синхронизировать асинхронною функцию?

Никак. Вообще никак. Нет, и так тоже не выйдет.

[SomeHuman2]

Lynn «Кофеман», позвольте спросить как я могу переделать подход с цепочками функций, чтоб получить нужный результат асинхронным путем)

[Aetae]

SomeHuman2, Наверное как-то так:

import("!!raw-loader!sass-loader!./MyScss.scss")
  .then(MINIFY_CSS)
  .then(EXTRACT_CSS)
  .then(console.log);

Смотря чего именно вы хотите.

Только у вас в тегах webpack, а webpack это вам не gulp, он сам прогонит через цепочку loader'ов, что заданы в конфиге. А если нужно что-то особое - можно и свой loader написать, это совсем не сложно.

[SomeHuman2]

Aetae, Спасибо, отличный подход, однако могу ли я использовать его в выражениях с ejs
К примеру

<%= require("!!raw-loader!sass-loader!../extensions/main.scss").default %>

Вернет мне css-текст в index.ejs, тогда как

<%= import("!!raw-loader!sass-loader!../extensions/main.scss") %>

вместо текста-css в html будет [object Promise]
Я использовал такие цепочки как препроцессор для разработки и оптимизации noscript страницы, и мне нужно чтоб в конце цепочек вернулся просто css-текст, возможно ли это

[Aetae]

SomeHuman2, ну значит таки напиши(или найди готовые) лоадеры и добавь в конфиг вебпака, а потом пиши что-то типа:

require("!!raw-loader!extract-css-loader!minify-css-loader!sass-loader!../extensions/main.scss").default

или настрой цепочку лоадеров по особому параметру урл:
require("./extensions/main.scss?сделать-хорошо")

В общем углубись в доки вебпака.