Created this issue from my comment on the closed issue #4 so that the issue will have more visibility

Expanding the test case for interpolation within a word causes a syntax error. Specifically, it's having a problem with the interpolation on the property (border-#{$side}-width). It seems the tokenizer splits this into three separate words, which the parser has a problem with

    it('parses interpolation inside word', () => {
        let root = parse('.#{class}:hover { border-#{$side}-width: #{$width}px; }');
        expect(root.first.selector).to.eql('.#{class}:hover');
        expect(root.first.first.prop).to.eql('border-#{$side}-width');
        expect(root.first.first.value).to.eql('#{$width}px');
    });

Error:

  1) SCSS Parser parses interpolation inside word:
     CssSyntaxError: <css input>:1:26: Unknown word
  .#{class}:hover { border-#{$side}-width: #{$width}px; }
                           ^
      at Object.scssParse [as default] (lib/scss-parse.es6:10:12)
      at Context.<anonymous> (test/parse.es6:75:20)

Tokens:

  [ 'word', 'border-', 1, 19, 1, 25 ],
  [ 'word', '#{$side}', 1, 26, 1, 33 ],
  [ 'word', '-width', 1, 34, 1, 39 ],

I don't know how to install this, but I have a quesiton

can I comment like this?

//.home{
//   color:red
//}

#16

[13:25:25] Error in plugin 'gulp-postcss'
Message:
    /home/itgalaxy/web/dev0.cms.dev.itgalaxy.company/public_html/wp-content/themes/insteria/src/theme/app/sass/compile/_variables.scss:11:15: Unknown word

$xs-strict: #{$xs-and-up} " and " #{$xs-and-down};
              ^
$sm-strict: #{$sm-and-up} " and " #{$sm-and-down};

I use stylelint with postcss-scss syntax.
Now I will try to delve into the code and give a more detailed description.
Maybe trouble with stylelint.

Sorry for bringing this up again. Yet the previous issue was about an exception thrown. An my question is about the very parsing.

Right now, parsing this

a {
  font: 10px/1 Arial {
    weight: 500;
  }
}

with PostCSS in postcss-scss syntax will result in the nested props block be considered a nested ruleset. And font: 10px/1 Arial will become a selector property of the corresponding PostCSS node object.

So the question is: is it in postcss-scss scope to correctly parse that font: 10px/1 Arial part? (it also applies to just font: with no value). I'm not sure how exactly it would be implemented; maybe a new node type, like nested-decl. Or just adding nested-decl: true, prop: "font", value: "10px/1 Arial" property set to an object.

I suppose PostCSS would refuse to do it since the syntax is not standard. And yet, we have an obvious flaw in a parsing stack.

I want to us postcss-scss to parse css file below, but i got some error. So I want to know why

/*test.css*/
/*icon mixin*/
@mixin live-icon {
  color: #fff;
  background-color: #FF8B30;
  border-radius: 3px;
  font-style: normal;
}

.icon{
  @include live-icon;
}

/*webpack config file*/
module.exports = {
    module: {
        loaders: [
            {
                test:   /\.css$/,
                loader: "style-loader!css-loader!postcss-loader"
            }
        ]
    },
    postcss: function (webpack) {
        return {
             plugins: [precss, autoprefixer({ browsers: ['> 1%', 'IE 8'] })],
             syntax: postScss
        }
    }
}

Hi!

I use postcss-loader with postcss-scss in webpack and sometimes file which contains styling for custom HTML element

my-element{
/* some styles*/
}

Is not compiled at all and sometimes it's compiled without issues. Is this type of styling supported or not?

Thanks!

Babel contrib here.

It's irresponsible to publish a module using babel-register, you should be compiling it ahead of time and publishing the compiled version.

I'm getting this error then using map-get.

ERROR in ./~/css-loader?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]!./~/postcss-loader!./src/table.scss
Module build failed: Unknown word (15:12)

  13 |
  14 | @mixin mediaquery($name) {
> 15 |   @media #{map-get($breakpoints, $name)} {
     |            ^
  16 |     @content;
  17 |   }

I've tried using the loader like this 'postcss-loader?parser=postcss-scss', but without success:

