csstools / precss Goto Github PK

View Code? Open in Web Editor NEW

1.6K 1.6K 77.0 420 KB

Use Sass-like markup in your CSS

Home Page: https://jonathantneal.github.io/precss/

License: Creative Commons Zero v1.0 Universal

JavaScript 42.40% CSS 57.60%

precss's Introduction

PreCSS

PreCSS lets you use Sass-like markup and staged CSS features in CSS.

$blue: #056ef0;
$column: 200px;

.menu {
  width: calc(4 * $column);
}

.menu_link {
  background: $blue;
  width: $column;
}

/* becomes */

.menu {
  width: calc(4 * 200px);
}

.menu_link {
  background: #056ef0;
  width: 200px;
}

PreCSS combines Sass-like syntactical sugar — like variables, conditionals, and iterators — with emerging CSS features — like logical and custom properties, media query ranges, and image sets.

Usage

Add PreCSS to your build tool:

npm install precss --save-dev

Node

Use PreCSS to process your CSS:

import precss from 'precss';

precss.process(YOUR_CSS);

PostCSS

Add PostCSS to your build tool:

npm install postcss --save-dev

Use PreCSS as a plugin:

import postcss from 'postcss';
import precss from 'precss';

postcss([
  precss(/* options */)
]).process(YOUR_CSS);

Gulp

Add Gulp PostCSS to your build tool:

npm install gulp-postcss --save-dev

Use PreCSS in your Gulpfile:

import postcss from 'gulp-postcss';
import precss from 'precss';

gulp.task('css', function () {
  return gulp.src('./src/*.css').pipe(
    postcss([
      precss(/* options */)
    ])
  ).pipe(
    gulp.dest('.')
  );
});

Grunt

Add Grunt PostCSS to your build tool:

npm install grunt-postcss --save-dev

Use PreCSS in your Gruntfile:

import precss from 'precss';

grunt.loadNpmTasks('grunt-postcss');

grunt.initConfig({
  postcss: {
    options: {
      use: [
        precss(/* options */)
      ]
    },
    dist: {
      src: '*.css'
    }
  }
});

Plugins

PreCSS is powered by the following plugins (in this order):

precss's People

Contributors

Stargazers

Watchers

precss's Issues

Run operations on variables

Absolutely loving precss but i'm starting to feel a pang in my heart for variable operations.

For example

$gap:15px;
.somthing {
   margin:$gap/2;
}

$gap:15px;
$ubergap:$gap*2;

Couldn't find the in the docs and when i try this the css is outputted unprocessed.

Any help? <3

Add postcss-atroot plugin

OEvgeny/postcss-atroot
The @at-root causes one or more rules to be emitted at the root of the document, rather than being nested beneath their parent selectors:

.parent {
  ...
  @at-root{
    .child {...}
  }
}

Which would produce:

.child { ... }
.parent { ... }

@define-mixin using if conditions

I'm trying to define a mixin using IF conditions, here is my css:

    @define-mixin font-smoothing $value: on {
        @if $value == on {
            -webkit-font-smoothing: antialiased;
        }
        @else {
            -webkit-font-smoothing: subpixel-antialiased;
        }
        -moz-osx-font-smoothing: auto;
    }

But it seems that it is not worked as I expected

Weird errors with version

I get an error:
Your current PostCSS version is 5.0.1, but postcss-advanced-variables uses 4.1.16. Perhaps this is the source of the error below.

Why is PostCSS a dependency of Precss? Precss required PostCSS 4.1.16 but gulp-postcss requires 5.0.1.

missing a trailing semicolon

/* before */

.notice--clear {
@if 3 < 5 {
background: green;
}
@else {
background: blue;
}
}

/* after */

.notice--clear {
background: green
}

Precss not compatible with your operating system or architecture. Windows 10 64bit.

Just flagging this. Precss isn't compatible with windows. Curious if this is happening to everyone or just me? I have linux and Mac I can try there too.

npm install --save-dev precss
npm WARN optional Skipping failed optional dependency /chokidar/fsevents:
npm WARN notsup Not compatible with your operating system or architecture: [email protected]
npm WARN [email protected] No description

