search

csstools / postcss-extend-rule

Use the extend at-rule and functional selectors in CSS
https://jonathantneal.github.io/postcss-extend-rule/
Creative Commons Zero v1.0 Universal
51 stars 7 forks source link

Group classes? #3

Closed Krasnopir closed 5 years ago

Krasnopir commented 6 years ago

can postcss-extend-rule group classes with the same styles part? for example

.main-class { display: inline-block; font-size: 12px; }

.additional-class { @extend .main-class; color: red; }

it would be good to get

.main-class, .additional-class { display: inline-block; font-size: 12px; } .additional-class { color: red; }

it would be useful for images sprites, or glyphs, where are a lot of repetitive code

%glyph { display: inline-block font-family: "custom-font"; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; speak: none; line-height: 1; vertical-align: middle; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

.glyph-agency { @extend %glyph; content: "\f101"; } .glyph-home { @extend %glyph; content: "\f102"; }

and we get

.glyph-agency { display: inline-block; font-family: "custom-font"; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; speak: none; line-height: 1; vertical-align: middle; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "\F101"; }

.glyph-home { display: inline-block; font-family: "custom-font"; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; speak: none; line-height: 1; vertical-align: middle; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "\F102"; }

with png sprites the same story.

seleckis commented 5 years ago

Seems no progress here?

Krasnopir commented 5 years ago

I rewrote everything without using @extend In this form the plugin is not suitable

diverent2 commented 5 years ago

Hi there :)

I agree, it is always nice to have a more sized down css output.

However (from what I understand) the idea behind postcss is to build small plugins that are really good at a certain thing. And for this plugin the task is simply to allow your css to use @extend and %foo

If you want to combine your selectors or minify them completely, there already is a great postcss plugin to do just that called cssnano. Add this to your plugin list and you should be good to go. You may also consider the Preset guide to adjust the plugin to your likings.

Hope this works for you. If not, please explain why.

jonathantneal commented 5 years ago

This plugin does not work like Sass. It works like the CSS Extend Rule.