noflip in JavaScript object

[oliviertassinari]

I have noticed the existence of a /* @noflip */ comment that can be used with the CSS template string syntax. It's implemented in https://github.com/cssjanus/cssjanus#preventing-flipping.

However, it seems that there is no way to do the same with the JavaScript object. I wonder about this syntax:

import styled, { StyleSheetManager } from "styled-components";
import rtlPlugin from "stylis-plugin-rtl";

const Box = styled('div')({
  noflip: true,
  paddingLeft: 10,
});

or

import styled, { StyleSheetManager } from "styled-components";
import rtlPlugin from "stylis-plugin-rtl";

const Box = styled('div')({
  paddingLeft: 10,
}).withConfig({ noflip: true });

import styled from "@emotion/styled";
import rtlPlugin from "stylis-plugin-rtl";

const Box = styled('div', { noflip: true })({
  paddingLeft: 10,
});

[quantizor]

Hmm, so the JS style object is actually converted into a string before it's passed into CSSJanus. I'm not sure how we would accomplish this in a way that makes sense because stylis plugins aren't aware of the React component.

[quantizor]

I guess inside of stylis.js in styled components if noflip is specified in some way we could dynamically-inject the code comment...

[nicholasglazer]

const El = styled(div)(() => ({
  marginLeft: '10px /*! @noflip */'
}));

[oliviertassinari]

@nicholasglazer's suggestion works