On this page

Introduction

It's a CSS in JS library written in TypeScript. with a simple syntax and High type safety and expandability.

It's characteristic feature is the powerful typed that enables autocomplete during development.
It works with most js frameworks and also works with a single ts file.

It use the philosophy of tsx and compilation is verry faster.

Supported traditional CSS notation such as Media Query and pseudo-elements.
Provides solutions for large-scale applications that are easy to maintain.

No Runtime

Actually it injection css in development mode only, but in production it is "completely No Runtime".
It is exported as static CSS at compile process.
Since it is embedded in the directly build process, It can cache the build and CDN.

Type safe

The property is typed. And detects syntax errors.
Static type checking is performed at compile time, Compilation with errors is not permitted.
So the CSS generated after compilation is reliable.

RSC support

If you use Next.js's App Router, you can achieve a static preview of server components by including the ServerCSS component in the head.

How to use

Write a elter method and write the style to the object.
The method just returns a string, so just css.active apply it to the classname.

Styles can be written outside of a component.

Component.tsx

import elter from 'elter';
 
export const Component = () => {
  return (
    <div className={styles.blue}>
      BlueText
    </div>
  )
};
 
const styles = elter.create({
  blue: {
    fontSize: 16,
    color: 'blue'
  },
});

Inspirations

Although this library is a fairly latecomer to the CSS in JS world, it is heavily by these and other earlier libraries.

React Native: StyleSheet Class is impeccable. It's standard in elter is inspired by React Native.
Vue.js: Scoped CSS in Vue.js excels in simplicity and directness.
Styled-JSX: Very stable CSS in JS, template literals were easy to write with VSC's autocompletion.
Emotion: I found writing template literals easy. This was the standard CSS in JS in React.
Vanilla Extract: It is inspired by vanilla extract's concept of object, property types.
Linaria: elter was also inspired by the concept of static CSS extraction.

There integrated the standout features from each of these libraries into elter. This is our expression of gratitude to these exceptional open-source projects and our contribution to the community.

What's Next?

Where good devlopment experience and simple is the elter.
Dive into your incentive and intention docs to unleash its full potential.

Welcome to elter. We can't wait to see what you'll create.