ERROR in ./~/css-loader?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]!./~/postcss-loader?parser=postcss-scss!./src/utils.scss
Module build failed: CssSyntaxError: /Users/Tieme/Projects/Repos/react-css-modules-examples/utils.scss:15:4: Unknown word
You tried to parse SCSS with the standard CSS parser; try again with the postcss-scss parser
    at Input.error (/Users/Tieme/Projects/Repos/react-css-modules-examples/node_modules/postcss/lib/input.js:111:22)
    at Parser.unknownWord (/Users/Tieme/Projects/Repos/react-css-modules-examples/node_modules/postcss/lib/parser.js:457:26)
    at Parser.other (/Users/Tieme/Projects/Repos/react-css-modules-examples/node_modules/postcss/lib/parser.js:174:14)
    at Parser.loop (/Users/Tieme/Projects/Repos/react-css-modules-examples/node_modules/postcss/lib/parser.js:81:26)
    at parse (/Users/Tieme/Projects/Repos/react-css-modules-examples/node_modules/postcss/lib/parse.js:26:16)
    at new LazyResult (/Users/Tieme/Projects/Repos/react-css-modules-examples/node_modules/postcss/lib/lazy-result.js:70:24)
    at Processor.process (/Users/Tieme/Projects/Repos/react-css-modules-examples/node_modules/postcss/lib/processor.js:117:12)
    at processCss (/Users/Tieme/Projects/Repos/react-css-modules-examples/node_modules/css-loader/lib/processCss.js:188:11)
    at Object.module.exports (/Users/Tieme/Projects/Repos/react-css-modules-examples/node_modules/css-loader/lib/loader.js:24:2)
 @ ./~/css-loader?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]!./~/postcss-loader?parser=postcss-scss!./src/table.scss 3:10-217

Example repo: https://github.com/tiemevanveen/react-css-modules-examples/tree/scss-postcss

I'm working on a postcss plugin and want to inspect postcss nodes for their original scss file. For example: I have a comment node and I want to act on it if the original scss file it was in was in a certain directory.

Does this plugin expose any information like this or add any context to a postcss result?

@chriseppstein reminded me about Sass implamentation guidelines. I checked it myself and have few question:

1. SCSS will works like every other CSS parser with two extra option: nested rules and inline comment. Is it enough?
2. PostCSS parser doesn’t parse math or any other declaration values. They are just a string for them. Is it OK, that PostCSS SCSS parser will be limited in this way? Anyway PostCSS SCSS parser is not for compiling SCSS. It was created for simple tasks like CSSComb.
3. Do Sass community has some reference tests? So I can add them to Travis CI to be sure, that PostCSS SCSS parser can parse any SCSS source.

/cc @xzyfer

Hello,

After the version 0.2.0, when the nested props have been added, interpolating variables in mixins is not working as before.

1 @mixin name($var) {
2  &:#{$var} {}
3 }

I am using this plugin together with stylelint to lint my styles, the line 2 in the snippet before, creates a false negative with stylelint. Initially I thought it was related to stylelint and raised a bug in there, afterwards, after tracking this down a bit more, realized that it is related to the new feature of nested properties.

I could not understand deeply how the new nested props works, however I tend to think that this syntax is not yet added?

I wish I could be more specific with my report, but I am willing to help with questions if required.

stylelint/stylelint#1936

Given a source file with CRLF line endings:

// comment
a {}

Then:

JSON.stringify(rule.raw("before")) // gives "\n\r\n" rather than "\r\n\r\n

Is this the intended behaviour?

Ref: stylelint/stylelint#845

Would be great to see an example how postcss-scss could be used with gulp piping. gulp-postcss only provides an example of custom processor, but not a custom parser.

The parser is able to handle #{$name} { }, but adding any other strings around the selector, such as .#{$name} { }, results in a css syntax error.

Using this unit test:

    it('parses interpolation concatenation', () => {
        let root = parse('.#{$name} { }');
        expect(root.first.selector).to.eql('.#{$name}');
    });

It produces this error:

     CssSyntaxError: <css input>:1:4: Unknown word
  .#{$name} { }
     ^
      at Object.scssParse [as default] (lib/scss-parse.es6:10:12)
      at Context.<anonymous> (test/parse.es6:75:20)

I don't know if this is a bug or it is me, but I'm getting this error. Please help, thanks. :)

ERROR in .//css-loader!.//postcss-loader?parser=postcss-scss!./~/font-awesome/scss/font-awesome-custom.scss
Module build failed: Unknown word (4:0)

