postcss / postcss-nested Goto Github PK

Turns out the way postcss-nested is written it supports Less-style nested blocks.

For example, this example from the README:

.phone {
    &_title {
        width: 500px;
        @media (max-width: 500px) {
            width: auto;
        }
    }
    body.is_dark &_title {
        color: white;
    }
    img {
        display: block;
    }
}

Still works if we do this:

.phone {
    &_title {
        width: 500px;
        @media (max-width: 500px) {
            width: auto;
        }
        body.is_dark & {
            color: white;
        }
    }
    img {
        display: block;
    }
}

They both compile down to:

.phone_title {
    width: 500px;
}
@media (max-width: 500px) {
    .phone_title {
        width: auto;
    }
}
body.is_dark .phone_title {
    color: white;
}
.phone img {
    display: block;
}

With the exception that the example in the README says phone_title instead of .phone_title for the second instance of &_title (this is a typo I believe, unless I ran postcss incorrectly).

The reason I say Less-style is because last time I tried Sass/Scss didn't support this. But I just tried it in SassMeister and it seems like it works flawlessly there as well:

The advantage of body.is_dark & vs body.is_dark &_title is less repetition.

source
dest

So one of the bad things about nesting that it can get out of hand if you work in a team with different CSS skill levels. And soft rules like 3 levels max is not really effective. How about an option to warn or even limit the nesting depth?

postcss([ require('postcss-nested')({ nestingDepth: 3  }) ]

Hello.
I found that this plugin works incorrect. In your example there is a mistake and if you run this code as is, in result css-file you'll get only last nested element. So if you want to work this properly you need to separate nested elements with commas. It would be awesome if you could fix this and make this plugin work like SASS and your example, i mean without commas.

.phone {
    &_title {
        width: 500px;
        @media (max-width: 500px) {
            width: auto;
        }
        body.is_dark & {
            color: white;
        }
    }
    img {
        display: block;
    }
}

Result of this is:

.phone img {
  display: block;
}

I tried to do sample code in README.
(Tried with postcss version 3.0.1)

sample.css:

.phone {
  &_title {
    width: 500px
    @media (max-width: 500px) {
      width: auto
    }
  }
  body.is_dark &_title {
    color: white
  }
  img {
    display: block
  }
}

and, this is my code (index.js):

var postcss = require('postcss');
var nested = require('postcss-nested');
var fs = require('fs');

var input = fs.readFileSync('sample.css', 'utf-8').trim();

var output = postcss(nested).process(input).css;

But, result is here.

> node index.js

/Users/morishitter/postcss_sample/node_modules/postcss/lib/input.js:54
        throw new CssSyntaxError(this, message, line, column);
              ^
Error: <css input>:3:5: Unknown word

Is this a bug? or is my code wrong?

Right now if I do

postcss().use(postcssNested()); // notice parens

I get a TypeError (object is not a function) because the module only returns an object with a postcss method, instead of returning a function (which also has a postcss property for no-parens syntax).

react js code (please note dropdown div is generated by 3rd party component which I can't change):

import st from './MyComp.css'>
<div className={st.Header}>
   <div className="dropdown">
   </div>
</div>

MyComp.css:

.rightside-top {
  .dropdown {
     float:right;
  }
}

It's compiled into .Header__rightside_top .Header__dropdown__YBZuA {float:right;} but I don't want to compile .dropdown into .Header__dropdown__YBZuA. How can I do that?

Looks like something is broken. I've just cloned the repo, installed everything and run tests. The report is successful, but there's some errors in console like

(node:95861) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): Error: expect(received).toEqual(expected)

Expected value to equal:
  "a b .one {}
a b .two {}"
Received:
  "a b .one {} a b .two {}"
(node:95861) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 2): Error: expect(received).toEqual(expected)

Expected value to equal:
  "@media screen {
    a b {
        width: auto
    }
}"
Received:
  "@media screen {a b { width: auto } }"
