Skip to content

PostCSS

PostCSS runs plugins that read and transform CSS before your website delivers it to a browser. The effect depends on which plugins your project has configured.

Visit PostCSS

When does a project need PostCSS?

Check what you want to change about the stylesheet that reaches the browser. PostCSS gives a build tool a place to run plugins on your CSS. It does not supply a button design or form layout. Your source file or a separate framework still defines those styles.

If a project uses Sass and PostCSS together, Sass can compile the source styles into CSS first. A PostCSS plugin can then change that CSS before the browser gets it. Check your framework’s setup before adding a second CSS pipeline.

What does a browser compatibility plugin actually do?

Autoprefixer can add browser-specific forms of certain CSS declarations for the browsers you target. Browserslist is where a project can describe that target set. Inspect the output to see which declarations changed.

A prefix helps only when a browser implements the feature under that prefixed name. It does not give a browser a feature it lacks. Check the actual page in a browser you support, especially layout and focus states.

What should you keep if you change the build?

Keep the original styles, the plugin configuration and browser targets, and the dependency lockfile that records versions. Rebuild and check the generated CSS. Avoid editing only the generated file, because the next build can replace those changes.

PostCSS is MIT-licensed. Check the terms of any plugin or assets you add separately. If a plugin upgrade changes the output, keep the previous configuration available until you confirm the page still looks and behaves as intended.

How can you tell whether the build is doing the intended work?

Use three boxes on paper for the source stylesheet, the configured plugin and the resulting stylesheet. Keep your real repository and deployment out of the exercise.

  1. Choose one behavior to preserve
    Sketch a form that remains readable at phone width. Pick the browser versions you need to cover.
  2. Mark which tool makes the change
    Write Autoprefixer beside a rule the target browser supports with a prefix. In the output box, mark the matching additional declaration only when the targets need it.
  3. Write how you would verify it
    Plan to compare a clean build with the prior output and open the form in a supported browser. If the layout or focus changes unexpectedly, check the source rule, targets and plugin version before changing production.