Awesome

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.

https://github.com/jsongerber/nvim-px-to-rem/assets/18051702/9ac54364-2115-4c9e-8354-f0991f11c82d

⚡️ Features

• 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

📋 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 = true,
    filetypes = {
        "css",
        "scss",
        "sass",
    },
})

nvim-cmp integration

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
    }),
})

🧰 Commands

📚 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.