aleshaoleg/postcss-sass

A Sass parser for PostCSS, using gonzales-pe. https://www.npmjs.com/package/postcss-sass

postcss-sass

A Sass parser for PostCSS, using gonzales-pe.

Not all Sass syntax supported. Parser under development.

This module does not compile Sass. It simply parses mixins as custom at-rules & variables as properties, so that PostCSS plugins can then transform Sass source code alongside CSS.

Install

npm i postcss-sass --save

Usage

var postcssSass = require("postcss-sass");

postcss(plugins).process(sass, { syntax: postcssSass }).then(function (result) {
    result.content // Sass with transformations
});

postcss-sass's Issues

An in-range update of eslint-config-postcss is breaking the build 🚨

The devDependency eslint-config-postcss was updated from 3.0.6 to 3.0.7.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

eslint-config-postcss is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details

• ❌ continuous-integration/travis-ci/push: The Travis CI build failed (Details).

---

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

---

Your Greenkeeper Bot 🌴

Fix false positives for hex colour containing "e2" for border property in unit-no-unknown

Cross posting from: stylelint/stylelint#5377
Demo of the issue can be found here..

If the problem is related to this repo, and I can help in any way or form, please let me know.

---

Clearly describe the bug

There are false positives when trying to declare a border like this:

border: 1px solid #5e07e2

Which rule, if any, is the bug related to?

unit-no-unknown

What code is needed to reproduce the bug?

.some-class
  border: 1px solid #5e07e2

What stylelint configuration is needed to reproduce the bug?

module.exports = {
  extends: ['stylelint-config-standard', 'stylelint-config-prettier'],
  plugins: ['stylelint-order'],
  rules: {
    'at-rule-no-unknown': null,
    'max-nesting-depth': 5,
    'order/properties-alphabetical-order': true,
    'selector-pseudo-element-no-unknown': [
      true,
      {
        ignorePseudoElements: ['v-deep'],
      },
    ],
  },
}

Which version of stylelint are you using?

13.13.1

How are you running stylelint: CLI, PostCSS plugin, Node.js API?

In a Nuxt.js project with:

@nuxtjs/stylelint-module'

Also, through VSCode stylelint-vscode extension.

stylelint.config.js is posted above.

Does the bug relate to non-standard syntax (e.g. SCSS, Less etc.)?

Seems related to using SASS syntax (not SCSS).

What did you expect to happen?

No errors to be raised.

What actually happened (e.g. what warnings or errors did you get)?

The following errors were raised:

 ERROR  Failed to compile with 1 errors      friendly-errors
 ERROR  StylelintError      friendly-errors

components/BaseSnackbar.vue
 37:21  ✖  Unexpected unknown unit "e2"   unit-no-unknown

It refers to the e2 at the end of #5e07e2.

"syntax: require('postcss-sass')" returns and undefined parse error

Hey,

I've tried building postcss-sass into my tasks, but it constantly returns and error: "Cannot read property 'parse' of undefined".

After running the task on verbose mode I can see that the syntax is definitely undefined after calling the dependency like so:

        postcss: {
            options: {
              processors: [
                require('postcss-sorting')({
                    'clean-empty-lines': true
                })
              ],
              syntax: require('postcss-sass')
            },
            dist: {
              src: '*.sass'
            }
        },

Any clues on what is going on? Am I doing anything wrong here?

Thanks!

Parser doesn't understand the new `@use` syntax

The snippet:

@use "namespace" as alias

selector
  prop: alias.$var

throws

src/components/cover/index.sass
 68:1  ✖  Please check validity of the block starting from line #68   CssSyntaxError

Checkout the demo here.

Further Reference:

• stylelint/stylelint#4711
• https://stackoverflow.com/questions/61293176/sugarss-throwing-unecessary-csssyntaxerror/61305305#61305305

Create Input in correct way

You didn’t pass origin file to Input. Check how I create Input in postcss.

An in-range update of eslint-plugin-jest is breaking the build 🚨