/*!

• Font Awesome 4.7.0 by @davegandy - http://fontawesome.io - @FontAwesome
• License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
  */ <-- Problem occurs here

@ ./~/font-awesome/scss/font-awesome-custom.scss 4:14-133 13:2-17:4 13:2-17:4 14:20-139

Hi! While linting some legacy code I noticed a missed case for converting // comments into /* */ style comments. When a line has mixed slash and block comments (e.g. // top: 0 /* top: 50px */), wrapping the whole line in a block comment produces a syntax error because the outer block comment is ended by the first */, leaving later */ pieces without a matching opening piece.

Minimal replication:

.class {
    // width: 50%; /* width: 66%; */
}

expected:
leave as is, or

.class {
    /* width: 50%; */ /* width: 66%; */
}

actual:

.class {
    /* width: 95.2%; /*height: 96.3%;*/*/
}

By wrapping the whole line in the block comment, we're actually left with two block-ending */ segments, which is a syntax error.

I took me some time to track down the cause of the automatic formatting because I also have other plugins that deal with comments and formatting and I did not expect the scss parser to format as well. As a workaround, I am trying to disable this behavior but in the meantime I wanted to bring this up with y'all.

I am not the most familiar with css vs scss syntax, am I missing something or is this a bug?

I'm getting the error below when parsing normalize v4.2.0 with gulp-postcss and postcss-scss.
This was working with postcss-scss v0.1.9.

Error in plugin 'gulp-postcss'
Message:
    /vendor/_normalize.scss:318:7: Missed semicolon
button:-moz-focusring,
[type="button"]:-moz-focusring,
      ^
[type="reset"]:-moz-focusring,

gulp task:

var gulp = require('gulp');
var postcss = require('gulp-postcss');
var scss = require('postcss-scss');
var stylelint = require('stylelint');

gulp.task('stylelint', function() {
    return gulp.src('scss/**/*.scss')
        .pipe(postcss([
            stylelint()
        ], {
            syntax: scss
        }));
});

I am using postcss-scss as a processor for my gulp-stylelint task.

