@parcel/transformer-css

What is @parcel/transformer-css?

@parcel/transformer-css is a plugin for the Parcel bundler that handles CSS transformations. It allows you to process CSS files, including features like CSS modules, PostCSS, and automatic vendor prefixing.

What are @parcel/transformer-css's main functionalities?

CSS Modules

CSS Modules allow you to scope CSS by automatically creating unique class names. This prevents class name collisions in larger projects.

/* styles.module.css */
.button {
  background-color: blue;
  color: white;
}

// index.js
import styles from './styles.module.css';

document.getElementById('myButton').className = styles.button;

PostCSS

PostCSS is a tool for transforming CSS with JavaScript plugins. In this example, Autoprefixer is used to add vendor prefixes to CSS rules.

/* postcss.config.js */
module.exports = {
  plugins: [
    require('autoprefixer')
  ]
};

/* styles.css */
.button {
  display: flex;
}

// index.js
import './styles.css';

Automatic Vendor Prefixing

Automatic vendor prefixing ensures that your CSS works across different browsers by adding necessary vendor prefixes.

/* styles.css */
.button {
  display: flex;
}

// index.js
import './styles.css';

Other packages similar to @parcel/transformer-css

postcss

PostCSS is a tool for transforming CSS with JavaScript plugins. It is highly flexible and can be used for a variety of tasks such as autoprefixing, linting, and minifying CSS. Unlike @parcel/transformer-css, PostCSS is not tied to a specific bundler and can be used with various build tools.

css-loader

css-loader is a webpack loader that allows you to import CSS files into your JavaScript modules. It supports features like CSS Modules and can be combined with other loaders like style-loader to inject CSS into the DOM. While @parcel/transformer-css is specific to Parcel, css-loader is designed for use with webpack.

style-loader

style-loader is another webpack loader that injects CSS into the DOM. It is often used in conjunction with css-loader to handle CSS imports in JavaScript files. Unlike @parcel/transformer-css, which is a single package for Parcel, style-loader is part of a modular system in webpack.

README

The README file is missing

Changelog

[2.12.0] - 2024-02-28

Added

• Core

  • Add REPL playground for Parcel to the website – Details
  • Improve package manager detection for auto install – Details

• JavaScript

  • Add support for JS macros – Details
  • Statically evaluate constants referenced by macros – Details
  • Upgrade to ESLint 8 – Details
  • Bump swc – Details

• CSS

  • Use lightningcss to implement CSS packager – Details

• Bundler

  • Rename "parentAsset" to "root" for Manual Shared Bundle config and remove unstable prefix – Details

• Web Extensions

  • Add content script world property to manifest schema validation – Details

• Performance

  • Adjacency list optimizations – Details
  • Break up request graph cache serialisation and run after build completion – Details

Fixed

• Core

  • Drop per-pipeline transformation cache – Details
  • Clippy and use napi's Either3 – Details
  • Add lazy/eager cache key to avoid invalid change when switching modes – Details

• JavaScript

  • Remove decl_collector pass and use SWC's unresolved_mark instead – Details

• Bundler

  • Fix multiple css bundles in entry bundle groups issue – Details
  • Allow parallel type change bundles to be reused by async siblings – Details
  • Skip on missing parent asset for manual shared bundles – Details

Unstable

• Add source map support to the inline-require optimizer – Details