The devDependency eslint-plugin-jest was updated from 22.3.0 to 22.3.1.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

eslint-plugin-jest is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details

• ❌ continuous-integration/travis-ci/push: The Travis CI build failed (Details).
• ✅ coverage/coveralls: First build on greenkeeper/eslint-plugin-jest-22.3.1 at 96.333% (Details).

---

Release Notes for v22.3.1

22.3.1 (2019-03-12)

Bug Fixes

• no-identical-title: not reporting when using backticks (#237) (4f8ef6d), closes #232

Commits

The new version differs by 3 commits.

• 4f8ef6d fix(no-identical-title): not reporting when using backticks (#237)
• 42d2d42 chore: refresh lockfile
• 3a1dc2d chore(package): update to [email protected] (#228)

See the full diff

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

---

Your Greenkeeper Bot 🌴

TypeError: Cannot read property 'start' of undefined for Sass for insude Vue

Clearly describe the bug

The sass loops inside of VUE files cause linter to crash

Which rule, if any, is the bug related to?

not related to any rule

What CSS is needed to reproduce the bug?

Any rule that has @for loop in sass

  $class-slug: for !default

  @for $i from 1 through 4
    .#{$class-slug}-#{$i}
      width: 60px + $i
      color: black

What stylelint configuration is needed to reproduce the bug?

Any rule, is not rule specific. Put something to tigger the linter.

{
  "rules": {
    "color-named": "never"
  }
}

Which version of stylelint are you using?

11.1.1

How are you running stylelint: CLI, PostCSS plugin, Node.js API?

./node_modules/.bin/stylelint Sass.vue

Does the bug relate to non-standard syntax (e.g. SCSS, Less etc.)?

Yes, it's related to SASS loops

What did you expect to happen?

stylelint would work instead of failing with an error

What actually happened (e.g. what warnings or errors did you get)?

An error occured

TypeError: Cannot read property 'start' of undefined
    at LocalFixer.node (/home/andrew/sass-for/node_modules/postcss-syntax/parse-style.js:35:27)
    at /home/andrew/sass-for/node_modules/postcss-syntax/parse-style.js:41:9
    at /home/andrew/sass-for/node_modules/postcss/lib/container.js:135:18
    at Root.each (/home/andrew/sass-for/node_modules/postcss/lib/container.js:101:16)
    at Root.walk (/home/andrew/sass-for/node_modules/postcss/lib/container.js:131:17)
    at LocalFixer.root (/home/andrew/sass-for/node_modules/postcss-syntax/parse-style.js:40:8)
    at LocalFixer.parse (/home/andrew/sass-for/node_modules/postcss-syntax/parse-style.js:69:9)
    at parseStyle (/home/andrew/sass-for/node_modules/postcss-syntax/parse-style.js:88:39)
    at /home/andrew/sass-for/node_modules/postcss-syntax/parse-style.js:103:17
    at Array.forEach (<anonymous>)

To reproduce the issue:

• git clone https://github.com/akoidan/style-sass-for-issue
• cd style-sass-for-issue
• yarn install
• yarn run works
• yarn run fails

Also here's the demo

Running postcss with postcss-sass changes the syntax of the file

Hey!

After running my grunt task which contains the following postcss-sorting and postcss-sass config:

    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        postcss: {
            options: {
              processors: [
                require('postcss-sorting')({
                    'clean-empty-lines': true,
                    'rule-nested-empty-line-before': [true, { except: ["first-nested"] }]
                })
              ],
              parser: require('postcss-sass')
            },
            dist: {
              src: '*.sass'
            }
        }
    });

My file which was this:

body
    background: #000

.one
    background: #000

    .two
        background: #f00

    .three
        background: #f00

transformed into this:

body
{background: #000
}
.one
{background: #000
}
.one .two
{background: #f00
}
.one .three
{background: #f00
}

I have a couple of options set in postcss-sorting, but the only result I get is this, regardless of the options set.

Comments bugs

Here's my tests on this: Grawl/stylelint-sass-test@1551720

variables identified as declaration

Hi,

when translating a simple file with a variable, this variable is identified as "decl":

{
  "raws": {
    "before": "",
    "between": ":    ",
    "semicolon": false
  },
  "type": "decl",
  "prop": "$font-stack",
  "value": "Helvetica, sans-serif",
  "source": {
    "start": {
      "line": 1,
      "column": 1
    },
    "end": {
      "line": 1,
      "column": 37
    },
    "input": {
      "css": "$font-stack:    Helvetica, sans-serif\n$primary-color: #333\n\np\n  ... ",
      "id": "<input css 1>"
    }
  }
}

is this intentionally or a bug? in the former case is there a way to find out that it is a variable?

An in-range update of eslint-plugin-jest is breaking the build 🚨

The devDependency eslint-plugin-jest was updated from 22.5.1 to 22.6.0.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

eslint-plugin-jest is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details

• ❌ continuous-integration/travis-ci/push: The Travis CI build could not complete due to an error (Details).

---

Release Notes for v22.6.0

22.6.0 (2019-05-22)

Features

• rules: add no-commented-out rule (#262) (14d83ef)

Commits

The new version differs by 9 commits.

• 14d83ef feat(rules): add no-commented-out rule (#262)
• 83ff198 chore: migrate no-jest-import to typescript (#259)
• 718c08c chore: upgrade @typescript-eslint
• ca2aa27 chore: port lowercase-name to TypeScript (#258)
• 3df0058 chore(ci): run danger with lts version of node
• 48e3a59 chore: precompile with babel (#257)
• 8670804 chore: bump deps
• 05eb11a chore: fix lint error
• dff6446 docs: link to eslint-plugin-jest-formatting

See the full diff

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

---

Your Greenkeeper Bot 🌴

Add docs

Add more docs. You can take a example from postcss-scss. Main things that we need to mention:

1. How to use it. Step by step.
2. Warning, that it does not compile Sass to CSS. it is only tool for Stylelint and other tools working with sources

Release 0.3.0

Hey, @gucong3000! I want to know what should be done to make a 0.3.0 release.

I planned to make support of loops, variables, list/maps for this release. If I can help with something, just ping me.

Also, would be great, if you will create a small plan what to do needs for the current release. Thanks!

Remove eslint-disable complexity

If you don’t use complexity rule in main file, just disable it ESLint config.

Проверить поддержку выражений if(), @if, @for, @each, @while / Check support of if(), @if, @for, @each, @while expressions

This issue was written in Russian, for Cult of Matrians project.
English text below

Шаги к решению:

1. Сделать форк проекта.
2. Разобраться в структуре проекта.
3. Прочитать документацию Sass для указаных выражений (if(), @if, @for, @each, @while).
4. При необходимости добавить поддержку для какого-то из них. Некоторые их них уже точно работают. Например, вот тесты для @each.
5. Написать еще больше тестов для данных выражений и конструкций.

Steps to resolve:

1. Fork a project.
2. Figure out in project structure.
3. Read documentation Sass for mentioned expressions (if(), @if, @for, @each, @while).
4. If needed write code to support for each of them. Some of them, already working. For example here, tests @each.
5. Write more tests for different expressions and constructions.

Parse error for loop

$ node -p "require('./').parse('@each $el in $empty\n\t.el-#{$el}\n\t\tcontent: $el').toString(require('./'))"
@each $el in $empty
	.el-#{el}
		content: $el

This is a little different than expected:

@each $el in $empty
-	.el-#{$el}
+	.el-#{el}
		content: $el

Use single Input

Do not create Input on every usage, use single one.

How to use it on Webpack2/stylelint-webpack-plugin ?

Hi,

I'm trying for days to use Stylelint on a Webpack2 project, to lint my .sass files (not .scss). But in any ways, I'm not able to get it working... Is there something I'm missing? Here is my last try (but I can't find out how to fix it):

webpack.config.json

const path = require('path')
const webpack = require('webpack')

const ExtractTextPlugin = require('extract-text-webpack-plugin')
const StyleLintPlugin = require('stylelint-webpack-plugin')

module.exports = {
  entry: ['./src/index.js', './src/styles/index.sass'],
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/dist/'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: ['babel-loader', 'eslint-loader']
      },
      {
        test: /\.(sass|scss)$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: [
            'css-loader',
            { loader: 'postcss-loader',
              options: {
                plugins: [
                  require('autoprefixer')()
                ]
              }
            },
            'sass-loader'
          ]
        })
      }
    ]
  },
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery'
    }),
    new ExtractTextPlugin({
      filename: 'styles.css',
      disable: false,
      allChunks: true
    }),
    new StyleLintPlugin({
      failOnError: true,
      quiet: false
    }),
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify('production')
      }
    }),
    new webpack.optimize.UglifyJsPlugin()
  ],
  devServer: {
    contentBase: path.join(__dirname, '/')
  }
}

