Changeable breakpoint class (\@)

[palmenhq]

It's not possible to escape some characters (among them @) with css module's composes:. I like the @ but it's just not possible to use in some setups which makes the framework unusable. I've replaced the hard-coded @ for responsive classes with a changeable setting that defaults to @.

[rbrtsmith]

Hi Johan thanks for your contribution!

I like the fact that you have put it into a variable to give the users more choice.

Could you show me an example Webpack config where this does not work? I've ran this on many Webpack projects without issue using Sass / Post-CSS loaders etc.
Example: https://github.com/rbrtsmith/nebula WIP project

[rbrtsmith]

Shouldn't the value of this be \@?

[palmenhq]

I don't think so, since the first \ is escaping the "actual" \ from the string (so the actual string value is \@), otherwise we'd try to escape the @ itself which is not what we want.

Also inlines with this which was here before :)

[palmenhq]

This one doesn't work (webpack 2.4): https://gist.github.com/palmfjord/e0d48aacb5e9ca5c2fdb8f234526ebe0

However, just to be clear, the CSS itself works perfectly, but when using the composes magic like so:

.my-class {
  composes: o-grid__item u-1/2@sm;
}

it breaks and gives this error:

Module build failed:
  composes: o-grid__item u-1/2@sm;
                             ^
      Invalid CSS after "...rid__item u-1/2": expected expression (e.g. 1px, bold), was "@sm;"

[rbrtsmith]

Oh you are using CSS-Modules then? (That's where the composes syntax comes from I believe) I had never tested with that as I don't really have much use for them with ITCSS managing the architecture.

I don't think I've put it in the docs though but you shouldn't be composing grid / layout objects (anything in the objects layer) with other classes that are going to risk breaking the grid via property overrides (padding, margins, width etc). Better to just nest elements within and add classes to those and keep anything in the object layer single purpose. (I gather this was just an example bit of code)

I actually have a bunch of React components that have been 'Nebularised' over at https://github.com/rbrtsmith/nebula-react so consumers don't have to worry about adding classes or composing them, they can just augment the components with props and use their own classNames or something like the Styled Components package.

[rbrtsmith]

We should mention that this is for use with CSS-Modules. If the consumer isn't using them then everything should compile down fine.

[palmenhq]

Right! Css Modules.. Temporary confusion over here haha. I'll update the readme and pr description accordingly.

Awesome stuff with nebula react, I'll take a look!

I usually just compose the grid into empty classes like so:

.container {
  composes: o-grid;
}
.inner-container {
  composes: o-grid__item u-1/2;
}

.something {
  color: red;
  font-family: "Comic Sans";
}

<div className={styles.container}>
  <div className={styles.containerInner}>
    <div className={styles.something}>
      hello world
    </div>
  </div>
</div>