mummybot / postcss-strip-inline-comments Goto Github PK
View Code? Open in Web Editor NEWRemove inline comments from postcss-scss parser
License: MIT License
Remove inline comments from postcss-scss parser
License: MIT License
Does it support the latest PostCSS 6?
Using postcss-comment
instead.
The package has an issue when updated to the latest version.
The latest version (0.1.4) causes Webpack to throw the following error
Module build failed: Error: Cannot find module 'postcss-strip-inline-comments'
Version 0.1.3 does not cause the error
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.
Hey there
Maybe I am putting my config wrong.
ERROR in ./~/css-loader?sourceMap&importLoaders=1!./~/postcss-loader?parser=postcss-scss!./src/client/scss/pages/_home.css
Module build failed: Error: Cannot find module 'postcss-scss'
Webpack
'use strict';
var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var qs = require('querystring');
//Post CSS
var precss = require('precss');
var autoprefixer = require('autoprefixer');
var stripInlineComments = require('postcss-strip-inline-comments');
module.exports = {
devtool: 'eval-source-map',
entry: [
'webpack-hot-middleware/client?reload=true',
path.join(__dirname, 'src/client/js/Kindred')
],
output: {
path: path.join(__dirname, '/public/'),
filename: '[name].js',
publicPath: '/'
},
plugins: [
new HtmlWebpackPlugin({
template: 'app/index.tpl.html',
inject: 'body',
filename: 'index.html'
}),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin(),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('development')
}),
new ExtractTextPlugin("style.css")
],
module: {
loaders: [{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel',
query: {
"presets": ["react", "es2015", "stage-0", "react-hmre"]
}
}, {
test: /\.json?$/,
loader: 'json'
},
{test: /\.png$/, loader: "url-loader?limit=100000"},
// Images
{test: /\.jpg$/, loader: "file-loader"},
{
test: /\.(eot|svg|ttf|woff|woff2)$/,
loader: 'file?name=./font/[name].[ext]'
},
{
test: /\.css$/,
loader: ExtractTextPlugin.extract('style-loader', 'css-loader?sourceMap&importLoaders=1!postcss-loader?parser=postcss-scss')
}]
},
postcss: function (webpack) {
return [stripInlineComments, precss, autoprefixer, require('postcss-simple-vars'), require('postcss-nested', autoprefixer({browsers: ['last 2 versions']}))];
}
};
1γ@import
// @import 'assets/css/function.css';
2γend }
// .avatar-img {
// border-radius: 5px;
// }
The plugin does not work if there is 'inline' comment and the closing brace on the same line.
The plugin fails on this code example:
a { color:red; //comment }
I got an error:
(node:58626) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 2): CssSyntaxError: <css input>:1:16: Unknown word
> 1 | a { color:red; //comment }
| ^
Example code:
var postcss = require('postcss');
var syntax = require('postcss-scss');
var stripInlineComments = require('postcss-strip-inline-comments');
var badCss = 'a { color:red; //comment }';
postcss([stripInlineComments]).process(badCss, { parser: syntax }).then(function (result) {
console.log(result.css)
});
A declarative, efficient, and flexible JavaScript library for building user interfaces.
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. πππ
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google β€οΈ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.