CODEWITHSUNDEEP
csswebpackstylelint
Toni Michel Caubet
Toni Michel Caubet

Reputation: 20173

Webpack is removing css rules

I have this block of CSS code:

.accordeon:not(.accordeon--expanded) .accordeon__intro {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  height: 2.7em;
  -webkit-box-orient: vertical;
}

That using the yarn dev webpacks removes the last line.

I fixed it by adding /* stylelint-disable */

.accordeon:not(.accordeon--expanded) .accordeon__intro {
  /* stylelint-disable */
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  height: 2.7em;
  -webkit-box-orient: vertical;
  /* stylelint-enable */
}

But when I run yarn build the issue returns.

This is the info of package.json

{
  "name": "projectName",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "sideEffects": false,
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --host 0.0.0.0",
    "build": "NODE_ENV=prod webpack -p",
    "build:staging": "NODE_ENV=staging webpack -p"
  },
  "author": "[email protected]",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.21.0",
    "babel-loader": "^6.2.10",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-plugin-transform-react-jsx": "^6.8.0",
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-stage-0": "^6.16.0",
    "babel-register": "^6.14.0",
    "babel-runtime": "^6.11.6",
    "copy-webpack-plugin": "^4.0.1",
    "core-js": "^2.4.1",
    "css-loader": "^0.26.1",
    "eslint": "^3.0.1",
    "extract-text-webpack-plugin": "^2.0.0-beta.5",
    "file-loader": "^0.9.0",
    "html-loader": "^0.4.4",
    "html-webpack-plugin": "^2.26.0",
    "node-sass": "^4.7.2",
    "postcss-loader": "^1.2.2",
    "raw-loader": "^0.5.1",
    "sass-loader": "^4.1.1",
    "style-loader": "^0.13.1",
    "url-loader": "^0.5.7",
    "webpack": "^2.7.0",
    "webpack-dev-server": "^2.2.0-rc.0"
  },
  "dependencies": {
    "axios": "^0.21.1",
    "babel-plugin-webpack-loaders": "^0.9.0",
    "babel-preset-latest": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "clsx": "^1.1.1",
    "flexboxgrid": "^6.3.1",
    "gsap": "^3.0.5",
    "lax.js": "^1.2.5",
    "pixi.js": "^5.2.0",
    "preact": "^7.2.0",
    "preact-compat": "^3.19.0",
    "preact-render-to-string": "^3.7.0",
    "promise-polyfill": "^6.0.2",
    "react-before-after-slider": "^1.0.4",
    "scrollmagic": "^2.0.7",
    "scrollmagic-plugin-gsap": "^1.0.4",
    "unfetch": "^2.1.2",
    "webpack-node-externals": "^1.6.0"
  }
}

Any idea how to prevent this? it does even remove if I put it inline style="-webkit-box-orient: vertical;" resulting in a empty style

-edit-

This is what i find related in the webpack.config.js but this is the full code

module: {
      loaders: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          loader: "babel-loader",
          query: { presets: ["es2015", "stage-0"] },
        },
        {
          test: /\.(css|scss)$/,
          loader: ExtractTextPlugin.extract({
            fallbackLoader: "style-loader",
            loader: ["css-loader", "postcss-loader", "sass-loader"],
          }),
        },
        {
          test: /\.(jpe?g|png|gif|ttf|svg|eot|woff|woff2)$/i,
          loader: "file-loader?name=/assets/[path][name].[ext]&publicPath=.",
        },
        { test: /icon_.+\.(svg)$/i, loader: "url-loader" },
        { test: /\.html$/, loader: "html-loader" },
      ],
    },

My postcss.config.js file:

module.exports = {
  plugins: [
    require('autoprefixer')({ browsers: ['last 3 version'] })
  ]
}

Upvotes: 0

Views: 805

Answers (1)

Johan
Johan

Reputation: 1988

This is not really an answer to your question, but I think you should reconsider using box-orient. box-orient is a deprecated feature and has been replaced by the new flexbox standard. You might get it in somehow, but stylelint has good reasons to remove it.

See: https://developer.mozilla.org/en-US/docs/Web/CSS/box-orient

This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

This is a property of the original CSS Flexible Box Layout Module draft, and has been replaced by a newer standard. See flexbox for information about the current standard.

Upvotes: 1

Related Questions