.stylelintrc

{
  "extends": "stylelint-config-standard",
  "plugins": ["postcss-sass"],
  "rules": {
    "indentation": 2
  }
}

Results

Error: stylelint v3+ requires plugins to expose a ruleName. The plugin "/*/*/*/*/node_modules/postcss-sass/index.js" is not doing this, so will not work with stylelint v3+. Please file an issue with the plugin.
    at module.exports (/*/*/*/*/node_modules/stylelint/lib/utils/configurationError.js:8:27)
    at /*/*/*/*/node_modules/stylelint/lib/augmentConfig.js:255:15
    at Array.forEach (native)
    at /*/*/*/*/node_modules/stylelint/lib/augmentConfig.js:253:28
    at Array.reduce (native)
    at addPluginFunctions (/*/*/*/*/node_modules/stylelint/lib/augmentConfig.js:244:45)
    at /*/*/*/*/node_modules/stylelint/lib/augmentConfig.js:76:12
error Command failed with exit code 1.

Thx in advance for your answer! 👍

An in-range update of postcss is breaking the build 🚨

The dependency postcss was updated from 7.0.5 to 7.0.6.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

postcss is a direct dependency of this project, and it is very likely causing it to break. If other packages depend on yours, this update is probably also breaking those in turn.

Status Details

• ❌ continuous-integration/travis-ci/push: The Travis CI build failed (Details).

---

Release Notes for 7.0.6

• Fix parsing files with BOM (by @vkrol).

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

---

Your Greenkeeper Bot 🌴

An in-range update of eslint-plugin-jest is breaking the build 🚨

The devDependency eslint-plugin-jest was updated from 22.13.0 to 22.13.1.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

eslint-plugin-jest is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details

• ❌ continuous-integration/travis-ci/push: The Travis CI build failed (Details).

---

Release Notes for v22.13.1

22.13.1 (2019-07-22)

Bug Fixes

• valid-describe: ignore describe.each (#337) (ed2a0f6), closes #334

Commits

The new version differs by 23 commits.

• 6cbaa0f chore(prefer-todo): migrate to TS (#335)
• ed2a0f6 fix(valid-describe): ignore describe.each (#337)
• d0a8428 chore(no-test-callback): migrate to TS (#321)
• ccbe766 chore(prefer-strict-equal): migrate to TS (#329)
• ee81058 chore(no-test-prefixes): migrate to TS (#328)
• e938636 chore(consistent-test-it): migrate to TS (#327)
• 26ddedd chore(expect-expect): migrate to TS (#325)
• 4200e76 chore(prefer-spy-on): migrate to TS (#326)
• 3a22ef1 chore(no-if): migrate to TS (#324)
• 4270fca chore(no-export): migrate to TS (#323)
• 12e601a chore(no-hooks): migrate to TS (#322)
• f3c654c chore(no-focused-tests): migrate to TS (#314)
• c455100 chore(prefer-inline-snapshots): migrate to TS (#319)
• 41ed53a chore(no-duplicate-hooks): migrate to TS (#318)
• 384b788 chore(no-test-return-statement): migrate to TS (#320)

There are 23 commits in total.

See the full diff

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

---

Your Greenkeeper Bot 🌴

An in-range update of lint-staged is breaking the build 🚨

The devDependency lint-staged was updated from 9.2.2 to 9.2.3.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

lint-staged is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details

• ✅ continuous-integration/travis-ci/push: The Travis CI build passed (Details).
• ✅ coverage/coveralls: First build on greenkeeper/lint-staged-9.2.3 at 97.337% (Details).
• ❌ continuous-integration/travis-ci/pr: The Travis CI build could not complete due to an error (Details).

---

Release Notes for v9.2.3

9.2.3 (2019-08-17)

Bug Fixes

• don't normalize path gitDir path for better Windows compatibility (eb3fa83)
• generateTasks handles parent dir globs correctly (82b5182)
• normalize gitDir path to posix using normalize-path (f485e51)

Commits

The new version differs by 7 commits.

• c9424ad test: mock resolveGitDir to fix runAll tests
• 82b5182 fix: generateTasks handles parent dir globs correctly
• f485e51 fix: normalize gitDir path to posix using normalize-path
• f77cefa refactor: generateTasks is not async
• 23019a5 refactor: remove unnecessary try/catch
• 94dbeda refactor: no need to create absolute paths since cwd is already absolute
• eb3fa83 fix: don't normalize path gitDir path for better Windows compatibility

See the full diff

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

---

Your Greenkeeper Bot 🌴

An in-range update of eslint-plugin-jest is breaking the build 🚨

The devDependency eslint-plugin-jest was updated from 22.9.0 to 22.10.0.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

eslint-plugin-jest is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details

• ❌ continuous-integration/travis-ci/push: The Travis CI build could not complete due to an error (Details).

---

Release Notes for v22.10.0

22.10.0 (2019-07-17)

Features

• rules: adds no-if rule (#293) (28bd1dc)

Commits

The new version differs by 7 commits.

• 28bd1dc feat(rules): adds no-if rule (#293)
• 7ebdc0e chore: enforce import destructure order
• 31c7cef chore: convert to import/export (#302)
• 9f858cb chore: delete tests instead of ignoring them with babel
• c595ba0 chore: do not include tests in published tarball
• 4b4eb78 chore: fix lint error in md file
• d3ea720 chore(docs): fix typo (#304)

See the full diff

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

---

Your Greenkeeper Bot 🌴

How do I use it in gulp?

How do I use it in gulp?

An in-range update of husky is breaking the build 🚨

The devDependency husky was updated from 3.0.3 to 3.0.4.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

husky is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details

• ✅ continuous-integration/travis-ci/push: The Travis CI build passed (Details).
• ✅ coverage/coveralls: First build on greenkeeper/husky-3.0.4 at 97.337% (Details).
• ❌ continuous-integration/travis-ci/pr: The Travis CI build could not complete due to an error (Details).

---

Release Notes for v3.0.4

Fix: skip install earlier when HUSKY_SKIP_INSTALL=1 (#563)

Commits

The new version differs by 9 commits.

• 09eaf91 3.0.4
• a90c641 HUSKY_SKIP_INSTALL skip install earlier
• c1367ef update .npmignore
• 3d9a7f9 Update README.md
• 785a858 Update README.md
• 6b3f58b Update README.md
• f1b8c67 Update README.md
• 7e0fd3d Update ISSUE_TEMPLATE.md
• d20b9ca Update README.md

See the full diff

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

---

Your Greenkeeper Bot 🌴

An in-range update of @logux/eslint-config is breaking the build 🚨

The devDependency @logux/eslint-config was updated from 28.2.1 to 28.2.2.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

@logux/eslint-config is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details

• ❌ continuous-integration/travis-ci/push: The Travis CI build failed (Details).

---

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

---

Your Greenkeeper Bot 🌴

Comments don't ignore syntax rules

Please just tell me if I've done something wrong, but I've tried a few things and this seems to be the issue.

Set up postcss-sass as my syntax in my gulp file, runs just fine, but thinks that when there's a colon in a comment, it should also be in the identifier: value; assignment format. This breaks a lot of our code. For example:
somerule: somesetting; // TODO: investigate a better way to do this

It fires a syntax error on the characters after investigate, as it expects it to be a semi-colon because colon always means assignment.

Also seen at random other points where we're including source for code snippets we've grabbed. For example:
We based this snippet of code off someone's brilliance on Stack overflow: https://stackoverflow.com...

If I've configured something wrong and you've seen this before, let me know, but everything I've read so far isn't giving me any clues as to what that may be. Otherwise, could this please be fixed; TODOs in particular are very helpful and it is a comment, so it shouldn't be caring what the content is.

Missing source reference for comments

Expected

Comments always have source

From postcss-scss parser

Comment {
        raws: { before: '\n', inline: true, left: ' ', right: ' ', text: 'a' },
        type: 'comment',
        parent:
         Root {
           raws: { semicolon: false, after: '' },
           type: 'root',
           nodes: [ [Circular], [Object] ],
           source: { input: [Object], start: [Object] } },
        source:
         { start: { line: 2, column: 1 },
           input: Input { css: '\n// a \n/* b */', id: '<input css 4>' },
           end: { line: 2, column: 5 } },
        text: 'a' }

