@stylable/core - npm Package Compare versions

Comparing version 3.10.1 to 3.11.0

cjs/diagnostics.d.ts

@@ -1,3 +0,6 @@
-import postcss from 'postcss';
+import * as postcss from 'postcss';
 export declare type DiagnosticType = 'error' | 'warning';
+export interface DiagnosticOptions {
+    word?: string;
+}
 export interface Diagnostic {
@@ -7,3 +10,3 @@ type: DiagnosticType;
     message: string;
-    options: postcss.NodeErrorOptions;
+    options: DiagnosticOptions;
 }
@@ -13,6 +16,6 @@ export declare class Diagnostics {
     constructor(reports?: Diagnostic[]);
-    add(type: DiagnosticType, node: postcss.Node, message: string, options?: postcss.NodeErrorOptions): void;
-    error(node: postcss.Node, message: string, options?: postcss.NodeErrorOptions): void;
-    warn(node: postcss.Node, message: string, options?: postcss.NodeErrorOptions): void;
+    add(type: DiagnosticType, node: postcss.Node, message: string, options?: DiagnosticOptions): void;
+    error(node: postcss.Node, message: string, options?: DiagnosticOptions): void;
+    warn(node: postcss.Node, message: string, options?: DiagnosticOptions): void;
 }
 //# sourceMappingURL=diagnostics.d.ts.map

cjs/functions.d.ts

@@ -1,2 +0,2 @@
-import postcss from 'postcss';
+import * as postcss from 'postcss';
 import { Diagnostics } from './diagnostics';
@@ -3,0 +3,0 @@ import { StylableMeta } from './stylable-processor';

cjs/functions.js

@@ -97,2 +97,8 @@ "use strict";
                                 }
+                                else if (resolvedVar._kind === 'js' &&
+                                    typeof resolvedVar.symbol === 'string') {
+                                    parsedNode.resolvedValue = valueHook
+                                        ? valueHook(resolvedVar.symbol, varName, false, passedThrough)
+                                        : resolvedVar.symbol;
+                                }
                                 else if (resolvedVar._kind === 'js' && diagnostics && node) {
@@ -218,3 +224,3 @@ // ToDo: provide actual exported id (default/named as x)
     // TODO: handle calc (parse internals but maintain expression)
-    // TODO: check this thing. native function that accent our function dose not work
+    // TODO: check this thing. native function that accent our function does not work
     // e.g: calc(getVarName())
@@ -221,0 +227,0 @@ }

cjs/parser.d.ts

@@ -1,5 +0,5 @@
-import postcss from 'postcss';
+import { ProcessOptions, Root } from 'postcss';
 import { CSSObject } from './types';
-export declare function cssObjectToAst(cssObject: CSSObject, sourceFile?: string): postcss.LazyResult;
-export declare function safeParse(css: string, options?: postcss.ProcessOptions): postcss.Root;
+export declare function cssObjectToAst(cssObject: CSSObject, sourceFile?: string): import("postcss/lib/lazy-result").default;
+export declare function safeParse(css: string, options?: ProcessOptions): Root;
 //# sourceMappingURL=parser.d.ts.map

cjs/pseudo-states.d.ts

@@ -1,2 +0,2 @@
-import postcss from 'postcss';
+import * as postcss from 'postcss';
 import { Diagnostics } from './diagnostics';
@@ -3,0 +3,0 @@ import { SelectorAstNode } from './selector-utils';

cjs/selector-utils.d.ts

@@ -1,2 +0,2 @@
-import postcss from 'postcss';
+import * as postcss from 'postcss';
 import { ClassSymbol, ElementSymbol } from './stylable-meta';
@@ -3,0 +3,0 @@ import { CSSResolve } from './stylable-resolver';

cjs/selector-utils.js

 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
@@ -7,3 +26,3 @@ return (mod && mod.__esModule) ? mod : { "default": mod };
 exports.createWarningRule = exports.isCompRoot = exports.isChildOfAtRule = exports.fixChunkOrdering = exports.matchSelectorTarget = exports.filterChunkNodesByType = exports.separateChunks = exports.getOriginDefinition = exports.separateChunks2 = exports.mergeChunks = exports.isNodeMatch = exports.matchAtMedia = exports.matchAtKeyframes = exports.isImport = exports.isSimpleSelector = exports.createSimpleSelectorChecker = exports.isRootValid = exports.isGlobal = exports.createChecker = exports.traverseNode = exports.stringifySelector = exports.parseSelector = void 0;
-const postcss_1 = __importDefault(require("postcss"));
+const postcss = __importStar(require("postcss"));
 const css_selector_tokenizer_1 = __importDefault(require("css-selector-tokenizer"));
@@ -292,3 +311,5 @@ const stylable_value_parsers_1 = require("./stylable-value-parsers");
 function isChildOfAtRule(rule, atRuleName) {
-    return !!rule.parent && rule.parent.type === 'atrule' && rule.parent.name === atRuleName;
+    return (!!rule.parent &&
+        rule.parent.type === 'atrule' &&
+        rule.parent.name === atRuleName);
 }
@@ -302,22 +323,22 @@ exports.isChildOfAtRule = isChildOfAtRule;
     const message = `"class extending component '.${extendingNode} => ${scopedExtendingNode}' in stylesheet '${extendingFile}' was set on a node that does not extend '.${extendedNode} => ${scopedExtendedNode}' from stylesheet '${extendedFile}'" !important`;
