PostCSS 8 plugin migration: legacy plugins load but ordering and visitor behavior are unclear

Answers

1. How to tell native vs legacy plugins:
   Native PostCSS 8 plugins export an object that has a postcssPlugin string property (they may also expose process or defaults). Legacy PostCSS 7 plugins are plain functions (or functions wrapped by the compatibility layer) and lack that property.
   

   const plugin = require('some-postcss-plugin');
   console.log(typeof plugin, plugin.postcssPlugin ? 'native' : 'legacy');
   

2. Detecting silent pass‑through:
   Clone the input CSS before processing, run PostCSS, then compare the strings (ignoring insignificant whitespace). If they match, the plugin chain made no changes.
   

   const postcss = require('postcss');
   const input = 'a { color: red; }';
   const output = await postcss([myPlugin]).process(input, { from: undefined });
   if (input.trim() === output.css.trim()) {
     console.warn('Plugin did not transform CSS');
   }
   

3. Controlling execution order:
   PostCSS 8 provides no declared‑dependency mechanism. The only way to influence when a plugin runs is its position in the plugins array; order‑sensitive pairs must be arranged manually.

Likely explanation vs confirmed facts

Likely explanation: The compatibility layer treats legacy plugins as plain functions that receive the CSS once, while native plugins are instantiated as objects and participate in the visitor‑based event flow. This can cause subtle timing differences but does not change the fact that order is still dictated by the array.

Confirmed facts (from PostCSS 8 documentation and the research findings):

• Native plugins expose postcssPlugin; legacy plugins do not.
• PostCSS does not resolve inter‑plugin dependencies; execution follows array order.
• Silent pass‑through can be detected by a pre/post string comparison.

Steps to verify your setup

1. Audit each plugin: log plugin.postcssPlugin to see which are native.
2. Add a test script that processes a known CSS snippet with your full plugin list and checks for equality; warn if any plugin yields no change.
3. For any order‑sensitive pair (e.g., a property‑rewrite transform followed by Autoprefixer), manually place them in the desired order and verify the output differs when swapped.