Actual

Comments do not have source

From snapshot:

postcss-sass/__tests__/__snapshots__/parse.test.js.snap

Lines 1147 to 1156 in 0e6edad

	{
	\\"raws\\": {
	\\"before\\": \\"\\\\n \\",
	\\"left\\": \\" \\",
	\\"right\\": \\"\\",
	\\"inline\\": true
	},
	\\"type\\": \\"comment\\",
	\\"text\\": \\"Comment1\\"
	},

Potential Problem

http://api.postcss.org/global.html#source

If you create a node manually (e.g., with postcss.decl()), that node will not have a source property and will be absent from the source map.

postcss-sass/parser.es6

Lines 343 to 351 in 0e6edad

	let comment = Object.assign(postcss.comment(), {
	text: text[2],
	raws: {
	before: this.raws.before || DEFAULT_COMMENT_DECL.before,
	left: text[1],
	right: text[3],
	inline
	}
	})

This is addressed in the other ndoe types but not in comments.

Send PR with new syntax to PostCSS README.md

https://github.com/postcss/postcss#syntaxes

Add coveralls report to readme

subject

Fix empty file processing

The processing of an empty file returns the wrong source and breaks stylelint.

See this issue and this code:

> require('postcss-scss').parse('').source
{
  input: Input {
    css: '',
    hasBOM: false,
    id: '<input css zG44F1>',
    [Symbol(fromOffsetCache)]: [ 0 ]
  },
  start: { column: 1, line: 1, offset: 0 },
  end: { column: 1, line: 1, offset: 0 }
}

