Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

rollup-plugin-postcss

Package Overview
Dependencies
Maintainers
5
Versions
87
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

rollup-plugin-postcss

Seamless integration between Rollup and PostCSS

  • 4.0.2
  • latest
  • Source
  • npm
  • Socket score

Version published
Maintainers
5
Created

What is rollup-plugin-postcss?

rollup-plugin-postcss is a Rollup plugin that allows you to import and process CSS files with PostCSS. It supports various PostCSS plugins, CSS modules, and can even extract CSS into separate files.

What are rollup-plugin-postcss's main functionalities?

Importing CSS

This feature allows you to import CSS files directly into your JavaScript or TypeScript files. The imported styles can then be used within your components.

import styles from './styles.css';

Using PostCSS Plugins

This feature allows you to use PostCSS plugins like autoprefixer to process your CSS. The example demonstrates how to configure the plugin to use autoprefixer.

import postcss from 'rollup-plugin-postcss';
import autoprefixer from 'autoprefixer';

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'cjs'
  },
  plugins: [
    postcss({
      plugins: [
        autoprefixer()
      ]
    })
  ]
};

Extracting CSS

This feature allows you to extract CSS into a separate file instead of including it in the JavaScript bundle. The example shows how to configure the plugin to extract CSS.

import postcss from 'rollup-plugin-postcss';

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'cjs'
  },
  plugins: [
    postcss({
      extract: true
    })
  ]
};

CSS Modules

This feature allows you to use CSS Modules, which scope CSS by automatically creating unique class names. The example demonstrates how to enable CSS Modules in the plugin configuration.

import postcss from 'rollup-plugin-postcss';

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'cjs'
  },
  plugins: [
    postcss({
      modules: true
    })
  ]
};

Other packages similar to rollup-plugin-postcss

Keywords

FAQs

Package last updated on 22 Nov 2021

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc