Skip to content

Error with classnames package #13

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
xDae opened this issue Dec 14, 2016 · 2 comments
Closed

Error with classnames package #13

xDae opened this issue Dec 14, 2016 · 2 comments

Comments

@xDae
Copy link

xDae commented Dec 14, 2016

Trying the babel plugin with the classnames package im getting errors:

captura de pantalla 2016-12-14 a las 17 48 23

the Button Component is so easy:

import React, { PropTypes } from 'react';
import classNames from 'classnames';

import './button.scss';

const Button = ({ className, href, type, alt, children, onClick }) => {
  var btnClass = classNames('button', className, {
    'default': type === 'default',
    'alt': type === 'alt'
  });

  return (
    <button
      styleName={btnClass}
      onClick={onClick}
    >
      {children}
    </button>
  );
};

export default Button;

Without the classname package its working fine:

import React, { PropTypes } from 'react';

import './button.scss';

const Button = ({ className, href, type, alt, children, onClick }) => {
  return (
    <button
      styleName="button default"
      onClick={onClick}
    >
      {children}
    </button>
  );
};

export default Button;
@PCreations
Copy link
Contributor

It's because the code generated doesn't escape hypens, thus throwing syntax error. You can see the issue #14 for more information and this pull request for a possible workaround.

gajus pushed a commit that referenced this issue Dec 18, 2016
…#13 #14 #17) (#12)

* fix: added escape hatch when testing attribute that do not have a name property (#11)

* fix: object expression generated on dynamic resolution now use quote to escape properties' name (#14)

* fix: getClassName now works as expected when multiple file use runtime resolution

* fix: getClassName now works as expected when multiple file use runtime resolution
@gajus
Copy link
Owner

gajus commented Dec 18, 2016

Fixed in #12. Thank you @PCreations and @xDae .

@gajus gajus closed this as completed Dec 18, 2016
gajus pushed a commit that referenced this issue Jan 6, 2017
* Make syntax parser configurable
* Make syntax parser configurable
* fix:  handle multiple file import with dynamic resolution (fixes #7 #11 #13 #14 #17) (#12)
* fix: added escape hatch when testing attribute that do not have a name property (#11)
* fix: object expression generated on dynamic resolution now use quote to escape properties' name (#14)
* fix: getClassName now works as expected when multiple file use runtime resolution
* fix: getClassName now works as expected when multiple file use runtime resolution
* fix: generate className when using runtime resolution (#18) (#19)
* fix: added escape hatch when testing attribute that do not have a name property (#11)
* fix: object expression generated on dynamic resolution now use quote to escape properties' name (#14)
* fix: getClassName now works as expected when multiple file use runtime resolution
* fix: getClassName now works as expected when multiple file use runtime resolution
* fix: className attribute is now correctly generated when using runtime resolution (#18)
* feat: improve error messages (#21)
* Make syntax parser configurable
* Merged upstream
* Updated the configuration section of the readme file
* docs: improve wording
* fix: add a missing comma

BREAKING CHANGE:

If your installation is using CSS, now you need to manually install scss-loader and configure it. https://github.com/gajus/babel-plugin-react-css-modules#configurate-syntax-loaders
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

No branches or pull requests

3 participants