> require('postcss-sass').parse('').source
{
  start: [ 0, 0 ],
  end: [ 0, 0 ],
  input: Input { css: '', hasBOM: false, id: '<input css Ef1dZl>' }
}

Indentation bugs

I created a test case to show you how indentation Stylelint rule works with postcss-sass

Read my comments here: Grawl/stylelint-sass-test@299d3c9#diff-4757c28482d2f675fed8d35d1d12d287

Run and test by yourself here https://github.com/Grawl/stylelint-sass-test with lint-sass-complex NPM script

Mathjs vulnerability

https://nodesecurity.io/advisories/552

This would require an upgrade to at least [email protected]

List wrong transform, if comment exist after loop

Transform will be wrong if Sass AST have loop type and comment after it. Need to investigate this bug, and fix this. Example of 'Sass' string with bug:

$empty: ()

@each $el in $empty
    .el-#{$el}
        content: $el

$list-space: "1" "2" "3"

@each $el in $list-space
    .el-#{$el}
        content: $el
// comment
$list-comma: ("4", "5", "6")

@each $el in $list-comma
    .el-#{$el}
        content: $el

$list-2-dim: ((7 8) (9 10))

@each $el in $list-2-dim
    @each $el2 in $el
        .el-#{$el2}
            content: $el2

