Skip to content

Use CSSTOM in default unit plugin#893

Merged
HenriBeck merged 9 commits intomasterfrom
feat/use-cssom-in-default-unit-plugin
Oct 17, 2018
Merged

Use CSSTOM in default unit plugin#893
HenriBeck merged 9 commits intomasterfrom
feat/use-cssom-in-default-unit-plugin

Conversation

@HenriBeck
Copy link
Copy Markdown
Member

width: 'px',
'word-spacing': 'px',
// Animation properties
'animation-delay': getDefaultUnit(window.CSS.ms, 'ms'),
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would prefer to not access window.CSS all over the place, because it might be not implemented and not polyfilled

Copy link
Copy Markdown
Member

@kof kof Oct 16, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

you can rewrite getDefautUnit to something like this:

const hasCSSTOMSupport = window.CSS && window.CSS.number
const getDefaultUnit = (unit) => {
  const fn = unit === '%' ? 'percent' : unit
  return hasCSSTOMSupport ? window.CSS[fn]() : unit
}

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

and then use it getDefaultUnit('ms')

Henri Beck added 2 commits October 16, 2018 20:50
* master:
  Support plugins processing for observables by default (#892)
  Typed CSSOM values support (#887)
  Dynamic values full syntax (#878)
  [jss-plugin-cache] Use WeakMap for cache plugin (#890)

# Conflicts:
#	packages/jss-plugin-syntax-rule-value-function/.size-snapshot.json
#	packages/jss-preset-default/.size-snapshot.json
#	packages/jss/.size-snapshot.json
#	packages/react-jss/.size-snapshot.json
- Improve default unit selection
Comment thread packages/jss/src/index.js
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

in node window will not exist, accessing it will throw error

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

instead either we have to use typeof window or just use global, because it will always exist through the polyfill in both node and browser


const px = hasCSSTOMSupport ? window.CSS.px : 'px'
const ms = hasCSSTOMSupport ? window.CSS.ms : 'ms'
const percent = hasCSSTOMSupport ? window.CSS.percent : '%'
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nice

Copy link
Copy Markdown
Member

@kof kof left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍

@HenriBeck HenriBeck merged commit 2c87a93 into master Oct 17, 2018
@HenriBeck HenriBeck deleted the feat/use-cssom-in-default-unit-plugin branch October 17, 2018 08:40
HenriBeck pushed a commit that referenced this pull request Oct 22, 2018
* origin/add-ts-typings:
  Scoped keyframes (#888)
  Update readme.md (#897)
  Use CSSTOM in default unit plugin (#893)
  Added .nvmrc (#896)
  [WIP] DONT MERGE Fix ci (#895)
  Update ci (#894)
  Support plugins processing for observables by default (#892)
  Typed CSSOM values support (#887)
  Dynamic values full syntax (#878)
  [jss-plugin-cache] Use WeakMap for cache plugin (#890)
bhupinderbola pushed a commit to bhupinderbola/jss that referenced this pull request Sep 17, 2019
* Added support for using CSSTOM in default unit plugin

* Support grid properties in default unit

* - Move hasCSSTOMSupport into core
- Improve default unit selection

* - Move hasCSSTOMSupport into core
- Improve default unit selection

* Update size-snapshots
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants