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 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, can take a range

📚 Keymaps

This plugin does not set any keymaps by default. You can set keymaps like so:

-- Convert px to rem under cursor
vim.api.nvim_set_keymap("n", "<leader>pxx", ":PxToRemCursor<CR>", { noremap = true })
-- Convert px to rem on the whole line
vim.api.nvim_set_keymap("n", "<leader>pxl", ":PxToRemLine<CR>", { noremap = true })
-- Convert px to rem on all the selected lines
vim.api.nvim_set_keymap("v", "<leader>px", ":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.