Socket
Socket
Sign inDemoInstall

postcss-loader

Package Overview
Dependencies
Maintainers
3
Versions
86
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

postcss-loader - npm Package Compare versions

Comparing version 4.0.4 to 4.1.0

7

CHANGELOG.md

@@ -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 @@

2

dist/cjs.js
"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": [

@@ -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 @@

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc