Fix autofix erroneous changes for float property

[wilhen01]

Clearly describe the bug

I'm using Stylelint with a typescript project that contains styled components using the @emotion/styled library. When running styelint --fix on the codebase, instances of float are incorrectly changed to cssFloat, which breaks the styling. Weirdly, no warnings are emitted, either with or without the fix flag.

Which rule, if any, is the bug related to?

Not sure what rule causes this behaviour, haven't had any luck tracking it down in the docs.

What CSS is needed to reproduce the bug?

Example styled component

const StyledCloseBtn = styled(Btn)<Btn.propTypes>({
  float: 'right',
  minWidth: 'unset !important',
  position: 'relative',
  top: -2,
  svg: { fill: 'currentColor', width: 16, height: 16 }
});

after running the fix command it changes to:

const StyledCloseBtn = styled(Btn)<Btn.propTypes>({
  cssFloat: 'right',
  minWidth: 'unset !important',
  position: 'relative',
  top: -2,
  svg: { fill: 'currentColor', width: 16, height: 16 }
});

What stylelint configuration is needed to reproduce the bug?

Complete config below

module.exports = {
  extends: [
    'stylelint-config-standard',
    'stylelint-a11y/recommended',
    'stylelint-config-prettier'
  ],
  plugins: ['stylelint-no-unsupported-browser-features'],
  rules: {
    'plugin/no-unsupported-browser-features': [
      true,
      {
        browsers: ['last 1 edge version']
      }
    ],
    'color-named': 'never',
    'color-hex-case': 'upper',
    'color-hex-length': 'long',
    'declaration-no-important': true,
    'function-parentheses-space-inside': 'never',
    'function-comma-space-before': 'never',
    'function-comma-space-after': 'always',
    'declaration-empty-line-before': 'never',
    'declaration-block-single-line-max-declarations': null
  }
};

Which version of stylelint are you using?

12.0.0 (also occurs on 10.1.0, upgrade made no difference)

How are you running stylelint: CLI, PostCSS plugin, Node.js API?

CLI with stylelint ./src --fix

Does the bug relate to non-standard syntax (e.g. SCSS, Less etc.)?

Yes, styled components

What did you expect to happen?

No changes to be made to the file

What actually happened (e.g. what warnings or errors did you get)?

float changed to cssFloat. No warnings are emitted, either with or without the fix flag.

[hudochenkov]

Thanks for the report and for using the template.

Most likely problem in postcss-jsx parser, which we use for CSS-in-JS.

[jeddy3]

Labeling as "help wanted" if anyone has time to fix the issue upstream in the postcss-jsx parser.

[jeddy3]

We've forked the parser we use for CSS-in-JS into stylelint organisation, and we're looking for help to fix our fork to close this issue.

See #4574.

[jeddy3]

I've labelled this as "upstream" as this is an issue in one of the syntaxes stylelint uses. Please consider contributing to that syntax if you'd like the see this issue resolved fully.

If you're unable to contribute to the syntax, please consider contributing a workaround to stylelint itself so that it won't attempt to autofix sources that contain float properties in JavaScript objects.

[guoyunhe]

I am having the same issue. Have to disable stylelint to make my code work...

[alzalabany]

this is still active problem :/;
to avoid i had to do

const styles = { };
styles.float = 'right';

<a style={ styles }> ....</a>

just to note, this is problem not just with styled-components; i'm facing this in jsx in general

[Avivhdr]

Any progress with @rbong's PR?

[jeddy3]

Closing as the syntax option was removed for the 14.0.0 release. (See the migration guide.)

We'll also be deprecating our forked CSS-in-JS package, in favour of leaner custom syntaxes.

Please consider writing a custom syntax specific to the CSS-in-JS library in this issue and fixing the bug there.

[hudochenkov]

Fix released in @stylelint/postcss-css-in-js@0.38.0.