Build css from declaration

[softmarshmallow]

I understand the existence of this library is to back the foundation types and advanced usage related to it, but i have this related question.

Wile using as an advanced usage, let's say I want to make a css file from the declaration.

Does this package has build in css builder linked to it's target?

My proposal is simple.

const style: CSS.Properties = {
  color: 'white',
  textAlign: 'start',
};

to

color: white;
text-align: start;

What is the recommended way of building usable string of css body in a recognized token?

1. is there a map of Properties:PropertiesHyphen?
2. if not is there a field name transformation rule (as exposed function) PropertiesHyphen to Properties ?

So i can build the css as string for my design to code application

[frenic]

I'm not sure I'm following but it's quite simple to hyphenate style properties (inspiration from Glitz):

const style = {
  color: 'white',
  textAlign: 'start',
};

const hyphenateRegex = /(?:^ms)|[A-Z]/g;

function hyphenateProperty(property) {
  return property.replace(hyphenateRegex, '-$&').toLowerCase();
}

let declarations = '';

for (const property of Object.keys(style)) {
  declarations += `${hyphenateProperty(property)}: ${style[property]};\n`
}

console.log(declarations);

// color: white;
// text-align: start;

Or did I misunderstand your question?

[softmarshmallow]

I'm not sure I'm following but it's quite simple to hyphenate style properties (inspiration from Glitz):

const style = {
  color: 'white',
  textAlign: 'start',
};

const hyphenateRegex = /(?:^ms)|[A-Z]/g;

function hyphenateProperty(property) {
  return property.replace(hyphenateRegex, '-$&').toLowerCase();
}

let declarations = '';

for (const property of Object.keys(style)) {
  declarations += `${hyphenateProperty(property)}: ${style[property]};\n`
}

console.log(declarations);

// color: white;
// text-align: start;

Or did I misunderstand your question?

I was wondering if this approach can catch all the cases including --webkit-~~ sort of prop names.

[wintercounter]

Maybe this can help you: https://ccss.dev/