🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more →
postcss-loader
Advanced tools
postcss-loader - npm Package Compare versions
Comparing version 4.0.4 to 4.1.0
@@ -5,2 +5,9 @@ # Changelog | ||
| ## [4.1.0](https://github.com/webpack-contrib/postcss-loader/compare/v4.0.4...v4.1.0) (2020-11-19) | ||
| ### Features | ||
| * partial compatibility with `postcss-cli`, added `api.env` (alias for `api.mode`) and `api.options` (contains options from the `postcssOptions` options), please look at the [example](https://github.com/webpack-contrib/postcss-loader#examples-of-config-files) for more details ([#498](https://github.com/webpack-contrib/postcss-loader/issues/498)) ([84a9c46](https://github.com/webpack-contrib/postcss-loader/commit/84a9c46467086df0185519ceb93bf66893af4cf2)) | ||
| ### [4.0.4](https://github.com/webpack-contrib/postcss-loader/compare/v4.0.3...v4.0.4) (2020-10-09) | ||
@@ -7,0 +14,0 @@ |
| "use strict"; | ||
| module.exports = require('./index').default; | ||
| module.exports = require("./index").default; |
@@ -23,11 +23,11 @@ "use strict"; | ||
| } = error; | ||
| this.name = 'SyntaxError'; | ||
| this.name = "SyntaxError"; | ||
| this.message = `${this.name}\n\n`; | ||
| if (typeof line !== 'undefined') { | ||
| if (typeof line !== "undefined") { | ||
| this.message += `(${line}:${column}) `; | ||
| } | ||
| this.message += plugin ? `${plugin}: ` : ''; | ||
| this.message += file ? `${file} ` : '<css input> '; | ||
| this.message += plugin ? `${plugin}: ` : ""; | ||
| this.message += file ? `${file} ` : "<css input> "; | ||
| this.message += `${reason}`; | ||
@@ -34,0 +34,0 @@ const code = error.showSourceCode(); |
@@ -44,7 +44,7 @@ "use strict"; | ||
| (0, _schemaUtils.validate)(_options.default, options, { | ||
| name: 'PostCSS Loader', | ||
| baseDataPath: 'options' | ||
| name: "PostCSS Loader", | ||
| baseDataPath: "options" | ||
| }); | ||
| const callback = this.async(); | ||
| const configOption = typeof options.postcssOptions === 'undefined' || typeof options.postcssOptions.config === 'undefined' ? true : options.postcssOptions.config; | ||
| const configOption = typeof options.postcssOptions === "undefined" || typeof options.postcssOptions.config === "undefined" ? true : options.postcssOptions.config; | ||
| let loadedConfig; | ||
@@ -54,3 +54,3 @@ | ||
| try { | ||
| loadedConfig = await (0, _utils.loadConfig)(this, configOption); | ||
| loadedConfig = await (0, _utils.loadConfig)(this, configOption, options.postcssOptions); | ||
| } catch (error) { | ||
@@ -62,3 +62,3 @@ callback(error); | ||
| const useSourceMap = typeof options.sourceMap !== 'undefined' ? options.sourceMap : this.sourceMap; | ||
| const useSourceMap = typeof options.sourceMap !== "undefined" ? options.sourceMap : this.sourceMap; | ||
| const { | ||
@@ -83,3 +83,3 @@ plugins, | ||
| if (meta && meta.ast && meta.ast.type === 'postcss' && (0, _semver.satisfies)(meta.ast.version, `^${_package.default.version}`)) { | ||
| if (meta && meta.ast && meta.ast.type === "postcss" && (0, _semver.satisfies)(meta.ast.version, `^${_package.default.version}`)) { | ||
| ({ | ||
@@ -104,3 +104,3 @@ root | ||
| if (error.name === 'CssSyntaxError') { | ||
| if (error.name === "CssSyntaxError") { | ||
| callback(new _Error.default(error)); | ||
@@ -119,7 +119,7 @@ } else { | ||
| for (const message of result.messages) { | ||
| if (message.type === 'dependency') { | ||
| if (message.type === "dependency") { | ||
| this.addDependency(message.file); | ||
| } | ||
| if (message.type === 'asset' && message.content && message.file) { | ||
| if (message.type === "asset" && message.content && message.file) { | ||
| this.emitFile(message.file, message.content, message.sourceMap, message.info); | ||
@@ -137,3 +137,3 @@ } | ||
| const ast = { | ||
| type: 'postcss', | ||
| type: "postcss", | ||
| version: result.processor.version, | ||
@@ -140,0 +140,0 @@ root: result.root |
@@ -49,4 +49,4 @@ "use strict"; | ||
| async function loadConfig(loaderContext, config) { | ||
| const searchPath = typeof config === 'string' ? _path.default.resolve(config) : _path.default.dirname(loaderContext.resourcePath); | ||
| async function loadConfig(loaderContext, config, postcssOptions) { | ||
| const searchPath = typeof config === "string" ? _path.default.resolve(config) : _path.default.dirname(loaderContext.resourcePath); | ||
| let stats; | ||
@@ -60,3 +60,3 @@ | ||
| const explorer = (0, _cosmiconfig.cosmiconfig)('postcss'); | ||
| const explorer = (0, _cosmiconfig.cosmiconfig)("postcss"); | ||
| let result; | ||
@@ -84,3 +84,3 @@ | ||
| if (typeof result.config === 'function') { | ||
| if (typeof result.config === "function") { | ||
| const api = { | ||
@@ -90,3 +90,6 @@ mode: loaderContext.mode, | ||
| // For complex use | ||
| webpackLoaderContext: loaderContext | ||
| webpackLoaderContext: loaderContext, | ||
| // Partial compatibility with `postcss-cli` | ||
| env: loaderContext.mode, | ||
| options: postcssOptions || {} | ||
| }; | ||
@@ -129,3 +132,3 @@ result.config = result.config(api); | ||
| return plugins => { | ||
| if (typeof plugins === 'undefined') { | ||
| if (typeof plugins === "undefined") { | ||
| return listOfPlugins; | ||
@@ -139,5 +142,5 @@ } | ||
| listOfPlugins.set(name, options); | ||
| } else if (plugin && typeof plugin === 'function') { | ||
| } else if (plugin && typeof plugin === "function") { | ||
| listOfPlugins.set(plugin); | ||
| } else if (plugin && Object.keys(plugin).length === 1 && (typeof plugin[Object.keys(plugin)[0]] === 'object' || typeof plugin[Object.keys(plugin)[0]] === 'boolean') && plugin[Object.keys(plugin)[0]] !== null) { | ||
| } else if (plugin && Object.keys(plugin).length === 1 && (typeof plugin[Object.keys(plugin)[0]] === "object" || typeof plugin[Object.keys(plugin)[0]] === "boolean") && plugin[Object.keys(plugin)[0]] !== null) { | ||
| const [name] = Object.keys(plugin); | ||
@@ -175,3 +178,3 @@ const options = plugin[name]; | ||
| if (typeof normalizedPostcssOptions === 'function') { | ||
| if (typeof normalizedPostcssOptions === "function") { | ||
| normalizedPostcssOptions = normalizedPostcssOptions(loaderContext); | ||
@@ -193,3 +196,3 @@ } | ||
| if (typeof plugin === 'string') { | ||
| if (typeof plugin === "string") { | ||
| return loadPlugin(plugin, options, file); | ||
@@ -237,3 +240,3 @@ } | ||
| if (typeof processOptions.parser === 'string') { | ||
| if (typeof processOptions.parser === "string") { | ||
| try { | ||
@@ -247,3 +250,3 @@ // eslint-disable-next-line import/no-dynamic-require, global-require | ||
| if (typeof processOptions.stringifier === 'string') { | ||
| if (typeof processOptions.stringifier === "string") { | ||
| try { | ||
@@ -257,3 +260,3 @@ // eslint-disable-next-line import/no-dynamic-require, global-require | ||
| if (typeof processOptions.syntax === 'string') { | ||
| if (typeof processOptions.syntax === "string") { | ||
| try { | ||
@@ -284,15 +287,15 @@ // eslint-disable-next-line import/no-dynamic-require, global-require | ||
| function getURLType(source) { | ||
| if (source[0] === '/') { | ||
| if (source[1] === '/') { | ||
| return 'scheme-relative'; | ||
| if (source[0] === "/") { | ||
| if (source[1] === "/") { | ||
| return "scheme-relative"; | ||
| } | ||
| return 'path-absolute'; | ||
| return "path-absolute"; | ||
| } | ||
| if (IS_NATIVE_WIN32_PATH.test(source)) { | ||
| return 'path-absolute'; | ||
| return "path-absolute"; | ||
| } | ||
| return ABSOLUTE_SCHEME.test(source) ? 'absolute' : 'path-relative'; | ||
| return ABSOLUTE_SCHEME.test(source) ? "absolute" : "path-relative"; | ||
| } | ||
@@ -304,3 +307,3 @@ | ||
| if (typeof newMap === 'string') { | ||
| if (typeof newMap === "string") { | ||
| newMap = JSON.parse(newMap); | ||
@@ -319,4 +322,4 @@ } | ||
| if (sourceType === 'path-relative' || sourceType === 'path-absolute') { | ||
| const absoluteSource = sourceType === 'path-relative' && sourceRoot ? _path.default.resolve(sourceRoot, _path.default.normalize(source)) : _path.default.normalize(source); | ||
| if (sourceType === "path-relative" || sourceType === "path-absolute") { | ||
| const absoluteSource = sourceType === "path-relative" && sourceRoot ? _path.default.resolve(sourceRoot, _path.default.normalize(source)) : _path.default.normalize(source); | ||
| return _path.default.relative(resourceContext, absoluteSource); | ||
@@ -339,6 +342,6 @@ } | ||
| newMap.sourceRoot = ''; // eslint-disable-next-line no-param-reassign | ||
| newMap.sourceRoot = ""; // eslint-disable-next-line no-param-reassign | ||
| newMap.sources = newMap.sources.map(source => { | ||
| if (source.indexOf('<') === 0) { | ||
| if (source.indexOf("<") === 0) { | ||
| return source; | ||
@@ -349,3 +352,3 @@ } | ||
| if (sourceType === 'path-relative') { | ||
| if (sourceType === "path-relative") { | ||
| return _path.default.resolve(resourceContext, source); | ||
@@ -352,0 +355,0 @@ } |
@@ -22,10 +22,10 @@ "use strict"; | ||
| } = warning; | ||
| this.name = 'Warning'; | ||
| this.name = "Warning"; | ||
| this.message = `${this.name}\n\n`; | ||
| if (typeof line !== 'undefined') { | ||
| if (typeof line !== "undefined") { | ||
| this.message += `(${line}:${column}) `; | ||
| } | ||
| this.message += plugin ? `${plugin}: ` : ''; | ||
| this.message += plugin ? `${plugin}: ` : ""; | ||
| this.message += `${text}`; | ||
@@ -32,0 +32,0 @@ this.stack = false; |
| { | ||
| "name": "postcss-loader", | ||
| "version": "4.0.4", | ||
| "version": "4.1.0", | ||
| "description": "PostCSS loader for webpack", | ||
@@ -52,5 +52,5 @@ "license": "MIT", | ||
| "devDependencies": { | ||
| "@babel/cli": "^7.11.6", | ||
| "@babel/core": "^7.11.6", | ||
| "@babel/preset-env": "^7.11.5", | ||
| "@babel/cli": "^7.12.1", | ||
| "@babel/core": "^7.12.3", | ||
| "@babel/preset-env": "^7.12.1", | ||
| "@commitlint/cli": "^11.0.0", | ||
@@ -60,3 +60,3 @@ "@commitlint/config-conventional": "^11.0.0", | ||
| "@webpack-contrib/eslint-config-webpack": "^3.0.0", | ||
| "babel-jest": "^26.5.2", | ||
| "babel-jest": "^26.6.3", | ||
| "cross-env": "^7.0.2", | ||
@@ -66,26 +66,26 @@ "cssnano": "^4.1.10", | ||
| "del-cli": "^3.0.1", | ||
| "eslint": "^7.10.0", | ||
| "eslint-config-prettier": "^6.12.0", | ||
| "eslint": "^7.13.0", | ||
| "eslint-config-prettier": "^6.15.0", | ||
| "eslint-plugin-import": "^2.22.1", | ||
| "husky": "^4.3.0", | ||
| "jest": "^26.5.2", | ||
| "jest": "^26.6.3", | ||
| "less": "^3.12.2", | ||
| "less-loader": "^7.0.2", | ||
| "lint-staged": "^10.4.0", | ||
| "less-loader": "^7.1.0", | ||
| "lint-staged": "^10.5.1", | ||
| "memfs": "^3.2.0", | ||
| "midas": "^2.0.3", | ||
| "npm-run-all": "^4.1.5", | ||
| "postcss": "^8.1.1", | ||
| "postcss": "^8.1.7", | ||
| "postcss-dark-theme-class": "^0.5.1", | ||
| "postcss-import": "^12.0.1", | ||
| "postcss-js": "^3.0.1", | ||
| "postcss-import": "^13.0.0", | ||
| "postcss-js": "^3.0.3", | ||
| "postcss-nested": "^5.0.1", | ||
| "postcss-short": "^5.0.0", | ||
| "prettier": "^2.1.2", | ||
| "sass": "^1.27.0", | ||
| "sass-loader": "^10.0.3", | ||
| "sass": "^1.29.0", | ||
| "sass-loader": "^10.1.0", | ||
| "standard-version": "^9.0.0", | ||
| "strip-ansi": "^6.0.0", | ||
| "sugarss": "^3.0.1", | ||
| "webpack": "^4.44.2" | ||
| "sugarss": "^3.0.3", | ||
| "webpack": "^5.6.0" | ||
| }, | ||
@@ -92,0 +92,0 @@ "keywords": [ |
234
README.md
@@ -55,3 +55,3 @@ <div align="center"> | ||
| ```js | ||
| import css from 'file.css'; | ||
| import css from "file.css"; | ||
| ``` | ||
@@ -68,6 +68,6 @@ | ||
| use: [ | ||
| 'style-loader', | ||
| 'css-loader', | ||
| "style-loader", | ||
| "css-loader", | ||
| { | ||
| loader: 'postcss-loader', | ||
| loader: "postcss-loader", | ||
| options: { | ||
@@ -77,3 +77,3 @@ postcssOptions: { | ||
| [ | ||
| 'postcss-preset-env', | ||
| "postcss-preset-env", | ||
| { | ||
@@ -102,3 +102,3 @@ // Options | ||
| [ | ||
| 'postcss-preset-env', | ||
| "postcss-preset-env", | ||
| { | ||
@@ -122,3 +122,3 @@ // Options | ||
| test: /\.css$/i, | ||
| use: ['style-loader', 'css-loader', 'postcss-loader'], | ||
| use: ["style-loader", "css-loader", "postcss-loader"], | ||
| }, | ||
@@ -156,11 +156,11 @@ ], | ||
| use: [ | ||
| 'style-loader', | ||
| "style-loader", | ||
| { | ||
| loader: 'css-loader', | ||
| loader: "css-loader", | ||
| }, | ||
| { | ||
| loader: 'postcss-loader', | ||
| loader: "postcss-loader", | ||
| options: { | ||
| postcssOptions: { | ||
| parser: 'postcss-js', | ||
| parser: "postcss-js", | ||
| }, | ||
@@ -197,3 +197,3 @@ execute: true, | ||
| ```js | ||
| const myOtherPostcssPlugin = require('postcss-my-plugin'); | ||
| const myOtherPostcssPlugin = require("postcss-my-plugin"); | ||
@@ -205,12 +205,12 @@ module.exports = { | ||
| test: /\.sss$/i, | ||
| loader: 'postcss-loader', | ||
| loader: "postcss-loader", | ||
| options: { | ||
| postcssOptions: { | ||
| plugins: [ | ||
| 'postcss-import', | ||
| ['postcss-short', { prefix: 'x' }], | ||
| require.resolve('my-postcss-plugin'), | ||
| "postcss-import", | ||
| ["postcss-short", { prefix: "x" }], | ||
| require.resolve("my-postcss-plugin"), | ||
| myOtherPostcssPlugin({ myOption: true }), | ||
| // Deprecated and will be removed in the next major release | ||
| { 'postcss-nested': { preserveEmpty: true } }, | ||
| { "postcss-nested": { preserveEmpty: true } }, | ||
| ], | ||
@@ -233,8 +233,8 @@ }, | ||
| test: /\.sss$/i, | ||
| loader: 'postcss-loader', | ||
| loader: "postcss-loader", | ||
| options: { | ||
| postcssOptions: { | ||
| plugins: { | ||
| 'postcss-import': {}, | ||
| 'postcss-short': { prefix: 'x' }, | ||
| "postcss-import": {}, | ||
| "postcss-short": { prefix: "x" }, | ||
| }, | ||
@@ -259,9 +259,9 @@ }, | ||
| test: /\.sss$/i, | ||
| loader: 'postcss-loader', | ||
| loader: "postcss-loader", | ||
| options: { | ||
| postcssOptions: { | ||
| // Can be `String` | ||
| syntax: 'sugarss', | ||
| syntax: "sugarss", | ||
| // Can be `Object` | ||
| syntax: require('sugarss'), | ||
| syntax: require("sugarss"), | ||
| }, | ||
@@ -285,11 +285,11 @@ }, | ||
| test: /\.sss$/i, | ||
| loader: 'postcss-loader', | ||
| loader: "postcss-loader", | ||
| options: { | ||
| postcssOptions: { | ||
| // Can be `String` | ||
| parser: 'sugarss', | ||
| parser: "sugarss", | ||
| // Can be `Object` | ||
| parser: require('sugarss'), | ||
| parser: require("sugarss"), | ||
| // Can be `Function` | ||
| parser: require('sugarss').parse, | ||
| parser: require("sugarss").parse, | ||
| }, | ||
@@ -308,3 +308,3 @@ }, | ||
| ```js | ||
| const Midas = require('midas'); | ||
| const Midas = require("midas"); | ||
| const midas = new Midas(); | ||
@@ -317,9 +317,9 @@ | ||
| test: /\.sss$/i, | ||
| loader: 'postcss-loader', | ||
| loader: "postcss-loader", | ||
| options: { | ||
| postcssOptions: { | ||
| // Can be `String` | ||
| stringifier: 'sugarss', | ||
| stringifier: "sugarss", | ||
| // Can be `Object` | ||
| stringifier: require('sugarss'), | ||
| stringifier: require("sugarss"), | ||
| // Can be `Function` | ||
@@ -345,3 +345,3 @@ stringifier: midas.stringifier, | ||
| test: /\.(css|sss)$/i, | ||
| loader: 'postcss-loader', | ||
| loader: "postcss-loader", | ||
| options: { | ||
@@ -351,6 +351,6 @@ postcssOptions: (loaderContext) => { | ||
| return { | ||
| parser: 'sugarss', | ||
| parser: "sugarss", | ||
| plugins: [ | ||
| ['postcss-short', { prefix: 'x' }], | ||
| 'postcss-preset-env', | ||
| ["postcss-short", { prefix: "x" }], | ||
| "postcss-preset-env", | ||
| ], | ||
@@ -362,4 +362,4 @@ }; | ||
| plugins: [ | ||
| ['postcss-short', { prefix: 'x' }], | ||
| 'postcss-preset-env', | ||
| ["postcss-short", { prefix: "x" }], | ||
| "postcss-preset-env", | ||
| ], | ||
@@ -404,4 +404,4 @@ }; | ||
| // Plugins for PostCSS | ||
| ['postcss-short', { prefix: 'x' }], | ||
| 'postcss-preset-env', | ||
| ["postcss-short", { prefix: "x" }], | ||
| "postcss-preset-env", | ||
| ], | ||
@@ -420,2 +420,4 @@ }; | ||
| // `api.webpackLoaderContext` - loader context for complex use cases | ||
| // `api.env` - alias `api.mode` for compatibility with `postcss-cli` | ||
| // `api.options` - the `postcssOptions` options | ||
@@ -425,7 +427,7 @@ if (/\.sss$/.test(api.file)) { | ||
| // You can specify any options from http://api.postcss.org/global.html#processOptions here | ||
| parser: 'sugarss', | ||
| parser: "sugarss", | ||
| plugins: [ | ||
| // Plugins for PostCSS | ||
| ['postcss-short', { prefix: 'x' }], | ||
| 'postcss-preset-env', | ||
| ["postcss-short", { prefix: "x" }], | ||
| "postcss-preset-env", | ||
| ], | ||
@@ -439,4 +441,4 @@ }; | ||
| // Plugins for PostCSS | ||
| ['postcss-short', { prefix: 'x' }], | ||
| 'postcss-preset-env', | ||
| ["postcss-short", { prefix: "x" }], | ||
| "postcss-preset-env", | ||
| ], | ||
@@ -455,4 +457,4 @@ }; | ||
| // Plugins for PostCSS | ||
| 'postcss-short': { prefix: 'x' }, | ||
| 'postcss-preset-env': {}, | ||
| "postcss-short": { prefix: "x" }, | ||
| "postcss-preset-env": {}, | ||
| }, | ||
@@ -499,5 +501,5 @@ }; | ||
| use: [ | ||
| 'style-loader', | ||
| "style-loader", | ||
| { | ||
| loader: 'css-loader', | ||
| loader: "css-loader", | ||
| options: { | ||
@@ -507,3 +509,3 @@ importLoaders: 1, | ||
| }, | ||
| 'postcss-loader', | ||
| "postcss-loader", | ||
| ], | ||
@@ -528,3 +530,3 @@ }, | ||
| test: /\.css$/i, | ||
| loader: 'postcss-loader', | ||
| loader: "postcss-loader", | ||
| options: { | ||
@@ -548,3 +550,3 @@ postcssOptions: { | ||
| ```js | ||
| const path = require('path'); | ||
| const path = require("path"); | ||
@@ -556,6 +558,6 @@ module.exports = { | ||
| test: /\.css$/i, | ||
| loader: 'postcss-loader', | ||
| loader: "postcss-loader", | ||
| options: { | ||
| postcssOptions: { | ||
| config: path.resolve(__dirname, 'custom.config.js'), | ||
| config: path.resolve(__dirname, "custom.config.js"), | ||
| }, | ||
@@ -586,6 +588,6 @@ }, | ||
| use: [ | ||
| { loader: 'style-loader' }, | ||
| { loader: 'css-loader', options: { sourceMap: true } }, | ||
| { loader: 'postcss-loader', options: { sourceMap: true } }, | ||
| { loader: 'sass-loader', options: { sourceMap: true } }, | ||
| { loader: "style-loader" }, | ||
| { loader: "css-loader", options: { sourceMap: true } }, | ||
| { loader: "postcss-loader", options: { sourceMap: true } }, | ||
| { loader: "sass-loader", options: { sourceMap: true } }, | ||
| ], | ||
@@ -604,3 +606,3 @@ }, | ||
| module.exports = { | ||
| devtool: 'source-map', | ||
| devtool: "source-map", | ||
| module: { | ||
@@ -611,6 +613,6 @@ rules: [ | ||
| use: [ | ||
| { loader: 'style-loader' }, | ||
| { loader: 'css-loader' }, | ||
| { loader: 'postcss-loader' }, | ||
| { loader: 'sass-loader' }, | ||
| { loader: "style-loader" }, | ||
| { loader: "css-loader" }, | ||
| { loader: "postcss-loader" }, | ||
| { loader: "sass-loader" }, | ||
| ], | ||
@@ -644,12 +646,12 @@ }, | ||
| use: [ | ||
| 'style-loader', | ||
| "style-loader", | ||
| { | ||
| loader: 'css-loader', | ||
| loader: "css-loader", | ||
| options: { importLoaders: 1 }, | ||
| }, | ||
| { | ||
| loader: 'postcss-loader', | ||
| loader: "postcss-loader", | ||
| options: { | ||
| postcssOptions: { | ||
| parser: 'sugarss', | ||
| parser: "sugarss", | ||
| }, | ||
@@ -684,9 +686,9 @@ }, | ||
| use: [ | ||
| 'style-loader', | ||
| "style-loader", | ||
| { | ||
| loader: 'css-loader', | ||
| loader: "css-loader", | ||
| options: { importLoaders: 1 }, | ||
| }, | ||
| { | ||
| loader: 'postcss-loader', | ||
| loader: "postcss-loader", | ||
| options: { | ||
@@ -696,3 +698,3 @@ postcssOptions: { | ||
| [ | ||
| 'autoprefixer', | ||
| "autoprefixer", | ||
| { | ||
@@ -732,9 +734,9 @@ // Options | ||
| use: [ | ||
| 'style-loader', | ||
| "style-loader", | ||
| { | ||
| loader: 'css-loader', | ||
| loader: "css-loader", | ||
| options: { importLoaders: 1 }, | ||
| }, | ||
| { | ||
| loader: 'postcss-loader', | ||
| loader: "postcss-loader", | ||
| options: { | ||
@@ -744,3 +746,3 @@ postcssOptions: { | ||
| [ | ||
| 'postcss-preset-env', | ||
| "postcss-preset-env", | ||
| { | ||
@@ -777,5 +779,5 @@ // Options | ||
| use: [ | ||
| 'style-loader', | ||
| "style-loader", | ||
| { | ||
| loader: 'css-loader', | ||
| loader: "css-loader", | ||
| options: { | ||
@@ -786,3 +788,3 @@ modules: true, | ||
| }, | ||
| 'postcss-loader', | ||
| "postcss-loader", | ||
| ], | ||
@@ -814,5 +816,5 @@ }, | ||
| use: [ | ||
| 'style-loader', | ||
| "style-loader", | ||
| { | ||
| loader: 'css-loader', | ||
| loader: "css-loader", | ||
| options: { | ||
@@ -823,6 +825,6 @@ importLoaders: 2, | ||
| { | ||
| loader: 'postcss-loader', | ||
| loader: "postcss-loader", | ||
| options: { | ||
| postcssOptions: { | ||
| parser: 'postcss-js', | ||
| parser: "postcss-js", | ||
| }, | ||
@@ -832,3 +834,3 @@ execute: true, | ||
| }, | ||
| 'babel-loader', | ||
| "babel-loader", | ||
| ], | ||
@@ -844,10 +846,10 @@ }, | ||
| ```js | ||
| import colors from './styles/colors'; | ||
| import colors from "./styles/colors"; | ||
| export default { | ||
| '.menu': { | ||
| ".menu": { | ||
| color: colors.main, | ||
| height: 25, | ||
| '&_link': { | ||
| color: 'white', | ||
| "&_link": { | ||
| color: "white", | ||
| }, | ||
@@ -870,8 +872,8 @@ }, | ||
| ```js | ||
| const isProductionMode = process.env.NODE_ENV === 'production'; | ||
| const isProductionMode = process.env.NODE_ENV === "production"; | ||
| const MiniCssExtractPlugin = require('mini-css-extract-plugin'); | ||
| const MiniCssExtractPlugin = require("mini-css-extract-plugin"); | ||
| module.exports = { | ||
| mode: isProductionMode ? 'production' : 'development', | ||
| mode: isProductionMode ? "production" : "development", | ||
| module: { | ||
@@ -882,5 +884,5 @@ rules: [ | ||
| use: [ | ||
| isProductionMode ? MiniCssExtractPlugin.loader : 'style-loader', | ||
| 'css-loader', | ||
| 'postcss-loader', | ||
| isProductionMode ? MiniCssExtractPlugin.loader : "style-loader", | ||
| "css-loader", | ||
| "postcss-loader", | ||
| ], | ||
@@ -892,3 +894,3 @@ }, | ||
| new MiniCssExtractPlugin({ | ||
| filename: isProductionMode ? '[name].[contenthash].css' : '[name].css', | ||
| filename: isProductionMode ? "[name].[contenthash].css" : "[name].css", | ||
| }), | ||
@@ -916,9 +918,9 @@ ], | ||
| result.messages.push({ | ||
| type: 'asset', | ||
| file: 'sprite.svg', | ||
| content: '<svg>...</svg>', | ||
| type: "asset", | ||
| file: "sprite.svg", | ||
| content: "<svg>...</svg>", | ||
| }); | ||
| }; | ||
| const postcssPlugin = postcss.plugin('postcss-assets', customPlugin); | ||
| const postcssPlugin = postcss.plugin("postcss-assets", customPlugin); | ||
@@ -931,6 +933,6 @@ module.exports = { | ||
| use: [ | ||
| 'style-loader', | ||
| 'css-loader', | ||
| "style-loader", | ||
| "css-loader", | ||
| { | ||
| loader: 'postcss-loader', | ||
| loader: "postcss-loader", | ||
| options: { | ||
@@ -965,12 +967,12 @@ postcssOptions: { | ||
| ```js | ||
| const path = require('path'); | ||
| const path = require("path"); | ||
| const customPlugin = () => (css, result) => { | ||
| result.messages.push({ | ||
| type: 'dependency', | ||
| file: path.resolve(__dirname, 'path', 'to', 'file'), | ||
| type: "dependency", | ||
| file: path.resolve(__dirname, "path", "to", "file"), | ||
| }); | ||
| }; | ||
| const postcssPlugin = postcss.plugin('postcss-assets', customPlugin); | ||
| const postcssPlugin = postcss.plugin("postcss-assets", customPlugin); | ||
@@ -983,6 +985,6 @@ module.exports = { | ||
| use: [ | ||
| 'style-loader', | ||
| 'css-loader', | ||
| "style-loader", | ||
| "css-loader", | ||
| { | ||
| loader: 'postcss-loader', | ||
| loader: "postcss-loader", | ||
| options: { | ||
@@ -1006,3 +1008,3 @@ postcssOptions: { | ||
| ```js | ||
| const path = require('path'); | ||
| const path = require("path"); | ||
@@ -1015,9 +1017,9 @@ module.exports = { | ||
| use: [ | ||
| 'style-loader', | ||
| 'css-loader', | ||
| "style-loader", | ||
| "css-loader", | ||
| { | ||
| loader: 'postcss-loader', | ||
| loader: "postcss-loader", | ||
| options: { | ||
| postcssOptions: { | ||
| config: path.resolve(__dirname, 'path/to/postcss.config.js'), | ||
| config: path.resolve(__dirname, "path/to/postcss.config.js"), | ||
| }, | ||
@@ -1038,3 +1040,3 @@ }, | ||
| plugins: [ | ||
| require('path/to/customPlugin')({ | ||
| require("path/to/customPlugin")({ | ||
| loaderContext: api.webpackLoaderContext, | ||
@@ -1049,11 +1051,11 @@ }), | ||
| ```js | ||
| const path = require('path'); | ||
| const path = require("path"); | ||
| const customPlugin = (loaderContext) => (css, result) => { | ||
| loaderContext.webpack.addDependency( | ||
| path.resolve(__dirname, 'path', 'to', 'file') | ||
| path.resolve(__dirname, "path", "to", "file") | ||
| ); | ||
| }; | ||
| module.exports = postcss.plugin('postcss-assets', customPlugin); | ||
| module.exports = postcss.plugin("postcss-assets", customPlugin); | ||
| ``` | ||
@@ -1060,0 +1062,0 @@ |
No alert changes
Improved metrics
- Total package byte prevSize
57585
1.5%- Lines of code
483
0.63%- Number of lines in readme file
1038
0.19%No dependency changes