-    return postcss_1.default.rule({
+    return postcss.rule({
         selector: `.${useScoped ? scopedExtendingNode : extendingNode}:not(.${useScoped ? scopedExtendedNode : extendedNode})::before`,
         nodes: [
-            postcss_1.default.decl({
+            postcss.decl({
                 prop: 'content',
                 value: message,
             }),
-            postcss_1.default.decl({
+            postcss.decl({
                 prop: 'display',
                 value: `block !important`,
             }),
-            postcss_1.default.decl({
+            postcss.decl({
                 prop: 'font-family',
                 value: `monospace !important`,
             }),
-            postcss_1.default.decl({
+            postcss.decl({
                 prop: 'background-color',
                 value: `red !important`,
             }),
-            postcss_1.default.decl({
+            postcss.decl({
                 prop: 'color',
@@ -324,0 +345,0 @@ value: `white !important`,

cjs/stylable-assets.d.ts

@@ -1,2 +0,2 @@
-import postcss from 'postcss';
+import * as postcss from 'postcss';
 import { ParsedValue } from './types';
@@ -3,0 +3,0 @@ export declare type OnUrlCallback = (node: ParsedValue) => void;

cjs/stylable-meta.d.ts

@@ -1,2 +0,2 @@
-import postcss from 'postcss';
+import * as postcss from 'postcss';
 import { Diagnostics } from './diagnostics';
@@ -3,0 +3,0 @@ import { SelectorAstNode, SelectorChunk2 } from './selector-utils';

cjs/stylable-mixins.js

 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
 };
@@ -8,3 +24,3 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const path_1 = require("path");
-const postcss_1 = __importDefault(require("postcss"));
+const postcss = __importStar(require("postcss"));
 const functions_1 = require("./functions");
@@ -37,3 +53,3 @@ const parser_1 = require("./parser");
     rule.mixins.length = 0;
-    rule.walkDecls(stylable_value_parsers_1.valueMapping.mixin, (node) => node.remove());
+    rule.walkDecls(stylable_value_parsers_1.mixinDeclRegExp, (node) => node.remove());
 }
@@ -111,2 +127,5 @@ exports.appendMixins = appendMixins;
     const namedArgs = mix.mixin.options;
+    if (mix.mixin.partial) {
+        filterPartialMixinDecl(mixinRoot, Object.keys(namedArgs));
+    }
     const resolvedArgs = functions_1.resolveArgumentsValue(namedArgs, transformer, meta, transformer.diagnostics, decl, variableOverride, path, cssVarsMapping);
@@ -122,6 +141,12 @@ const mixinMeta = isRootMixin
 function handleImportedCSSMixin(transformer, mix, rule, meta, path, variableOverride, cssVarsMapping) {
+    const isPartial = mix.mixin.partial;
+    const namedArgs = mix.mixin.options;
+    const overrideKeys = Object.keys(namedArgs);
+    if (isPartial && overrideKeys.length === 0) {
+        return;
+    }
     let resolvedClass = transformer.resolver.resolve(mix.ref);
     const roots = [];
     while (resolvedClass && resolvedClass.symbol && resolvedClass._kind === 'css') {
-        const mixinDecl = getMixinDeclaration(rule) || postcss_1.default.decl();
+        const mixinDecl = getMixinDeclaration(rule) || postcss.decl();
         roots.push(createMixinRootFromCSSResolve(transformer, mix, meta, resolvedClass, path, mixinDecl, variableOverride, cssVarsMapping));
@@ -140,3 +165,3 @@ if ((resolvedClass.symbol._kind === 'class' || resolvedClass.symbol._kind === 'element') &&
     else if (roots.length > 1) {
-        const mixinRoot = postcss_1.default.root();
+        const mixinRoot = postcss.root();
         roots.forEach((root) => mixinRoot.prepend(...root.nodes));
@@ -153,7 +178,15 @@ stylable_utils_1.mergeRules(mixinRoot, rule);
 function handleLocalClassMixin(mix, transformer, meta, variableOverride, cssVarsMapping, path, rule) {
+    const isPartial = mix.mixin.partial;
+    const namedArgs = mix.mixin.options;
+    const overrideKeys = Object.keys(namedArgs);
+    if (isPartial && overrideKeys.length === 0) {
+        return;
+    }
     const isRootMixin = mix.ref.name === meta.root;
-    const namedArgs = mix.mixin.options;
-    const mixinDecl = getMixinDeclaration(rule) || postcss_1.default.decl();
+    const mixinDecl = getMixinDeclaration(rule) || postcss.decl();
     const resolvedArgs = functions_1.resolveArgumentsValue(namedArgs, transformer, meta, transformer.diagnostics, mixinDecl, variableOverride, path, cssVarsMapping);
     const mixinRoot = stylable_utils_1.createSubsetAst(meta.ast, '.' + mix.ref.name, undefined, isRootMixin);
+    if (isPartial) {
+        filterPartialMixinDecl(mixinRoot, overrideKeys);
+    }
     transformer.transformAst(mixinRoot, isRootMixin ? meta : createInheritedMeta({ meta, symbol: mix.ref, _kind: 'css' }), undefined, resolvedArgs, path.concat(mix.mixin.type + ' from ' + meta.source), true);
@@ -173,5 +206,19 @@ stylable_utils_1.mergeRules(mixinRoot, rule);
         rule.nodes.find((node) => {
-            return node.type === 'decl' && node.prop === stylable_value_parsers_1.valueMapping.mixin;
+            return (node.type === 'decl' &&
+                (node.prop === stylable_value_parsers_1.valueMapping.mixin || node.prop === stylable_value_parsers_1.valueMapping.partialMixin));
         }));
 }
+function filterPartialMixinDecl(mixinRoot, overrideKeys) {
+    const regexp = new RegExp(`value\\((\\s*${overrideKeys.join('\\s*)|(\\s*')}\\s*)\\)`);
+    mixinRoot.walkDecls((decl) => {
+        var _a;
+        if (!decl.value.match(regexp)) {
+            const parent = decl.parent; // ref the parent before remove
+            decl.remove();
+            if (((_a = parent === null || parent === void 0 ? void 0 : parent.nodes) === null || _a === void 0 ? void 0 : _a.length) === 0) {
+                parent.remove();
+            }
+        }
+    });
+}
 //# sourceMappingURL=stylable-mixins.js.map

cjs/stylable-processor.d.ts

@@ -1,2 +0,2 @@
-import postcss from 'postcss';
+import * as postcss from 'postcss';
 import { Diagnostics } from './diagnostics';
@@ -20,4 +20,5 @@ import { SelectorAstNode } from './selector-utils';
     UNKNOWN_MIXIN(name: string): string;
-    OVERRIDE_MIXIN(): string;
+    OVERRIDE_MIXIN(mixinType: string): string;
     OVERRIDE_TYPED_RULE(key: string, name: string): string;
+    PARTIAL_MIXIN_MISSING_ARGUMENTS(type: string): string;
     FROM_PROP_MISSING_IN_IMPORT(): string;
@@ -24,0 +25,0 @@ INVALID_NAMESPACE_DEF(): string;

cjs/stylable-processor.js

@@ -9,2 +9,14 @@ "use strict";
 }));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __exportStar = (this && this.__exportStar) || function(m, exports) {
@@ -20,3 +32,3 @@ for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 const path_1 = __importDefault(require("path"));
-const postcss_1 = __importDefault(require("postcss"));
+const postcss = __importStar(require("postcss"));
 const postcss_value_parser_1 = __importDefault(require("postcss-value-parser"));
@@ -32,3 +44,2 @@ const diagnostics_1 = require("./diagnostics");
 const parseNamed = stylable_value_parsers_1.SBTypesParsers[stylable_value_parsers_1.valueMapping.named];
-const parseMixin = stylable_value_parsers_1.SBTypesParsers[stylable_value_parsers_1.valueMapping.mixin];
 const parseStates = stylable_value_parsers_1.SBTypesParsers[stylable_value_parsers_1.valueMapping.states];
@@ -77,4 +88,4 @@ const parseGlobal = stylable_value_parsers_1.SBTypesParsers[stylable_value_parsers_1.valueMapping.global];
     },
-    OVERRIDE_MIXIN() {
-        return `override mixin on same rule`;
+    OVERRIDE_MIXIN(mixinType) {
+        return `override ${mixinType} on same rule`;
     },
@@ -84,2 +95,5 @@ OVERRIDE_TYPED_RULE(key, name) {
     },
+    PARTIAL_MIXIN_MISSING_ARGUMENTS(type) {
+        return `"${stylable_value_parsers_1.valueMapping.partialMixin}" can only be used with override arguments provided, missing overrides on "${type}"`;
+    },
     FROM_PROP_MISSING_IN_IMPORT() {
@@ -155,3 +169,3 @@ return `"${stylable_value_parsers_1.valueMapping.from}" is missing in ${stylable_value_parsers_1.rootValueMapping.import} block`;
         this.meta.scopes.forEach((atRule) => {
-            const scopingRule = postcss_1.default.rule({ selector: atRule.params });
+            const scopingRule = postcss.rule({ selector: atRule.params });
             this.handleRule(scopingRule, true);
@@ -177,3 +191,3 @@ validateScopingSelector(atRule, scopingRule, this.diagnostics);
             if (this.meta.customSelectors[selector]) {
-                const rule = postcss_1.default.rule({ selector });
+                const rule = postcss.rule({ selector });
                 this.meta.ast.append(rule);
@@ -553,5 +567,5 @@ return rule;
         }
-        else if (decl.prop === stylable_value_parsers_1.valueMapping.mixin) {
+        else if (decl.prop === stylable_value_parsers_1.valueMapping.mixin || decl.prop === stylable_value_parsers_1.valueMapping.partialMixin) {
             const mixins = [];
-            parseMixin(decl, (type) => {
+            stylable_value_parsers_1.SBTypesParsers[decl.prop](decl, (type) => {
                 const mixinRefSymbol = this.meta.mappedSymbols[type];
@@ -568,2 +582,7 @@ if (mixinRefSymbol &&
                     (mixinRefSymbol._kind === 'import' || mixinRefSymbol._kind === 'class')) {
+                    if (mixin.partial && Object.keys(mixin.options).length === 0) {
+                        this.diagnostics.warn(decl, exports.processorWarnings.PARTIAL_MIXIN_MISSING_ARGUMENTS(mixin.type), {
+                            word: mixin.type,
+                        });
+                    }
                     const refedMixin = {
@@ -583,5 +602,24 @@ mixin,
             if (rule.mixins) {
-                this.diagnostics.warn(decl, exports.processorWarnings.OVERRIDE_MIXIN());
+                const partials = rule.mixins.filter((r) => r.mixin.partial);
+                const nonPartials = rule.mixins.filter((r) => !r.mixin.partial);
+                const isInPartial = decl.prop === stylable_value_parsers_1.valueMapping.partialMixin;
+                if ((partials.length && decl.prop === stylable_value_parsers_1.valueMapping.partialMixin) ||
+                    (nonPartials.length && decl.prop === stylable_value_parsers_1.valueMapping.mixin)) {
+                    this.diagnostics.warn(decl, exports.processorWarnings.OVERRIDE_MIXIN(decl.prop));
+                }
+                if (partials.length && nonPartials.length) {
+                    rule.mixins = isInPartial
+                        ? nonPartials.concat(mixins)
+                        : partials.concat(mixins);
+                }
+                else if (partials.length) {
+                    rule.mixins = isInPartial ? mixins : partials.concat(mixins);
+                }
+                else if (nonPartials.length) {
+                    rule.mixins = isInPartial ? nonPartials.concat(mixins) : mixins;
+                }
             }
-            rule.mixins = mixins;
+            else if (mixins.length) {
+                rule.mixins = mixins;
+            }
         }
@@ -588,0 +626,0 @@ else if (decl.prop === stylable_value_parsers_1.valueMapping.global) {

cjs/stylable-transformer.d.ts

@@ -1,2 +0,2 @@
-import postcss from 'postcss';
+import * as postcss from 'postcss';
 import { FileProcessor } from './cached-process-file';
@@ -3,0 +3,0 @@ import { Diagnostics } from './diagnostics';

cjs/stylable-transformer.js

 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
@@ -8,3 +27,3 @@ return (mod && mod.__esModule) ? mod : { "default": mod };
 const path_1 = require("path");
-const postcss_1 = __importDefault(require("postcss"));
+const postcss = __importStar(require("postcss"));
 const postcss_value_parser_1 = __importDefault(require("postcss-value-parser"));
@@ -90,2 +109,3 @@ const is_vendor_prefixed_1 = __importDefault(require("is-vendor-prefixed"));
             switch (decl.prop) {
+                case stylable_value_parsers_1.valueMapping.partialMixin:
                 case stylable_value_parsers_1.valueMapping.mixin:
@@ -643,3 +663,3 @@ break;
     scopeSelector2(originMeta, selector, _classesExport, _calcPaths = false, rule) {
-        const context = new ScopeContext(originMeta, selector_utils_1.parseSelector(selector), rule || postcss_1.default.rule({ selector }));
+        const context = new ScopeContext(originMeta, selector_utils_1.parseSelector(selector), rule || postcss.rule({ selector }));
         const targetSelectorAst = this.scopeSelectorAst(context);
@@ -978,3 +998,3 @@ return {
         const len = transformer.diagnostics.reports.length;
-        const rule = postcss_1.default.rule({ selector: scope.params });
+        const rule = postcss.rule({ selector: scope.params });
         const context = new ScopeContext(meta, selector_utils_1.parseSelector(rule.selector), rule);
@@ -981,0 +1001,0 @@ transformedScopes[rule.selector] = selector_utils_1.separateChunks2(transformer.scopeSelectorAst(context));

cjs/stylable-utils.d.ts

@@ -1,2 +0,2 @@
-import postcss from 'postcss';
+import * as postcss from 'postcss';
 import { Diagnostics } from './diagnostics';
@@ -3,0 +3,0 @@ import { DeclStylableProps, Imported, SDecl, StylableMeta, StylableSymbol } from './stylable-processor';

cjs/stylable-utils.js

 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
@@ -9,3 +28,3 @@ return (mod && mod.__esModule) ? mod : { "default": mod };
 const path_1 = require("path");
-const postcss_1 = __importDefault(require("postcss"));
+const postcss = __importStar(require("postcss"));
 const replaceRuleSelector_1 = __importDefault(require("postcss-selector-matches/dist/replaceRuleSelector"));
@@ -95,3 +114,5 @@ const selector_utils_1 = require("./selector-utils");
             const parentRule = mixinRule.parent;
-            if (parentRule.type === 'atrule' && parentRule.name === 'keyframes') {
+            if (parentRule &&
+                parentRule.type === 'atrule' &&
+                parentRule.name === 'keyframes') {
                 return;
@@ -107,3 +128,3 @@ }
         let mixinEntry = null;
-        rule.walkDecls(stylable_value_parsers_1.valueMapping.mixin, (decl) => {
+        rule.walkDecls(stylable_value_parsers_1.mixinDeclRegExp, (decl) => {
             mixinEntry = decl;
@@ -142,3 +163,3 @@ });
     const containsPrefix = containsMatchInFirstChunk.bind(null, prefixType);
-    const mixinRoot = mixinTarget ? mixinTarget : postcss_1.default.root();
+    const mixinRoot = mixinTarget ? mixinTarget : postcss.root();
     root.nodes.forEach((node) => {
@@ -170,3 +191,3 @@ if (node.type === 'rule') {
             if (node.name === 'media') {
-                const mediaSubset = createSubsetAst(node, selectorPrefix, postcss_1.default.atRule({
+                const mediaSubset = createSubsetAst(node, selectorPrefix, postcss.atRule({
                     params: node.params,
@@ -173,0 +194,0 @@ name: node.name,

cjs/stylable-value-parsers.d.ts

@@ -1,2 +0,2 @@
-import postcss from 'postcss';
+import * as postcss from 'postcss';
 import postcssValueParser from 'postcss-value-parser';
@@ -24,2 +24,3 @@ import { Diagnostics } from './diagnostics';
     }> | Record<string, string>;
+    partial?: boolean;
 }
@@ -51,4 +52,6 @@ export interface ArgValue {
     mixin: "-st-mixin";
+    partialMixin: "-st-partial-mixin";
     global: "-st-global";
 };
+export declare const mixinDeclRegExp: RegExp;
 export declare type stKeys = keyof typeof valueMapping;
@@ -71,8 +74,4 @@ export declare const stValues: string[];
     };
-    '-st-mixin'(mixinNode: postcss.Declaration, strategy: (type: string) => 'named' | 'args', diagnostics?: Diagnostics | undefined): {
-        type: string;
-        options: Array<{
-            value: string;
-        }> | Record<string, string>;
-    }[];
+    '-st-mixin'(mixinNode: postcss.Declaration, strategy: (type: string) => 'named' | 'args', diagnostics?: Diagnostics | undefined): MixinValue[];
+    '-st-partial-mixin'(mixinNode: postcss.Declaration, strategy: (type: string) => 'named' | 'args', diagnostics?: Diagnostics | undefined): MixinValue[];
 };
@@ -79,0 +78,0 @@ export declare function getNamedArgs(node: ParsedValue): ParsedValue[][];

cjs/stylable-value-parsers.js

@@ -6,3 +6,3 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.validateAllowedNodesUntil = exports.listOptions = exports.strategies = exports.groupValues = exports.getStringValue = exports.getFormatterArgs = exports.getNamedArgs = exports.SBTypesParsers = exports.STYLABLE_NAMED_MATCHER = exports.STYLABLE_VALUE_MATCHER = exports.stValuesMap = exports.stValues = exports.valueMapping = exports.rootValueMapping = exports.valueParserWarnings = void 0;
+exports.validateAllowedNodesUntil = exports.listOptions = exports.strategies = exports.groupValues = exports.getStringValue = exports.getFormatterArgs = exports.getNamedArgs = exports.SBTypesParsers = exports.STYLABLE_NAMED_MATCHER = exports.STYLABLE_VALUE_MATCHER = exports.stValuesMap = exports.stValues = exports.mixinDeclRegExp = exports.valueMapping = exports.rootValueMapping = exports.valueParserWarnings = void 0;
 const postcss_value_parser_1 = __importDefault(require("postcss-value-parser"));
@@ -39,4 +39,6 @@ const pseudo_states_1 = require("./pseudo-states");
     mixin: '-st-mixin',
+    partialMixin: '-st-partial-mixin',
     global: '-st-global',
 };
+exports.mixinDeclRegExp = new RegExp(`(${exports.valueMapping.mixin})|(${exports.valueMapping.partialMixin})`);
 exports.stValues = Object.keys(exports.valueMapping).map((key) => exports.valueMapping[key]);
@@ -127,2 +129,8 @@ exports.stValuesMap = Object.keys(exports.valueMapping).reduce((acc, key) => {
     },
+    '-st-partial-mixin'(mixinNode, strategy, diagnostics) {
+        return exports.SBTypesParsers['-st-mixin'](mixinNode, strategy, diagnostics).map((mixin) => {
+            mixin.partial = true;
+            return mixin;
+        });
+    },
 };
@@ -129,0 +137,0 @@ function handleNamedTokens(tokens, buckets, key = 'namedMap', node, diagnostics) {

cjs/stylable.d.ts

@@ -38,3 +38,3 @@ import { FileProcessor, MinimalFS } from './cached-process-file';
     protected mode: 'production' | 'development';
-    protected resolveNamespace?: typeof processNamespace | undefined;
+    resolveNamespace?: typeof processNamespace | undefined;
     protected timedCacheOptions: Omit<TimedCacheOptions, 'createKey'>;
@@ -41,0 +41,0 @@ protected resolveModule?: ModuleResolver | undefined;

cjs/types.d.ts

@@ -1,2 +0,2 @@
-import postcss from 'postcss';
+import * as postcss from 'postcss';
 import { Box } from './custom-values';
@@ -3,0 +3,0 @@ import { StylableMeta } from './stylable-meta';

package.json

 {
   "name": "@stylable/core",
-  "version": "3.10.1",
+  "version": "3.11.0",
   "description": "CSS for Components",
@@ -16,3 +16,3 @@ "main": "./cjs/index.js",
     "deindent": "^0.1.0",
-    "enhanced-resolve": "^4.3.0",
+    "enhanced-resolve": "^5.0.0",
     "is-url-superb": "^4.0.0",
@@ -24,6 +24,6 @@ "is-vendor-prefixed": "^3.3.1",
     "murmurhash": "^1.0.0",
-    "postcss": "^7.0.32",
-    "postcss-js": "^2.0.3",
-    "postcss-nested": "^4.2.3",
-    "postcss-safe-parser": "^4.0.2",
+    "postcss": "^8.0.8",
+    "postcss-js": "^3.0.0",
+    "postcss-nested": "^5.0.0",
+    "postcss-safe-parser": "^5.0.1",
     "postcss-selector-matches": "^4.0.0",
@@ -30,0 +30,0 @@ "postcss-value-parser": "^4.1.0"

src/diagnostics.ts

@@ -1,5 +0,9 @@
-import postcss from 'postcss';
+import * as postcss from 'postcss';
 
 export type DiagnosticType = 'error' | 'warning';
 
+export interface DiagnosticOptions {
+    word?: string;
+}
+
 export interface Diagnostic {
@@ -9,3 +13,3 @@ type: DiagnosticType;
     message: string;
-    options: postcss.NodeErrorOptions;
+    options: DiagnosticOptions;
 }
@@ -19,12 +23,12 @@
         message: string,
-        options: postcss.NodeErrorOptions = {}
+        options: DiagnosticOptions = {}
     ) {
         this.reports.push({ type, node, message, options });
     }
-    public error(node: postcss.Node, message: string, options?: postcss.NodeErrorOptions) {
+    public error(node: postcss.Node, message: string, options?: DiagnosticOptions) {
         this.add('error', node, message, options);
     }
-    public warn(node: postcss.Node, message: string, options?: postcss.NodeErrorOptions) {
+    public warn(node: postcss.Node, message: string, options?: DiagnosticOptions) {
         this.add('warning', node, message, options);
     }
 }

src/functions.ts

 import { dirname, relative } from 'path';
 import postcssValueParser from 'postcss-value-parser';
-import postcss from 'postcss';
+import * as postcss from 'postcss';
 import { resolveCustomValues } from './custom-values';
@@ -207,2 +207,14 @@ import { Diagnostics } from './diagnostics';
                                     }
+                                } else if (
+                                    resolvedVar._kind === 'js' &&
+                                    typeof resolvedVar.symbol === 'string'
+                                ) {
+                                    parsedNode.resolvedValue = valueHook
+                                        ? valueHook(
+                                              resolvedVar.symbol,
+                                              varName,
+                                              false,
+                                              passedThrough
+                                          )
+                                        : resolvedVar.symbol;
                                 } else if (resolvedVar._kind === 'js' && diagnostics && node) {
@@ -219,3 +231,3 @@ // ToDo: provide actual exported id (default/named as x)
                             } else {
-                                const namedDecl = varSymbol.import.rule.nodes!.find((node) => {
+                                const namedDecl = varSymbol.import.rule.nodes.find((node) => {
                                     return node.type === 'decl' && node.prop === valueMapping.named;
@@ -348,3 +360,3 @@ });
     // TODO: handle calc (parse internals but maintain expression)
-    // TODO: check this thing. native function that accent our function dose not work
+    // TODO: check this thing. native function that accent our function does not work
     // e.g: calc(getVarName())
@@ -351,0 +363,0 @@ }

src/module-resolver.ts

@@ -18,3 +18,3 @@ // importing the factory directly, as we feed it our own fs, and don't want graceful-fs to be implicitly imported
     return (directoryPath, request) =>
-        eResolver.resolveSync(resolverContext, directoryPath, request);
+        eResolver.resolveSync(resolverContext, directoryPath, request) as string;
 }

src/parser.ts

@@ -1,6 +0,6 @@
-import postcss from 'postcss';
+import postcss, { ProcessOptions, Root } from 'postcss';
 import postcssNested from 'postcss-nested';
-import { CSSObject } from './types';
 import postcssJS from 'postcss-js';
 import safeParser from 'postcss-safe-parser';
+import { CSSObject } from './types';
 
@@ -13,7 +13,4 @@ const processor = postcss([postcssNested()]);
 
-export function safeParse(
-    css: string,
-    options: postcss.ProcessOptions = { from: 'style.css' }
-): postcss.Root {
+export function safeParse(css: string, options: ProcessOptions = { from: 'style.css' }): Root {
     return safeParser(css, options);
 }

src/pseudo-states.ts

@@ -1,2 +0,2 @@
-import postcss from 'postcss';
+import * as postcss from 'postcss';
 import postcssValueParser from 'postcss-value-parser';
@@ -3,0 +3,0 @@ import isVendorPrefixed from 'is-vendor-prefixed';

src/selector-utils.ts

@@ -1,2 +0,2 @@
-import postcss from 'postcss';
+import * as postcss from 'postcss';
 import cssSelectorTokenizer from 'css-selector-tokenizer';
@@ -350,3 +350,7 @@ import { ClassSymbol, ElementSymbol } from './stylable-meta';
 export function isChildOfAtRule(rule: postcss.Container, atRuleName: string) {
-    return !!rule.parent && rule.parent.type === 'atrule' && rule.parent.name === atRuleName;
+    return (
+        !!rule.parent &&
+        rule.parent.type === 'atrule' &&
+        (rule.parent as postcss.AtRule).name === atRuleName
+    );
 }
@@ -353,0 +357,0 @@

src/stylable-assets.ts

 import path from 'path';
-import postcss from 'postcss';
+import * as postcss from 'postcss';
 import isUrl from 'is-url-superb';
@@ -4,0 +4,0 @@ import cssSelectorTokenizer from 'css-selector-tokenizer';

src/stylable-meta.ts

@@ -1,2 +0,2 @@
-import postcss from 'postcss';
+import * as postcss from 'postcss';
 import { Diagnostics } from './diagnostics';
@@ -125,3 +125,9 @@ import { SelectorAstNode, SelectorChunk2 } from './selector-utils';
 
-export type StylableSymbol = ImportSymbol | VarSymbol | ClassSymbol | ElementSymbol | CSSVarSymbol | KeyframesSymbol;
+export type StylableSymbol =
+    | ImportSymbol
+    | VarSymbol
+    | ClassSymbol
+    | ElementSymbol
+    | CSSVarSymbol
+    | KeyframesSymbol;
 
@@ -128,0 +134,0 @@ export interface RefedMixin {

src/stylable-mixins.ts

 import { dirname } from 'path';
-import postcss from 'postcss';
+import * as postcss from 'postcss';
 
@@ -12,3 +12,3 @@ import { resolveArgumentsValue } from './functions';
 import { createSubsetAst, isValidDeclaration, mergeRules } from './stylable-utils';
-import { valueMapping } from './stylable-value-parsers';
+import { valueMapping, mixinDeclRegExp } from './stylable-value-parsers';
 
@@ -45,3 +45,3 @@ export const mixinWarnings = {
     rule.mixins.length = 0;
-    rule.walkDecls(valueMapping.mixin, (node) => node.remove());
+    rule.walkDecls(mixinDeclRegExp, (node) => node.remove());
 }
@@ -181,2 +181,7 @@
     const namedArgs = mix.mixin.options as Record<string, string>;
+
+    if (mix.mixin.partial) {
+        filterPartialMixinDecl(mixinRoot, Object.keys(namedArgs));
+    }
+
     const resolvedArgs = resolveArgumentsValue(
@@ -221,2 +226,9 @@ namedArgs,
 ) {
+    const isPartial = mix.mixin.partial;
+    const namedArgs = mix.mixin.options as Record<string, string>;
+    const overrideKeys = Object.keys(namedArgs);
+
+    if (isPartial && overrideKeys.length === 0) {
+        return;
+    }
     let resolvedClass = transformer.resolver.resolve(mix.ref) as CSSResolve;
@@ -252,3 +264,3 @@ const roots = [];
         const mixinRoot = postcss.root();
-        roots.forEach((root) => mixinRoot.prepend(...root.nodes!));
+        roots.forEach((root) => mixinRoot.prepend(...root.nodes));
         mergeRules(mixinRoot, rule);
@@ -277,4 +289,10 @@ } else {
 ) {
+    const isPartial = mix.mixin.partial;
+    const namedArgs = mix.mixin.options as Record<string, string>;
+    const overrideKeys = Object.keys(namedArgs);
+
+    if (isPartial && overrideKeys.length === 0) {
+        return;
+    }
     const isRootMixin = mix.ref.name === meta.root;
-    const namedArgs = mix.mixin.options as Record<string, string>;
     const mixinDecl = getMixinDeclaration(rule) || postcss.decl();
@@ -299,2 +317,6 @@ const resolvedArgs = resolveArgumentsValue(
 
+    if (isPartial) {
+        filterPartialMixinDecl(mixinRoot, overrideKeys);
+    }
+
     transformer.transformAst(
@@ -324,5 +346,22 @@ mixinRoot,
         (rule.nodes.find((node) => {
-            return node.type === 'decl' && node.prop === valueMapping.mixin;
+            return (
+                node.type === 'decl' &&
+                (node.prop === valueMapping.mixin || node.prop === valueMapping.partialMixin)
+            );
         }) as postcss.Declaration)
     );
 }
+
+function filterPartialMixinDecl(mixinRoot: postcss.Root, overrideKeys: string[]) {
+    const regexp = new RegExp(`value\\((\\s*${overrideKeys.join('\\s*)|(\\s*')}\\s*)\\)`);
+
+    mixinRoot.walkDecls((decl) => {
+        if (!decl.value.match(regexp)) {
+            const parent = decl.parent; // ref the parent before remove
+            decl.remove();
+            if (parent?.nodes?.length === 0) {
+                parent.remove();
+            }
+        }
+    });
+}

src/stylable-processor.ts

 import hash from 'murmurhash';
 import path from 'path';
-import postcss from 'postcss';
+import * as postcss from 'postcss';
 import postcssValueParser from 'postcss-value-parser';
@@ -45,3 +45,2 @@ import { Diagnostics } from './diagnostics';
 const parseNamed = SBTypesParsers[valueMapping.named];
-const parseMixin = SBTypesParsers[valueMapping.mixin];
 const parseStates = SBTypesParsers[valueMapping.states];
@@ -91,4 +90,4 @@ const parseGlobal = SBTypesParsers[valueMapping.global];
     },
-    OVERRIDE_MIXIN() {
-        return `override mixin on same rule`;
+    OVERRIDE_MIXIN(mixinType: string) {
+        return `override ${mixinType} on same rule`;
     },
@@ -98,2 +97,5 @@ OVERRIDE_TYPED_RULE(key: string, name: string) {
     },
+    PARTIAL_MIXIN_MISSING_ARGUMENTS(type: string) {
+        return `"${valueMapping.partialMixin}" can only be used with override arguments provided, missing overrides on "${type}"`;
+    },
     FROM_PROP_MISSING_IN_IMPORT() {
@@ -636,5 +638,5 @@ return `"${valueMapping.from}" is missing in ${rootValueMapping.import} block`;
             }
-        } else if (decl.prop === valueMapping.mixin) {
+        } else if (decl.prop === valueMapping.mixin || decl.prop === valueMapping.partialMixin) {
             const mixins: RefedMixin[] = [];
-            parseMixin(
+            SBTypesParsers[decl.prop](
                 decl,
@@ -655,3 +657,2 @@ (type) => {
                 const mixinRefSymbol = this.meta.mappedSymbols[mixin.type];
-
                 if (
@@ -661,2 +662,11 @@ mixinRefSymbol &&
                 ) {
+                    if (mixin.partial && Object.keys(mixin.options).length === 0) {
+                        this.diagnostics.warn(
+                            decl,
+                            processorWarnings.PARTIAL_MIXIN_MISSING_ARGUMENTS(mixin.type),
+                            {
+                                word: mixin.type,
+                            }
+                        );
+                    }
                     const refedMixin = {
@@ -676,6 +686,23 @@ mixin,
             if (rule.mixins) {
-                this.diagnostics.warn(decl, processorWarnings.OVERRIDE_MIXIN());
+                const partials = rule.mixins.filter((r) => r.mixin.partial);
+                const nonPartials = rule.mixins.filter((r) => !r.mixin.partial);
+                const isInPartial = decl.prop === valueMapping.partialMixin;
+                if (
+                    (partials.length && decl.prop === valueMapping.partialMixin) ||
+                    (nonPartials.length && decl.prop === valueMapping.mixin)
+                ) {
+                    this.diagnostics.warn(decl, processorWarnings.OVERRIDE_MIXIN(decl.prop));
+                }
+                if (partials.length && nonPartials.length) {
+                    rule.mixins = isInPartial
+                        ? nonPartials.concat(mixins)
+                        : partials.concat(mixins);
+                } else if (partials.length) {
+                    rule.mixins = isInPartial ? mixins : partials.concat(mixins);
+                } else if (nonPartials.length) {
+                    rule.mixins = isInPartial ? nonPartials.concat(mixins) : mixins;
+                }
+            } else if (mixins.length) {
+                rule.mixins = mixins;
             }
-
-            rule.mixins = mixins;
         } else if (decl.prop === valueMapping.global) {
@@ -768,3 +795,7 @@ if (rule.isSimpleSelector && rule.selectorType !== 'element') {
                     {
-                        const { keyframesMap, namedMap } = parseNamed(decl.value, decl, this.diagnostics);
+                        const { keyframesMap, namedMap } = parseNamed(
+                            decl.value,
+                            decl,
+                            this.diagnostics
+                        );
                         importObj.named = namedMap;
@@ -771,0 +802,0 @@ importObj.keyframes = keyframesMap;

src/stylable-transformer.ts

 import { basename } from 'path';
-import postcss from 'postcss';
+import * as postcss from 'postcss';
 import postcssValueParser from 'postcss-value-parser';
@@ -217,2 +217,3 @@ import isVendorPrefixed from 'is-vendor-prefixed';
             switch (decl.prop) {
+                case valueMapping.partialMixin:
                 case valueMapping.mixin:
@@ -219,0 +220,0 @@ break;

src/stylable-utils.ts

 import cloneDeep from 'lodash.clonedeep';
 import { isAbsolute } from 'path';
-import postcss from 'postcss';
+import * as postcss from 'postcss';
 import replaceRuleSelector from 'postcss-selector-matches/dist/replaceRuleSelector';
@@ -24,3 +24,3 @@ import { Diagnostics } from './diagnostics';
 import { ImportSymbol } from './stylable-meta';
-import { valueMapping } from './stylable-value-parsers';
+import { valueMapping, mixinDeclRegExp } from './stylable-value-parsers';
 
@@ -131,3 +131,7 @@ export const CUSTOM_SELECTOR_RE = /:--[\w-]+/g;
             const parentRule = mixinRule.parent;
-            if (parentRule.type === 'atrule' && parentRule.name === 'keyframes') {
+            if (
+                parentRule &&
+                parentRule.type === 'atrule' &&
+                (parentRule as postcss.AtRule).name === 'keyframes'
+            ) {
                 return;
@@ -145,3 +149,3 @@ }
 
-        rule.walkDecls(valueMapping.mixin, (decl) => {
+        rule.walkDecls(mixinDeclRegExp, (decl) => {
             mixinEntry = decl;
@@ -161,6 +165,6 @@ });
             } else if (node.type === 'rule' || node.type === 'atrule') {
-                if (rule.parent.last === nextRule) {
-                    rule.parent.append(node);
+                if (rule.parent!.last === nextRule) {
+                    rule.parent!.append(node);
                 } else {
-                    rule.parent.insertAfter(nextRule, node);
+                    rule.parent!.insertAfter(nextRule, node);
                 }
@@ -187,3 +191,3 @@ nextRule = node;
 
-    root.nodes!.forEach((node) => {
+    root.nodes.forEach((node) => {
         if (node.type === 'rule') {
@@ -282,4 +286,4 @@ const ast = isRoot
 export function findDeclaration(importNode: Imported, test: any) {
-    const fromIndex = importNode.rule.nodes!.findIndex(test);
-    return importNode.rule.nodes![fromIndex] as postcss.Declaration;
+    const fromIndex = importNode.rule.nodes.findIndex(test);
+    return importNode.rule.nodes[fromIndex] as postcss.Declaration;
 }
@@ -297,3 +301,3 @@
         if ((rule as SRule).isSimpleSelector && !!~declarationIndex) {
-            found = rule.nodes![declarationIndex];
+            found = rule.nodes[declarationIndex];
         }
@@ -300,0 +304,0 @@ });

src/stylable-value-parsers.ts

@@ -1,2 +0,2 @@
-import postcss from 'postcss';
+import * as postcss from 'postcss';
 import postcssValueParser, {
@@ -40,2 +40,3 @@ ParsedValue as PostCSSParsedValue,
     options: Array<{ value: string }> | Record<string, string>;
+    partial?: boolean;
 }
@@ -69,5 +70,9 @@
     mixin: '-st-mixin' as const,
+    partialMixin: '-st-partial-mixin' as const,
     global: '-st-global' as const,
 };
 
+
+export const mixinDeclRegExp = new RegExp(`(${valueMapping.mixin})|(${valueMapping.partialMixin})`);
+
 export type stKeys = keyof typeof valueMapping;
@@ -150,6 +155,3 @@
         const ast = postcssValueParser(mixinNode.value);
-        const mixins: Array<{
-            type: string;
-            options: Array<{ value: string }> | Record<string, string>;
-        }> = [];
+        const mixins: Array<MixinValue> = [];
 
@@ -183,2 +185,12 @@ function reportWarning(message: string, options?: { word: string }) {
     },
+    '-st-partial-mixin'(
+        mixinNode: postcss.Declaration,
+        strategy: (type: string) => 'named' | 'args',
+        diagnostics?: Diagnostics
+    ) {
+        return SBTypesParsers['-st-mixin'](mixinNode, strategy, diagnostics).map((mixin) => {
+            mixin.partial = true;
+            return mixin;
+        });
+    },
 };
@@ -185,0 +197,0 @@

src/stylable.ts

@@ -73,3 +73,3 @@ import { FileProcessor, MinimalFS } from './cached-process-file';
         protected mode: 'production' | 'development' = 'production',
-        protected resolveNamespace?: typeof processNamespace,
+        public resolveNamespace?: typeof processNamespace,
         protected timedCacheOptions: Omit<TimedCacheOptions, 'createKey'> = {
@@ -76,0 +76,0 @@ timeout: 1,

src/types.ts

@@ -1,2 +0,2 @@
-import postcss from 'postcss';
+import * as postcss from 'postcss';
 import { Box } from './custom-values';
@@ -3,0 +3,0 @@ import { StylableMeta } from './stylable-meta';

No alert changes

Improved metrics

Total package byte prevSize

706258

increased by2.22%

Lines of code

12123

increased by2.24%

Dependency changes

• + Addedenhanced-resolve@5.18.0(transitive)

• + Addednanoid@3.3.8(transitive)

• + Addedpicocolors@1.1.1(transitive)

• + Addedpostcss@8.5.1(transitive)

• + Addedpostcss-js@3.0.3(transitive)

• + Addedpostcss-nested@5.0.6(transitive)

• + Addedpostcss-safe-parser@5.0.2(transitive)

• + Addedsource-map-js@1.2.1(transitive)

• + Addedtapable@2.2.1(transitive)

• - Removedcore-util-is@1.0.3(transitive)

• - Removedenhanced-resolve@4.5.0(transitive)

• - Removederrno@0.1.8(transitive)

• - Removedinherits@2.0.4(transitive)

• - Removedisarray@1.0.0(transitive)

• - Removedmemory-fs@0.5.0(transitive)

• - Removedpostcss-js@2.0.3(transitive)

• - Removedpostcss-nested@4.2.3(transitive)

• - Removedpostcss-safe-parser@4.0.2(transitive)

• - Removedprocess-nextick-args@2.0.1(transitive)

• - Removedprr@1.0.1(transitive)

• - Removedreadable-stream@2.3.8(transitive)

• - Removedsafe-buffer@5.1.2(transitive)

• - Removedstring_decoder@1.1.1(transitive)

• - Removedtapable@1.1.3(transitive)

• Updatedenhanced-resolve@^5.0.0

• Updatedpostcss@^8.0.8

• Updatedpostcss-js@^3.0.0

• Updatedpostcss-nested@^5.0.0

• Updatedpostcss-safe-parser@^5.0.1