Move over TypeScript,

here comes TypedCSS! 

Rhiana Heath

Blake eLearning

Web Directions Hover 2021

Now with Types!

What are Types?

Strings

Array

Numbers

Hash

Why even have Types?

  • Better errors
  • Code the documents itself
  • Faster performance

So What Types does CSS have currently?

const widthOfFoo = $('.foo').css('width')

typeof widthOfFoo === 'string'
.foo {
  width: 500px;
}

!

Invalid property value

.foo {
  width: 500pxs;
}

What is Typed CSS?

Typed Object Model (OM)

Paint API

Layout API

Properties and Values API

And More!

What are CSS Typed OM?

Keyword

Unit

Position

Image

Disclaimer Time!

ishoudinireadyyet.com

Disclaimer Time!

+

const foo = $('.foo')

foo.css('width')
// "500px"

foo.attributeStyleMap.get('width'); 
// CSSUnitValue { 
//   value: 500,
//   unit: 'px'
// }
.foo {
  width: 500px;
}
const foo = $('.foo')

foo.css('width')
// "500px"

foo.attributeStyleMap
  .set('width', CSS.percent(50));

foo.attributeStyleMap.get('width'); 
// CSSUnitValue { 
//   value: 50,
//   unit: 'percent'
// }
.foo {
  width: 500px;
}
const foo = $('.foo')

foo.css('width')
// "500px"

const sum = new CSSMathSum(
  CSS.percent(100),
  CSS.px(20)
);

CSS.vw(100).add(sum).toString()
// "calc(100vw + (100% + 20px))"

foo.attributeStyleMap.set('width', sum);
.foo {
  width: 500px;
}
const foo = $('.foo').computedStyleMap();

cs.get('width');
// CSSMathSum {
//   operator: 'sum',
//   length: 3,
//   values: CSSNumericArray {
//     0: CSSUnitValue { value: 100, unit: 'vw' },
//     1: CSSUnitValue { value: 100, unit: 'percent' },
//     2: CSSUnitValue { value: 20, unit: 'px' },
//   },
// }

.foo {
  width: calc(100vw + (100% + 20px));
}
try {
  const css = CSSStyleValue
               .parse('width', 'CSS.px(not a value)');
  // use css
} catch (error) {
  console.error(`${error}: please supply a valid width value`)
}

Typed errors list

Thanks!