Блог

Проблема

Я построил синтаксис postcss (синтаксический анализатор, маркер, строковый код, все работает), чтобы заставить postcss распознавать синтаксис hubl (hubspot) в css.

Hubl-это в основном Jinja, и на hubspot разрешено использовать в CSS-файлах.

Если я использую свой синтаксис postcss с чистым PostCSS (без веб-пакета), все работает так, как ожидалось. Однако, когда я упаковываю все это в webpack и использую загрузчик postcss, кажется, что postcss запускается дважды.

Первый проход выполняется с использованием моего синтаксиса postcss-hubl, а второй проход использует собственный синтаксис postcss. Это приводит к тому, что мой css-файл перезаписывается и загружается не так, как ожидалось.

Установка

postcss.config.js

 const HublSyntax = require('@spingroup/postcss-hubl/lib/hubl-syntax');  module.exports = {  syntax: HublSyntax,  mode: "production",  to: "./dist/main.css",  plugins: [] };  

webpack.config.js

 const MiniCssExtractPlugin = require('mini-css-extract-plugin');  const path = require('path');  module.exports = {  plugins: [  new MiniCssExtractPlugin({  filename: "[name].css",  }),  ],  entry: {  'index': './src/index.js',  },  output: {  filename: '[name].js',  path: path.resolve(__dirname, 'dist'),  },  mode: 'production',  module: {  rules: [  // Relevant config for MiniCssExtractPlugin:  // (the order of `use` is important)  {  test: /.css$/i,  use: [  MiniCssExtractPlugin.loader,  'css-loader',  'postcss-loader',  ],  },  ],  }, };  

styles.css

 {% if x %} .test{  text-align: center; } {% endif %}  

Expected output

index.css

 {% if hubl statement %} .test{  text-align: center; } {% endif %}  

Actual Output

 /*{% if hubl statement %}*/.test{  text-align: center; } /*{% endif %}*/  

My syntax extension treats hubl expressions as comments and removes the comments as part of the build process. However, these comments are added back in when the Original syntax is used on the running of css-loader.

In the debugging process I am logging a whole slew of things in both my plugin and the native node modules for css-loader, postcss-loader, and postcss so that I can better understand the flow of events.

Flow-log

 ----------- Post CSS Loader Running ------------- Running new parser ==========================  HUBL FIRE ------------------- HUBL FIRE ------------------- Hubl Stringify Running Hubl Stringify Running HUBL FIRE STRING start _-_--------------- HUBL FIRE STRING END _-_--------------- Hubl Stringify Running Hubl Stringify Running Hubl Stringify Running HUBL FIRE STRING start _-_--------------- HUBL FIRE STRING END _-_--------------- ----------- CSS Loader Running ------------- OG STRINGIFY OG STRINGIFY OG STRINGIFY OG STRINGIFY OG STRINGIFY  

Есть какие-либо предложения о том, как заставить загрузчик CSS использовать тот же синтаксис, что и postcss-загрузчик/postcss? Я вообще задаю правильный вопрос? Где я должен искать решение этой проблемы?