Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@navita/engine

Package Overview
Dependencies
Maintainers
1
Versions
18
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@navita/engine

Navitas CSS-in-JS engine

  • 0.2.1
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
10
increased by66.67%
Maintainers
1
Weekly downloads
 
Created
Source

Navita Logo

Navita is a powerful CSS-in-JS library that brings type-safe compile-time Atomic CSS-in-JS with zero runtime to your projects.

It allows you to easily style your components and apply themes without the need for any additional runtime dependencies.

With Navita, you can write clean and maintainable CSS in JavaScript, without sacrificing runtime performance.

🔥   All styles generated at build time — just like Sass, Less, etc.

✨   Minimal abstraction over standard CSS.

🦄   Works with any JS-based front-end framework — or even without one.

🎨   High-level theme system with support for simultaneous themes.

💪   Type-safe styles via CSSType.

🌳   Co-locate your styles with your components — if you want to.

🛠   Integrations with popular bundlers such as Webpack, Vite, and Next.js.


🌐 Check out the documentation site for setup guides, examples and API docs.


Installation

To start using Navita in your project, simply follow these steps:

Install Navita using npm:

npm install @navita/css --save

You'll also need to install the Navita integration for your preferred bundler. Navita currently supports Webpack, Vite, and Next.js.

Choose the integration for your preferred bundler:

If you are using Webpack, install the Webpack integration:
npm install @navita/webpack-plugin mini-css-extract-plugin --save-dev

Update your webpack.config.js file to include both MiniCssExtractPlugin and NavitaPlugin:

const { NavitaPlugin } = require('@navita/webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  // Other webpack options,
  plugins: [
    new MiniCssExtractPlugin(),
    new NavitaPlugin(),
  ],
};

Read more about the Webpack integration in the Webpack documentation.

If you are using Vite, install the Vite integration:
npm install @navita/vite-plugin --save-dev

And add it to your vite.config.js file:

import { defineConfig } from 'vite';
import { navita } from '@navita/vite-plugin';

export default defineConfig({
  plugins: [
    // Other plugins
    navita(/* Additional options */)
  ],
});

Read more about the Vite integration in the Vite documentation.

If you are using Next.js, install the Next.js integration:

🚀   React Server Components support!

npm install @navita/next-plugin --save-dev

And add it to your next.config.js file:

const { createNavitaStylePlugin } = require("@navita/next-plugin");

/** @type {import('next').NextConfig} */
const nextConfig = {};

module.exports = createNavitaStylePlugin({
  // Additional options
})(nextConfig);

Read more about the Next.js integration in the Next.js documentation.

Usage

The main entry point for Navita is the style function. Make sure you read the reset of the documentation on https://navita.style to learn more about the APIs.

import { style } from '@navita/css';

const container = style({
  padding: '2rem',
  background: 'hotpink',
  color: 'white',
});

document.write(`
  <div class="${container}">
    Hello World!
  </div>
`);

That's it!

💡 Only references to the classNames will be included in the bundle.

Note: Navita doesn't require special file extensions for your styles. You can co-locate your CSS styles with your components.

Documentation

For detailed documentation, examples, and usage guidelines, please visit the official Navita website: https://navita.style

Contributing

We welcome contributions from the community to make Navita even better!

Thanks

  • Vanilla-Extract and Linaria for the inspiration and the great work on the CSS-in-JS ecosystem.
  • Fela for the fantastic work on Atomic css-in-js.
  • Eagerpatch for giving us the space to do interesting work.

MIT Licensed—A project by Eagerpatch.
Made with ❤️ by zn4rk and contributors.

Keywords

FAQs

Package last updated on 14 Apr 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc