danielguillan / bem-constructor

A Sass library for building immutable and namespaced BEM CSS objects

Hi! I'm a Systems Designer at GitHub working on https://primer.style.

bem-constructor's Issues

Write tests

Responsive suffixes

Harry Roberts explains how he uses class suffixes to denote different contexts: http://csswizardry.com/2015/08/bemit-taking-the-bem-naming-convention-a-step-further/#responsive-suffixes

I've been using responsive contexts in my objects for a long time but have been writing them as prefixes (e.g. .large-o-media). Harry's syntax makes a lot more sense:

• We already have a prefix – the namespace – so using it a as a suffix is completely reasonable
• The suffix is clearly exposed in the classname with @
• It's easier to read

Example object with responsive suffix: .o-media@large

Should the BEM Constructor mixin handle this? How would the API look like?

NPM Support?

( ⚆ _ ⚆ )

How to handle an element within a block's hover/active/focus state?

First, this library is awesome. Thank you so much for sharing it.

I wonder if you've run across the need to have an element that has already been declared elsewhere also appear within the block's hover, active, or focus state? Something that would compile to this, for example:

.o-burger {
        texture: juicy;
}
.o-burger:hover {
        .o-burger__cheese {
                melty: true;
        }
}
.o-burger__cheese {
        type: gouda;
}

It doesn't appear possible with this library at the moment. Here's what I would try to get the above:

@include object('burger') {
        texture: juicy;

        &:hover {
                @include element('cheese') {
                        melty: true;
                }
        }

        @include element('cheese') {
            type: gouda;
        }
}

At the moment, I get a compiling error telling me that the cheese element has already been created.

Less version

This is a brilliant library, does anyone know if there is equivalent package for Less?

Renders source maps useless?

Am I missing something, or does using using the BEM constructor make source maps pointless? Seems like everything just points back to the mixin rather than the spot where the mixin was called.

Log modified-by

Log when an element is modified by a parent block/state/hack/theme modifier and prevent possible duplication.

Hack constructor namespaces the wrong selector

The hack namespace should be applied to the current constructed selector.

@include block('burger') {
    @include modifier('veggie') {
        @include element('extra-topping') {
            @include hack() {
                ingredient: bacon;
            }
        }
    }
}

Current output:

._o-burger--veggie .o-burger__extra-topping { ingredient: bacon; }

Expected output:

.o-burger--veggie ._o-burger__extra-topping { ingredient: bacon; }

Immediate child selector in modifies-element mixin

Hi Daniel,

thank you very much for your work on this lib, it’s a really neat implementation and I really dig its expressiveness. I currently just have one open question before I decide to use it for my next project.

What I currently don’t understand is why the modified-element mixin makes use of the immediate child selector > instead of the more general descendant one? This seems to make a strong assumption about the structure of the underlying markup and kind of prevents the arbitrary nesting of elements.

I guess you had your reasons for this decision and I'd appreciate if you could shed some light on this.

Best,
Sven

Dist build

Generate a single scss file from source

Dart Sass Compatibility

I work on a project which recently migrated from node-sass to dart-sass for compilation and dart-sass doesn't like usage of !global and so there are warnings that prop up for using bem-constructor as follows.

DEPRECATION WARNING: As of Dart Sass 2.0.0, !global assignments won't be able to
declare new variables. Consider adding `$_bem-log: null` at the top level.

   ╷
27 │ $_bem-log: () !global;
   │ ^^^^^^^^^^^^^^^^^^^^^
   ╵
    node_modules/sass-bem-constructor/dist/_sass-bem-constructor.scss 27:1  @import
    src/client/scss/_import.scss 7:9                                   @import
    stdin 1:9                                                               root stylesheet

DEPRECATION WARNING: As of Dart Sass 2.0.0, !global assignments won't be able to
declare new variables. Consider adding `$_bem-current-context: null` at the top level.

   ╷
40 │ $_bem-current-context: () !global;
   │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
    node_modules/sass-bem-constructor/dist/_sass-bem-constructor.scss 40:1  @import
    src/client/scss/_import.scss 7:9                                   @import
    stdin 1:9                                                               root stylesheet

