postcss-prepend-plugin

©️ postcss-prepend

• 📅19-22-2023 📌Version 1.0.6
• 💻NajibRachid 🟣ANMOON 🏢 XHUB

A simple PostCSS plugin that prepends a comment to the top of your CSS files.

This plugin allows you to prepend a comment to your CSS files containing text such as copyrights, author information, or any other message you want to display. Additionally, you can choose to add a custom ASCII Art generated from any text using the Figlet library.

keywords: CSS Prepend, PostCSS, CSS prepender, PostCSS plugin, production CSS files, CSS Copyrights, Code customization, CSS customization, CSS comments, ASCII Art, Figlet, Code formatting, CSS preprocessing, Build tools, MIT License, licensing, author information, on top of CSS File, begining of css file, Prepend Comment to CSS file, PostCSS comment prepend, Code Protection.

Check Also: PostCSS-Obfuscator | PostCSS-mobile-first

---

Installation

# npm
npm install postcss-prepend-plugin --save-dev

# yarn
yarn add postcss-prepend-plugin --dev

Usage

To use the plugin, first import it into your PostCSS configuration file:

//postcss.config.js
const prepend = require("postcss-prepend-plugin");

module.exports = {
  plugins: [
    // Add any other plugins you need here
    prepend(options), //pass options
  ],
};

Examples

Here's some examples of how you can use postcss-prepend to add a comment to your CSS files:

Comment only

For message only, you only specify the message attribute.

prepend({message: `© ${new Date().getFullYear()}|ANMOON All rights reserved.`}),

After running your CSS through postcss-prepend, the resulting file will look like this:

/* © 2023|ANMOON All rights reserved. */
body {
  /* ... */
}
/* ... */

Comment with ASCII Art

To generate an ASCII Art specify these arguments, we use figletJs Js to generate ASCII Art. so check all variants there.

prepend({
    message: `© ${new Date().getFullYear()}. All rights reserved.`,
    spacesBefore: 13,
    name: 'ANMOON',
    artOptions: {
        font: "Modular",
        width: 60,
        horizontalLayout: "fitted",
        verticalLayout: "fitted",
        whitespaceBreak: false,
    },
}),

Once you've processed your CSS using postcss-prepend, your resulting file will have a comment added to the top after the ASCII Art, like this:]

/* 
 _______  __    _  __   __  _______  _______  __    _ 
|   _   ||  |  | ||  |_|  ||       ||       ||  |  | |
|  |_|  ||   |_| ||       ||   _   ||   _   ||   |_| |
|       ||       ||       ||  | |  ||  | |  ||       |
|       ||  _    ||       ||  |_|  ||  |_|  ||  _    |
|   _   || | |   || ||_|| ||       ||       || | |   |
|__| |__||_|  |__||_|   |_||_______||_______||_|  |__|
             © 2023. All rights reserved.
 */
body {
  /* ... */
}
/* ... */

npm scripts example

    "postcss": "postcss src/**/*.css  --dir build",
    "postcss:watch": "postcss src/**/*.css --dir build --watch"

Contributing

Contributions are welcome! If you find a bug or have a feature request, please open an issue on the GitHub repository.

Tests included:

   npm test

License

This project is licensed under the MIT License. See the LICENSE file for more information.