Some classes are being duplicated when inserting in html

[etc-tiago]

Description

This is not a critical bug: Some classes are being duplicated when inserting in html.

Reproduction

npx create react app

with app.jsx

import React from "react";
import { css } from "otion";
import logo from "./logo.svg";

const app = css({ textAlign: "center" });

const appHeader = css({
  backgroundColor: "#282c34",
  minHeight: "100vh",
  display: "flex",
  flexDirection: "column",
  alignItems: "center",
  justifyContent: "center",
  fontSize: "calc(10px + 2vmin)",
  color: "white",
});

const appHeaderTest = css({
  backgroundColor: "#282c34",
  fontSize: "calc(10px + 2vmin)",
  color: "white",
});

const appLogo = css({
  height: "40vmin",
  pointerEvents: "none",
  boxShadow: "0 0 10px black",
  color: "white",
});

const appLink = css({ color: "#61dafb" });

function App() {
  return (
    <div className={app}>
      <header className={appHeader}>
        <img src={logo} className={appLogo} alt="logo" />
        <p className={appHeaderTest}>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className={appLink}
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

the style tag:

<style id="__otion">._1azakc._1azakc{text-align:center}._13867xz._13867xz{background-color:#282c34}._1uiai01._1uiai01{min-height:100vh}._zjik7{display:flex}._qdeacm._qdeacm{flex-direction:column}._1h3rtzg._1h3rtzg{align-items:center}._f7ay7b._f7ay7b{justify-content:center}._ski4pt._ski4pt{font-size:calc(10px + 2vmin)}._1y5pc60{color:white}._y4ga4x{height:40vmin}._je8g23._je8g23{pointer-events:none}._yf6uil._yf6uil{box-shadow:0 0 10px black}._cv4vkj{color:#61dafb}</style>

Expected behavior

The first class, for example, expected it to be just:

<style id="__otion">._1azakc{text-align:center}</div>

Actual behavior

<style id="__otion">._1azakc._1azakc{text-align:center}</div>

Environment

System:

• OS: macOS 10.15.4
• CPU: (4) x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz
• Memory: 134.66 MB / 8.00 GB
• Shell: 5.7.1 - /bin/zsh

Binaries:

• Node: 12.16.3 - /usr/local/opt/node@12/bin/node
• Yarn: 1.22.4 - /usr/local/bin/yarn
• npm: 6.14.4 - /usr/local/opt/node@12/bin/npm
• Watchman: 4.9.0 - /usr/local/bin/watchman

npmPackages:

• otion: ^0.3.2 => 0.3.2

[kripod]

Similarly to #10, this is not a bug, but a feature™ to control the precedence of CSS rules. For example, when paddingTop: 20 and padding: 10 are both specified inside css(), then the former adjustment should take precedence over the latter. Every padding will become 10px, except for the top one, which remains 20px even though it's declared before the other rule.

If you're interested in a discussion about potential improvements, please refer to #1.

[kripod]

Version 0.4.0 addresses this issue by managing precedences without class name repetition. Please give it a try and get back to me if you notice any issues 😊

[etc-tiago]

Now it is much better, there is a significant reduction in the size of the styles on the page. Thank you for your time and effort in developing this solution.