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
- Easily convert px to rem as you type (require nvim-cmp)
- Convert px to rem on a single value or a whole line
- Visualize your rem values in a virtual text
- 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,
}
-- 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 = true,
disable_keymaps = 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) | true |
disable_keymaps |
Disable the default keymaps | false |
filetypes |
The filetypes to enable the plugin on | {"css", "scss", "sass"} |
If you want to be able to convert px to rem as you type you need to install nvim-cmp and add the plugin to your cmp sources:
require("cmp").setup({
-- other config
sources = cmp.config.sources({
{ name = "nvim_px_to_rem" },
-- other sources
}),
})
Command | Description |
---|---|
:PxToRemCursor |
Convert px to rem under cursor |
:PxToRemLine |
Convert px to rem on the whole line |
Keymap | Description |
---|---|
<leader>px |
Convert px to rem under cursor |
<leader>pxl |
Convert px to rem on the whole line |
You can disable the default keymaps by setting disable_keymaps
to true
and then create your own:
-- Those are the default keymaps, you can change them to whatever you want
vim.api.nvim_set_keymap("n", "<leader>px", ":PxToRemCursor<CR>", {noremap = true})
vim.api.nvim_set_keymap("n", "<leader>pxl", ":PxToRemLine<CR>", {noremap = true})
PRs and issues are always welcome. Make sure to provide as much context as possible when opening one.
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:
- Use Treesitter
- Write tests
- Write documentation
MIT © jsongerber
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.