BEM atrules for CSS.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
Tom MTT a49626c441
feat: postcss-bem v1.0.0
2 months ago
.gitignore feat: postcss-bem v1.0.0 2 months ago
.npmignore initial commit 2 months ago
LICENSE feat: postcss-bem v1.0.0 2 months ago
README.md feat: postcss-bem v1.0.0 2 months ago
index.js feat: postcss-bem v1.0.0 2 months ago
package.json feat: postcss-bem v1.0.0 2 months ago

README.md

postcss-bem

BEM atrules for CSS. That's it.

Shamelessly stolen "forked" from @tbremer/postcss-atrule-bem to make it work (poorly) with PostCSS 8.

You probably don't want to use this; it's a real mess of spaghetti code. I'll probably make my own when I get better at making PostCSS plugins.

@block header {
    background-color: white;
    color: black;

    @element title {
        color: red;

        @modifier big {
            font-size: 2rem;
        }

        @modifier bigger {
            font-size: 8rem;
        }

        @modifier unfathomably-big {
            font-size: 100vw;
        }
    }

    @modifier blue {
        background-color: blue;
    }
}
.header {
    background-color: white;
    color: black;
}

.header__title {
    color: red;
}

.header__title--big {
    font-size: 2rem;
}

.header__title--bigger {
    font-size: 8rem;
}

.header__title--unfathomably-big {
    font-size: 100vw;
}

.header--blue {
    background-color: blue;
}

Usage

Step 1: Install plugin:

npm install --save-dev postcss git+https://basedwa.re/tmtt/postcss-bem

or

yarn add -D postcss git+https://basedwa.re/tmtt/postcss-bem

Step 2: Check you project for existed PostCSS config: postcss.config.js in the project root, "postcss" section in package.json or postcss in bundle config.

If you do not use PostCSS, add it according to official docs and set this plugin in settings.

Step 3: Add the plugin to plugins list:

module.exports = {
    plugins: [
        require('postcss-import'),
+       require('postcss-bem'),
        require('tailwindcss/nesting'),
        require('tailwindcss'),
        require('autoprefixer'),
    ]
}

You probably want to put this plugin after postcss-import and things like that.