since the constructor is imported by every module as part of the base setup. This warning shows up twice per module in the project. ( so a looooottttt 🤕 ). Suggestions on fixing this would be welcome. I can submit an updated PR to replace them with null if that would solve the issue and make this repo in compliance with dart-sass.

Fix issues with gulp-sass

I just read the article about css namespacing on css wizardry and i love the idea of bem constructor but unfortunately it doesn't work with gulp-sass, it throws some errors like this one:

{ status: 1,
file: '../bower_components/bem-constructor/dist/_bem-constructor.scss',
line: 476,
column: 13,
message: 'error reading values after ',
code: 1 }

Even if i comment out line 476 it throws like 6-7 more errors. I think this isn't an issue with your library but it's probably node sass and gulp sass are still not updated to use some features that ruby sass has. Can this be fixed somehow?

Problem with grunt-sass?

Hi,

I'm trying to get this work with grunt-sass but everytime I'm running the grunt-sass task I'm getting this error:

One or more elements from green-element have already been created

My test file:

@import "bem-constructor";

@include object('test') {
    background: red;

    @include element('green-element') {
        background: green;
    }
}

Did you ever run into that issue?

EDIT:

• grunt-sass version: 1.1.0
• bem-constructor version: 1.0.0

element exists

Hi, tnx for this lib.
Using node-sass 3.4.2, I have an issue; here's what my .sass file looks like:

@import "../bower_components/bem-constructor/dist/bem-constructor"

@include object('burger')
  texture: juicy

  @include element('tomato')
    color: red

And throws this:

    column: 13
    line: 138
    file: /Users/mirko/projects/workshop/rails/gulp-rails-pipeline/gulp/assets/bower_components/bem-constructor/dist/_bem-constructor.scss
    status: 1
    messageFormatted: gulp/assets/bower_components/bem-constructor/dist/_bem-constructor.scss
Error: One or more elements from `tomato` have already been created
        on line 138 of gulp/assets/bower_components/bem-constructor/dist/_bem-constructor.scss
>>             @error 'One or more elements from `#{inspect($elements)}` have alr

Tnx for your help.

Still compatibility issues with libsass?

Hi,

bem-constructor still appears to have some issues with libsass compatibility, like it did with #8 but with different errors.

Particularly, it appears to fail over the use of selector-append(&...). This appears to be a sass-script feature which isn't very clearly documented anywhere. Hence, my question isn't really whether we can fix this on the bem-constructor side of things, but rather, to document the intended behavior of that construct so we can do a proper bug-report on the libsass side of things.

Anyone who could clarify what this specific syntax is actually intended to do?

Thanks!

Check for uninitialized elements when scoping modifiers

Example:

@include block('some-block', 'object') {
    @include modifier('some-modifier') {
        @include modifies-element('some-element') { ... }
    }
}

some-element has not been created. Should we throw an error?

Ability to generate documentation through Sassdoc or similar tool

I was trying to use Sassdoc along bem-constructor but then I realized that Sassdoc only works for certain Sass items (variables, functions, mixins and placeholders).

Thing is, most of the times (if not 100% of them) I find myself defining different blocks, objects or components by starting with the @include operator, which is certainly not caught by Sassdoc. That means all of my potential nice and clean documentation for that given block or component will just not be parsed and rendered by that tool.

I wonder if there is any chance to investigate on this, whether it is a way to integrate Sassdoc or any other similar tool into your library, or come up with a built-in alternative to produce docs from the blocks created.

Thanks for your time, this is an awesome library.

How can I make component with modifficator?

Thank you very much for your work on this very usefull project.

How can I make this CSS code in SASS with component and modifficators?

.c-offer .c-offer__image {}

.c-offer.c-offer--simple .c-offer__item {}
.c-offer.c-offer--simple .c-offer__name {}

.c-offer.c-offer--base {}
.c-offer.c-offer--base .c-offer__heading {}
.c-offer.c-offer--base .c-offer__description {}
.c-offer.c-offer--base .c-offer__description--bold {}

Ability to choose the state namespace

We should be able to use is- or has- as needed.

.o-some-block.is-hidden { ... }
.o-some-block.has-children { ... }