(node:95861) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 3): Error: expect(received).toEqual(expected)

Expected value to equal:
  "@media screen {
    a b {
        color: black
    }
}"

So I went there after I got errors in my project. Rolled back to 1.0.1, it works

I'm trying to extend from within a nested selector. I can't quite figure out how to get everything working.

Input:

@import "silent-placeholders.css";

%inline-placeholder {
    content: "test";
}

.test {
    color: red;

    &:before {
        @extend %inline-placeholder;
    }
}

If postcss-extend is included first and postcss-nested is included after, the output is:

&:before {
    content: "test";
}

.test {
    color: red;
}

If postcss-nested is included first and postcss-extend is included after, %silent-placeholders from silent-placeholders.css (for use with postcss-extend) are copied into the CSS output. Is there a way to not have these silent placeholders in the output?

Next examples are not working:

.example1 {
  :global {
    > .mdl-progress {
      background: #fff;
    }
  }
}

.example2 {
  > :global {
    .mdl-progress {
      background: #fff;
    }
  }
}

As SASS and LESS do, when there is a @keyframes at-rule nested within a selector body it will be moved to the CSS file root once the original SCSS/LESS files is compiled. However, with PreCSS and PostCSS this looks to not be implemented and @keyframes will remain nested within the selector body. Hence the animation won't run on browsers.

.block {
    &__element {
        width: 20px;
        height: 20px;
        animation: 2.5s linear infinite spin;

        @keyframes spin {
            0% { transform: rotate(0deg) translateX(20px); }
            100% { transform: rotate(360deg) translateX(20px); }}
        }
    }
}

will compile into

.block__element {
    width: 20px;
    height: 20px;
    animation: 2.5s linear infinite spin;

    @keyframes spin {
        0% { transform: rotate(0deg) translateX(20px); }
        100% { transform: rotate(360deg) translateX(20px); }}
    }
}

rather than

.block__element {
    width: 20px;
    height: 20px;
    animation: 2.5s linear infinite spin;
}

@keyframes spin {
    0% { transform: rotate(0deg) translateX(20px); }
    100% { transform: rotate(360deg) translateX(20px); }}
}

.phone {
  &_title {
    width: 500px;
    @media (max-width: 500px) {
      width: auto;
    }
  }
  body.is_dark &_title {
    color: white;
  }
  img {
    display: block;
  }
}

compiles to:

    @media (max-width: 500px) {
    .phone_title {
      width: auto
  }
    }.phone_title {
    width: 500px
  }
  body.is_dark .phone_title {
    color: white;
  }
  .phone img {
    display: block;
  }

Using stylelint's default settings means it will choke on these nested selectors. Please add information to the README on how to configure stylelint to correctly validate these nested selectors. The rule can be found here, but by default it doesn't support the features added by postcss-nested. It would be helpful to publish a regex that satisfies them.

I want to be able to write a rule like this:

.my-room {
  &[data-category='Sound & Vision'] {
    color: $electric-blue;
  }
}

Currently the second & is replaced with the current selector.

Please either add the option to escape an ampersand or automatically ignore them in attribute selectors.

hi, when i use postcss-nested like this

@media (--pc-wide-viewport), ie8wide {
  .profile {
    width: 500px;
  }
}

it give me

@media (--pc-wide-viewport), ie8wide {
  .profile {
    width: 500px;
  }
}

and i'm expect

@media (--pc-wide-viewport) {
  .profile {
    width: 500px;
  }
}

ie8wide .profile {
  width: 500px;
}

hope to support this 😄

.embed-responsive {
    position: relative;
    display: block;
    height: 0;
    padding: 0;
    overflow: hidden;

    &:before {
        content: '';
        display: block;
        padding-bottom: 56.25%;
    }
}

No semicolon after overflow: hidden

Node#after is deprecated. Use Node#raws.after
[09:21:25] gulp-notify: [Css] Error: after.after is not a function

