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

postcss-prefixwrap

Package Overview
Dependencies
Maintainers
1
Versions
76
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

postcss-prefixwrap

A PostCSS plugin that is used to wrap css styles with a css selector to constrain their affect on parent elements in a page.

  • 1.29.0
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
63K
increased by14.13%
Maintainers
1
Weekly downloads
 
Created
Source

PostCSS Prefix Wrap

CI GitHub Pipeline Release GitHub Pipeline NPM Downloads Per Week

A PostCSS plugin which prepends a selector to CSS styles to constrain their effect on parent elements in a page.

SupportsVersions
NodeJSv12, v14, v16, v17
PostCSSv7, v8

How to use this plugin?

⚠️ These instructions are only for this plugin. See the PostCSS website for framework information.

Install

Package ManagerCommand
NPMnpm install postcss-prefixwrap --save-dev --save-exact
PNPMpnpm add postcss-prefixwrap --save-dev --save-exact
Yarnyarn add postcss-prefixwrap --dev --exact

Configure

Add to your PostCSS configuration.

const PostCSS = require("gulp-postcss");
const PrefixWrap = require("postcss-prefixwrap");

PostCSS([PrefixWrap(".my-custom-wrap")]);

Container

Add the container to your markup.

<div class="my-custom-wrap"><!-- Your existing markup. --></div>

View

View your CSS, now prefix-wrapped.

Before

p {
    color: red;
}

body {
    font-size: 16px;
}

After

.my-custom-wrap p {
    color: red;
}

.my-custom-wrap {
    font-size: 16px;
}

What options does it have?

Minimal

The minimal required configuration is the prefix selector, as shown in the above example.

PrefixWrap(".my-custom-wrap");

Ignored Selectors

You may want to exclude some selectors from being prefixed, this is enabled using the ignoredSelectors option.

PrefixWrap(".my-custom-wrap", {
    ignoredSelectors: [":root", "#my-id", /^\.some-(.+)$/],
});

Prefix Root Tags

You may want root tags, like body and html to be converted to classes, then prefixed, this is enabled using the prefixRootTags option.

PrefixWrap(".my-container", {
    prefixRootTags: true,
});

With this option, a selector like html will be converted to .my-container .html, rather than the default .my-container.

File Whitelist

In certain scenarios, you may only want PrefixWrap() to wrap certain CSS files. This is done using the whitelist option.

PrefixWrap(".my-custom-wrap", {
    whitelist: ["editor.css"],
});

File Blacklist

In certain scenarios, you may want PrefixWrap() to exclude certain CSS files. This is done using the blacklist option.

If whitelist option is also included, blacklist will be ignored.

PrefixWrap(".my-custom-wrap", {
    blacklist: ["colours.css"],
});

Nesting

When writing nested css rules, and using a plugin like postcss-nested to compile them, you will want to ensure that the nested selectors are not prefixed. This is done by defining the nested property and setting the value to the selector prefix being used to represent nesting, this is most likely going to be "&".

PrefixWrap(".my-custom-wrap", {
    nested: "&",
});

As an example, in the following CSS that contains nested selectors.

.demo {
    &--lite {
        color: red;
    }
}

❌ Without the nested configuration option defined:

.my-custom-wrap .my-custom-wrap .demo--lite {
    color: red;
}

✅ With the tested configuration defined:

.my-custom-wrap .demo--lite {
    color: red;
}

How to contribute?

Read our Contributing Guide to learn more about how to contribute to this project.

Is this project secure?

Read our Security Guide to learn how security is considered during the development and operation of this plugin.

License

The MIT License is used by this project.

Keywords

FAQs

Package last updated on 19 Feb 2022

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