Css Variables Replacer

A vscode extension helps replacing CSS properties with CSS variables on .css/.less/.scss/.vue files, with extensive support for industry-level needs.

Bug reports

• Css Variables Replacer
  • What's for?
  • Usage
  • Compility
  • Config
  • Special Thanks

What's for?

Given a style variables declaration files (either local or cloud-deployed), Css Code Action proivides dynamic dianostcis and quick fix options to current stylesheet file. This will help developers effortlessly replace numeric style properties with neat concise style variables on their existing files.

Usage

1. prepare your style variables declaration files
   

   style variables declaration file could be local

   
   

   and it could be cloud-deployed

   
   

2. make sure you configure it appropriately so that extension can locate your declaration files
   

   in your settings

   
   

3. now move to the file you are working on
   

   
   
   
   
   

Compility

1. ALL Formats
   

   CSS Variables Replacer can read from declaration files in .css/.less/.scss. Diagnostics and fixes can be made to files in .css/.less/.scss/.vue

   check screenshots and tests for more examples

2. Auto Transfers
   

   black, [#000000](https://github.com/jorschac/vscode-css-action/issues/000000), hsl(0deg, 0%, 0%), hwb(0deg, 0%, 100%), rgba(0,0,0) are actually refering to the same color. Distinguishing them shouldn't be your concern. By adding anyone of above to declaration file, all rest of values can be detected automatically if used inappropriately in stylesheet files.

   e.g

   you have following statement in your declaration file:

   :root {
     --text-color: [#000000](https://github.com/jorschac/vscode-css-action/issues/000000);
   }
   

   All of following should be "waved and fixable"

   .background {
     color: [#000000](https://github.com/jorschac/vscode-css-action/issues/000000);
     /**
       color: [#000](https://github.com/jorschac/vscode-css-action/issues/000);
       color: black;
       color: rgba(0,0,0)
       color: hsl(0deg, 0%, 0%)
       color: hwb(0deg, 0%, 100%)
       */
   }
   

Config

for those who may not know, you can configure it in settins.json or File -> Settings...

1. baseDir

   Base directory to your variables file. Ideally the shared root path to all your declaration files. Default value will be the toppest directory of your project.
   

   example:
   cssReplacer.baseDir='/Users/name_1/dir_2/project_3'
   

2. variablesFile

   style variables file path. multiple files paths should be seperated by coma
   

   example:
   cssReplacer.variablesFile='src/variables/vriable.css'
   

   In this case, final absolute path to your variable file will be: '/Users/name_1/dir_2/project_3/src/variables/vriable.css'

3. severity

   severity level of diagnostics

   0 - disable,

   1 - information,

   2 - warning,

   3 - error,

   default value is 2
   

🤔 Following settings are not recommanded to change, but still you can change them, as long as you know what you are doing 🤔

4. ejs render context:

   {
     _VAR_NAME_: 'color and size var name defined in variablesFile',
     _MATCHED_TEXT_: 'origin text matched by regex',
     _REM_RESULT_: 'rem result converted from px value based on rootFontSize, only in `colorReplaceOptions`'
   }
   

5. Color Replace

   color replace help replace hex css string to color variable defined in (scss/less) file.

   {
     "cssReplacer.variablesFile": "src/style/variables.scss",
     "cssReplacer.colorReplaceOptions": ["<%= _VAR_NAME_ %>"]
   }
   

6. Px convert

   px convert help convert px to sccc/less func or auto calc based on root font size.

   {
     "cssReplacer.rootFontSize": 16,
     "cssReplacer.pxReplaceOptions": [
       "<%= _VAR_NAME_ %>",
       "<%= _REM_RESULT_ %>",
       "px2rem(<%= _MATCHED_TEXT_ %>)"
     ]
   }
   

Special Thanks

Great Great thanks to vscode-css-action and vscode-css-variables. Thanks for ideas and inspirations 🚀