Removed ; and extra new lines

When i use postcss with precss as only plugin on file style.css which contains only @import "generic/normalize" precss adds extra new lines between properties and removes semicolon after last property.
Example (genereic/normalize.css):

.test{
height: 10px;
width: 10px;
}

Dest:

.test{

height: 10px;

width: 10px
}

When you add some css in style.css (example: html{background: white;}) it fixes both problems. But if you skip semicolon after last rule (example: html{background: white}) it only fixes extra new lines.

can't corvet keyframes in loops

@for $i from 1 to 7{
  @keyframes ani$i {
    0% {
      background-position: 0 calc(-73px * ($i - 1));
    }

    100% {
      background-position: -2117px calc(-73px * ($i - 1));
    }
  }
  .ani$i{
    background-position: 0 calc(-73px * ($i - 1));
  }
  .ani$i:hover {
      animation: ani$i 1s steps(29);
    }
}

Property lookup is gone

There's an example of usage for postcss-property-lookup plugin but looking at the npm package.json I can't see it and of course the example is not working either. Is this replaced by something else or just an error in the README?

error nesting in media query

I've tried this:

@media only screen and (max-width: 900px){
    .rock-menu{
        #mobile-button {
            display:inline-block;
        }
    }
}

it gives me an error

Running "postcss:dist" (postcss) task
Fatal error: Cannot call method 'replace' of undefined
Warning: Cannot call method 'replace' of undefined

I tried adding postcss-nested as well, but it doesn't work.

Why not calc like sass?

For example：

Before compile:

$column: 200px;
.menu {
    width: 4 * $column;
}

After compile:

.menu {
    width: 800px;
}

Add postcss-property-lookup plugin

https://github.com/simonsmith/postcss-property-lookup

.icon {
    width: 20px;
    height: @width;
}

Official file extension

Mayb we should select official file extension for PreCSS source (or any PostCSS sources with custom CSS).

What about .pcss?

variable interpolation

In Sass we can use variable interpolation with #{}
For example:

$foo: 'world';
$bar: 'Hello #{$foo}!'; // 'Hello world!'

Is it possible do something in precss?

Container#eachAtRule is deprecated

I'm noticing this on many of the plugins today:

Container#eachAtRule is deprecated. Use Container#walkAtRules instead.
Node#before is deprecated. Use Node#raws.before
Container#eachDecl is deprecated. Use Container#walkDecls instead.
Fatal error: Cannot read property 'before' of undefined

Return root selector

For example, we have this situation:

.block {
    &__element {
        display: none;
    }
}

It compiles to

.block__element {
    display: none;
}

Then we want add state to .block. For example add active state and change styles on element.

.block {
  $root: .block;

  &__element {
    display: none;

    $(root)_active & {
      display: block;
    }
  }
}

It compiles to

.block__element {
  display: none;
}
.block_active .block__element {
  display: block;
}

But I saw an interesting solution for stylus in this article.

Is it possible do something in precss? Or is there some other solution?

Problem with @extend and @media

I have exeption with this expression

@import "sprite.css";

@media only screen and (max-width: 1366px) { 
   .more {
    color: #fff;
    &:after {
      @extend .sprite-class;(this class situated in sprite.css)
    }
    &:hover {
      color: #ffcc00;
    }
  }
}

but when I use simple without @media

.classname{
  @extend .sprite-class;
}
all run Good...

How to set options plugin options (Better Documentation)?

I have managed to get PreCSS working and I'm pretty stoked about it. However, the documentation is not very clear on how to set options working. For example, I want to set the postcss-partial-import to use the .scss extension, so that my IDE can recognize SASSy code. How would I go about setting this option?

This is my current setup:

gulp.task('sass', function() {
    var processors = [
        precss,
        lost,
        autoprefixer({
            browsers: ['last 2 versions', 'ie 9', 'android 2.3', 'android 4'],
            cascade: false
        }),
        mqpacker,
        csswring
    ];
    return gulp.src(sassSource)
        .pipe(sourcemaps.init())
        .pipe(postcss(processors))
        .pipe(sourcemaps.write('./'))
        .pipe(gulp.dest(sassDestination))
        .pipe(browserSync.stream());
});

