Skip to content

Latest commit

 

History

History
45 lines (30 loc) · 2.43 KB

README.md

File metadata and controls

45 lines (30 loc) · 2.43 KB
Raw

CSSRoot to Liquid

CSSRoot to Liquid is a powerful command-line tool that converts CSS variables to Shopify Liquid section settings. With this utility, you can easily make your CSS styles customizable through the Shopify Theme Editor.

This tool is designed to save time and effort for developers who work with Shopify themes, allowing them to focus on other important aspects of the project.

Features

  • Automatically generates Shopify Liquid section settings based on CSS variables
  • Supports color and text type settings
  • Handles nested CSS variables and inherit values
  • Converts RGB values to HEX format for color settings

Installation

To install the tool, you need to have Node.js installed on your computer. Once Node.js is installed, you can easily install CSSRoot to Liquid from npmjs using the following command:

npm i cssroot-2-liquid -g

How to Use

  1. Place your CSS file with variables in the project directory.
  2. Open a terminal/command prompt and navigate to the project directory.
  3. Run the following command: cssroot-2-liquid your-file-name.css
  4. The tool will generate a new .liquid file in the same directory with the corresponding section settings. For a visual demonstration, please refer to these videos:

Basic usage:

Screen.Recording.2023-03-24.at.7.56.00.PM.mov

Usage with Shopify:

Screen.Recording.2023-03-24.at.7.59.34.PM.mov

Future Features and Optimizations

We are constantly working to improve CSSRoot to Liquid and expand its capabilities. Some of the features and optimizations we plan to add in future releases include:

  1. Support for more setting types, such as images, selectors, and range sliders.
  2. A graphical user interface (GUI) to facilitate easier interaction with the tool.
  3. Integration with popular code editors like Visual Studio Code and Atom, as well as Shopify CLI.
  4. The ability to generate Liquid code snippets for individual CSS variables, instead of generating an entire section file.
  5. Improved error handling and reporting to provide more informative messages and suggestions.
  6. Performance optimizations to ensure faster and more efficient code generation.

Your feedback and suggestions are always welcome, as they help us to enhance the tool and make it more useful for the developer community.