{"action":"created","issue":{"url":"https://api.github.com/repos/postcss/postcss/issues/1161","repository_url":"https://api.github.com/repos/postcss/postcss","labels_url":"https://api.github.com/repos/postcss/postcss/issues/1161/labels{/name}","comments_url":"https://api.github.com/repos/postcss/postcss/issues/1161/comments","events_url":"https://api.github.com/repos/postcss/postcss/issues/1161/events","html_url":"https://github.com/postcss/postcss/issues/1161","id":335412422,"node_id":"MDU6SXNzdWUzMzU0MTI0MjI=","number":1161,"title":"Your current PostCSS version is 5.2.18, but postcss-modules-scope uses 6.0.21. Perhaps this is the source of the error below. ","user":{"login":"BiosBoy","id":30953392,"node_id":"MDQ6VXNlcjMwOTUzMzky","avatar_url":"https://avatars3.githubusercontent.com/u/30953392?v=4","gravatar_id":"","url":"https://api.github.com/users/BiosBoy","html_url":"https://github.com/BiosBoy","followers_url":"https://api.github.com/users/BiosBoy/followers","following_url":"https://api.github.com/users/BiosBoy/following{/other_user}","gists_url":"https://api.github.com/users/BiosBoy/gists{/gist_id}","starred_url":"https://api.github.com/users/BiosBoy/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/BiosBoy/subscriptions","organizations_url":"https://api.github.com/users/BiosBoy/orgs","repos_url":"https://api.github.com/users/BiosBoy/repos","events_url":"https://api.github.com/users/BiosBoy/events{/privacy}","received_events_url":"https://api.github.com/users/BiosBoy/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":3,"created_at":"2018-06-25T13:41:28Z","updated_at":"2018-10-03T22:09:25Z","closed_at":"2018-06-25T13:59:01Z","author_association":"NONE","body":"**Do you want to request a *feature* or report a *bug*?**\r\n**BUG**\r\n\r\n**What is the current behavior?**\r\nWhen I try to start my webpack bundle compilation I even gets the strange error about incomportability of `PostCSS` and `postcss-modules-scope` versions. What is the interesting that is I had installed the lastest version of PostCSS (6.0.23), but the systam says that I got only PostCSS version is 5.2.18. \r\n\r\n```\r\nYour current PostCSS version is 5.2.18, but postcss-modules-scope uses 6.0.21. Perhaps this is the source of the error below.\r\nERROR in webpack_test/react-apps/shared/components/LoadingIndicator/styles.cssmodule\r\n  app:build:webpack-compiler Module build failed (from /webpack_test/react-apps/node_modules/mini-css-extract-plugin/dist/loader.js):\r\n  app:build:webpack-compiler ModuleBuildError: Module build failed (from /webpack_test/react-apps/node_modules/css-loader/index.js):\r\n  app:build:webpack-compiler Error: composition is only allowed when selector is single :local class name not in \".dot1\", \".dot1\" is weird\r\n  app:build:webpack-compiler     at \\webpack_test\\react-apps\\node_modules\\postcss-modules-scope\\lib\\index.js:26:13\r\n```\r\n**If the current behavior is a bug, please provide the steps to reproduce.**\r\nIt's start happen after I had updated my webpack from 3.8.1 to 4.12.1 version. That's all.\r\n\r\n**What is the expected behavior?**\r\nWebpack compilation should proceed normally. Without any crashes on css step.\r\n\r\nMy webpack file:\r\n```\r\nconst webpack = require('webpack')\r\nconst HtmlWebpackPlugin = require('html-webpack-plugin')\r\nconst MiniCssExtractPlugin = require('mini-css-extract-plugin')\r\nconst UglifyJsPlugin = require('uglifyjs-webpack-plugin')\r\nconst debug = require('debug')('app:webpack:config')\r\n\r\n// ------------------------------------\r\n// Rules\r\n// ------------------------------------\r\nconst rules = []\r\n\r\n// JavaScript / JSON\r\nrules.push(\r\n  {\r\n    test: /\\.(js|jsx)$/,\r\n    exclude: /node_modules/,\r\n    loader: 'babel-loader',\r\n    query: {\r\n      cacheDirectory: true,\r\n      plugins: [\r\n        'babel-plugin-transform-class-properties',\r\n        'babel-plugin-syntax-dynamic-import',\r\n        [\r\n          'babel-plugin-transform-runtime',\r\n          {\r\n            helpers: true,\r\n            polyfill: true,\r\n            regenerator: true\r\n          }\r\n        ],\r\n        [\r\n          'babel-plugin-transform-object-rest-spread',\r\n          {\r\n            useBuiltIns: false\r\n          }\r\n        ]\r\n      ],\r\n      presets: [\r\n        'babel-preset-react',\r\n        [\r\n          'babel-preset-env',\r\n          {\r\n            modules: false,\r\n            targets: {\r\n              ie9: true\r\n            },\r\n            uglify: true\r\n          }\r\n        ]\r\n      ]\r\n    }\r\n  },\r\n  {\r\n    test: /\\.json$/,\r\n    loader: 'json-loader'\r\n  }\r\n)\r\n\r\n// ------------------------------------\r\n// Style Loaders\r\n// ------------------------------------\r\n\r\nrules.push(\r\n  {\r\n    test: /\\.(s?)css$/,\r\n    use: [\r\n      MiniCssExtractPlugin.loader,\r\n      { loader: 'css-loader', options: { sourceMap: false } },\r\n      { loader: 'postcss-loader', options: { sourceMap: false } },\r\n      { loader: 'sass-loader', options: { sourceMap: false } }\r\n    ]\r\n  },\r\n  {\r\n    test: /\\.cssmodule$/,\r\n    use: [\r\n      MiniCssExtractPlugin.loader,\r\n      {\r\n        loader: 'css-loader?modules&importLoaders=1&localIdentName=[local]___[hash:base64:5]',\r\n        options: { sourceMap: false }\r\n      },\r\n      { loader: 'postcss-loader', options: { sourceMap: false } },\r\n      { loader: 'sass-loader', options: { sourceMap: false } }\r\n    ]\r\n  }\r\n)\r\n\r\n// File loaders\r\n/* eslint-disable */\r\nrules.push(\r\n  {\r\n    test: /\\.woff(\\?.*)?$/,\r\n    loader: 'url-loader?prefix=fonts/&name=[path][name].[ext]&limit=10000&mimetype=application/font-woff'\r\n  },\r\n  {\r\n    test: /\\.woff2(\\?.*)?$/,\r\n    loader: 'url-loader?prefix=fonts/&name=[path][name].[ext]&limit=10000&mimetype=application/font-woff2'\r\n  },\r\n  {\r\n    test: /\\.otf(\\?.*)?$/,\r\n    loader: 'file-loader?prefix=fonts/&name=[path][name].[ext]&limit=10000&mimetype=font/opentype'\r\n  },\r\n  {\r\n    test: /\\.ttf(\\?.*)?$/,\r\n    loader: 'url-loader?prefix=fonts/&name=[path][name].[ext]&limit=10000&mimetype=application/octet-stream'\r\n  },\r\n  {\r\n    test: /\\.eot(\\?.*)?$/,\r\n    loader: 'file-loader?prefix=fonts/&name=[path][name].[ext]'\r\n  },\r\n  {\r\n    test: /\\.svg(\\?.*)?$/,\r\n    loader: 'url-loader?prefix=fonts/&name=[path][name].[ext]&limit=10000&mimetype=image/svg+xml'\r\n  },\r\n  { test: /\\.(png|jpg)$/, loader: 'url-loader?limit=8192' }\r\n)\r\n\r\nconst createConfig = options => {\r\n  const paths = options.utils_paths\r\n  const __DEV__ = options.globals.__DEV__\r\n  const __PROD__ = options.globals.__PROD__\r\n  // TODO: sourceMap is not read from postcss.config.js because of a bug\r\n  // remove it once postcss-loader is updated\r\n\r\n  debug('Creating configuration.')\r\n  const webpackConfig = {\r\n    mode: __DEV__ ? 'development' : 'production',\r\n    entry: paths.client('main.js'),\r\n    name: 'client',\r\n    target: 'web',\r\n    devtool: options.compiler_devtool,\r\n    optimization: {\r\n      minimizer: [\r\n        new UglifyJsPlugin({\r\n          uglifyOptions: {\r\n            compress: {\r\n              unused: true,\r\n              dead_code: true,\r\n              warnings: false\r\n            }\r\n          },\r\n          sourceMap: false\r\n        })\r\n      ],\r\n      splitChunks: {\r\n        chunks: 'all'\r\n      }\r\n    },\r\n    performance: {\r\n      hints: false\r\n    },\r\n    resolve: {\r\n      modules: [paths.client(), 'node_modules'],\r\n      extensions: ['.js', '.jsx', '.json']\r\n    },\r\n    module: {}\r\n  }\r\n\r\n  // ------------------------------------\r\n  // Entry Points\r\n  // ------------------------------------\r\n  const APP_ENTRY = paths.client('main.js')\r\n\r\n  webpackConfig.entry = {\r\n    app: __DEV__\r\n      ? [APP_ENTRY].concat(`webpack-hot-middleware/client?path=${options.compiler_public_path}__webpack_hmr`)\r\n      : [APP_ENTRY]\r\n  }\r\n\r\n  // ------------------------------------\r\n  // Bundle externals\r\n  // ------------------------------------\r\n  webpackConfig.externals = {\r\n    react: 'React',\r\n    'react-dom': 'ReactDOM'\r\n  }\r\n\r\n  // ------------------------------------\r\n  // Bundle Output\r\n  // ------------------------------------\r\n  webpackConfig.output = {\r\n    filename: `[name].[${options.compiler_hash_type}].js`,\r\n    path: paths.dist(),\r\n    publicPath: options.compiler_public_path\r\n  }\r\n\r\n  // ------------------------------------\r\n  // Plugins\r\n  // ------------------------------------\r\n  webpackConfig.plugins = [\r\n    new webpack.DefinePlugin(options.globals),\r\n    new MiniCssExtractPlugin({\r\n      filename: '[name].[hash].css',\r\n      chunkFilename: '[name].[hash].css'\r\n    })\r\n  ]\r\n\r\n  if (__DEV__) {\r\n    debug('Enable plugins for live development (HMR, NoErrors).')\r\n    webpackConfig.plugins.push(\r\n      new HtmlWebpackPlugin({\r\n        entry: {\r\n          app: paths.client('index.html')\r\n        },\r\n        template: paths.client('index.html'),\r\n        filename: 'index.html',\r\n        inject: 'body',\r\n        minify: {\r\n          collapseWhitespace: true\r\n        }\r\n      }),\r\n      new webpack.HotModuleReplacementPlugin(),\r\n      new webpack.NoEmitOnErrorsPlugin()\r\n    )\r\n  } else if (__PROD__) {\r\n    debug('Enable plugins for production')\r\n    webpackConfig.plugins.push(\r\n      new HtmlWebpackPlugin({\r\n        template: paths.client(options.template),\r\n        filename: options.template,\r\n        minify: false,\r\n        inject: false\r\n      })\r\n    )\r\n\r\n    webpackConfig.plugins.push(\r\n      new webpack.ProvidePlugin({\r\n        fetch: 'exports-loader?self.fetch!whatwg-fetch'\r\n      })\r\n    )\r\n  }\r\n\r\n  webpackConfig.module.rules = rules\r\n\r\n  return webpackConfig\r\n}\r\n\r\nmodule.exports.rules = rules\r\n\r\nmodule.exports = createConfig\r\n\r\n```\r\n\r\nMy package.json file:\r\n```\r\n{\r\n  \"name\": \"react-apps\",\r\n  \"version\": \"0.0.1\",\r\n  \"description\": \"\",\r\n  \"private\": true,\r\n  \"workspaces\": [\r\n    \"apps/*\",\r\n    \"shared\"\r\n  ],\r\n  \"pre-commit\": \"lint:staged\",\r\n  \"lint-staged\": {\r\n    \"*.{js,jsx}\": [\r\n      \"prettier --single-quote --no-semi --print-width 120 --write\",\r\n      \"git add\"\r\n    ]\r\n  },\r\n  \"scripts\": {\r\n    \"deployall\": \"lerna run deploy --concurrency 1\",\r\n    \"lint:staged\": \"lint-staged\",\r\n    \"storybook\": \"start-storybook -p 6006\",\r\n    \"test\": \"jest\",\r\n    \"test:dev\": \"npm run test -- --watch\",\r\n    \"build-storybook\": \"build-storybook\"\r\n  },\r\n  \"jest\": {\r\n    \"verbose\": true,\r\n    \"transform\": {\r\n      \"^.+\\\\.js$\": \"babel-jest\"\r\n    },\r\n    \"moduleNameMapper\": {\r\n      \"^.+\\\\.(css|scss|cssmodule)$\": \"identity-obj-proxy\"\r\n    },\r\n    \"globals\": {\r\n      \"NODE_ENV\": \"test\"\r\n    },\r\n    \"moduleFileExtensions\": [\r\n      \"js\"\r\n    ],\r\n    \"transformIgnorePatterns\": [\r\n      \".*(node_modules)(?!.*.*).*$\"\r\n    ]\r\n  },\r\n  \"author\": \"\",\r\n  \"devDependencies\": {\r\n    \"@storybook/addon-actions\": \"^3.2.17\",\r\n    \"@storybook/addon-backgrounds\": \"^3.3.10\",\r\n    \"@storybook/addon-centered\": \"^3.3.10\",\r\n    \"@storybook/addon-knobs\": \"^3.3.10\",\r\n    \"@storybook/addon-links\": \"^3.2.17\",\r\n    \"@storybook/cli\": \"^3.4.2\",\r\n    \"@storybook/react\": \"^3.2.17\",\r\n    \"babel-eslint\": \"^8.2.3\",\r\n    \"babel-plugin-transform-object-assign\": \"^6.22.0\",\r\n    \"babel-polyfill\": \"^6.26.0\",\r\n    \"babel-preset-env\": \"^1.7.0\",\r\n    \"babel-preset-react\": \"^6.24.1\",\r\n    \"babel-template\": \"^6.26.0\",\r\n    \"babel-types\": \"^6.26.0\",\r\n    \"css-loader\": \"^0.28.11\",\r\n    \"eslint\": \"^4.19.1\",\r\n    \"eslint-config-standard\": \"^11.0.0\",\r\n    \"eslint-config-standard-react\": \"^6.0.0\",\r\n    \"eslint-plugin-babel\": \"^5.0.0\",\r\n    \"eslint-plugin-promise\": \"^3.4.0\",\r\n    \"eslint-plugin-react\": \"^7.7.0\",\r\n    \"eslint-plugin-standard\": \"^3.0.1\",\r\n    \"extract-text-webpack-plugin\": \"^4.0.0-beta.0\",\r\n    \"fetch-mock\": \"^6.0.0\",\r\n    \"glob-loader\": \"^0.3.0\",\r\n    \"html-webpack-plugin\": \"^3.2.0\",\r\n    \"lint-staged\": \"^7.0.4\",\r\n    \"mini-css-extract-plugin\": \"^0.4.0\",\r\n    \"postcss\": \"^6.0.23\",\r\n    \"postcss-loader\": \"^2.1.5\",\r\n    \"postcss-modules-scope\": \"^1.1.0\",\r\n    \"pre-commit\": \"^1.2.2\",\r\n    \"prettier\": \"^1.10.2\",\r\n    \"prop-types\": \"^15.6.0\",\r\n    \"redux-mock-store\": \"^1.5.1\",\r\n    \"ssh2-sftp-client\": \"^2.1.1\",\r\n    \"uglifyjs-webpack-plugin\": \"^1.2.6\",\r\n    \"webpack\": \"^4.12.1\",\r\n    \"webpack-dev-middleware\": \"^3.1.3\",\r\n    \"webpack-hot-middleware\": \"^2.22.2\",\r\n    \"webpack-middleware\": \"^1.5.1\"\r\n  },\r\n  \"dependencies\": {\r\n    \"@types/jest\": \"^22.2.3\",\r\n    \"eslint-plugin-import\": \"^2.11.0\",\r\n    \"react\": \"^16.3.2\",\r\n    \"react-dom\": \"^16.3.2\"\r\n  }\r\n}\r\n\r\n```\r\n\r\n**Please mention other relevant information such as your webpack version, Node.js version and Operating System.**\r\nWindows 10,\r\nNodeJs 6.0.1\r\nYarn 1.7.0\r\nWebpack  4.12.1\r\nPostCSS 6.0.23\r\npostcss-modules-scope 1.1.0\r\ncss-loader 2.1.5\r\n@ai #Your current PostCSS version is 5.2.18, but postcss-modules-scope uses 6.0.21"},"comment":{"url":"https://api.github.com/repos/postcss/postcss/issues/comments/426820608","html_url":"https://github.com/postcss/postcss/issues/1161#issuecomment-426820608","issue_url":"https://api.github.com/repos/postcss/postcss/issues/1161","id":426820608,"node_id":"MDEyOklzc3VlQ29tbWVudDQyNjgyMDYwOA==","user":{"login":"bahtou","id":1924298,"node_id":"MDQ6VXNlcjE5MjQyOTg=","avatar_url":"https://avatars1.githubusercontent.com/u/1924298?v=4","gravatar_id":"","url":"https://api.github.com/users/bahtou","html_url":"https://github.com/bahtou","followers_url":"https://api.github.com/users/bahtou/followers","following_url":"https://api.github.com/users/bahtou/following{/other_user}","gists_url":"https://api.github.com/users/bahtou/gists{/gist_id}","starred_url":"https://api.github.com/users/bahtou/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/bahtou/subscriptions","organizations_url":"https://api.github.com/users/bahtou/orgs","repos_url":"https://api.github.com/users/bahtou/repos","events_url":"https://api.github.com/users/bahtou/events{/privacy}","received_events_url":"https://api.github.com/users/bahtou/received_events","type":"User","site_admin":false},"created_at":"2018-10-03T22:09:25Z","updated_at":"2018-10-03T22:09:25Z","author_association":"NONE","body":"I'm getting a similar error\r\n\r\n> Unknown error from PostCSS plugin. Your current PostCSS version is 6.0.23, but postcss-import uses 7.0.5. Perhaps this is the source of the error below.\r\n\r\n`postcss-import@12.0.0` has this as dependencies\r\n\r\n```\r\n\"dependencies\": {\r\n    \"postcss\": \"^7.0.1\",\r\n    \"postcss-value-parser\": \"^3.2.3\",\r\n    \"read-cache\": \"^1.0.0\",\r\n    \"resolve\": \"^1.1.7\"\r\n  },\r\n```\r\n\r\nThe CSS that is throwing this error is `@import 'styles/variables.css';`  inside another CSS file."}}
{"actor":{"display_login":"bahtou"}}