nvim-px-to-rem

Easily work with rem in your css files

A Neovim plugin written in lua to convert px to rem as you type. It also provide commands and keymaps to convert px to rem and a virtual text to visualize your rem values.

nvim-px-to-rem.mp4

⚡️ Features

• Easily convert px to rem as you type (require nvim-cmp or blink.cmp)
• Convert px to rem on a single value or a whole line
• Visualize your rem values in a virtual text

📋 Installation

• With packer.nvim

use {
    'jsongerber/nvim-px-to-rem',
    config = function()
        require('nvim-px-to-rem').setup()
    end
}

• With vim-plug

Plug 'jsongerber/nvim-px-to-rem

" Somewhere after plug#end()
lua require('nvim-px-to-rem').setup()

• With folke/lazy.nvim

-- add this to your lua/plugins.lua, lua/plugins/init.lua,  or the file you keep your other plugins:
{
    'jsongerber/nvim-px-to-rem',
    config = true,
    --If you need to set some options replace the line above with:
    -- config = function()
    --     require('nvim-px-to-rem').setup()
    -- end,
}

⚙ Configuration

-- Those are the default values and can be ommited
require("nvim-px-to-rem").setup({
    root_font_size = 16,
    decimal_count = 4,
    show_virtual_text = true,
    add_cmp_source = false,
    filetypes = {
        "css",
        "scss",
        "sass",
    },
})

Option	Description	Default value
root_font_size	The font size used to convert px to rem	16
decimal_count	The number of decimal to keep when converting px to rem	4
show_virtual_text	Show the rem value converted in px in a virtual text	true
add_cmp_source	Add a nvim-cmp source to convert px to rem as you type (require nvim-cmp), disable if you use blink.cmp	false

nvim-cmp integration

Show configuration for nvim-cmp

nvim-cmp to convert px to rem as you type.

require("cmp").setup({
    -- other config
    sources = cmp.config.sources({
        { name = "nvim_px_to_rem" },
        -- other sources
    }),
})

[!IMPORTANT] Do not forget to set add_cmp_source to true in the setup function

blink.cmp integration

Show configuration for blink.cmp

nvim-cmp to convert px to rem as you type.

return {
  'saghen/blink.cmp',
  dependencies = {
    'jsongerber/nvim-px-to-rem',
    -- other dependencies
    -- …
  },
  opts = {
    sources = {
      default = {
        -- you need to add this line
        'nvim-px-to-rem',
        -- your other sources
        'lsp',
        'path',
        'snippets',
        'buffer',
        'lazydev',
      },
      providers = {
        ['nvim-px-to-rem'] = {
          module = 'nvim-px-to-rem.integrations.blink',
          name = 'nvim-px-to-rem',
        },
        -- other providers
        -- …
      },
    },
  },
}

🧰 Commands

Command	Description
:PxToRemCursor	Convert px to rem under cursor
:PxToRemLine	Convert px to rem on the whole line

📚 Keymaps

Warning

This plugin used to provide default keymaps but it was removed as it was poorly chosen. If you used default keymaps you will need to set them yourself.

You can set keymaps like so:

vim.api.nvim_set_keymap("n", "<leader>pxx", ":PxToRemCursor<CR>", { noremap = true })
vim.api.nvim_set_keymap("n", "<leader>pxl", ":PxToRemLine<CR>", { noremap = true })

⌨ Contributing

PRs and issues are always welcome. Make sure to provide as much context as possible when opening one.

🎭 Motivations

Inspired by the VS Code plugin px to rem & rpx & vw (cssrem).
There is two vim plugin to convert px to (r)em but those were missing some feature I wanted such as the virtual text and the nvim-cmp integration:

• vim-px-to-em
• vim-px-to-rem

📝 TODO

• Use Treesitter
• Write tests
• Write documentation

📜 License

MIT © jsongerber

Shameless plug

See my other plugins:

• thanks.nvim: A plugin to show your appreciation to the maintainers of the plugin you use.
• telescope-ssh-config: A plugin to list and connect to ssh hosts with telescope.nvim.