Is this library still usable?

I'm using it in my project and there seems to be a problem. The --fix directive deletes the @include @import eg. code

package:
"postcss-sass": "^0.5.0",
"stylelint": "^14.11.0",
"stylelint-order": "^5.0.0",

my stylelintrc.json

{ "customSyntax": "postcss-sass", "ignoreDisables": true, "defaultSeverity": "warning", "plugins": ["stylelint-order"], "rules": { "string-quotes": "single", "at-rule-empty-line-before": null, "length-zero-no-unit": true, "number-leading-zero": "never", "at-rule-no-unknown": [ true, { "ignoreAtRules": [ "extend", "keyframes", "media", "include", "import" ] } ], "selector-type-no-unknown": [ true, { "ignore": ["custom-elements", "default-namespace"] } ], "font-family-no-missing-generic-family-keyword": null, "order/properties-order": [ "position", "top", "right", "bottom", "left", "z-index", "display", "float", "width", "height", "max-width", "max-height", "min-width", "min-height", "padding", "padding-top", "padding-right", "padding-bottom", "padding-left", "margin", "margin-top", "margin-right", "margin-bottom", "margin-left", "margin-collapse", "margin-top-collapse", "margin-right-collapse", "margin-bottom-collapse", "margin-left-collapse", "overflow", "overflow-x", "overflow-y", "clip", "clear", "font", "font-family", "font-size", "font-smoothing", "osx-font-smoothing", "font-style", "font-weight", "line-height", "letter-spacing", "word-spacing", "color", "text-align", "text-decoration", "text-indent", "text-overflow", "text-rendering", "text-size-adjust", "text-shadow", "text-transform", "word-break", "word-wrap", "white-space", "vertical-align", "list-style", "list-style-type", "list-style-position", "list-style-image", "pointer-events", "cursor", "background", "background-color", "border", "border-radius", "content", "outline", "outline-offset", "opacity", "filter", "visibility", "size", "transform" ] } }

Добавить поддержку @import / Add @import support

This issue was written in Russian, for Cult of Matrians project.
English text below

Шаги к решению:

1. Сделать форк проекта.
2. Разобраться в структуре проекта.
3. Прочитать документацию Sass про правило @import.
4. Добавить поддержку @import в проект.
5. Написать тесты.

Steps to resolve:

1. Fork a project.
2. Figure out in project structure.
3. Read Sass documentation about @import rule.
4. Add @import support to the project.
5. Write tests.

An in-range update of postcss is breaking the build 🚨

The dependency postcss was updated from 7.0.19 to 7.0.20.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

postcss is a direct dependency of this project, and it is very likely causing it to break. If other packages depend on yours, this update is probably also breaking those in turn.

Status Details

• ❌ continuous-integration/travis-ci/push: The Travis CI build could not complete due to an error (Details).

---

Release Notes for 7.0.20

• Allow to pass PostCSS’s nodes in nodes property to node constructor.

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

---

Your Greenkeeper Bot 🌴

Fix media query processing

There is an issue with how postcss-sass processes media queries.

It makes it impossible to use with stylelint. See the issue there.

The source should not return undefined:

> require('postcss-sass').parse('@media(max-width: 40rem)\n  color: red').nodes[0].source
undefined

> require('postcss-scss').parse('@media(max-width: 40rem) { color: red }').nodes[0].source
{
  input: Input {
    css: '@media(max-width: 40rem) { color: red }',
    hasBOM: false,
    id: '<input css FGAgvV>',
    [Symbol(fromOffsetCache)]: [ 0 ]
  },
  start: { column: 1, line: 1, offset: 0 },
  end: { column: 39, line: 1, offset: 38 }
}

Change the sass parser

It seems that the currently used sass parser is not aware of ; that are actually not allowed in Sass indent syntax
example from sassmeister

from gonzales

this parser seems to ignore ;

Potentially unfulfilled atRule properties in parser