I'm assuming it would be some thing like the following?

gulp.task('sass', function() {
    var processors = [
        precss( postcss-partial-import )({ extension: 'scss' }),
        lost,
        autoprefixer({
            browsers: ['last 2 versions', 'ie 9', 'android 2.3', 'android 4'],
            cascade: false
        }),
        mqpacker,
        csswring
    ];
    return gulp.src(sassSource)
        .pipe(sourcemaps.init())
        .pipe(postcss(processors))
        .pipe(sourcemaps.write('./'))
        .pipe(gulp.dest(sassDestination))
        .pipe(browserSync.stream());
});

But I have no clue. Please help.

Default variable overwrite

it would be great if there was possibility to use default variables which could be overwritten. like sass do with it's !default.

Function for darken/lighten

Hello Jonathan,

I know there is a darken/lighten functionality for Sass colors. I think it's a inbuilt function in Sass, are there any possible for implementing it for precss in postcss?

http://sass-lang.com/documentation/Sass/Script/Functions.html#darken-instance_method

Thank you

a problem @at-root

there has a problem with precss,when i use '@at-root' like you has said it doesn't work
this is the postcss file:

.test{
  color:red;
  @at-root{
    .test2{
      color:blue;
    }
  }
}

and then the output file:

.test{
  color:red;
  @at-root{
    .test2{
      color:blue;
    }
  }
}

i tried to ask the author of '@at-root' and he said that this is wrong in precss and it run normal in postcss

variable interpolation in Imports

How would one use variables within imports?

For example, if I was setting a path variable, such as:
$bower-path: ../../../bower_components;
and then wanted to use it within an include.

I tried the following:
@import '$(bower-path)/sanitize-css/sanitize.css';
and
@import '$bower-path/sanitize-css/sanitize.css';
but the variable is not recognized.

Is this possible within precss or should i just use my task runner? Any help is greatly appreciated!

Linking Bootstrap's Sass code

I'm having trouble linking Bootstrap's Sass code as per this example (grid-only, version 4-alpha2). The dependency is acquired correctly into node_modules/ and I added the 7 lines into my scss file. And the /\.scss$/ section of my webpack config is as such:

//module.loaders: [...
{
  test: /\.scss$/,
  loaders: [
    'isomorphic-style-loader',
    'css-loader?' + (DEBUG ? 'sourceMap&' : 'minimize&') +
    'modules&localIdentName=[name]_[local]_[hash:base64:3]',
    'postcss-loader',
  ],
}, //...

But when I try to build, the isomorphic style loader complains with errors in Bootstrap. One line for example seems to be trying to evaluate a comment, because it says 'Unclosed quote' on a line in the Bootstrap code file that has a quote, but is in a comment. Apparently the postcss-loader doesn't recognize Sass single-line comments, at the very least.

Here is my postcss section of the webpack config:

  postcss: function plugins(bundler) {
    return [
      require('postcss-import')({ addDependencyTo: bundler }),
      require('precss')(),
      require('autoprefixer')({ browsers: AUTOPREFIXER_BROWSERS }),
    ];
  }

Short of asking for a pull request for PreCSS to support single-line comments, can anyone suggest a way for me to get this to work?

incorrect property order in 1.4.0

After update to version 1.4.0 this code:

.icon {
  &.active {
    height: 1px;
  }
  &.small {
    height: 2px;
  }
}

compiled in:

.icon.small {
    height: 2px;
}
.icon.active {
    height: 1px;
}

bug from last version of postcss-nesting plugin

Complaining about unclosed quote in comment

This is valid for libsass:

// Because of the change above, 20px is actually right here, but the default code doesn't have the 2 *

@extend creating duplicate class with empty declaration

Here's an interesting problem. Any ideas? Is it because I'm using extend in the class name?

/* Extends */
@define-extend bg-green {
  background-color: green;
}

.extend-class {
  @extend bg-green;
}

produces an extra .extend-class

/* Extends */
.extend-class {
  background-color: green;
}


.extend-class {
}

Gulp plugin?

I'm new to this but is there a gulp plugin yet?

Could not compile _*.scss files

