mummybot / postcss-strip-inline-comments

Remove inline comments from postcss-scss parser
MIT License
31 stars 3 forks source link

Inline comments aren't getting stripped #8

Open unikitty37 opened 2 years ago

unikitty37 commented 2 years ago

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.

techieshark commented 9 months ago

Running into something like this; @unikitty37 did you end up having luck here?

unikitty37 commented 9 months ago

Unfortunately not; the project in question ended up getting switched to Svelte, and the default Svelte setup strips inline comments correctly without needing postcss-strip-inline-comments, so I've not really looked any further into this.