Hi @AleshaOleg ,

I was working on an example project with stylelint in order to inspect some bugs I encountered in the real life and I'd like to do a little report.

I've only this deps in my package.json

  "devDependencies": {
    "stylelint": "^12.0.0",
    "stylelint-config-recommended": "^3.0.0",
    "stylelint-config-recommended-scss": "^4.0.0",
    "stylelint-config-sass-guidelines": "^6.1.0"
  }

and this stylelint configuration

{
  "extends": [
    "stylelint-config-sass-guidelines"
  ],
  "rules": {
    "block-opening-brace-space-before": null,
    "declaration-block-trailing-semicolon": null
  }
}

and this screen.sass file

@media screen and (min-width: 1680px)
  .test
    border: 0

Obviously I understand that postcss-sass parser in not directly related to stylelint, but let me try ;)

I had problems with these stylelint rules

• postcss-resolve-nested-selector

TypeError: Cannot read property 'type' of undefined
    at /Users/fuzzy/dev/test_stylelint/screen.sass:2:3
    at resolveNestedSelector (/Users/fuzzy/dev/test_stylelint/node_modules/postcss-resolve-nested-selector/index.js:3:35)
    at resolveNestedSelector (/Users/fuzzy/dev/test_stylelint/node_modules/postcss-resolve-nested-selector/index.js:6:61)

• function-url-quotes

TypeError: Cannot read property 'toLowerCase' of undefined
    at checkAtRuleParams (/Users/fuzzy/dev/test_stylelint/node_modules/stylelint/lib/rules/function-url-quotes/index.js:51:48)

• max-nesting-depth

TypeError: Cannot read property 'type' of undefined
    at isIgnoreAtRule (/Users/fuzzy/dev/test_stylelint/node_modules/stylelint/lib/rules/max-nesting-depth/index.js:20:8)

and with this postcss's library

• postcss/lib/vendor

TypeError: Cannot read property 'match' of undefined
    at Object.prefix (/Users/fuzzy/dev/test_stylelint/node_modules/stylelint/node_modules/postcss/lib/vendor.js:27:22)

Exceptions arose because those libraries' code apparently were expecting more properties on the atRule than this parser was giving.

I've tried monkeypatching postcss-sass and I got this to get its parser.js to work (arrow signed rows are added):

_proto.atrule = function atrule(node, parent) {
    var _this6 = this;

    // Skip unsupported @xxx rules
    var supportedNode = node.content[0].content.some(function (contentNode) {
      return SUPPORTED_AT_KEYWORDS.includes(contentNode.content);
    });
    if (!supportedNode) return;
    var atrule = postcss.rule();
    atrule.selector = '';
    atrule.type = 'atrule'; // <------
    atrule.name = node.content[0].content[0].content // <------
    atrule.params = ''; // <------
    atrule.parent = parent;
    atrule.raws = {
      before: this.raws.before || DEFAULT_RAWS_RULE.before,
      between: DEFAULT_RAWS_RULE.between
    };
    node.content.forEach(function (contentNode, i) {
      if (contentNode.type === 'space') {
        var prevNodeType = node.content[i - 1].type;

        switch (prevNodeType) {
          case 'atkeyword':
          case 'ident':
            atrule.selector += contentNode.content;
            break;

          default:
        }

        return;
      }

      _this6.process(contentNode, atrule);
    });
    parent.nodes.push(atrule);
  };

I also noticed that atrule.type would be automatically populated by

var atrule = postcss.atRule();

---

I am not familiar with postcss API and never developed anything for it. At the moment I'm just reporting these snippets and experience with the goal to give you some interesting paths, even if I'm not sure they could be useful.

Sorry in advance if they will not be ;)

Thanks for your attention.

Check by gonzales-pe author

Hey @tonyganch. As you can see, I wrote a converter (actually it have basic support, so it not tested for mixins/variables and other complex things) from Sass to PostCSS AST, using gonzales-pe. Could you check, before I didn't started to develop more complexity things, may be I missed some specific details? Thanks!