adding 'px' in css variable automatically

Open xkeshav opened this issue 1 year ago • 0 comments

What version of Hono are you using?

4.0.9

What runtime/platform is your app running on?

Node.js

What steps can reproduce the bug?

create a basic layout file and generating tiles and I want to change diffrent background color using hue property as a variable but when I run and see the element panel; it change hue value from number to string and sppend px behind it. this is trange.

here is basic code

package.json

{
  "scripts": {
    "dev": "tsx watch src/index.tsx"
  },
  "dependencies": {
    "@hono/node-server": "^1.8.2",
    "@xkeshav/alphabet": "^1.2.1",
    "hono": "^4.0.9"
  },
  "devDependencies": {
    "@types/node": "^20.11.17",
    "tsx": "^3.12.2"
  }
}

index.tsx

import { serve } from '@hono/node-server';
import { Hono } from 'hono';
import { showRoutes } from 'hono/dev';
import { logger } from 'hono/logger';
import { Alphabet } from './Alphabet';

import { alphabet } from '@xkeshav/alphabet'; 

// above return  ['A', 'B', .... 'Z'] 

const app = new Hono() // .basePath('/api/v1/');

app.use(logger())

app.get('/', (c) => {
  return c.html(
  <div>
    <a href="/alphabet">Alphabet</a>
  </div>
  )
})

app.get('/alphabet', (c) => {
  return c.html(<Alphabet list={alphabet}/>)
});

app.onError((err, c) => {
  console.error(`${err}`)
  return c.text('Custom Error Message', 500)
})


const port = 3000
console.log(`Server is running on port ${port}`);

showRoutes(app);

serve({
  fetch: app.fetch,
  port
})

Layout.tsx

import { Style, css } from 'hono/css';
import { FC } from 'hono/jsx';

export const Layout: FC = (props) =>  (
    <html>
      <head>
     <Style>{
				css`
        @property --hue {
          syntax: "<number>";
          inherits: true;
          initial-value: 10;
        }
          html {
            font-family: Arial, Helvetica, sans-serif;
          }
					:root {
						--hue: 10;
					}
        `}
				</Style>
				</head>
      <body>{props.children}</body>
    </html>
  );

Alphabet.tsx

import { css } from 'hono/css';
import { FC } from 'hono/jsx';
import { Layout } from './Layout';

const parentContainer = css`
  display:grid;
  grid-gap: 4px;
  grid-template-columns: repeat(5,1fr);
`
const itemClass = css`
  display: grid;
  height: 10rem;
  color: var(--text, white);
  background-color: hwb(var(--hue) 0% 0%);
  place-content: center;
  font-size: 4rem;
}
`
const Alphabet: FC<{ list: string[] }> = ({ list }) => (
  <Layout>
    <h1>Alphabets</h1>
    <div class={parentContainer}>
      {list.map(((item, id) => <div class={itemClass} style={{ "--hue": id*10 + 20, "--text": id < 20 ? '#000' : '#FFF' }}>{item}</div>))}
    </div>
  </Layout>
);


export { Alphabet };

Screenshot from 2024-05-23 18-56-02

checking in Ubuntu 24.04 with firefox v 126.0 and chrome v 124.x browser

What is the expected behavior?

every tile must have diffrent color as per changed hue and it was working earlier (checked in non ubuntu system) but suddenly stopped working

What do you see instead?

all Tile have same color because the varibel --hue assigned a string value

Additional information

in chrome text color changed as per logic but background remain same while in firefox all tile have same color and background-color

May 23 '24 13:05 xkeshav