gajus / babel-plugin-react-css-modules

Transforms styleName to className using compile time CSS module resolution.
Other
2.05k stars 162 forks source link

className applied to incorrect nodes in 5.2.2 #244

Closed OscarBarrett closed 5 years ago

OscarBarrett commented 5 years ago

After upgrading from 5.2.1 to 5.2.2, className props applied to inner nodes using a spread are being applied to outer nodes as well.

For example:

import React from 'react';
import Slider from 'react-slick';

import styles from './styles.scss';

const Test = () => {
  const settings = {
    className: styles.innerSlider
  };

  return (
    <div styleName="vehicleSlider">
      foo

      <Slider {...settings}>
        bar
      </Slider>
    </div>
  );
};

export default Test;

Test:

import React from 'react';
import { shallow } from 'enzyme';
import toJson from 'enzyme-to-json';

import Test from '.';

describe('<Test />', () => {
  it('matches its snapshot', () => {
    const wrapper = shallow(<Test />);
    expect(toJson(wrapper)).toMatchSnapshot();
  });
});

Which generates the snapshot:

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`<Test /> matches its snapshot 1`] = `
<div
  className="vehicleSlider innerSlider"
>
  foo
  <Slider
    className="innerSlider"
  >
    bar
  </Slider>
</div>
`;

The outer div should only have a className of vehicleSlider.

With 5.2.1, the snapshot is instead

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`<Test /> matches its snapshot 1`] = `
<div
  className="vehicleSlider"
>
  foo
  <Slider
    className="innerSlider"
  >
    bar
  </Slider>
</div>
`;

Which is what is expected.

gajus commented 5 years ago

:tada: This issue has been resolved in version 5.2.3 :tada:

The release is available on:

Your semantic-release bot :package::rocket: