m5x5 / sourcesync

Tool to bidirectionally sync changes in CSS files between browser's DevTools and Sass/PostCSS/etc sources

SourceSync 🚀

SourceSync keeps your CSS source files in sync with your browser's dev tools. It works with PostCSS, LightningCSS, SASS or plain CSS. Enjoy the convenience of real-time browser-to-source CSS editing.

Table of Contents

• SourceSync 🚀
  • Table of Contents
  • Features
  • Installation
  • Usage
    • As a Library
    • Command Line Interface (CLI)
  • Contribute
  • License

Features

• Bidirectional sync: Edit your CSS in the browser's dev tools, and see those changes in your original source files.
• Utilizes CSS source maps: SourceSync intelligently parses the source maps to locate the correct lines in the source file.
• Fast: Implements an efficient line diffing algorithm to locate changes quickly.

Important Tasks

• PostCSS and SASS support still needs to be added.
• SourceSync needs to work with minified CSS files.
• SourceSync needs to have a Vite integration and or watch the original files for changed and transpile them.

Installation

npm install sourcesyncjs

Usage

As a Library

Import and use SourceSync in your Node.js application:

import { SourceSync } from "sourcesyncjs";

// Initialize SourceSync with the path to your source and output files
const sync = new SourceSync("path/to/source", "path/to/output");

// Start the synchronization process
sync.startSync();

Command Line Interface (CLI)

You can also use SourceSync from the command line:

npx sourcesync path/to/source path/to/output

Or, if you have it installed globally:

sourcesync path/to/source path/to/output

Contribute

SourceSync is an open source project, and contributions are welcome! Whether you're fixing bugs, improving the documentation, or proposing new features, we would love to have your help.

If you're new to the project and want to help, a great first step would be looking at our open issues with the "good first issue" label. These issues are especially suited for new contributors.

If you want to contribute, please:

1. Fork the repository and create your branch from main.
2. Make your changes and validate them.
3. Issue that pull request!

For more details, please check the CONTRIBUTING.md file.

License

SourceSync is MIT licensed.