Core concept
Learn more about plumeria's css-in-js design concepts
Just like CSS, the selectors written below always take precedence. Also, the order of CSS selectors after compilation will be maintained in the order written in the function.
AOT(Ahead-Of-Time) Compiler
Plumeria's precompilation logic is not coupled with the framework's build. The fully independent compilation process does not interfere with the framework's build process, allowing CSS to be safely and deterministically included in the build process.
Compilation Speed
It runs in 0.0005 seconds per file. It can compile 2000 styles file per second. Built on SWC, Plumeria's compiler achieves exceptional performance. It runs in parallel with Next.js development server and completes compilation Before framework preparation is complete, there will be zero delays in your development workflow.
Debugging
Since all styles are resolved at compile time, runtime uncertainties are completely eliminated. Statically determined CSS allows developers to identify all style issues at compile time.
Performance
Semantic properties help avoid HTML pollution. Short hashes minimize the amount of CSS. We use lightningcss and postcss-plugin for post-processing. They are minified and compressed in production. The impact on build size is not even an additional initial cost.
Optimization
Style objects that are not used in production will be culled by tree shaking at build time. Production bundle size does not include objects, and only lightweight CSS remains. Also, because it is always written outside the component, the object is not rendered and is always processed statically.
Hashes
The create method takes the key as the class name and gives a 6-character hash of the object at the end.
Class names are changed by objects, but when objects are determined, class names become universal.
Therefore, when methods are determined, class names can be used as CSS Syntax arguments (has and not, is where eg.)
The same object hash and the same key are used in both development and production environments,
Developers can easily find it.