Использование postcss в узле для изменения строки CSS

Question

У меня есть строка JavaScript css:

let style = '' +
  'body {display: flex;} ' +
  'body {background: red;}' +
  '#id5 {color: blue;}' +
  '$id7 {color: green;}' +
  '#id5 {color: yellow;}';

Я пытаюсь импортировать postcss в свой проект, чтобы я мог использовать комбинированные дубликаты селекторов: https://www.npmjs.com/package/postcss-combine-duplicated-selectors

const postcss = require('postcss-js');
const postcsscombine = require('postcss-combine-duplicated-selectors');

let combiner = postcss.sync([ postcsscombine ]);
let newStyle = combiner(style);

console.log(newStyle);

Желаемый результат будет примерно таким:

'body {display: flex; background: red;} #id5 {color: yellow} #id7 {color: green;}'

Фактический вывод

{ '0': 'b',
  '1': 'o',
  '2': 'd',
  '3': 'y',
  '4': ' ',
  '5': '{',
  '6': 'd',
  ...
  '100': 'l',
  '101': 'o',
  '102': 'w',
  '103': ';',
  '104': '}' }

Похоже, что postcss обрабатывает входящие объекты стиля, а не строки. Есть ли способ исправить это, чтобы получить желаемый результат?

Answer 1

Если вы хотите использовать PostCSS для работы со строкой CSS, просто сделайте следующее:

const postcss = require('postcss');
const postcsscombine = require('postcss-combine-duplicated-selectors');

let style = 'body {display: flex;}, body {background: red;}, #id5 {color: blue;}, $id7 {color: green;}, #id5 {color: yellow;}';

postcss([postcsscombine])
  .process(style , {from: 'undefined'})
  .then(result => {
    console.log(result.css);
  });

Вам нужно установить from Свойство объекта параметров процесса 'неопределенное'. Кроме того, некоторые плагины являются асинхронными, поэтому лучше использовать интерфейс обещаний.