Docs
Blog
Docs
Blog

PostCSS

PostCSS is a powerful tool for transforming CSS with JavaScript. It allows developers to use plugins for various tasks like autoprefixing, minifying, and using future CSS features today. By default, if you have a postcss.config.js file in your project root, Extension.js will automatically pick it up and apply the transformations defined there.

Starter PostCSS Template

Extension.js comes with a template that includes PostCSS, which you can use to get started with PostCSS quickly in your extension development. This template ensures that PostCSS is correctly integrated and ready to be used with common plugins like autoprefixer and cssnano.

npx extension@latest create my-extension --template=postcss

Using PostCSS with an Existing Extension

To use PostCSS with your existing extension, you need to install the necessary dependencies and create a postcss.config.js file at the root of your project.

Step 1: Install Required Dependencies

npm install -D postcss autoprefixer

Step 2: Create a PostCSS Configuration File

After installing the required dependencies, create a postcss.config.js file in the root of your project. Here’s an example configuration:

postcss.config.js
module.exports = {
  plugins: [
    require('autoprefixer'), Automatically adds vendor prefixes to your CSS
    require('cssnano')({ preset: 'default' }) Minifies the CSS for production
  ]
}

This setup uses autoprefixer to add vendor prefixes for better cross-browser compatibility and cssnano to optimize and minify your CSS during production builds.

Usage with Manifest and HTML Files

PostCSS can be applied to all CSS-like files in your extension, whether they are directly referenced in your manifest.json or in an HTML file within your project. You can use various CSS file formats (e.g., .css, .less, .scss) and apply PostCSS transformations to them during the build process.

1. In manifest.json

You can reference stylesheets that will be processed by PostCSS in your manifest like so:

{
  "name": "My Extension",
  "version": "1.0",
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "css": ["./styles/content.css"]
    }
  ]
}

Any CSS file referenced here will be processed by PostCSS if a configuration file exists. This ensures that your styles are optimized and compatible across different browsers.

2. In HTML Files

Similarly, if you are working with HTML files in your /pages folder or any other location, you can include PostCSS-processed CSS like this:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Extension Page</title>
    <link rel="stylesheet" href="./css/styles.css" />
  </head>
  <body>
    <div id="content">
      <h1>Welcome to My Extension</h1>
    </div>
  </body>
</html>

The CSS file referenced here (./css/styles.css) will be processed by PostCSS based on the rules defined in your postcss.config.js file.

Best Practices

  • Keep CSS Modular: Whenever possible, organize your CSS using smaller, reusable modules. This improves maintainability and scalability.
  • Optimize for Production: Use tools like cssnano to minimize the size of your CSS in production, reducing load times and improving performance.
  • Leverage PostCSS Plugins: There are many PostCSS plugins available for different use cases. For example, you can use postcss-preset-env to use future CSS features today or postcss-import to enable @import syntax for your stylesheets.

Next Steps

  • Learn more about PostCSS and its ecosystem of plugins.