Stylesnap

Features

• Extracts class names and tags from your HTML/JSX files.
• Optimizes and minimizes CSS files based on your usage.
• Supports custom configuration via stylesnap.config.json.
• Works seamlessly with frameworks like Bootstrap, TailwindCSS, and custom CSS.
• Generates a minified CSS file for better performance.

Installation

Install Stylesnap as a development dependency using npm:

npm install stylesnap --save-dev

Alternatively, use npx to run it directly:

npx stylesnap

Usage

Stylesnap can be used via the command line. It supports multiple options for flexibility and customization.

Command-Line Options

npx stylesnap [options]

Options:

• --init

  • Initializes the configuration file stylesnap.config.json.
  • Example:

    npx stylesnap --init

• -c, --content <globPattern>

  • Glob pattern to specify content files to scan for class names and tags.
  • Example:

    npx stylesnap -c "./src/**/*.html"

• -C, --css <cssPath>

  • Path to the main CSS file to optimize.
  • Example:

    npx stylesnap -C "./src/styles.css"

• -d, --defaultCss <defaultCssPath>

  • Path to a default CSS file to include in the output.
  • Example:

    npx stylesnap -d "./src/default.css"

• -o, --output <outputPath>

  • Path to save the generated optimized CSS file.
  • Example:

    npx stylesnap -o "./dist/optimized.css"

• --minifyCss

  • Minifies the final CSS file for optimal performance.
  • Example:

    npx stylesnap --minifyCss

Configuration

Stylesnap uses a configuration file named stylesnap.config.json to customize its behavior. Below is an example configuration:

{
  "content": ["./src/**/*.html", "./src/**/*.jsx"],
  "css": "./node_modules/bootstrap/dist/css/bootstrap.css",
  "defaultCss": "./src/styles.css",
  "output": "./dist/optimized.css",
  "minify": true
}

Configuration Fields

• content: An array of glob patterns to specify the content files where class names and tags are extracted.
• css: Path to the main CSS file to optimize.
• defaultCss: Path to the default CSS file to include in the output.
• output: Path to save the generated CSS file.
• minify: Boolean to indicate whether to minify the final CSS.

Example Workflow

1. Initialize the configuration file:

   npx stylesnap --init

2. Update stylesnap.config.json with your project-specific settings:

   {
     "content": ["./src/**/*.html", "./src/**/*.jsx"],
     "css": "./node_modules/bootstrap/dist/css/bootstrap.css",
     "defaultCss": "./src/styles.css",
     "output": "./dist/optimized.css",
     "minify": true
   }

3. Run Stylesnap:

   npx stylesnap

4. The optimized CSS file will be saved at the path specified in the output field (e.g., ./dist/optimized.css).

Benefits

• Reduces CSS file size, improving page load speed.
• Eliminates unused CSS, enhancing maintainability.
• Works out of the box with popular CSS frameworks like Bootstrap and TailwindCSS.
• Customizable to fit any project structure or requirement.

License

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

Author

Developed by Ravi Kishan ([email protected]).

Contributions

Contributions, issues, and feature requests are welcome! Feel free to open an issue or submit a pull request on the GitHub repository.

Start optimizing your CSS today with Stylesnap! 🚀