Skip to content

Inline comments aren't getting stripped #8

Description

@unikitty37

Comments are not getting stripped for me with this postcss.config.js:

const cssDependencies = [
  { type: 'dir', dir: 'app/assets/stylesheets/utility' },
  { type: 'dir', dir: 'app/assets/stylesheets/app' },
]

module.exports = {
  processors: {
    'postcss-strip-inline-comments': {},
  },
  syntax: 'postcss-scss',
  plugins: {
    'postcss-import-ext-glob': {},
    'postcss-import': ({}),
    'postcss-add-dependencies': ({ dependencies: cssDependencies }),
    'postcss-nested': {},
    'postcss-include-media': {},
    'autoprefixer': {},
  },
}
// Test file
.example {
  h1 {
    color: red;
  }
}

is output as

// Test file
.example h1 {
    color: red;
  }

and the style is not applied in the browser as the parser gives up at the invalid //.

If I change syntax: 'postcss-scss' to parser: 'postcss-scss' the style is applied in the browser, but the output is now

/* Test file*/
.example h1 {
    color: red;
  }

and the effect is exactly the same as not installing postcss-strip-inline-comments.

My package.json:

{
  "name": "app",
  "private": "true",
  "dependencies": {
    "@hotwired/stimulus": "^3.0.1",
    "@hotwired/turbo-rails": "^7.1.3",
    "autoprefixer": "^10.4.7",
    "esbuild": "^0.14.45",
    "postcss": "^8.4.14",
    "postcss-add-dependencies": "^1.1.1",
    "postcss-cli": "^9.1.0",
    "postcss-import": "^14.1.0",
    "postcss-import-ext-glob": "^2.0.1",
    "postcss-nested": "^5.0.6",
    "postcss-scss": "^4.0.4",
    "postcss-strip-inline-comments": "^0.1.5"
  },
  "devDependencies": {
    "postcss-include-media": "^1.1.0"
  },
  "scripts": {
    "build": "esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds",
    "build:css": "postcss ./app/assets/stylesheets/application.postcss.css -o ./app/assets/builds/application.css"
  }
}

and the processing is run with yarn build:css --watch. The yarn.lock shows postcss-scss version 4.0.4 and postcss-strip-inline-comments version 0.1.5.

I'm really not sure whether I've run into a bug or just misconfigured something. I thought it might be related to the comment being in a sheet imported using @import via postcss-import, but the same problem occurs in the entrypoint application.postcss.css.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions