css Question posted in
Some basic documentation can be found here.

Can't set border style from custom css property

I have a simple react app
(Vite project)

app.tsx

import "./common-styles.css";

export default function App() {
  return (
    <div className="app">
      <div className="interactive">
        content content
      </div>
    </div>
  )
}

with only 1 css file

common-styles.css

@property --interactive-color {
    syntax: "<color>";
    inherits: true;
    initial-value: green;
}
@property --interactive-text-color {
    syntax: "<color>";
    inherits: true;
    initial-value: white;
}
@property --interactive-border-top-style {
    syntax: "<string>";
    inherits: true;
    initial-value: dotted;
}
@property --interactive-border-top-width {
    syntax: "<length>";
    inherits: true;
    initial-value: 5px;
}
@property --interactive-border-top-color {
    syntax: "<color>";
    inherits: true;
    initial-value: red;
}

.interactive {
    background-color: var(--interactive-color);
    color: var(--interactive-text-color);

    border-top-style: var(--interactive-border-top-style);
    border-top-width: var(--interactive-border-top-width);
    border-top-color: var(--interactive-border-top-color);  

    padding-top: var(--interactive-padding-top, 1vw);
    padding-bottom: var(--interactive-padding-bottom, 1vw);
    padding-right: var(--interactive-padding-right, 3vw);
    padding-left: var(--interactive-padding-left, 3vw);
    border-top-right-radius: var(--interactive-border-top-right-radius, 5px);
    border-top-left-radius: var(--interactive-border-top-left-radius, 5px);
    border-bottom-right-radius: var(--interactive-border-bottom-right-radius, 5px);
    border-bottom-left-radius: var(--interactive-border-bottom-left-radius, 5px);
}

(bottom, right and left props where removed to shorted the question, but they behave the same)

As i didn’t override any of the properties, i would expect that the component has the specified initial-value value for all of the properties.
It does, except for the border style, which behaves as it has a not specified value.

I know that border width and color are being set correctly by specifying the style manually
border-top-style: solid;

Color props are also being set correctly.

It’s just the style that doesn’t work from the custom prop.

I’ve tried:
syntax: "<String>";
syntax: "<string>";
initial-value: "dotted";
initial-value: dotted;
syntax: "'none' | 'solid' | 'dotted' | 'dashed'";

Specifying a fallback value on the prop reference:
border-top-style: var(--interactive-border-top-style, dashed);
makes it to take that fallback value.

Tags:

2

Answers


  1. 0

    You have to define the values like below, without using quotes.

    @property --border-top-style {
    syntax: "dotted|dashed|solid";
    inherits: true;
    initial-value: solid;
}
@property --border-top-width {
    syntax: "<length>";
    inherits: true;
    initial-value: 5px;
}
@property --border-top-color {
    syntax: "<color>";
    inherits: true;
    initial-value: red;
}

body {
  border: var(--border-top-width) var(--border-top-style) var(--border-top-color);
}
    some content
    Login or Signup to reply.
  2. 0

    <string> isn’t a supported value for syntax, but you could use * to accept anything (or perhaps <custom-ident>).

    @property --interactive-border-top-style {
    syntax: "*";
    inherits: true;
    initial-value: dotted;
}

    Alternatively, you could list out all the possible values for border-style (or only the subset you wish to support), separating with |.

    @property --interactive-border-top-style {
    syntax: "none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset";
    inherits: true;
    initial-value: dotted;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search