// sass/index.scss
.device-pc {
    @import "./devices/pc";
}

// ./devices/_pc.scss
@import "../import_other_files";

'use strict';

var precss = require('precss'),
    scss = require('postcss-scss'),
    autoprefixer = require('autoprefixer');

module.exports = function (grunt) {
    return {
        options: {
            //syntax: scss,
            parser: scss,

            processors: [
                precss({ style: 'compressed' }),
                autoprefixer({ cascade: true })
            ]
        },

        build: {
            files: [
                {
                    expand: true,
                    cwd: './sass',

                    src: [
                        '**/*.scss',
                        '!**/_*.scss'
                    ],

                    dest: './build',

                    rename: function (cwd, src) {
                        return cwd + '/' + src.replace(/\.scss$/, '.min.css');
                    }
                }
            ]
        }
    };
};

Fatal error: ENOENT, open '/sass/devices/_pc.css'

PS: grunt-sass works fine for me

Add postcss-nested-props plugin

https://www.npmjs.com/package/postcss-nested-props

Refer to postcss/postcss-nested#26

Cannot read property 'before' of undefined

I'm getting this error when I use @import in my css file.

Plumber found unhandled error:
 TypeError in plugin 'gulp-postcss'
Message:
    Cannot read property 'before' of undefined

nested css producing inline output

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/"));
});

More neutral name

I think, that “Sass” link in name is bad because:

users will expect Sass behaviour
we will think only about Sass way instead of have free minds
it is a bad marketing, because we use Sass trademark for non-Sass ecosystem

Variables update

When creating or updating variables webpack server needs to be restarted to update variables values.

& not working in loops not working in 1.4

With the following:

div {
  @for $i from 0 to 100 by 5 {
    &.size-$i {
      flex: 0 0 $(i)%;
    }
  }
}

I get this error:

Module build failed: TypeError: Cannot read property 'forEach' of undefined
    at transpileSelectors (<path>/node_modules/postcss-cssnext/node_modules/postcss-nesting/index.js:71:20)
    at <path>/node_modules/postcss-cssnext/node_modules/postcss-nesting/index.js:57:4
    at <path>/node_modules/postcss-loader/node_modules/postcss/lib/container.js:115:34
    at <path>/node_modules/postcss-loader/node_modules/postcss/lib/container.js:73:26
    at AtRule.each (<path>/node_modules/postcss-loader/node_modules/postcss/lib/container.js:60:22)
    at AtRule.walk (<path>/node_modules/postcss-loader/node_modules/postcss/lib/container.js:72:21)
    at <path>/node_modules/postcss-loader/node_modules/postcss/lib/container.js:76:32
    at Rule.each (<path>/node_modules/postcss-loader/node_modules/postcss/lib/container.js:60:22)
    at Rule.walk (<path>/node_modules/postcss-loader/node_modules/postcss/lib/container.js:72:21)
    at <path>/node_modules/postcss-loader/node_modules/postcss/lib/container.js:76:32

If I remove the &, it works fine.

Also, it does work in the live demo, but perhaps that runs a different version?

Using @nest, this particular problem goes away, but then the loop's variable interpolation doesn't work. Perhaps another bug?

div {
  @for $i from 0 to 100 by 5 {
    @nest &.size-$i {
      flex: 0 0 $(i)%;
    }
  }
}

Gives:

div {
}
div.size-$i {
    flex: 0 0 0%
}
div.size-$i {
    flex: 0 0 5%
}

TypeError: Cannot read property 'type' of null

When attempting to build a es6 project with gulp and postcss, precss will fail with the following error:

/home/adam/Projects/astokes.org/node_modules/gulp-postcss/node_modules/postcss/lib/lazy-result.js:43
        if (typeof css === 'object' && css.type === 'root') {
                                          ^

TypeError: Cannot read property 'type' of null
    at new LazyResult (/home/adam/Projects/astokes.org/node_modules/gulp-postcss/node_modules/postcss/lib/lazy-result.js:43:43)
    at Processor.process (/home/adam/Projects/astokes.org/node_modules/gulp-postcss/node_modules/postcss/lib/processor.js:36:16)
    at Transform.stream._transform (/home/adam/Projects/astokes.org/node_modules/gulp-postcss/index.js:44:8)
    at Transform._read (_stream_transform.js:167:10)
    at Transform._write (_stream_transform.js:155:12)
    at doWrite (_stream_writable.js:292:12)
    at clearBuffer (_stream_writable.js:396:7)
    at onwrite (_stream_writable.js:331:7)
    at WritableState.onwrite (_stream_writable.js:89:5)
    at afterTransform (_stream_transform.js:79:5)
[~/P/astokes.org]

I'm running node v3.2.0 (iojs), babel 5.8.23, gulp v3.9.0. I'm utilizing gulp/babel to process the site:

gulpfile.babel.js

"use strict";

import gulp from "gulp";
import eslint from "gulp-eslint";
import uglify from "gulp-uglify";
import minifycss from "gulp-minify-css";
import concat from "gulp-concat";
import del from "del";
import postcss from "gulp-postcss";
import precss from "precss";
import cssnext from "cssnext";
import cssnano from "cssnano";
import rucksack from "gulp-rucksack";

let css = [
    "bower_components/normalize-css/normalize.css",
    "bower_components/highlightjs/styles/obsidian.css",
    "assets/css/*"
];

gulp.task('styles', () => {
    return gulp.src(css)
        .pipe(postcss([
            precss(),
            cssnext(),
            cssnano()]))
        .pipe(rucksack())
        .pipe(minifycss())
        .pipe(concat('main.min.css'))
        .pipe(gulp.dest('public/css'));
});

let js = [
    "bower_components/jquery/dist/jquery.js",
    "bower_components/highlightjs/highlight.pack.js",
    "assets/js/main.js"
];

gulp.task('js', () => {
    return gulp.src(js)
        .pipe(uglify())
        .pipe(concat('main.min.js'))
        .pipe(gulp.dest('public/js'))
});

gulp.task('lint', () => {
    return gulp.src(['lib/**/*.js'])
        .pipe(eslint())
        .pipe(eslint.format())
        .pipe(eslint.failOnError())
});

gulp.task('clean', (cb) =>{
    del(['public'], cb);
});

gulp.task('default', ['clean', 'lint', 'styles', 'js']);

Is this something within precss, or my use of babel, or gulp itself? My project is hosted at if you needed more context around the setup https://github.com/battlemidget/astokes.org

@content in mixins

I've got a mixin like this:

@define-mixin respond-min $width {
  @media only screen and (min-width: $width) {@content;}
}

The @mixin works, but the @content doesn't come through.

@media only screen and (min-width: 60em) {
  @content;
}

Is this feature supported? Thanks!

What is the motivation, why I should use precss over sass?

And what's the difference?

I could not find anything about these questions in the readme.

Link to the site from the demo?

That would just make it a little easier to find the project code. 👍

Variables boolean support

It would be great if there was variable boolean support

peerDependencies

I propose to use postcss as peerDependency.
It seems more consistent with npm 3.

can't import more than one file type.

Using mixed file types (scss, and sass), i can't get them to import like they would with other sass compilers. i changed the default from .css to .scss with help of issue #36 but that doesn't help with you have scss, from converted css files, and sass from newly written files.

     postcss: {
            options: {
                //map: true, // inline sourcemaps
                parser: require('postcss-scss'),
                // or

                map: {
                    inline: false, // save all sourcemaps as separate files...
                    annotation: 'dist/css/maps/' // ...to the specified directory
                },

                processors: [
                    //  flag for sass
                    require('precss')({
                        /* options */
                        import: {
                        extension: 'scss' 
                        }
                    }),
        //  add fallbacks for rem units
  require('pixrem')(),
  //  add vendor prefixes
  require('autoprefixer')({
    browsers: 'last 2 versions'
  }),
  //    minify the result
  //    require('cssnano')() 
  ]
  },
  file: {
    src: '<%= paths.src %>/scss/nccpt.scss',
    dest: '<%= paths.dist %>/css/nccpt.css'
  } 
},

this works until it encounters a .sass file.

i tried.

require('precss')({
    /* options */
    import: {
      extension: ['scss', 'sass']
    }
}),

it didn't work.

i also tried the grunt globing pattern of {sass, scss}

Grunt fails: "ReferenceError: Promise is not defined"

I'm just starting with PostCSS (using Grunt), so maybe I'm doing something wrong, but:

Grunt throws an error when I try to run task involving PreCSS: "ReferenceError: Promise is not defined"
When line "require('precss')()" is commented out, grunt works
I checked with the version 0.3.0 and it's working, problem is with 1.0.0

Preprocessor like comment block

Is there any preprocessor like comment, so it will not be rendered in compiled version?

a problem with @define-extend

there has a problem with '@define-extend' when i use '@extend' in a media query,it wrong and tell me the defined extend is not defined
this is the input:

@define-extend base{
    color:red;
}

@define-mixin mt $name{
    @for $i from 1 to 10 by 1{
        .$(name)-$i{
            @extend base;
            font-size:$(i)px;
        }
    }
}

@custom-media --m (width>1000px);

@define-mixin mt2{
    @mixin mt n1;
    @media(--m){
        @mixin mt n2;
    }
}

@mixin mt2;

and i test in your site it‘s output:

.n1-1, .n1-2, .n1-3, .n1-4, .n1-5, .n1-6, .n1-7, .n1-8, .n1-9, .n1-10 {
    color:red;
}

.n1-1 {
    font-size:1px;
}

.n1-2 {
    font-size:2px;
}

.n1-3 {
    font-size:3px;
}

.n1-4 {
    font-size:4px;
}

.n1-5 {
    font-size:5px;
}

.n1-6 {
    font-size:6px;
}

.n1-7 {
    font-size:7px;
}

.n1-8 {
    font-size:8px;
}

.n1-9 {
    font-size:9px;
}

.n1-10 {
    font-size:10px;
}

@media(min-width: 1000.001px) {

    .n2-1 {
        font-size:1px;
    }

    .n2-2 {
        font-size:2px;
    }

    .n2-3 {
        font-size:3px;
    }

    .n2-4 {
        font-size:4px;
    }

    .n2-5 {
        font-size:5px;
    }

    .n2-6 {
        font-size:6px;
    }

    .n2-7 {
        font-size:7px;
    }

    .n2-8 {
        font-size:8px;
    }

    .n2-9 {
        font-size:9px;
    }

    .n2-10 {
        font-size:10px;
    }
}

Inline comments, postcss-scss and imports

Just getting into PostCSS and puzzled by the lack of support for inline comments.

// Like this one…

This Sass feature is sorely missed from precss.

So @ai advised using the postcss-scss parser which deals with single-line ('inline') comments.
However, while postcss-scss alone deals with those comments fine (converts to /* .. */) adding precss breaks them again. (I have an inline comment in a partial file that's imported in my main stylesheet.)

Two questions:

Have you considered precss support for inline comments?
Do you have any idea on why postcss-scss no longer works with precss?

postcss-color-mix proposal

I developed that plugin to have ability to mix colors in css like I used to have in Sass. will you be interested to have color-mix in precss?

http://sass-lang.com/documentation/Sass/Script/Functions.html#mix-instance_method

@extend & support

%extend {
  .parent &{
    display: none;
  }
}

compiles to:

.parent %extend{
  display: none;
}

@extend rules

Can I use @extend rule with precss plugin? For sass it's look like:

%test {
color: red;
}

.test
@extend %test

Wrong location of comment of the last declaration in a nested rule definition

For example:

.a {
  prop1: val1;
  prop2: val2; /*comment*/
  .b {
    prop3: val3;
  }
}

should output

.a {
  prop1: val1;
  prop2: val2; /*comment*/
}
.a .b {
  prop3: val3;
}

But now the output result is:

.a {
  prop1: val1;
  prop2: val2;
}
/*comment*/
.a .b {
  prop3: val3;
}

I'm not sure whether it's a bug of postcss-nested or postcss-nesting.

Need to update dependency for postcss-import to @7

Currently, an import statement gives the following error:

events.js:85
      throw er; // Unhandled 'error' event
            ^
TypeError: Cannot read property 'before' of undefined