Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

webkitBoxOrient property is rendered 'webkit-box-orient' instead of '-webkit-box-orient'.

See original GitHub issue

Environment

OS: macOS Mojave 10.14.2
CPU: 2.2 GHz Intel Core i7
Total Memory: 16.00 GB
Chrome 71

Binaries

Node: 8.13.0
npm: 6.4.1
react: 16.7.0

npmPackages:

styled-components:

wanted: ^4.1.3 installed: 4.1.3

Reproduction

When i use styled-components as Style Objects, webkitBoxOrient css property is rendered to webkit-box-orient instead of -webkit-box-orient in browser.

https://www.styled-components.com/docs/advanced#style-objects (Style Objects)

import styled from 'styled-components';

const SampleText = styled.p({
  width: '56px',
  wordBreak: 'break-word',
  webkitBoxOrient: 'vertical', // This
});

.isjcewa {
  width: 56px;
  word-break: break-word;
  webkit-box-orient: vertical; // Should be -webkit-box-orient ....
}

Issue Analytics

State:
Created 5 years ago
Comments:5 (3 by maintainers)

Top GitHub Comments

2reactions

kittencommented, Feb 2, 2019

This should probably filed as an issue on stylis, our CSS processor. https://github.com/thysultan/stylis.js

That being said, I’m not sure whether it’ll be patched considering that the property is nonstandard, so maybe it’s better to stick with manual prefixes for now https://developer.mozilla.org/en-US/docs/Web/CSS/box-orient

1reaction

thysultancommented, Feb 2, 2019

I doubt box-orient will ever be standard. It was part of the old flex box model of which the new flexbox model has since replaced.

Top Results From Across the Web

box-orient - CSS: Cascading Style Sheets - MDN Web Docs

The box-orient CSS property sets whether an element lays out its contents horizontally or vertically.

Are there any alternatives for "-webkit-box-orient"

The line-clamp property is a shorthand for the max-lines , block-ellipsis ... content is fragmented away and neither rendered nor measured.

MozBoxOrient style property | webkitBoxOrient style property

Specifies or retrieves whether the children of a box element should be laid out horizontally or vertically. Only works for box objects. An...

CSSProperties - typescript

The box-orient CSS property specifies whether an element lays out its contents horizontally or vertically. Initial value: inline-axis ( horizontal in XUL).

"-webkit-box-orient" | Can I use... Support tables for ... - CanIUse

CSS property : box-orient · Global · unprefixed: · Chrome · Edge * · Safari · Firefox · Opera · IE.