gulp.task('lint-css', function lintCssTask() {
    var processors = [
        stylelint(),
        reporter({
          clearMessages: false,
          throwError: false
        }),

      ];
  return gulp
    .src(['src/**/*.scss''])
    .pipe(postcss(processors, {syntax: scss}));
});

and we are using bourbon/neat for our application. The gulp task runs fine until it errors out:

Message:
    Expected pseudo-class or pseudo-element

It seems that the bourbon/neat variables are causing this, since if I specifically ignore the files

return gulp
    .src(['src/**/*.scss',  '!src/styles/bourbon/**', '!src/styles/neat/** ])

the linting process goes through fine.

I need to import my css (.scss) files into .js (component architecture) and the base framework that I am using is bootstrap-sass.
Now I have these problem:

1. bootstrap-sass variables and mixins are not available inside my .scss files for every individual component.
2. I need to have scope for .scss files inside component.(css module)
3. I use webpack for bundling.

So the question is how can I import and transform my css files without losing bootstrap-sass variables and mixing also using the variables in their own scope ?

This is my webpack.config.js for bundling style files:

module: {
      rules: [
        {
          test: /\.scss$/,
          use: [
            {
              loader: 'style-loader' // creates style nodes from JS strings
            }, {
              loader: 'css-loader' // translates CSS into CommonJS
            }, {
              loader: 'sass-loader' // compiles Sass to CSS
            }
          ]
        }

Was trying to get this going with gulp-postcss. But there doesn't seem to be any documentation. Would be great to see an example gulp task.

Would you consider ripping out single-line comments into a separate plugin?

I don't have a need to parse scss, however having both comment variations (/**/, //) available would be really convenient. Otherwise, something as simple as disabling a group of classes can become a hassle, if any of the classes have comments inside or around em.

Using UIKit I noticed this:

.uk-margin-small-bottom {
    margin-bottom: 5px !default !important;
}

It's not removing '!default' from variables, so final CSS won't work

Smoke test for all input.css from tree-list.

Noticed what in PostCSS we need to end nested at-rule with ; but in SASS it works without it. See this as for example.

$feature: "(monochrome)"; // or "(min-width: 512px)";

@media #{$feature} { }

Throw error, but it is valid.

I'm running into this error message when I call stylelint on uncompiled Sass files in my project.

Error: Expected pseudo-class or pseudo-element
    at new error (/project/node_modules/postcss-selector-parser/dist/processor.js:27:23)
    at Parser.error (/project/node_modules/postcss-selector-parser/dist/parser.js:212:15)
    at Parser.pseudo (/project/node_modules/postcss-selector-parser/dist/parser.js:292:25)
    at Parser.parse (/project/node_modules/postcss-selector-parser/dist/parser.js:502:22)
    at Parser.loop (/project/node_modules/postcss-selector-parser/dist/parser.js:470:18)
    at new Parser (/project/node_modules/postcss-selector-parser/dist/parser.js:89:21)
    at Processor.process (/project/node_modules/postcss-selector-parser/dist/processor.js:24:21)
    at /project/node_modules/stylelint/dist/rules/selector-pseudo-element-case/index.js:48:10
    at /project/node_modules/postcss/lib/container.js:110:28
    at /project/node_modules/postcss/lib/container.js:73:26

After some digging, the error occurs when a Sass stylesheet has the following syntax:

.foo {
  flex: {
    grow: 1;
    shrink: 1;
  }
}

Which compiles to:

.foo {
  flex-grow: 1;
  flex-shrink: 1;
}

The same error occurs with font: { size: 12px; weight: bold; } (and likely other nested properties). When this type of nesting is removed from the Sass file no error is reported.

I tried this, it's not working

this is my webpack config

import precss from 'precss'
import scss from 'postcss-scss'

export default {
	module: {
		loaders: {
			test: /\.pcss$/,
			loader: ExtractTextPlugin.extract('style-loader!css-loader?sourceMap!resolve-url-loader!postcss-loader?sourceMap')
		},
	},
	postcss: function () {
		return [precss,scss]
	},
	
}

the error produces

ERROR in ./~/css-loader?sourceMap!./~/resolve-url-loader!./~/postcss-loader?sourceMap!./app/component/header/header.pcss
    Module build failed: Error: [object Object] is not a PostCSS plugin
        at Processor.normalize (/Users/craigcosmo/Dropbox/Code/thatilike front/node_modules/postcss/lib/processor.es6:108:23)

I'd like to use the scss plugin pack with gulp-postcss, as my first processor to be followed by a set of other cherry picked postcss plugins. and it throw error.

gulp.task('sass', function () {
    return gulp.src('tpls/scss/bangumi-add.scss')
        .pipe( sourcemaps.init() )
        .pipe( postcss([ require('postcss-scss'),require('autoprefixer') ]) )
        .pipe( sourcemaps.write('.') )
        .pipe( gulp.dest('./dest') );
});

and it throws:

[19:50:08] Using gulpfile E:\xampp\vcbs\src\gulpfile.js
[19:50:08] Starting 'sass'...
E:\xampp\vcbs\src\node_modules\gulp-postcss\node_modules\postcss\lib\processor.js:60
                throw new Error(i + ' is not a PostCSS plugin');
                ^

Error: [object Object] is not a PostCSS plugin
  at Processor.normalize (E:\xampp\vcbs\src\node_modules\gulp-postcss\node_modules\postcss\lib\processor.js:60:23)
  at new Processor (E:\xampp\vcbs\src\node_modules\gulp-postcss\node_modules\postcss\lib\processor.js:23:29)
  at postcss (E:\xampp\vcbs\src\node_modules\gulp-postcss\node_modules\postcss\lib\postcss.js:55:12)
  at Transform.stream._transform (E:\xampp\vcbs\src\node_modules\gulp-postcss\index.js:47:5)
  at Transform._read (_stream_transform.js:167:10)
  at Transform._write (_stream_transform.js:155:12)
  at doWrite (_stream_writable.js:301:12)
  at writeOrBuffer (_stream_writable.js:287:5)
  at Transform.Writable.write (_stream_writable.js:215:11)
  at DestroyableTransform.ondata (E:\xampp\vcbs\src\node_modules\gulp-sourcemaps\node_modules\through2\node_modules\readable-stream\lib\_stream_readable.js:531:20)
  at emitOne (events.js:77:13)
  at DestroyableTransform.emit (events.js:169:7)
  at readableAddChunk (E:\xampp\vcbs\src\node_modules\gulp-sourcemaps\node_modules\through2\node_modules\readable-stream\lib\_stream_readable.js:198:18)
  at DestroyableTransform.Readable.push (E:\xampp\vcbs\src\node_modules\gulp-sourcemaps\node_modules\through2\node_modules\readable-stream\lib\_stream_readable.js:157:10)
  at DestroyableTransform.Transform.push (E:\xampp\vcbs\src\node_modules\gulp-sourcemaps\node_modules\through2\node_modules\readable-stream\lib\_stream_transform.js:123:32)
  at DestroyableTransform.sourceMapInit [as _transform] (E:\xampp\vcbs\src\node_modules\gulp-sourcemaps\index.js:122:10)
  at DestroyableTransform.Transform._read (E:\xampp\vcbs\src\node_modules\gulp-sourcemaps\node_modules\through2\node_modules\readable-stream\lib\_stream_transform.js:159:10)
  at DestroyableTransform.Transform._write (E:\xampp\vcbs\src\node_modules\gulp-sourcemaps\node_modules\through2\node_modules\readable-stream\lib\_stream_transform.js:147:83)
  at doWrite (E:\xampp\vcbs\src\node_modules\gulp-sourcemaps\node_modules\through2\node_modules\readable-stream\lib\_stream_writable.js:313:64)
  at writeOrBuffer (E:\xampp\vcbs\src\node_modules\gulp-sourcemaps\node_modules\through2\node_modules\readable-stream\lib\_stream_writable.js:302:5)
  at DestroyableTransform.Writable.write (E:\xampp\vcbs\src\node_modules\gulp-sourcemaps\node_modules\through2\node_modules\readable-stream\lib\_stream_writable.js:241:11)
  at write (E:\xampp\vcbs\src\node_modules\gulp\node_modules\vinyl-fs\node_modules\through2\node_modules\readable-stream\lib\_stream_readable.js:623:24)
  at flow (E:\xampp\vcbs\src\node_modules\gulp\node_modules\vinyl-fs\node_modules\through2\node_modules\readable-stream\lib\_stream_readable.js:632:7)
  at DestroyableTransform.pipeOnReadable (E:\xampp\vcbs\src\node_modules\gulp\node_modules\vinyl-fs\node_modules\through2\node_modules\readable-stream\lib\_stream_readable.js:664:5)
  at emitNone (events.js:67:13)
  at DestroyableTransform.emit (events.js:166:7)
  at emitReadable_ (E:\xampp\vcbs\src\node_modules\gulp\node_modules\vinyl-fs\node_modules\through2\node_modules\readable-stream\lib\_stream_readable.js:448:10)
  at emitReadable (E:\xampp\vcbs\src\node_modules\gulp\node_modules\vinyl-fs\node_modules\through2\node_modules\readable-stream\lib\_stream_readable.js:444:5)
  at readableAddChunk (E:\xampp\vcbs\src\node_modules\gulp\node_modules\vinyl-fs\node_modules\through2\node_modules\readable-stream\lib\_stream_readable.js:187:9)
  at DestroyableTransform.Readable.push (E:\xampp\vcbs\src\node_modules\gulp\node_modules\vinyl-fs\node_modules\through2\node_modules\readable-stream\lib\_stream_readable.js:149:10)
  at DestroyableTransform.Transform.push (E:\xampp\vcbs\src\node_modules\gulp\node_modules\vinyl-fs\node_modules\through2\node_modules\readable-stream\lib\_stream_transform.js:145:32)
  at afterTransform (E:\xampp\vcbs\src\node_modules\gulp\node_modules\vinyl-fs\node_modules\through2\node_modules\readable-stream\lib\_stream_transform.js:101:12)
  at TransformState.afterTransform (E:\xampp\vcbs\src\node_modules\gulp\node_modules\vinyl-fs\node_modules\through2\node_modules\readable-stream\lib\_stream_transform.js:79:12)
  at DestroyableTransform.noop [as _transform] (E:\xampp\vcbs\src\node_modules\gulp\node_modules\vinyl-fs\node_modules\through2\through2.js:26:3)
  at DestroyableTransform.Transform._read (E:\xampp\vcbs\src\node_modules\gulp\node_modules\vinyl-fs\node_modules\through2\node_modules\readable-stream\lib\_stream_transform.js:184:10)
  at DestroyableTransform.Transform._write (E:\xampp\vcbs\src\node_modules\gulp\node_modules\vinyl-fs\node_modules\through2\node_modules\readable-stream\lib\_stream_transform.js:172:12)
  at doWrite (E:\xampp\vcbs\src\node_modules\gulp\node_modules\vinyl-fs\node_modules\through2\node_modules\readable-stream\lib\_stream_writable.js:237:10)
  at writeOrBuffer (E:\xampp\vcbs\src\node_modules\gulp\node_modules\vinyl-fs\node_modules\through2\node_modules\readable-stream\lib\_stream_writable.js:227:5)
  at DestroyableTransform.Writable.write (E:\xampp\vcbs\src\node_modules\gulp\node_modules\vinyl-fs\node_modules\through2\node_modules\readable-stream\lib\_stream_writable.js:194:11)
  at write (E:\xampp\vcbs\src\node_modules\gulp\node_modules\vinyl-fs\node_modules\through2\node_modules\readable-stream\lib\_stream_readable.js:623:24)
  at flow (E:\xampp\vcbs\src\node_modules\gulp\node_modules\vinyl-fs\node_modules\through2\node_modules\readable-stream\lib\_stream_readable.js:632:7)
  at DestroyableTransform.pipeOnReadable (E:\xampp\vcbs\src\node_modules\gulp\node_modules\vinyl-fs\node_modules\through2\node_modules\readable-stream\lib\_stream_readable.js:664:5)
  at emitNone (events.js:67:13)
  at DestroyableTransform.emit (events.js:166:7)
  at emitReadable_ (E:\xampp\vcbs\src\node_modules\gulp\node_modules\vinyl-fs\node_modules\through2\node_modules\readable-stream\lib\_stream_readable.js:448:10)
  at emitReadable (E:\xampp\vcbs\src\node_modules\gulp\node_modules\vinyl-fs\node_modules\through2\node_modules\readable-stream\lib\_stream_readable.js:444:5)
  at readableAddChunk (E:\xampp\vcbs\src\node_modules\gulp\node_modules\vinyl-fs\node_modules\through2\node_modules\readable-stream\lib\_stream_readable.js:187:9)
  at DestroyableTransform.Readable.push (E:\xampp\vcbs\src\node_modules\gulp\node_modules\vinyl-fs\node_modules\through2\node_modules\readable-stream\lib\_stream_readable.js:149:10)
  at DestroyableTransform.Transform.push (E:\xampp\vcbs\src\node_modules\gulp\node_modules\vinyl-fs\node_modules\through2\node_modules\readable-stream\lib\_stream_transform.js:145:32)
  at afterTransform (E:\xampp\vcbs\src\node_modules\gulp\node_modules\vinyl-fs\node_modules\through2\node_modules\readable-stream\lib\_stream_transform.js:101:12)
  at TransformState.afterTransform (E:\xampp\vcbs\src\node_modules\gulp\node_modules\vinyl-fs\node_modules\through2\node_modules\readable-stream\lib\_stream_transform.js:79:12)
  at E:\xampp\vcbs\src\node_modules\gulp\node_modules\vinyl-fs\lib\src\getContents\bufferFile.js:12:5
  at FSReqWrap.readFileAfterClose [as oncomplete] (evalmachine.<anonymous>:380:3)

Do you have any suggestions on how to get this working, or a better configuration?

When I try and load this plugin via postcss-cli, it blows up with the following error message.

/usr/local/lib/node_modules/postcss-cli/index.js:109
    plugin = plugin.postcss || plugin();
                               ^

TypeError: plugin is not a function
    at /usr/local/lib/node_modules/postcss-cli/index.js:109:32
    at Array.map (native)
    at Object.<anonymous> (/usr/local/lib/node_modules/postcss-cli/index.js:97:24)
    at Module._compile (module.js:413:34)
    at Object.Module._extensions..js (module.js:422:10)
    at Module.load (module.js:357:32)
    at Function.Module._load (module.js:314:12)
    at Module.require (module.js:367:17)
    at require (internal/module.js:16:19)
    at Object.<anonymous> (/usr/local/lib/node_modules/postcss-cli/bin/postcss:3:1)

Originally opened in stylelint/stylelint#1150.

When using stylelint v6.2.2 as follows:

package.json (simplified):

{
  "scripts": {
    "lint:styles": "stylelint --syntax scss \"src/**/*.scss\""
  }
}

My .stylelintrc config (uses stylelint-config-standard v6.0.0):

{
  "extends": "stylelint-config-standard",
  "rules": {
    "function-url-quotes": "none",
    "selector-pseudo-element-colon-notation": "single"
  }
}

given the following Sass (scss file):

@import "../../../styles/config";

.some-widget {
    $column: #{"#{&}__column"};

    > .row {
        > #{$column}__section {
            .some__section {
                @include some-breakpoint-mixin("desktop") {
                    display: none;
                }
            }
        }
    }
}

npm run lint:styles

The following results in an error:

 9:49  ×  Unclosed quote   CssSyntaxError

This is valid Sass and should not be yielding an unclosed quote error.

Follow-up: If I change the following:

$column: #{"#{&}__column"};

to

$column: "column";

The Unclosed quote error is not thrown. So it seems there may be an issue with parsing quotes in interpolated Sass strings / variables.

npm i postcss-scss

postcss-scss package.json

  "dependencies": {
    "babel-preset-es2015": "6.5.0",
    "postcss": "^5.0.15"
  },

I'm having this error. I believe its something to do with this parser. Any help would be great, thanks. :)

I am a little bit confused about the purpose of this module. Let me ask a practical question: can I use this with the scss version of bootstrap?

Hello,
scss:

padding: 12px * 2;

http://sass-lang.com/guide#topic-8

Input:

var postcss = require('postcss')
var css = `
.inline-comment {
  color: red;
}
//*/ comments
`
postcss().process(css,
  { syntax: require('postcss-scss') }
)
.then(function (result) {
  console.log(result.root.toString())
})

output:

.inline-comment {
  color: red;
}
/**/ comments*/

@mixin border-radius($radius) {
^
-webkit-border-radius: $radius;

ERROR in ./~/css-loader?sourceMap&modules&localIdentName=[name]_[local]_[hash:base64:3]!./~/postcss-loader?parser=postcss-scss!./src/components/SearchWidget/SearchWidget.scss
Module build failed: TypeError: Cannot read property 'toString' of undefined
    at new Input

To fix stylelint/stylelint#519 it is needed to distinguish which comments are block, and which were line ones. The later ones should then be skipped by the rule check.

I've tried to find a way to distinguish what were the original comments inside plugin's code, but the best option I came up with was looking at source.input.css, splitting it into lines, then picking the provided line and column, then checking if its // or /*.

Could you please help me to find out if there is a better way? Maybe PostCSS or postcss-scss could be improved to support that? I'm eager to help.

Message:
/sass/compile/_base.scss:23:8: Unknown word
// ::-webkit-scrollbar {
// width: 15px;
^
//

My code:

@-webkit-viewport {
    width: device-width;
}

@-moz-viewport {
    width: device-width;
}

@-ms-viewport {
    width: device-width;
}

@-o-viewport {
    width: device-width;
}

@viewport {
    width: device-width;
}

// ::-webkit-scrollbar {
//     width: 15px;
//
//     &-track {
//         background: $gray-lighter;
//     }
//
//     &-thumb {
//         background: $gray;
//         &:window-inactive {
//             background: $gray-light;
//         }
//     }
// }

p {
    margin: 0 0 1em;

    &[align="center"] {
        text-align: center;
    }

    &[align="left"] {
        text-align: left;
    }

    &[align="right"] {
        text-align: right;
    }
}

In libsass:

.embed-responsive-wrapper {
    @media#{$xs-and-down} {
        display: block;
        width: auto !important;
        max-width: none;
    }
}

to

@media (max-width: 767px ) {
  .embed-responsive-wrapper {
    display: block;
    width: auto !important;
    max-width: none;
  }
}

In postcss-scss i got error:

Unknown word

    @media#{$xs-and-down} {
            ^
        display: block;

I mean the syntax without curl-like braces as described here
http://sass-lang.com/documentation/file.INDENTED_SYNTAX.html

#main
  color: blue
  font-size: 0.3em

  a
    font:
      weight: bold
      family: serif
    &:hover
      background-color: #eee

Part of _variables.scss file:

// Media query
// ---------------------------------------------
// two variable used inside magento 2 to set media query 2 features:
// 1 - "common" options, different in emails and style_l
// 2 - "target" all, desktop or mobile devices
$media-common: true; // Sets whether to output common styles (true|false)
$media-target: 'all'; // Sets target device for styles output (all|desktop|mobile)

Error:

[current_path]/_variables.scss:12:40: Missed semicolon
// 1 - "common" options, different in emails and style_l
// 2 - "target" all, desktop or mobile devices
                                       ^
$media-common: true; // Sets whether to output common styles (true|false)

If I remove : after features everything works fine, but if I put them somewhere else, also breaks and it points same, completly not revelant, place in code.... #weird

Tried to set it up with:

postcss: [(...), require('postcss-scss')(), (...)]

(like with other postcss plugins, e.g. require('postcss-import')()) but got:

Module build failed: TypeError: require(...) is not a function

if the import files has inline-comment, there are some problem

This issue was first submitted to stylelint/stylelint#1640 but I’m c/ping whole description for easier discussion.

Bug description

When trying to use function inside SCSS interpolation, stylelint reports syntax error with message "Unknown word".

index.scss
 17:44  ✖  Unknown word   CssSyntaxError

How to reproduce

Input SCSS:

.foo {
    $var:foo;
    background-image:#{$var}bar;
}

.bar {
    $var:to-upper-case(foo);
    background-image:#{$var}bar;
}

.bad {
    $var:to-upper-case(foo);
    background-image:url(#{$var}bar);
}

.baz {
    background-image:url(#{to-upper-case(foo)}bar); // This is where error is triggered
}

Output CSS with node-sass 3.8.0:

.foo {
  background-image: foobar; }

.bar {
  background-image: FOObar; }

.bad {
  background-image: url(FOObar); }

.baz {
  background-image: url(FOObar); }

Using latest stylelint with SCSS parser.

I installed this package via npm and tried to import it using ES2015 module syntax (compiled via babel).

However, because there is no default export, it seems, a straight import returns undefined:

import scssSyntax from 'postcss-scss';
console.log(scssSyntax); // undefined

After looking at the source here, I was able to get an import to work using *:

import * as scssSyntax from 'postcss-css';
console.log(scssSyntax);
/*
{ __esModule: true,
  parse: [Function: scssParse],
  stringify: [Function: scssStringify] }
*/

Sorry again for the confusion with the unintentional commit.

Is there a way to disable the conversion of inline scss comments to css comments? I'm not sure what the rationale is to have it by default, I guess I'm missing something obvious.

We are using postcss-scss to be able to use autoprefixer on scss and output scss (not css). The compilation to css then happens serverside on a simple stack (which we would like to keep simple).

postcss-scss however converts scss comments // to css comments /* */ and sassdoc comments /// to /*/ … */. We would like to avoid this because that makes our serverside compilation more tricky (e.g. can't remove Sass comments anymore because they are not CSS comments).

Maybe I'm missing a better way…

Thanks!

First of all, this is a an awesome postcss plugin that has helped my workflow tremendously.

The issue is when using scss mixins that contain th @content at rule, postcss fails. This is likely because it appears to be a property without a value.

I have this gulp task:

return gulp.src(config.sass.src)
    // Initialise source maps
    .pipe($.sourcemaps.init())

    // Process our SCSS to CSS
    .pipe($.sass({
      precision: 10,
      stats: true,
      includePaths: ['node_modules/normalize.css/']
    }).on('error', $.sass.logError))

    .pipe($.postcss([stylelint(stylelintRules)])).process(scss, {syntax: syntax}).then(function (result) {
      result.content;
    })

    // PostCSS our vendor prefixes
//    .pipe($.postcss(postCSSProcessors))

    // Convert viable px units to REM
    .pipe($.pxtorem())

    // Write our source map, the root is needed for Django funnyness
    .pipe($.sourcemaps.write('./', {
      includeContent: false,
      sourceRoot: () => {
        return '../../static'
      }
    }))

    // Place our CSS in the location we link to
    .pipe(gulp.dest(config.css.dist))

    // Stream the changes to Browser Sync
    .pipe(browserSync.stream({match: '**/*.css'}))

    // Spit out the size to the console
    .pipe($.size({title: 'styles'}));

And obviously i'm getting scss is not defined if i change that to 'scss' then i get undefined is not a function. Where does the scss variable come from in your example?

Hi,
What is the best way to handle scss functions ?
Because I import a theme written in scss and it contains scss functions that postcss doesn't handle properly.
How can I deal with that without rewriting the theme myself ?

Thanks