Code Monkey home page Code Monkey logo

unhex's Introduction

Unhex 🎨

A NodeJS package to convert any RGB color to HEX, HSL color or viceversa.

Example

div {
   color: #fff;
   background-color: #0070f3;
}

After running npx unhex@latest with hexToRgb direction.

div {
   color: rgb(255, 255, 255);
   background-color: rgb(0, 112, 243);
}

Want to try it? 🤔

npx unhex@latest

Features ✨

  • Parse any file on a given directory and convert any color to among HSL, HEX and RGB combinations.
  • Custom configuration to:
    • Ignore certain files, dirs...
    • Define which extensions files to parse (.css, .jsx, .scss, ...)

TO-DO 🚧

  • Support HSL.
  • Support HWB.

MIT License

unhex's People

Contributors

aspnxdd avatar

Stargazers

avatar avatar

Watchers

avatar avatar

Forkers

vaishak10

unhex's Issues

feature: select file extension to be completed in a single session.

Description

In order to update color formats for files of different extensions the user gets prompted with the File extensions to convert multiple times until -- option is selected.

Improvement

Instead of getting multiple prompts to select file extensions, the user should be able to select file extensions in a single session.
In order to escape this session a key press ( like a ESC key ) has to be kept in place rather than selecting -- which doesn't give much information to the user on this option being the end point for this session.
For the ESC key scenario a text message similar to [Press ESC key to end session] can be placed at the bottom of extensions options.

Existing Flow

$ npx unhex@latest
? File extensions to convert .css
Extensions selected:  .css
? File extensions to convert .jsx
Extensions selected:  .css, .jsx
? File extensions to convert .scss
Extensions selected:  .css, .jsx, .scss
? File extensions to convert --
Extensions selected:  .css, .jsx, .scss

Proposed Flow

Case 1: 
$ npx unhex@latest
? File extensions to convert 
 ❯ * 
  .css 
  .jsx 
  .tsx 
  .scss 
  .svelte 
  .vue 
[Press ESC key to end session]

Case 2: 
  Iteration 1: Select 1st extension
  $ npx unhex@latest
  ? File extensions to convert 
    * 
   ❯ .css 
    .jsx 
    .tsx 
    .scss 
    .svelte 
    .vue 
  Extensions selected:  .css
  [Press ESC key to end session]

  Iteration 2:  Select 2nd extension
       $ npx unhex@latest
      ? File extensions to convert 
        * 
       .css 
        .jsx 
        ❯ .tsx 
        .scss 
        .svelte 
        .vue 
      Extensions selected:  .css, .tsx
      [Press ESC key to end session]

 Iteration 3:  Press ESC key
    $ npx unhex@latest
    ? File extensions to convert 
    Extensions selected:  .css, .tsx

Note: I can be the assignee for this update as I find this package very useful for color scheme refactors.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.