1. postcss-comment
Allow postcss to support inline comments
postcss-comment
Package: postcss-comment
Created by: zoubin
Last modified: Fri, 24 Jun 2022 09:41:34 GMT
Version: 2.0.0
License: MIT
Downloads: 42,384
Repository: https://github.com/zoubin/postcss-comment

Install

npm install postcss-comment
yarn add postcss-comment

postcss-comment

version
status
dependencies
devDependencies

Allow postcss to support inline comments.

Usage

 npm i --save-dev postcss postcss-comment

As parser

 var postcss = require('postcss')
var parser = require('postcss-comment')

var fs = require('fs')

var file = __dirname + '/inline.css'

postcss()
  .process(
    fs.readFileSync(file, 'utf8'),
    { from: file, parser: parser }
  )
  .then(function (result) {
    console.log(result.css)
  })

Hook require

 require('postcss-comment/hookRequire')
var postcss = require('postcss')

var fs = require('fs')

var file = __dirname + '/inline.css'

postcss()
  .process(
    fs.readFileSync(file, 'utf8'),
    { from: file }
  )
  .then(function (result) {
    console.log(result.css)
  })

Or:

 var postcss = require('postcss-comment/hookRequire')

var fs = require('fs')

var file = __dirname + '/inline.css'

postcss()
  .process(
    fs.readFileSync(file, 'utf8'),
    { from: file }
  )
  .then(function (result) {
    console.log(result.css)
  })

Example

inline.css:

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

outputs:

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

Dependencies

RELATED POST

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin