Important

This plugin was originally created at a time when :disabled was not supported in all popular browsers.

You likely no longer need this plugin, but just in case, it has been updated to support PostCSS v8.

PostCSS Disabled

PostCSS plugin to add a disabled attribute and/or a disabled class when the :disabled pseudo class is present.

/* Input */
.foo:disabled {
  background-color: #f9f9f9;
}

/* Output */
.foo:disabled,
.foo[disabled] {
  background-color: #f9f9f9;
}

Usage

See PostCSS usage docs for your specific environment.

plugins: [
  require('postcss-disabled')({
    addAttribute: true,
    addClass: true,
  }),
];

Options

addAttribute

• type: Boolean
• default: true
• Adds a [disabled] attribute selector

/* Input */
.foo:disabled {
  background-color: #f9f9f9;
}

/* Output */
.foo:disabled,
.foo[disabled] {
  background-color: #f9f9f9;
}

addClass

• type: Boolean
• default: false
• Adds a .disabled class selector

/* Input */
.foo:disabled {
  background-color: #f9f9f9;
}

/* Output */
.foo:disabled,
.foo.disabled {
  background-color: #f9f9f9;
}

Contributing

• Writing a PostCSS plugin