Linux 3.19.0-30-generic #34~14.04.1-Ubuntu SMP Fri Oct 2 22:09:39 UTC 2015 x86_64 x86_64 x86_64 GNU/Linux
$ yarn --version 0.24.5
$ node -v v8.0.0
-------------------
or Win 10, node 8

dome repo https://github.com/retyui/xgulp/tree/nested

1. clone and checkout nested branch
2. yarn
3. ./node_modules/.bin/gulp css

Just trying out PostCSS and right out the gate bumped into an issue im not sure why.

Whenever I change the CSS file, with postcss-nested enabled, i get:

/Users/luismartins/Sites/LAB/postcss/node_modules/gulp-postcss/node_modules/postcss/lib/lazy-result.js:152
        this.processing = new Promise(function (resolve, reject) {
                              ^
ReferenceError: Promise is not defined
    at LazyResult.async (/Users/luismartins/Sites/LAB/postcss/node_modules/gulp-postcss/node_modules/postcss/lib/lazy-result.js:152:31)
    at LazyResult.then (/Users/luismartins/Sites/LAB/postcss/node_modules/gulp-postcss/node_modules/postcss/lib/lazy-result.js:75:21)
    at Transform.stream._transform (/Users/luismartins/Sites/LAB/postcss/node_modules/gulp-postcss/index.js:45:8)
    at Transform._read (_stream_transform.js:179:10)
    at Transform._write (_stream_transform.js:167:12)
    at doWrite (_stream_writable.js:226:10)
    at writeOrBuffer (_stream_writable.js:216:5)
    at Transform.Writable.write (_stream_writable.js:183:11)
    at write (/Users/luismartins/Sites/LAB/postcss/node_modules/gulp/node_modules/vinyl-fs/node_modules/through2/node_modules/readable-stream/lib/_stream_readable.js:623:24)
    at flow (/Users/luismartins/Sites/LAB/postcss/node_modules/gulp/node_modules/vinyl-fs/node_modules/through2/node_modules/readable-stream/lib/_stream_readable.js:632:7)

My gulpfile.js is pretty vanilla atm:

var gulp = require('gulp');
var nestedcss = require('postcss-nested');
    // browserSync = require('browser-sync'),
    // reload      = browserSync.reload;


gulp.task('css', function () {
    var postcss = require('gulp-postcss');
    var processors = [
        nestedcss
    ];
    return gulp.src('src/**/*.css')
        .pipe( postcss( processors ) )
        .pipe( gulp.dest('build/') );
});



// Watch
gulp.task('default', function() {

    gulp.watch('src/**/*.css', ['css']);

});

The css file only has a standard css declaration in it.

Any tips?

Hi, I have this CSS:

.Foo
  &__bar
    color: red

I want to compile it and use postcss-modules to get the classes out of it, it should output:

{
 Foo: 'hash',
 Foo__bar: 'hash',
}

The problem is that this plugin is going to output only:

.Foo__bar { color: red; }

and then postcss-modules isn't able to extract .Foo.

You can reproduce the problem here:
https://runkit.com/fezvrasta/59775c35542cda0012cc20ef

Ideas?

Hi,

Use of & within pseudo selectors like :not is broken on v2. The following example:

.a {
	&:not(&--b) {
		display: none;
	}
}

On version 1.x, it was transformed to:

.a:not(.a--b) {
    display: none;
}

On version 2.x, it is transformed to:

.a:not(&--b) {
    display: none;
}

body{
    color: #000;
    .nested{
        color: #fff;
    }
}

renders:

body{color:#000; color:#fff;}.nested{}

But if I replace body element with div or any class it renders correctly.

Currently, we're not able to reference the grandparent of the current selector.

.item {
    display: block;

    &__view {
        display: block;
    }

    &--edit {
        & &__view {
            display: none;
        }
    }
}

Output:

.item {
    display: block
}
.item__view {
    display: block;
}
.item--edit .item--edit__view {
    display: none;
}

Can we have something like && for grandparent selector? So that the following code

.item {
    display: block;

    &__view {
        display: block;
    }

    &--edit {
        & &&__view {
            display: none;
        }
    }
}

Output:

.item {
    display: block
}
.item__view {
    display: block;
}
.item--edit .item__view {
    display: none;
}

I've created a branch for this in my fork.

Hello,

I have this snippet:

:global .theme-class {
  .button { ... }

  .button--primary { ... }
}

In browser I get this output:

.theme-class {
  .button_34hj34 { ... }

  .button--primary_34hj34 { ... }
}

Since this is not a standard CSS (nesting is not supported) this doesn't give me result that I want. What I want is output like this:

.theme-class .button_34hj34 { ... }
.theme-class .button--primary_34hj34 { ... }

I'm using webpack, with PostCSS loader

What am I doing wrong?

Could you add support for CSS @apply Rule?

http://tabatkins.github.io/specs/css-apply-rule/
https://www.polymer-project.org/1.0/docs/devguide/styling.html#custom-css-mixins
https://github.com/StartPolymer/polymer-starter-kit-plus

Issue 1

.Navigation {
  --paper-menu-selected-item: {
    color: var(--default-primary-color);
  };
}

->

.Navigation --paper-menu-selected-item: {
  color: var(--default-primary-color);
}

Issue 2

.Main {
&-content {
   @media (--sm-viewport) {
      @apply(--paper-font-body);
    }
}
}

->

@media (max-width: 599px) {
  @apply(--paper-font-body);
}

Thank you

I've been playing with postcss for some time and noticed that you can not use pattern which works in sass like this:

@mixin control() {
  $c: &; //GET THE REFERENCE
  &_state {
    &_active {}
    &_hover {}
    &_focus {}
    &_disabled {
      cursor: default !important;
    }
  }
  &:hover:not(#{$c}_state_disabled) {
    @extend #{$c}_state_hover;//USE IT IN DEEP NESTING LIKE THAT
  }
  &:focus:not(#{$c}_state_disabled) {
    @extend #{$c}_state_focus;//USE IT IN DEEP NESTING LIKE THAT
  }
  &:active:not(#{$c}_state_disabled) {
    @extend #{$c}_state_active;//USE IT IN DEEP NESTING LIKE THAT
  }
}

@mixin button() {
  @include control();
  cursor: pointer;
}

//LATER YOU OVERRIDE STATE IN IMPLEMENTATION OF THE MIXIN
.action-button {
  $c: &; //HERE I CAN GET REFERENCE ON CURRENT SELECTOR
  @include button();

  #{$c}_state //AND USER IT ANYTHERE FROM NOW ON
  {
    &_hover {
      background-color: #123;
      border-color: #234;
    }

    &_disabled {
      opacity: 0.5;
      color: #777;
    }

    &_focus {
      @extend #{$c}_state_hover; //IN DEEP NESTING TOO
    }
  }
}

In postcss-nested I can not use reference operator in variables or in at-rules.

Input:

.article {
  .title {
    @statement arguments;
    color: blue;
  }
}

Expected:

.article .title {
  @statement arguments; /* Should stay inside ".article .title" rule set */
  color: blue;
}

Actual:

.article .title {
  color: blue;
}
@statement arguments; /* Appears outside */

I see how this may be useful for @media queries, but for other PostCSS plugins, such as postcss-simple-extend where the context is important, the @Statement should stay inside.

#32

After updating to v2.0.3 I've faced the following issue:

Input

.one {
  & + & {
    ...
  }
}

Output

.one + & {
  ...
}

Assuming that you meant to bubble @supports and not @support?

https://developer.mozilla.org/en-US/docs/Web/CSS/@supports
https://github.com/postcss/postcss-nested/blob/master/index.js#L56

Our company would like an option that would throw an error if someone tried to use the compound suffix selector (e.g. &-). This is because we would only use this syntax to nest BEM elements and modifiers (i.e., &__element and &--modifier). Although the syntax is super nice for design time ease, we feel that allowing this syntax may be less readable. Our BEM block name, in this case, may be out of "scanning range" for the reader (also an issue for code review), has the potential of making the context scope too large and introduces more "right shift", which we would like to keep as shallow as possible.

Can we introduce, perhaps, a plugin option called compoundSuffixSelector that we could set to false, which would throw an error if someone tries to use this syntax? This would be most ideal for us.

Having issues with nesting custom selectors.
Example:

@custom-selector :--heading h1, h2, h3, h4, h5, h6;

.classname {  :--heading{font-size: 24px;} }

It would be so awesome if this plugin could combine @media queries like Sass does:

.foo {
  @media (min-width: 400px) {
    @media (max-width: 800px) {
      // ...
    }
  }
}

Would result into:

@media (min-width: 400px) and (max-width: 800px) {
  .foo {
    // ...
  }
}

Is this feature within the scope of the plugin?

Nested Properties

CSS has quite a few properties that are in “namespaces;” for instance, font-family, font-size, and font-weight are all in the font namespace. In CSS, if you want to set a bunch of properties in the same namespace, you have to type it out each time. Sass provides a shortcut for this: just write the namespace once, then nest each of the sub-properties within it. For example:

.funky {
  font: {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}

is compiled to:

.funky {
  font-family: fantasy;
  font-size: 30em;
  font-weight: bold; }

The property namespace itself can also have a value. For example:

.funky {
  font: 20px/24px fantasy {
    weight: bold;
  }
}

is compiled to:

.funky {
  font: 20px/24px fantasy;
    font-weight: bold;
}

It would be nice if this plugin would support composeing from the current selector's parent, especially if the parent selector is not used in the markup and instead exists for namespacing.

Example:

.button {
  background-size: 20px;

  &--opened {
    composes: &; /* doesnt work */
    background-image: svg-load(...);
  }

  &--closed {
    composes: &; /* doesnt work */
    background-image: svg-load(...);
  }
}

<div
  className={isOpen
    ? styles['button--opened']
    : styles['button--closed']
  }
/>

Currently, when you attempt to do this, this is the error you get:

ERROR in ./~/css-loader?modules&sourceMap&importLoaders=1&localIdentName=[local]___[hash:base64:5]!./~/postcss-loader!./widgets/static/widgets/ImageryBrowser/Filterer.styles.css
Module build failed: referenced class name "&" in composes not found (73:16)

I assume that to be a problem with this library, not css-modules but I could be mistaken.

It would be much awesome to manupulate with & like this:

.foo, .bar > a { first: &[1]; second-combinator: &[2][2] }

to generate this:

.foo, .bar > a { first: ".foo"; second-combinator: ">"}

got this idea at @chriseppstein's answer in less/less.js#1075

With this, we will can specify :hover target on right selector, for example,

input:

.foo {
  .bar {
    color: gray;
    &[2]:hover &[1] {
      color: blue;
      }
    }
  }

output:

.foo .bar{
  color: gray;
  }
.foo:hover .bar {
  color: blue;
  }

If we want to select an element with two classes we can write .foo.bar { }.

Is it possible to express .foo.bar { } using postcss-nested?

.foo {
   .bar { }  
    // ... compiles into ".foo .bar" (which is correct) but is there a way to emit ".foo.bar"?
}

At the moment my work around is to write a separate sector:

&__link {
  display: block;
  &:focus,
  &:hover {
    background-color: #272727;
    color: white;
    text-decoration: none;
  }
}
&__link.active {
  background-color: #272727;
  color: white;
  text-decoration: none;
}

... I would prefer it if I could nest the selector however.

Thanks 👍

Input source

body {
  font-size: 1.4rem;
  line-height: 1.2em;
}

dd {
  margin-left: 0;
  padding-left: 1.75rem;

  & + dt {
    margin-top: 2rem;
  }
}

Output

body {
  font-size: 22px;
  font-size: 1.4rem;
  line-height: 1.2em;
}

dd {
>>    margin-top: 32px;
  margin-left: 0;
  padding-left: 28px;
  padding-left: 1.75rem;
}

dd + dt {
  margin-top: 32px;
  margin-top: 2rem;
}

Example of configuration

my config.js is ：

module: {
...
    rules: [
     ...
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options:  [
            require('postcss-nested')(),
            require('postcss-import')({
                path: [
                   './src'
                ]
            }),
           require('postcss-flex-fallback')(),
           require('postcss-px2rem')({
               remUnit: 75,
           }),
           require('autoprefixer')({ browsers: ['last 2 versions'] }),
       ],
   },
   ......
   ]
...
}

in a.postcss file

.main {
  background: #f1f2f4;
  padding: 10px;
  height: 90vh;
  width: 375px;
  margin: 0 5px;
  overflow-y: scroll;
  overflow-x: hidden;
  box-shadow: inset 0px 0px 5px 1px #ccc;

  & .nothingTip {
    height: 88vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 6rem;
    color: #EAE9E9;
  }
}

after compiling...

i have done as gajus/babel-plugin-react-css-modules#49

I've got the following css :

button {
  background-color: #fff;
  border: 1px solid $green;
  font-size: 14px;
  margin-right: 128px;
  padding: 10px 20px;
  width: 128px;

  &:hover {
    background-color: $green;
    color: #fff;
  }

  &:active {
    background-color: $dark_grey;
    border-color: #fff;
    color: #fff;
  }
}

which is computed :

button{background-color:#fff;border:1px solid #85c401;font-size:14px;margin-right:120px;padding:10px 20px}button:active{background-color:#b3b3b3;color:#fff}

note the missing :hover.

changing it in a non nested way fix the issue.

Input

.pull-right { float: right; }

.colLarge {
    margin: 20px auto *;
    position: relative;
    width: 960px;
    padding-bottom: 20px;
    &.everything {
        &.no-record {
            position: absolute;
            width: 96.5%;
            bottom: 0;
        }
    }
}

Output

.pull-right { float: right; }

.colLarge {
    margin: 20px auto *;
    position: relative;
    width: 960px;
    padding-bottom: 20px;
}

.colLarge.everything.no-record { position: absolute; width: 96.5%; bottom: 0; }

After indenting top css rule (.pull-right)
Input

.pull-right { 
    float: right; 
}

.colLarge {
    margin: 20px auto *;
    position: relative;
    width: 960px;
    padding-bottom: 20px;
    &.everything {
        &.no-record {
            position: absolute;
            width: 96.5%;
            bottom: 0;
        }
    }
}

Output

.pull-right { 
    float: right; 
}

.colLarge {
    margin: 20px auto *;
    position: relative;
    width: 960px;
    padding-bottom: 20px;
}

.colLarge.everything.no-record { 
    position: absolute; 
    width: 96.5%; 
    bottom: 0; 
}

Gulp Task

gulp.task("compile:postcss", function(){
        return gulp.src([
            opts.include("postcss/dummy.css")
        ])

        .pipe($.postcss(require('precss')({})))
        .pipe(gulp.dest("build/css/"));
});

Current code

.scrum {
    .explanation {
        padding: 5rem;
    }
}

Unexpected result

.scrum{
        padding:80px;
}
.scrum .explanation{
    padding:80px;
}

Using last version of postcss-nested ("postcss-nested": "^0.3.1")

Any ideas why this is happening?

Hi!

Having an issue with configuring postcss-nested. In any file that has nesting in it I receive an error:

Error in ./app/components/helpers/Toolbar/ButtonBar.css
Module build failed: TypeError: after.after is not a function

My webpack config:

           {
                test: /\.css$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: 'style-loader',
                    },
                    {
                        loader: 'css-loader',
                        options: {
                            importLoaders: 1,
                            modules: true,
                            localIdentName: '___[name]__[local]___[hash:base64:5]',
                        },
                    },
                    {
                        loader: 'postcss-loader',
                    },
                ],
            },

PostCSS plugins:

        options: {
            postcss: [
                postcssFunctions({
                    functions: require('../app/styles/colorFunctions.js'),
                }),
                postcssVars({
                    variables() {
                        return variables;
                    },
                }),
                postcssNested(),
                postcssAssets({
                    loadPaths: ['static/'],
                }),
                autoprefixer({
                    browsers: [
                        'last 3 version',
                        'ie >= 11',
                    ],
                }),
            ],
        },

http://tabatkins.github.io/specs/css-nesting/

  table.colortable {{
    td {
      text-align:center;
      {&.c { text-transform:uppercase }}
      {&:first-child, &:first-child + td { border:1px solid black }}
    }
    th {
      text-align:center;
      background:black;
      color:white;
    }
  }}

output

  table.colortable td {
    text-align:center;
  }
  table.colortable td.c {
    text-transform:uppercase;
  }
  table.colortable td:first-child, table.colortable td:first-child+td {
    border:1px solid black;
  }
  table.colortable th {
    text-align:center;
    background:black;
    color:white;
  }

Sass handles custom at-rules the same way it handles @media queries.

This

.container {
  @define-container;
  font-size: 10px;
  background: green;
  
  @media (min-width: 500px) {
    background: red;
  }
  
  @container (width >= 200px) {
    font-size: 20px;
  }
}

Becomes this:

.container {
  @define-container;
  font-size: 10px;
  background: green;
}
@media (min-width: 500px) {
  .container {
    background: red;
  }
}
@container (width >= 200px) {
  .container {
    font-size: 20px;
  }
}

The above is the syntax my @container query project would benefit from a lot: https://github.com/ZeeCoder/container-query

Not sure how hard would this be to implement, given some directions I would look into it myself. 👍

is this ready for a preliminary release? anything we can do to help?

body { color: #f00; h1 { color: #0f0; h2 { color: red; } } }

renders to:

body { color: #f00 } body h1 { color: #0f0 } body h1 h2 { color: red; }

Input

.captcha-form {
  padding: 5px 10px 5px 20px;
  border: 1px solid #e0e0e0; /* no */

  input {
    width: 300px;
  }
  img {
    display: block;
  }
}

Output

.captcha-form {
  padding: 5px 10px 5px 20px;
  border: 1px solid #e0e0e0;
}
/* no */
.captcha-form input {
  width: 300px;
}
.captcha-form img {
  display: block;
}

/* no */ comment is for px2rem. Cause of this bug, px2rem will transform the original value.

Thanks :)

It seems that if you use comments above child rulesets then they exist in the parent, creating an empty ruleset.

Input

.Parent {
  /* comment about Child */
  .Child {
    width: auto;
  }

  /* another comment about this one */
  .AnotherChild {
    width: auto;
  }
}

Expected

/* comment about Child */
.Parent .Child {
  width: auto;
}

/* another comment about this one */
.Parent .AnotherChild {
  width: auto;
}

** Actual **

.Parent {
  /* comment about Child */

  /* another comment about this one */
}

.Parent .Child {
  width: auto;
}

.Parent .AnotherChild {
  width: auto;
}

It's interesting to note that Sass and Less also have this issue, but Stylus correctly matches the expected output however it does remove the comments.

I'm guessing they get round this issue by encouraging // style comments.

Wondering what should happen in this case.

Version 2.04
When using namespaced selectors like:

ui|dock {
    &.explorer {
       float: none;
    }
}

the result is:

ui|dock|.explorer {
    float: none;
}

Notice the extra '|'
In version 2.02 this worked correctly.