@stylable/core - npm Package Compare versions

Comparing version 0.1.7 to 0.1.8

dist/src/create-infra-structure.js

 "use strict";
-var __assign = (this && this.__assign) || Object.assign || function(t) {
-    for (var s, i = 1, n = arguments.length; i < n; i++) {
-        s = arguments[i];
-        for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-            t[p] = s[p];
-    }
-    return t;
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
 };
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
+    result["default"] = mod;
+    return result;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 var cached_process_file_1 = require("./cached-process-file");
 var parser_1 = require("./parser");
-var path = require("./path");
+var path = __importStar(require("./path"));
 var stylable_processor_1 = require("./stylable-processor");
@@ -15,0 +25,0 @@ var ResolverFactory = require('enhanced-resolve/lib/ResolverFactory');

dist/src/functions.d.ts

@@ -9,4 +9,14 @@ import * as postcss from 'postcss';
 export declare type ResolvedFormatter = Pojo<JSResolve | CSSResolve | ValueFormatter | null>;
-export declare function resolveArgumentsValue(options: Pojo<string>, transformer: StylableTransformer, meta: StylableMeta, variableOverride?: Pojo<string>, path?: string[]): Pojo<string>;
+export declare const functionWarnings: {
+    FAIL_TO_EXECUTE_FORMATTER: (resolvedValue: string, message: string) => string;
+    CYCLIC_VALUE: (cyclicChain: string[]) => string;
+    CANNOT_USE_AS_VALUE: (type: string, varName: string) => string;
+    CANNOT_USE_JS_AS_VALUE: (varName: string) => string;
+    CANNOT_FIND_IMPORTED_VAR: (varName: string) => string;
+    MULTI_ARGS_IN_VALUE: (args: string) => string;
+    UNKNOWN_FORMATTER: (name: string) => string;
+    UNKNOWN_VAR: (name: string) => string;
+};
+export declare function resolveArgumentsValue(options: Pojo<string>, transformer: StylableTransformer, meta: StylableMeta, diagnostics: Diagnostics, node: postcss.Node, variableOverride?: Pojo<string>, path?: string[]): Pojo<string>;
 export declare function evalDeclarationValue(resolver: StylableResolver, value: string, meta: StylableMeta, node: postcss.Node, variableOverride?: Pojo<string> | null, valueHook?: replaceValueHook, diagnostics?: Diagnostics, passedThrough?: string[]): string;
 //# sourceMappingURL=functions.d.ts.map

dist/src/functions.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-var postcss = require("postcss");
 var native_reserved_lists_1 = require("./native-reserved-lists");
@@ -9,3 +8,3 @@ var stylable_value_parsers_1 = require("./stylable-value-parsers");
 /* tslint:disable:max-line-length */
-var errors = {
+exports.functionWarnings = {
     FAIL_TO_EXECUTE_FORMATTER: function (resolvedValue, message) { return "failed to execute formatter \"" + resolvedValue + "\" with error: \"" + message + "\""; },
@@ -15,12 +14,12 @@ CYCLIC_VALUE: function (cyclicChain) { return "Cyclic value definition detected: \"" + cyclicChain.map(function (s, i) { return (i === cyclicChain.length - 1 ? '↻ ' : i === 0 ? '→ ' : '↪ ') + s; }).join('\n') + "\""; },
     CANNOT_USE_JS_AS_VALUE: function (varName) { return "JavaScript import \"" + varName + "\" cannot be used as a variable"; },
-    CANNOT_FIND_IMPORTED_VAR: function (varName, path) { return "cannot find export '" + varName + "' in '" + path + "'"; },
+    CANNOT_FIND_IMPORTED_VAR: function (varName) { return "cannot use unknown imported \"" + varName + "\""; },
     MULTI_ARGS_IN_VALUE: function (args) { return "value function accepts only a single argument: \"value(" + args + ")\""; },
-    UNKNOWN_FORMATTER: function (name) { return "cannot find formatter: " + name; },
+    UNKNOWN_FORMATTER: function (name) { return "cannot find native function or custom formatter called " + name; },
     UNKNOWN_VAR: function (name) { return "unknown var \"" + name + "\""; }
 };
 /* tslint:enable:max-line-length */
-function resolveArgumentsValue(options, transformer, meta, variableOverride, path) {
+function resolveArgumentsValue(options, transformer, meta, diagnostics, node, variableOverride, path) {
     var resolvedArgs = {};
     for (var k in options) {
-        resolvedArgs[k] = evalDeclarationValue(transformer.resolver, options[k], meta, postcss.decl(), variableOverride, transformer.replaceValueHook, undefined, path);
+        resolvedArgs[k] = evalDeclarationValue(transformer.resolver, options[k], meta, node, variableOverride, transformer.replaceValueHook, diagnostics, path);
     }
@@ -50,3 +49,3 @@ return resolvedArgs;
                             if (diagnostics) {
-                                diagnostics.warn(node, errors.CYCLIC_VALUE(cyclicChain), {
+                                diagnostics.warn(node, exports.functionWarnings.CYCLIC_VALUE(cyclicChain), {
                                     word: refUniqID
@@ -81,3 +80,3 @@ });
                                         if (diagnostics) {
-                                            diagnostics.warn(node, errors.CANNOT_USE_AS_VALUE(errorKind, varName), { word: varName });
+                                            diagnostics.warn(node, exports.functionWarnings.CANNOT_USE_AS_VALUE(errorKind, varName), { word: varName });
                                         }
@@ -88,3 +87,3 @@ }
                                     // ToDo: provide actual exported id (default/named as x)
-                                    diagnostics.warn(node, errors.CANNOT_USE_JS_AS_VALUE(varName), {
+                                    diagnostics.warn(node, exports.functionWarnings.CANNOT_USE_JS_AS_VALUE(varName), {
                                         word: varName
@@ -101,3 +100,3 @@ });
                                     // ToDo: provide actual exported id (default/named as x)
-                                    diagnostics.error(namedDecl, errors.CANNOT_FIND_IMPORTED_VAR(varName, varSymbol.import.fromRelative), { word: varName });
+                                    diagnostics.error(node, exports.functionWarnings.CANNOT_FIND_IMPORTED_VAR(varName), { word: varName });
                                 }
@@ -107,3 +106,3 @@ }
                         else if (diagnostics) {
-                            diagnostics.warn(node, errors.UNKNOWN_VAR(varName), { word: varName });
+                            diagnostics.warn(node, exports.functionWarnings.UNKNOWN_VAR(varName), { word: varName });
                         }
@@ -113,3 +112,3 @@ }
                         var argsAsString = args.filter(function (arg) { return arg !== ', '; }).join(', ');
-                        diagnostics.warn(node, errors.MULTI_ARGS_IN_VALUE(argsAsString), {
+                        diagnostics.warn(node, exports.functionWarnings.MULTI_ARGS_IN_VALUE(argsAsString), {
                             word: argsAsString
@@ -142,3 +141,3 @@ });
                             if (diagnostics) {
-                                diagnostics.warn(node, errors.FAIL_TO_EXECUTE_FORMATTER(parsedNode.resolvedValue, error.message), { word: node.value });
+                                diagnostics.warn(node, exports.functionWarnings.FAIL_TO_EXECUTE_FORMATTER(parsedNode.resolvedValue, error.message), { word: node.value });
                             }
@@ -151,3 +150,3 @@ }
                     else if (diagnostics) {
-                        diagnostics.warn(node, errors.UNKNOWN_FORMATTER(value), { word: value });
+                        diagnostics.warn(node, exports.functionWarnings.UNKNOWN_FORMATTER(value), { word: value });
                     }
@@ -154,0 +153,0 @@ }

dist/src/index.js

@@ -5,2 +5,9 @@ "use strict";
 }
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
+    result["default"] = mod;
+    return result;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
@@ -34,4 +41,4 @@ var parser_1 = require("./parser");
 __export(require("./native-reserved-lists"));
-var pseudoStates = require("./pseudo-states");
+var pseudoStates = __importStar(require("./pseudo-states"));
 exports.pseudoStates = pseudoStates;
 //# sourceMappingURL=index.js.map

dist/src/optimizer/stylable-optimizer.js

 "use strict";
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
+    result["default"] = mod;
+    return result;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-var postcss = require("postcss");
+var postcss = __importStar(require("postcss"));
 var selector_utils_1 = require("../selector-utils");
@@ -5,0 +12,0 @@ var classname_optimizer_1 = require("./classname-optimizer");

dist/src/parser.d.ts

@@ -1,2 +0,2 @@
-import * as postcss from 'postcss';
+import postcss from 'postcss';
 import { CSSObject } from './types';
@@ -3,0 +3,0 @@ export declare function cssObjectToAst(cssObject: CSSObject, sourceFile?: string): postcss.LazyResult;

dist/src/parser.js

 "use strict";
-var __assign = (this && this.__assign) || Object.assign || function(t) {
-    for (var s, i = 1, n = arguments.length; i < n; i++) {
-        s = arguments[i];
-        for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-            t[p] = s[p];
-    }
-    return t;
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-var postcss = require("postcss");
+var postcss_1 = __importDefault(require("postcss"));
 var postcssJS = require('postcss-js');
@@ -16,3 +22,3 @@ var postcssNested = require('postcss-nested');
 var postcssConfig = { parser: postcssJS };
-var processor = postcss([postcssNested]);
+var processor = postcss_1.default([postcssNested]);
 function cssObjectToAst(cssObject, sourceFile) {
@@ -19,0 +25,0 @@ if (sourceFile === void 0) { sourceFile = ''; }

dist/src/path.js

 "use strict";
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
+    result["default"] = mod;
+    return result;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-var path = require("path");
+var path = __importStar(require("path"));
 var sPath = {
@@ -5,0 +12,0 @@ resolve: path.resolve,

dist/src/selector-utils.js

 "use strict";
-var __assign = (this && this.__assign) || Object.assign || function(t) {
-    for (var s, i = 1, n = arguments.length; i < n; i++) {
-        s = arguments[i];
-        for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-            t[p] = s[p];
-    }
-    return t;
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
 };
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
+    result["default"] = mod;
+    return result;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-var postcss = require("postcss");
+var postcss = __importStar(require("postcss"));
 var tokenizer = require('css-selector-tokenizer');
@@ -13,0 +23,0 @@ function parseSelector(selector) {

dist/src/stylable-assets.js

 "use strict";
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
+    result["default"] = mod;
+    return result;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-var path = require("./path");
+var path = __importStar(require("./path"));
 var _a = require('css-selector-tokenizer'), parseValues = _a.parseValues, stringifyValues = _a.stringifyValues;
@@ -5,0 +12,0 @@ var isUrl = require('url-regex')({ exact: true, strict: true });

dist/src/stylable-meta.d.ts

@@ -33,2 +33,3 @@ import * as postcss from 'postcss';
     fromRelative: string;
+    context: string;
 }
@@ -35,0 +36,0 @@ export interface StylableDirectives {

dist/src/stylable-mixins.d.ts

 import { RefedMixin, SRule, StylableMeta } from './stylable-processor';
 import { StylableTransformer } from './stylable-transformer';
 import { Pojo } from './types';
+export declare const mixinWarnings: {
+    FAILED_TO_APPLY_MIXIN(error: string): string;
+    JS_MIXIN_NOT_A_FUNC(): string;
+    CIRCULAR_MIXIN(circularPaths: string[]): string;
+    UNKNOWN_MIXIN_SYMBOL(name: string): string;
+};
 export declare function appendMixins(transformer: StylableTransformer, rule: SRule, meta: StylableMeta, variableOverride?: Pojo<string>, path?: string[]): void;
 export declare function appendMixin(mix: RefedMixin, transformer: StylableTransformer, rule: SRule, meta: StylableMeta, variableOverride?: Pojo<string>, path?: string[]): void;
 //# sourceMappingURL=stylable-mixins.d.ts.map

dist/src/stylable-mixins.js

 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-var postcss = require("postcss");
+var postcss_1 = __importDefault(require("postcss"));
 var functions_1 = require("./functions");
@@ -9,2 +12,10 @@ var parser_1 = require("./parser");
 var stylable_value_parsers_1 = require("./stylable-value-parsers");
+/* tslint:disable:max-line-length */
+exports.mixinWarnings = {
+    FAILED_TO_APPLY_MIXIN: function (error) { return "could not apply mixin: " + error; },
+    JS_MIXIN_NOT_A_FUNC: function () { return "js mixin must be a function"; },
+    CIRCULAR_MIXIN: function (circularPaths) { return "circular mixin found: " + circularPaths.join(' --> '); },
+    UNKNOWN_MIXIN_SYMBOL: function (name) { return "cannot mixin unknown symbol \"" + name + "\""; }
+};
+/* tslint:enable:max-line-length */
 function appendMixins(transformer, rule, meta, variableOverride, path) {
@@ -40,3 +51,3 @@ if (path === void 0) { path = []; }
                     catch (e) {
-                        transformer.diagnostics.error(rule, 'could not apply mixin: ' + e, { word: mix.mixin.type });
+                        transformer.diagnostics.error(rule, exports.mixinWarnings.FAILED_TO_APPLY_MIXIN(e), { word: mix.mixin.type });
                         return;
@@ -46,3 +57,3 @@ }
                 else {
-                    transformer.diagnostics.error(rule, 'js mixin must be a function', { word: mix.mixin.type });
+                    transformer.diagnostics.error(rule, exports.mixinWarnings.JS_MIXIN_NOT_A_FUNC(), { word: mix.mixin.type });
                 }
@@ -63,4 +74,3 @@ }
     if (isRecursive) {
-        transformer.diagnostics.warn(rule, "circular mixin found: " + path.join(' --> '), { word: mix.ref.name });
-        // TODO: add warn
+        transformer.diagnostics.warn(rule, exports.mixinWarnings.CIRCULAR_MIXIN(path), { word: mix.ref.name });
         return true;
@@ -82,7 +92,7 @@ }
 }
-function createMixinRootFromCSSResolve(transformer, mix, meta, resolvedClass, path, variableOverride) {
+function createMixinRootFromCSSResolve(transformer, mix, meta, resolvedClass, path, decl, variableOverride) {
     var isRootMixin = resolvedClass.symbol.name === resolvedClass.meta.root;
     var mixinRoot = stylable_utils_1.createSubsetAst(resolvedClass.meta.ast, (resolvedClass.symbol._kind === 'class' ? '.' : '') + resolvedClass.symbol.name, undefined, isRootMixin);
     var namedArgs = mix.mixin.options;
-    var resolvedArgs = functions_1.resolveArgumentsValue(namedArgs, transformer, meta, variableOverride, path);
+    var resolvedArgs = functions_1.resolveArgumentsValue(namedArgs, transformer, meta, transformer.diagnostics, decl, variableOverride, path);
     var mixinMeta = isRootMixin ? resolvedClass.meta : createInheritedMeta(resolvedClass);
@@ -97,3 +107,4 @@ transformer.transformAst(mixinRoot, mixinMeta, undefined, resolvedArgs, path.concat(mix.ref.name + ' from ' + meta.source));
     while (resolvedClass && resolvedClass.symbol && resolvedClass._kind === 'css') {
-        roots.push(createMixinRootFromCSSResolve(transformer, mix, meta, resolvedClass, path, variableOverride));
+        var mixinDecl = getMixinDeclaration(rule) || postcss_1.default.decl();
+        roots.push(createMixinRootFromCSSResolve(transformer, mix, meta, resolvedClass, path, mixinDecl, variableOverride));
         if ((resolvedClass.symbol._kind === 'class' || resolvedClass.symbol._kind === 'element') &&
@@ -108,3 +119,3 @@ !resolvedClass.symbol[stylable_value_parsers_1.valueMapping.extends]) {
     if (roots.length) {
-        var mixinRoot_1 = postcss.root();
+        var mixinRoot_1 = postcss_1.default.root();
         roots.forEach(function (root) { return mixinRoot_1.prepend.apply(mixinRoot_1, root.nodes); });
@@ -114,4 +125,6 @@ stylable_utils_1.mergeRules(mixinRoot_1, rule);
     else {
-        var importNode = stylable_utils_1.findDeclaration(mix.ref.import, function (node) { return node.prop === stylable_value_parsers_1.valueMapping.named; });
-        transformer.diagnostics.error(importNode, 'import mixin does not exist', { word: importNode.value });
+        var mixinDecl = getMixinDeclaration(rule);
+        if (mixinDecl) {
+            transformer.diagnostics.error(mixinDecl, exports.mixinWarnings.UNKNOWN_MIXIN_SYMBOL(mixinDecl.value), { word: mixinDecl.value });
+        }
     }
@@ -122,3 +135,4 @@ }
     var namedArgs = mix.mixin.options;
-    var resolvedArgs = functions_1.resolveArgumentsValue(namedArgs, transformer, meta, variableOverride, path);
+    var mixinDecl = getMixinDeclaration(rule) || postcss_1.default.decl();
+    var resolvedArgs = functions_1.resolveArgumentsValue(namedArgs, transformer, meta, transformer.diagnostics, mixinDecl, variableOverride, path);
     var mixinRoot = stylable_utils_1.createSubsetAst(meta.ast, '.' + mix.ref.name, undefined, isRootMixin);
@@ -135,2 +149,7 @@ transformer.transformAst(mixinRoot, isRootMixin ? meta : createInheritedMeta({ meta: meta, symbol: mix.ref, _kind: 'css' }), undefined, resolvedArgs, path.concat(mix.ref.name + ' from ' + meta.source));
 }
+function getMixinDeclaration(rule) {
+    return (rule.nodes && rule.nodes.find(function (node) {
+        return node.type === 'decl' && node.prop === stylable_value_parsers_1.valueMapping.mixin;
+    }));
+}
 //# sourceMappingURL=stylable-mixins.js.map

dist/src/stylable-processor.d.ts

@@ -13,3 +13,2 @@ import * as postcss from 'postcss';
     ILLEGAL_PROP_IN_IMPORT(propName: string): string;
-    FROM_PROP_MISSING_IN_IMPORT(): string;
     STATE_DEFINITION_IN_ELEMENT(): string;
@@ -23,2 +22,7 @@ STATE_DEFINITION_IN_COMPLEX(): string;
     OVERRIDE_TYPED_RULE(key: string, name: string): string;
+    FROM_PROP_MISSING_IN_IMPORT(): string;
+    INVALID_NAMESPACE_DEF(): string;
+    EMPTY_NAMESPACE_DEF(): string;
+    EMPTY_IMPORT_FROM(): string;
+    MULTIPLE_FROM_IN_IMPORT(): string;
 };
@@ -25,0 +29,0 @@ export declare class StylableProcessor {

dist/src/stylable-processor.js

@@ -5,6 +5,13 @@ "use strict";
 }
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
+    result["default"] = mod;
+    return result;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-var postcss = require("postcss");
+var postcss = __importStar(require("postcss"));
 var diagnostics_1 = require("./diagnostics");
-var path = require("./path");
+var path = __importStar(require("./path"));
 var selector_utils_1 = require("./selector-utils");
@@ -31,3 +38,2 @@ var stylable_assets_1 = require("./stylable-assets");
     ILLEGAL_PROP_IN_IMPORT: function (propName) { return "\"" + propName + "\" css attribute cannot be used inside :import block"; },
-    FROM_PROP_MISSING_IN_IMPORT: function () { return "\"" + stylable_value_parsers_1.valueMapping.from + "\" is missing in :import block"; },
     STATE_DEFINITION_IN_ELEMENT: function () { return 'cannot define pseudo states inside element selectors'; },
@@ -40,3 +46,8 @@ STATE_DEFINITION_IN_COMPLEX: function () { return 'cannot define pseudo states inside complex selectors'; },
     OVERRIDE_MIXIN: function () { return "override mixin on same rule"; },
-    OVERRIDE_TYPED_RULE: function (key, name) { return "override \"" + key + "\" on typed rule \"" + name + "\""; }
+    OVERRIDE_TYPED_RULE: function (key, name) { return "override \"" + key + "\" on typed rule \"" + name + "\""; },
+    FROM_PROP_MISSING_IN_IMPORT: function () { return "\"" + stylable_value_parsers_1.valueMapping.from + "\" is missing in :import block"; },
+    INVALID_NAMESPACE_DEF: function () { return 'invalid @namespace'; },
+    EMPTY_NAMESPACE_DEF: function () { return '@namespace must contain at least one character or digit'; },
+    EMPTY_IMPORT_FROM: function () { return '"-st-from" cannot be empty'; },
+    MULTIPLE_FROM_IN_IMPORT: function () { return "cannot define multiple \"" + stylable_value_parsers_1.valueMapping.from + "\" declarations in a single import"; }
 };
@@ -95,4 +106,14 @@ /* tslint:enable:max-line-length */
                     var match = atRule.params.match(/["'](.*?)['"]/);
-                    match ? (namespace = match[1]) : _this.diagnostics.error(atRule, 'invalid namespace');
-                    toRemove.push(atRule);
+                    if (match) {
+                        if (!!match[1].trim()) {
+                            namespace = match[1];
+                        }
+                        else {
+                            _this.diagnostics.error(atRule, exports.processorWarnings.EMPTY_NAMESPACE_DEF());
+                        }
+                        toRemove.push(atRule);
+                    }
+                    else {
+                        _this.diagnostics.error(atRule, exports.processorWarnings.INVALID_NAMESPACE_DEF());
+                    }
                     break;
@@ -347,4 +368,5 @@ case 'keyframes':
         var _this = this;
+        var fromExists = false;
         var importObj = {
-            defaultExport: '', from: '', fromRelative: '', named: {}, rule: rule
+            defaultExport: '', from: '', fromRelative: '', named: {}, rule: rule, context: path.dirname(this.meta.source)
         };
@@ -355,2 +377,8 @@ rule.walkDecls(function (decl) {
                     var importPath = utils_1.stripQuotation(decl.value);
+                    if (!importPath.trim()) {
+                        _this.diagnostics.error(decl, exports.processorWarnings.EMPTY_IMPORT_FROM());
+                    }
+                    if (fromExists) {
+                        _this.diagnostics.warn(rule, exports.processorWarnings.MULTIPLE_FROM_IN_IMPORT());
+                    }
                     if (!path.isAbsolute(importPath) && !importPath.startsWith('.')) {
@@ -364,2 +392,3 @@ importObj.fromRelative = importPath;
                     }
+                    fromExists = true;
                     break;
@@ -366,0 +395,0 @@ case stylable_value_parsers_1.valueMapping.default:

dist/src/stylable-resolver.d.ts

 import { FileProcessor } from './cached-process-file';
+import { Diagnostics } from './diagnostics';
+import { Imported } from './stylable-meta';
 import { ImportSymbol, StylableMeta, StylableSymbol } from './stylable-processor';
 import { StylableTransformer } from './stylable-transformer';
+export declare const resolverWarnings: {
+    UNKNOWN_IMPORTED_FILE(path: string): string;
+    UNKNOWN_IMPORTED_SYMBOL(name: string, path: string): string;
+};
 export interface CSSResolve {
@@ -18,2 +24,3 @@ _kind: 'css';
     constructor(fileProcessor: FileProcessor<StylableMeta>, requireModule: (modulePath: string) => any);
+    resolveImported(imported: Imported, name: string): CSSResolve | JSResolve | null;
     resolveImport(importSymbol: ImportSymbol): CSSResolve | JSResolve | null;
@@ -27,3 +34,4 @@ resolve(maybeImport: StylableSymbol | undefined): CSSResolve | JSResolve | null;
     resolveExtends(meta: StylableMeta, className: string, isElement?: boolean, transformer?: StylableTransformer): CSSResolve[];
+    validateImports(meta: StylableMeta, diagnostics: Diagnostics): void;
 }
 //# sourceMappingURL=stylable-resolver.d.ts.map

dist/src/stylable-resolver.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var stylable_value_parsers_1 = require("./stylable-value-parsers");
+/* tslint:disable:max-line-length */
+exports.resolverWarnings = {
+    UNKNOWN_IMPORTED_FILE: function (path) { return "cannot resolve imported file: \"" + path + "\""; },
+    UNKNOWN_IMPORTED_SYMBOL: function (name, path) { return "cannot resolve imported symbol \"" + name + "\" in stylesheet \"" + path + "\""; }
+};
 var StylableResolver = /** @class */ (function () {
@@ -9,5 +14,4 @@ function StylableResolver(fileProcessor, requireModule) {
     }
-    StylableResolver.prototype.resolveImport = function (importSymbol) {
-        var context = importSymbol.context;
-        var from = importSymbol.import.from;
+    StylableResolver.prototype.resolveImported = function (imported, name) {
+        var context = imported.context, from = imported.from;
         var symbol;
@@ -18,2 +22,3 @@ if (from.match(/\.css$/)) {
                 meta = this.fileProcessor.process(from, false, context);
+                symbol = !name ? meta.mappedSymbols[meta.root] : meta.mappedSymbols[name];
             }
@@ -23,8 +28,2 @@ catch (e) {
             }
-            if (importSymbol.type === 'default') {
-                symbol = meta.mappedSymbols[meta.root];
-            }
-            else {
-                symbol = meta.mappedSymbols[importSymbol.name];
-            }
             return { _kind: 'css', symbol: symbol, meta: meta };
@@ -34,11 +33,14 @@ }
             var _module = this.requireModule(from);
-            if (importSymbol.type === 'default') {
-                symbol = _module.default || _module;
-            }
-            else {
-                symbol = _module[importSymbol.name];
-            }
+            symbol = !name ?
+                _module.default || _module :
+                _module[name];
             return { _kind: 'js', symbol: symbol, meta: null };
         }
     };
+    StylableResolver.prototype.resolveImport = function (importSymbol) {
+        var name = importSymbol.type === 'named' ?
+            importSymbol.name :
+            '';
+        return this.resolveImported(importSymbol.import, name);
+    };
     StylableResolver.prototype.resolve = function (maybeImport) {
@@ -203,2 +205,28 @@ if (!maybeImport || maybeImport._kind !== 'import') {
     };
+    StylableResolver.prototype.validateImports = function (meta, diagnostics) {
+        for (var _i = 0, _a = meta.imports; _i < _a.length; _i++) {
+            var importObj = _a[_i];
+            var resolvedImport = this.resolveImported(importObj, '');
+            if (!resolvedImport) {
+                // warn about unknown imported files
+                var fromDecl = importObj.rule.nodes &&
+                    importObj.rule.nodes.find(function (decl) { return decl.type === 'decl' && decl.prop === stylable_value_parsers_1.valueMapping.from; });
+                if (fromDecl) {
+                    diagnostics.warn(fromDecl, exports.resolverWarnings.UNKNOWN_IMPORTED_FILE(importObj.fromRelative), { word: importObj.fromRelative });
+                }
+            }
+            else if (resolvedImport._kind === 'css') {
+                // warn about unknown named imported symbols
+                for (var name_1 in importObj.named) {
+                    var origName = importObj.named[name_1];
+                    var resolvedSymbol = this.resolveImported(importObj, origName);
+                    var namedDecl = importObj.rule.nodes &&
+                        importObj.rule.nodes.find(function (decl) { return decl.type === 'decl' && decl.prop === stylable_value_parsers_1.valueMapping.named; });
+                    if (!resolvedSymbol.symbol && namedDecl) {
+                        diagnostics.warn(namedDecl, exports.resolverWarnings.UNKNOWN_IMPORTED_SYMBOL(origName, importObj.fromRelative), { word: origName });
+                    }
+                }
+            }
+        }
+    };
     return StylableResolver;
@@ -205,0 +233,0 @@ }());

dist/src/stylable-transformer.d.ts

@@ -53,2 +53,11 @@ import * as postcss from 'postcss';
 }
+export declare const transformerWarnings: {
+    SYMBOL_IN_USE(name: string): string;
+    UNKNOWN_PSEUDO_ELEMENT(name: string): string;
+    IMPORT_ISNT_EXTENDABLE(): string;
+    CANNOT_EXTEND_UNKNOWN_SYMBOL(name: string): string;
+    CANNOT_EXTEND_JS(): string;
+    KEYFRAME_NAME_RESERVED(name: string): string;
+    UNKNOWN_IMPORT_ALIAS(name: string): string;
+};
 export declare class StylableTransformer {
@@ -55,0 +64,0 @@ fileProcessor: FileProcessor<StylableMeta>;

dist/src/stylable-transformer.js

 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
+var lodash_clonedeep_1 = __importDefault(require("lodash.clonedeep"));
 var functions_1 = require("./functions");
@@ -13,4 +17,14 @@ var native_reserved_lists_1 = require("./native-reserved-lists");
 var isVendorPrefixed = require('is-vendor-prefixed');
-var cloneDeep = require('lodash.clonedeep');
 var valueParser = require('postcss-value-parser');
+/* tslint:disable:max-line-length */
+exports.transformerWarnings = {
+    SYMBOL_IN_USE: function (name) { return "symbol '" + name + "' is already in use"; },
+    UNKNOWN_PSEUDO_ELEMENT: function (name) { return "unknown pseudo element \"" + name + "\""; },
+    IMPORT_ISNT_EXTENDABLE: function () { return 'import is not extendable'; },
+    CANNOT_EXTEND_UNKNOWN_SYMBOL: function (name) { return "cannot extend unknown symbol \"" + name + "\""; },
+    CANNOT_EXTEND_JS: function () { return 'JS import is not extendable'; },
+    KEYFRAME_NAME_RESERVED: function (name) { return "keyframes \"" + name + "\" is reserved"; },
+    UNKNOWN_IMPORT_ALIAS: function (name) { return "cannot use alias for unknown import \"" + name + "\""; }
+};
+/* tslint:enable:max-line-length */
 var StylableTransformer = /** @class */ (function () {
@@ -40,2 +54,3 @@ function StylableTransformer(options) {
         var keyframeMapping = this.scopeKeyframes(ast, meta);
+        this.resolver.validateImports(meta, this.diagnostics);
         ast.walkRules(function (rule) {
@@ -52,3 +67,2 @@ if (selector_utils_1.isChildOfAtRule(rule, 'keyframes')) {
             stylable_utils_1.getDeclStylable(decl).sourceValue = decl.value;
-            // TODO: filter out all irrelevant directives
             switch (decl.prop) {
@@ -75,3 +89,3 @@ case stylable_value_parsers_1.valueMapping.mixin:
             if (metaExports[varSymbol.name]) {
-                _this.diagnostics.warn(varSymbol.node, "symbol '" + varSymbol.name + "' is already in use", { word: varSymbol.name });
+                _this.diagnostics.warn(varSymbol.node, exports.transformerWarnings.SYMBOL_IN_USE(varSymbol.name), { word: varSymbol.name });
             }
@@ -87,3 +101,3 @@ else {
             if (metaExports[name] === keyframeMapping[name].value) {
-                _this.diagnostics.warn(keyframeMapping[name].node, "symbol " + name + " is already in use", { word: name });
+                _this.diagnostics.warn(keyframeMapping[name].node, exports.transformerWarnings.SYMBOL_IN_USE(name), { word: name });
             }
@@ -120,2 +134,3 @@ else {
                     var resolved = this.resolver.deepResolve(extend);
+                    var found = stylable_utils_1.findRule(meta.ast, '.' + classSymbol.name);
                     if (resolved && resolved._kind === 'css' && resolved.symbol) {
@@ -128,22 +143,14 @@ if (resolved.symbol._kind === 'class') {
                         else {
-                            var found = stylable_utils_1.findRule(meta.ast, '.' + classSymbol.name);
                             if (!!found) {
-                                this.diagnostics.error(found, 'import is not extendable', { word: found.value });
+                                this.diagnostics.error(found, exports.transformerWarnings.IMPORT_ISNT_EXTENDABLE(), { word: found.value });
                             }
                         }
                     }
-                    else {
-                        var found = stylable_utils_1.findRule(meta.ast, '.' + classSymbol.name);
-                        if (found && resolved) {
-                            if (!resolved.symbol) {
-                                var importNode = stylable_utils_1.findDeclaration(extend.import, function (node) { return node.prop === stylable_value_parsers_1.valueMapping.named; });
-                                this.diagnostics.error(importNode, "Could not resolve '" + found.value + "'", { word: found.value });
-                            }
-                            else {
-                                this.diagnostics.error(found, 'JS import is not extendable', { word: found.value });
-                            }
+                    else if (found && resolved) {
+                        if (!resolved.symbol) {
+                            var importNode = stylable_utils_1.findDeclaration(extend.import, function (node) { return node.prop === stylable_value_parsers_1.valueMapping.named; });
+                            this.diagnostics.error(found, exports.transformerWarnings.CANNOT_EXTEND_UNKNOWN_SYMBOL(found.value), { word: found.value });
                         }
                         else {
-                            var importNode = stylable_utils_1.findDeclaration(extend.import, function (node) { return node.prop === stylable_value_parsers_1.valueMapping.from; });
-                            this.diagnostics.error(importNode, "Imported file '" + extend.import.from + "' not found", { word: importNode.value });
+                            this.diagnostics.error(found, exports.transformerWarnings.CANNOT_EXTEND_JS(), { word: found.value });
                         }
@@ -174,3 +181,3 @@ }
             if (!!~native_reserved_lists_1.reservedKeyFrames.indexOf(name)) {
-                _this.diagnostics.error(atRule, "keyframes " + name + " is reserved", { word: name });
+                _this.diagnostics.error(atRule, exports.transformerWarnings.KEYFRAME_NAME_RESERVED(name), { word: name });
             }
@@ -302,3 +309,3 @@ if (!keyframesExports[name]) {
         addedSelectors.forEach(function (s) {
-            var clone = cloneDeep(s.selectorNode);
+            var clone = lodash_clonedeep_1.default(s.selectorNode);
             var i = s.selectorNode.nodes.indexOf(s.node);
@@ -373,4 +380,4 @@ if (i === -1) {
             }
-            else {
-                this.diagnostics.error(symbol.alias.import.rule, 'Trying to import unknown alias', { word: symbol.alias.name });
+            else if (rule) {
+                this.diagnostics.error(rule, exports.transformerWarnings.UNKNOWN_IMPORT_ALIAS(name), { word: symbol.alias.name });
             }
@@ -503,3 +510,3 @@ }
             if (native_reserved_lists_1.nativePseudoElements.indexOf(name) === -1 && !isVendorPrefixed(name)) {
-                this.diagnostics.warn(rule, "unknown pseudo element \"" + name + "\"", { word: name });
+                this.diagnostics.warn(rule, exports.transformerWarnings.UNKNOWN_PSEUDO_ELEMENT(name), { word: name });
             }
@@ -506,0 +513,0 @@ }

dist/src/stylable-utils.js

 "use strict";
-var __assign = (this && this.__assign) || Object.assign || function(t) {
-    for (var s, i = 1, n = arguments.length; i < n; i++) {
-        s = arguments[i];
-        for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-            t[p] = s[p];
-    }
-    return t;
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
+    result["default"] = mod;
+    return result;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-var postcss = require("postcss");
+var lodash_clonedeep_1 = __importDefault(require("lodash.clonedeep"));
+var postcss = __importStar(require("postcss"));
 var path_1 = require("./path");
@@ -16,3 +30,2 @@ var selector_utils_1 = require("./selector-utils");
 var replaceRuleSelector = require('postcss-selector-matches/dist/replaceRuleSelector');
-var cloneDeep = require('lodash.clonedeep');
 exports.CUSTOM_SELECTOR_RE = /:--[\w-]+/g;
@@ -52,3 +65,3 @@ function isValidDeclaration(decl) {
             var _a;
-            var outputSelector = cloneDeep(targetSelector);
+            var outputSelector = lodash_clonedeep_1.default(targetSelector);
             outputSelector.before = scopingSelector.before || outputSelector.before;
@@ -74,3 +87,3 @@ var first = outputSelector.nodes[0];
                 !globalSelector) {
-                (_a = outputSelector.nodes).unshift.apply(_a, cloneDeep(scopingSelector.nodes, true).concat([{
+                (_a = outputSelector.nodes).unshift.apply(_a, lodash_clonedeep_1.default(scopingSelector.nodes).concat([{
                         type: 'spacing',
@@ -82,3 +95,3 @@ value: ' '
                 if (node.type === 'invalid' && node.value === '&') {
-                    nodes.splice.apply(nodes, [i, 1].concat(cloneDeep(scopingSelector.nodes, true)));
+                    nodes.splice.apply(nodes, [i, 1].concat(lodash_clonedeep_1.default(scopingSelector.nodes)));
                 }
@@ -85,0 +98,0 @@ });

dist/src/stylable.js

 "use strict";
-var __assign = (this && this.__assign) || Object.assign || function(t) {
-    for (var s, i = 1, n = arguments.length; i < n; i++) {
-        s = arguments[i];
-        for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-            t[p] = s[p];
-    }
-    return t;
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
 };
@@ -10,0 +13,0 @@ Object.defineProperty(exports, "__esModule", { value: true });

dist/tests/diagnostics.spec.js

@@ -8,2 +8,4 @@ "use strict";
 var stylable_processor_1 = require("../src/stylable-processor");
+var stylable_resolver_1 = require("../src/stylable-resolver");
+var stylable_transformer_1 = require("../src/stylable-transformer");
 var stylable_value_parsers_1 = require("../src/stylable-value-parsers");
@@ -89,3 +91,3 @@ var diagnostics_1 = require("./utils/diagnostics");
                     };
-                    diagnostics_1.expectWarningsFromTransform(config, [{ message: 'unknown pseudo element "myBtn"', file: '/main.css' }]);
+                    diagnostics_1.expectWarningsFromTransform(config, [{ message: stylable_transformer_1.transformerWarnings.UNKNOWN_PSEUDO_ELEMENT('myBtn'), file: '/main.css' }]);
                 });
@@ -156,3 +158,3 @@ it('should not warn on vendor prefixed pseudo element', function () {
             it('should return warning for unknown mixin', function () {
-                diagnostics_1.expectWarnings("\n                    .gaga{\n                        |-st-mixin: $myMixin$|;\n                    }\n                ", [{ message: 'unknown mixin: "myMixin"', file: 'main.css' }]);
+                diagnostics_1.expectWarnings("\n                    .gaga{\n                        |-st-mixin: $myMixin$|;\n                    }\n                ", [{ message: stylable_processor_1.processorWarnings.UNKNOWN_MIXIN('myMixin'), file: 'main.css' }]);
             });
@@ -165,3 +167,3 @@ it('should return a warning for a CSS mixin using un-named params', function () {
             });
-            it('should add error when can not append css mixins', function () {
+            it('should add error when attempting to mix in an unknown mixin symbol', function () {
                 var config = {
@@ -171,3 +173,3 @@ entry: '/main.css',
                         '/main.css': {
-                            content: "\n                            :import {\n                                -st-from: \"./imported.st.css\";\n                                |-st-named: $my-mixin$;|\n                            }\n                            .container {\n                                -st-mixin: my-mixin;\n                            }\n                            "
+                            content: "\n                            :import {\n                                -st-from: \"./imported.st.css\";\n                                -st-named: my-mixin;\n                            }\n                            .container {\n                                |-st-mixin: $my-mixin$|;\n                            }\n                            "
                         },
@@ -179,3 +181,8 @@ '/imported.st.css': {
                 };
-                diagnostics_1.expectWarningsFromTransform(config, [{ message: 'import mixin does not exist', file: '/main.css' }]);
+                // tslint:disable-next-line:max-line-length
+                diagnostics_1.expectWarningsFromTransform(config, [
+                    // tslint:disable-next-line:max-line-length
+                    { message: stylable_resolver_1.resolverWarnings.UNKNOWN_IMPORTED_SYMBOL('my-mixin', './imported.st.css'), file: '/main.css', skip: true, skipLocationCheck: true },
+                    { message: src_1.mixinWarnings.UNKNOWN_MIXIN_SYMBOL('my-mixin'), file: '/main.css' }
+                ]);
             });
@@ -192,7 +199,7 @@ it('should add error on circular mixins', function () {
                 var mainPath = path_1.resolve('/main.css');
-                var xPath = "y from " + mainPath + " --> x from " + mainPath;
-                var yPath = "x from " + mainPath + " --> y from " + mainPath;
+                var xPath = ["y from " + mainPath, "x from " + mainPath];
+                var yPath = ["x from " + mainPath, "y from " + mainPath];
                 diagnostics_1.expectWarningsFromTransform(config, [
-                    { message: "circular mixin found: " + xPath, file: '/main.css', skipLocationCheck: true },
-                    { message: "circular mixin found: " + yPath, file: '/main.css', skipLocationCheck: true }
+                    { message: src_1.mixinWarnings.CIRCULAR_MIXIN(xPath), file: '/main.css', skipLocationCheck: true },
+                    { message: src_1.mixinWarnings.CIRCULAR_MIXIN(yPath), file: '/main.css', skipLocationCheck: true }
                 ]);
@@ -212,3 +219,3 @@ });
                 };
-                diagnostics_1.expectWarningsFromTransform(config, [{ message: 'could not apply mixin: bug in mixin', file: '/main.css' }]);
+                diagnostics_1.expectWarningsFromTransform(config, [{ message: src_1.mixinWarnings.FAILED_TO_APPLY_MIXIN('bug in mixin'), file: '/main.css' }]);
             });
@@ -227,3 +234,4 @@ it('js mixin must be a function', function () {
                 };
-                diagnostics_1.expectWarningsFromTransform(config, [{ message: 'js mixin must be a function', file: '/main.css' }]);
+                // tslint:disable-next-line:max-line-length
+                diagnostics_1.expectWarningsFromTransform(config, [{ message: src_1.mixinWarnings.JS_MIXIN_NOT_A_FUNC(), file: '/main.css' }]);
             });
@@ -244,2 +252,24 @@ it('should not add warning when mixin value is a string', function () {
             });
+            it('should warn about non-existing variables in mixin overrides', function () {
+                var config = {
+                    entry: '/main.css',
+                    files: {
+                        '/main.css': {
+                            content: "\n                            .mixed {}\n                            .container {\n                                |-st-mixin: mixed(arg value($missingVar$))|;\n                            }\n                            "
+                        }
+                    }
+                };
+                diagnostics_1.expectWarningsFromTransform(config, [{ message: src_1.functionWarnings.UNKNOWN_VAR('missingVar'), file: '/main.css' }]);
+            });
+            it('should warn about non-existing variables in a multi-argument mixin override', function () {
+                var config = {
+                    entry: '/main.css',
+                    files: {
+                        '/main.css': {
+                            content: "\n                            :vars {\n                                color1: red;\n                                color2: green;\n                            }\n                            .mixed {\n                                color: value(color1);\n                                background: value(color2);\n                            }\n                            .container {\n                                |-st-mixin: mixed(color1 blue, color2 value($missingVar$))|;\n                            }\n                            "
+                        }
+                    }
+                };
+                diagnostics_1.expectWarningsFromTransform(config, [{ message: src_1.functionWarnings.UNKNOWN_VAR('missingVar'), file: '/main.css' }]);
+            });
         });
@@ -258,3 +288,3 @@ describe(':vars', function () {
             });
-            it('should return warning for non import rules inside imports', function () {
+            it('should return a warning for non import rules inside imports', function () {
                 var config = {
@@ -273,5 +303,11 @@ entry: '/main.st.css',
             });
-            it('should return warning for import with missing "from"', function () {
-                diagnostics_1.expectWarnings("\n\n                    |:import{\n                        -st-default:Comp;\n                    }\n                ", [{ message: stylable_processor_1.processorWarnings.FROM_PROP_MISSING_IN_IMPORT(), file: 'main.st.css' }]);
+            it('should return a warning for import with missing "-st-from" declaration', function () {
+                diagnostics_1.expectWarnings("\n                    |:import{\n                        -st-default:Comp;\n                    }|\n                ", [{ message: stylable_processor_1.processorWarnings.FROM_PROP_MISSING_IN_IMPORT(), file: 'main.st.css' }]);
             });
+            it('should return a warning for import with empty "-st-from" declaration', function () {
+                diagnostics_1.expectWarnings("\n                    :import{\n                        |-st-from: \"   \";|\n                        -st-default: Comp;\n                    }\n                ", [{ severity: 'error', message: stylable_processor_1.processorWarnings.EMPTY_IMPORT_FROM(), file: 'main.st.css' }]);
+            });
+            it('should return a warning for multiple "-st-from" declarations', function () {
+                diagnostics_1.expectWarnings("\n                    |:import{\n                        -st-from: \"a\";\n                        -st-from: \"b\";\n                        -st-default: Comp;\n                    }|\n                ", [{ message: stylable_processor_1.processorWarnings.MULTIPLE_FROM_IN_IMPORT(), file: 'main.st.css' }]);
+            });
         });
@@ -294,3 +330,3 @@ describe('-st-extends', function () {
                 };
-                diagnostics_1.expectWarningsFromTransform(config, [{ message: 'import is not extendable', file: '/main.st.css' }]);
+                diagnostics_1.expectWarningsFromTransform(config, [{ message: stylable_transformer_1.transformerWarnings.IMPORT_ISNT_EXTENDABLE(), file: '/main.st.css' }]);
             });
@@ -302,5 +338,5 @@ it('should warn if extends by js import', function () {
                         '/main.css': {
-                            content: "\n                            :import {\n                                -st-from: './file.js';\n                                -st-default: special;\n                            }\n                            .myclass {\n                                |-st-extends: $special$|\n                            }\n                            "
+                            content: "\n                            :import {\n                                -st-from: './imported.js';\n                                -st-default: special;\n                            }\n                            .myclass {\n                                |-st-extends: $special$|\n                            }\n                            "
                         },
-                        '/file.js': {
+                        '/imported.js': {
                             content: ""
@@ -310,3 +346,3 @@ }
                 };
-                diagnostics_1.expectWarningsFromTransform(config, [{ message: 'JS import is not extendable', file: '/main.css' }]);
+                diagnostics_1.expectWarningsFromTransform(config, [{ message: stylable_transformer_1.transformerWarnings.CANNOT_EXTEND_JS(), file: '/main.css' }]);
             });
@@ -318,22 +354,15 @@ it('should warn if named extends does not exist', function () {
                         '/main.css': {
-                            content: "\n                            :import {\n                                -st-from: './file.st.css';\n                                |-st-named: $special$;|\n                            }\n                            .myclass {\n                                -st-extends: special;\n                            }\n                            "
+                            content: "\n                            :import {\n                                -st-from: './file.st.css';\n                                -st-named: special;\n                            }\n                            .myclass {\n                                |-st-extends: $special$;|\n                            }\n                            "
                         },
                         '/file.st.css': {
-                            content: "\n                                .notSpecial {\n                                    color: red;\n                                }\n                            "
+                            content: ""
                         }
                     }
                 };
-                diagnostics_1.expectWarningsFromTransform(config, [{ message: "Could not resolve 'special'", file: '/main.css' }]);
+                diagnostics_1.expectWarningsFromTransform(config, [
+                    // tslint:disable-next-line:max-line-length
+                    { message: stylable_resolver_1.resolverWarnings.UNKNOWN_IMPORTED_SYMBOL('special', './file.st.css'), file: '/main.css', skip: true, skipLocationCheck: true },
+                    { message: stylable_transformer_1.transformerWarnings.CANNOT_EXTEND_UNKNOWN_SYMBOL('special'), file: '/main.css' }
+                ]);
             });
-            it('should warn if file not found', function () {
-                var config = {
-                    entry: '/main.css',
-                    files: {
-                        '/main.css': {
-                            content: "\n                            :import {\n                                |-st-from: $'./file.css'$|;\n                                -st-default: Special;\n                            }\n                            .myclass {\n                                -st-extends: Special\n                            }\n                            "
-                        }
-                    }
-                };
-                diagnostics_1.expectWarningsFromTransform(config, [{ message: "Imported file '" + path_1.resolve('/file.css') + "' not found", file: '/main.css' }]);
-            });
         });
@@ -363,8 +392,8 @@ describe('override -st-* warnings', function () {
                 var config = {
-                    entry: '/main.css',
+                    entry: '/main.st.css',
                     files: {
-                        '/main.css': {
-                            content: "\n                            :import{\n                                -st-from:\"./import.css\";\n                                |-st-named: shlomo, $momo$;|\n                            }\n                            .myClass {\n                                -st-extends: shlomo;\n                            }\n                            .myClass1 {\n                                -st-extends: momo;\n                            }\n                          "
+                        '/main.st.css': {
+                            content: "\n                            :import{\n                                -st-from:\"./import.st.css\";\n                                -st-named: shlomo, momo;\n                            }\n                            .myClass {\n                                -st-extends: shlomo;\n                            }\n                            .myClass1 {\n                                |-st-extends: $momo$;|\n                            }\n                          "
                         },
-                        '/import.css': {
+                        '/import.st.css': {
                             content: "\n                                .shlomo {\n                                    color: red\n                                }\n                            "
@@ -374,12 +403,16 @@ }
                 };
-                diagnostics_1.expectWarningsFromTransform(config, [{ message: "Could not resolve 'momo'", file: '/main.css' }]);
+                diagnostics_1.expectWarningsFromTransform(config, [
+                    // tslint:disable-next-line:max-line-length
+                    { message: stylable_resolver_1.resolverWarnings.UNKNOWN_IMPORTED_SYMBOL('momo', './import.st.css'), file: '/main.st.css', skip: true, skipLocationCheck: true },
+                    { message: stylable_transformer_1.transformerWarnings.CANNOT_EXTEND_UNKNOWN_SYMBOL('momo'), file: '/main.st.css' }
+                ]);
             });
             it('should warn when import redeclare same symbol (in same block)', function () {
-                diagnostics_1.expectWarnings("\n                    |:import {\n                        -st-from: './file.css';\n                        -st-default: Name;\n                        -st-named: $Name$;\n                    }\n                ", [{ message: stylable_processor_1.processorWarnings.REDECLARE_SYMBOL('Name'), file: 'main.css' }]);
+                diagnostics_1.expectWarnings("\n                    |:import {\n                        -st-from: './file.st.css';\n                        -st-default: Name;\n                        -st-named: $Name$;\n                    }\n                ", [{ message: stylable_processor_1.processorWarnings.REDECLARE_SYMBOL('Name'), file: 'main.st.css' }]);
             });
             it('should warn when import redeclare same symbol (in different block)', function () {
-                diagnostics_1.expectWarnings("\n                    :import {\n                        -st-from: './file.css';\n                        -st-default: Name;\n                    }\n                    |:import {\n                        -st-from: './file.css';\n                        -st-default: $Name$;\n                    }\n                ", [{ message: stylable_processor_1.processorWarnings.REDECLARE_SYMBOL('Name'), file: 'main.css' }]);
+                diagnostics_1.expectWarnings("\n                    :import {\n                        -st-from: './file.st.css';\n                        -st-default: Name;\n                    }\n                    |:import {\n                        -st-from: './file.st.css';\n                        -st-default: $Name$;\n                    }\n                ", [{ message: stylable_processor_1.processorWarnings.REDECLARE_SYMBOL('Name'), file: 'main.st.css' }]);
             });
             it('should warn when import redeclare same symbol (in different block types)', function () {
-                diagnostics_1.expectWarnings("\n                    :import {\n                        -st-from: './file.css';\n                        -st-default: Name;\n                    }\n                    :vars {\n                        |$Name$: red;\n                    }\n                ", [{ message: stylable_processor_1.processorWarnings.REDECLARE_SYMBOL('Name'), file: 'main.css' }]);
+                diagnostics_1.expectWarnings("\n                    :import {\n                        -st-from: './file.st.css';\n                        -st-default: Name;\n                    }\n                    :vars {\n                        |$Name$: red;\n                    }\n                ", [{ message: stylable_processor_1.processorWarnings.REDECLARE_SYMBOL('Name'), file: 'main.st.css' }]);
             });
@@ -392,8 +425,8 @@ });
                 var config = {
-                    entry: '/main.css',
+                    entry: '/main.st.css',
                     files: {
-                        '/main.css': {
-                            content: "\n                            :import{\n                                -st-from:\"./file.css\";\n                                -st-default:Comp;\n                                |-st-named:$myVar$|;\n                            }\n                            .root {\n                                color:value(myVar);\n                            }"
+                        '/main.st.css': {
+                            content: "\n                            :import{\n                                -st-from: \"./file.st.css\";\n                                -st-named: myVar;\n                            }\n                            .root {\n                                |color: value($myVar$);|\n                            }"
                         },
-                        '/file.css': {
+                        '/file.st.css': {
                             content: "\n                            :vars {\n                                otherVar: someValue;\n                            }\n                            "
@@ -403,3 +436,7 @@ }
                 };
-                diagnostics_1.expectWarningsFromTransform(config, [{ message: "cannot find export 'myVar' in './file.css'", file: '/main.css' }]);
+                diagnostics_1.expectWarningsFromTransform(config, [
+                    // tslint:disable-next-line:max-line-length
+                    { message: stylable_resolver_1.resolverWarnings.UNKNOWN_IMPORTED_SYMBOL('myVar', './file.st.css'), file: '/main.st.css', skip: true, skipLocationCheck: true },
+                    { message: src_1.functionWarnings.CANNOT_FIND_IMPORTED_VAR('myVar'), file: '/main.st.css' }
+                ]);
             });
@@ -454,5 +491,5 @@ });
             var config = {
-                entry: '/main.css',
+                entry: '/main.st.css',
                 files: {
-                    '/main.css': {
+                    '/main.st.css': {
                         content: "\n                        .name {}\n                        |@keyframes $name$| {\n                            from {}\n                            to {}\n                        }"
@@ -462,3 +499,3 @@ }
             };
-            diagnostics_1.expectWarningsFromTransform(config, [{ message: 'symbol name is already in use', file: '/main.css' }]);
+            diagnostics_1.expectWarningsFromTransform(config, [{ message: stylable_transformer_1.transformerWarnings.SYMBOL_IN_USE('name'), file: '/main.st.css' }]);
         });
@@ -475,3 +512,3 @@ it('should not allow @keyframe of reserved words', function () {
                 };
-                diagnostics_1.expectWarningsFromTransform(config, [{ message: "keyframes " + key + " is reserved", file: '/main.css' }]);
+                diagnostics_1.expectWarningsFromTransform(config, [{ message: stylable_transformer_1.transformerWarnings.KEYFRAME_NAME_RESERVED(key), file: '/main.css' }]);
             });
@@ -485,3 +522,3 @@ });
                         namespace: 'entry',
-                        content: "\n                            |:import{\n                                -st-from: \"./imported.st.css\";\n                                -st-default: Imported;\n                                -st-named: $inner-class$;\n                            }|\n\n                            .root .Imported{}\n                            .root .inner-class{}\n                        "
+                        content: "\n                            :import{\n                                -st-from: \"./imported.st.css\";\n                                -st-default: Imported;\n                                -st-named: inner-class;\n                            }\n\n                            .root .Imported{}\n                            |.root .$inner-class$ {}|\n                        "
                     },
@@ -494,4 +531,70 @@ '/imported.st.css': {
             };
-            diagnostics_1.expectWarningsFromTransform(config, [{ message: 'Trying to import unknown alias', file: '/main.st.css' }]);
+            diagnostics_1.expectWarningsFromTransform(config, [
+                // tslint:disable-next-line:max-line-length
+                { message: stylable_resolver_1.resolverWarnings.UNKNOWN_IMPORTED_SYMBOL('inner-class', './imported.st.css'), file: '/main.st.css', skip: true, skipLocationCheck: true },
+                { message: stylable_transformer_1.transformerWarnings.UNKNOWN_IMPORT_ALIAS('inner-class'), file: '/main.st.css' }
+            ]);
         });
+        describe('imports', function () {
+            it('should error on unresolved file', function () {
+                var config = {
+                    entry: '/main.st.css',
+                    files: {
+                        '/main.st.css': {
+                            namespace: 'entry',
+                            content: "\n                                :import{\n                                    |-st-from: \"$./missing.st.css$\";|\n                                }\n                            "
+                        }
+                    }
+                };
+                diagnostics_1.expectWarningsFromTransform(config, [{ message: stylable_resolver_1.resolverWarnings.UNKNOWN_IMPORTED_FILE('./missing.st.css'), file: '/main.st.css' }]);
+            });
+            it('should error on unresolved file from third party', function () {
+                var config = {
+                    entry: '/main.st.css',
+                    files: {
+                        '/main.st.css': {
+                            namespace: 'entry',
+                            content: "\n                                :import{\n                                    |-st-from: \"$missing-package/index.st.css$\";|\n                                }\n                            "
+                        }
+                    }
+                };
+                diagnostics_1.expectWarningsFromTransform(config, 
+                // tslint:disable-next-line:max-line-length
+                [{ message: stylable_resolver_1.resolverWarnings.UNKNOWN_IMPORTED_FILE('missing-package/index.st.css'), file: '/main.st.css' }]);
+            });
+            it('should error on unresolved named symbol', function () {
+                var config = {
+                    entry: '/main.st.css',
+                    files: {
+                        '/main.st.css': {
+                            namespace: 'entry',
+                            content: "\n                                :import{\n                                    -st-from: \"./imported.st.css\";\n                                    |-st-named: $Missing$;|\n                                }\n                            "
+                        },
+                        '/imported.st.css': {
+                            content: ".root{}"
+                        }
+                    }
+                };
+                diagnostics_1.expectWarningsFromTransform(config, 
+                // tslint:disable-next-line:max-line-length
+                [{ message: stylable_resolver_1.resolverWarnings.UNKNOWN_IMPORTED_SYMBOL('Missing', './imported.st.css'), file: '/main.st.css' }]);
+            });
+            it('should error on unresolved named symbol with alias', function () {
+                var config = {
+                    entry: '/main.st.css',
+                    files: {
+                        '/main.st.css': {
+                            namespace: 'entry',
+                            content: "\n                                :import{\n                                    -st-from: \"./imported.st.css\";\n                                    |-st-named: $Missing$ as LocalMissing;|\n                                }\n                            "
+                        },
+                        '/imported.st.css': {
+                            content: ".root{}"
+                        }
+                    }
+                };
+                diagnostics_1.expectWarningsFromTransform(config, 
+                // tslint:disable-next-line:max-line-length
+                [{ message: stylable_resolver_1.resolverWarnings.UNKNOWN_IMPORTED_SYMBOL('Missing', './imported.st.css'), file: '/main.st.css' }]);
+            });
+        });
     });
@@ -590,3 +693,3 @@ describe('functions', function () {
                 };
-                diagnostics_1.expectWarningsFromTransform(config, [{ message: "cannot find formatter: " + key, file: '/main.st.css' }]);
+                diagnostics_1.expectWarningsFromTransform(config, [{ message: src_1.functionWarnings.UNKNOWN_FORMATTER(key), file: '/main.st.css' }]);
             });
@@ -593,0 +696,0 @@ it('should warn a formatter throws an error', function () {

dist/tests/functions.spec.js

 "use strict";
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
+    result["default"] = mod;
+    return result;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 var chai_1 = require("chai");
+var src_1 = require("../src");
 var native_reserved_lists_1 = require("../src/native-reserved-lists");
-var path = require("../src/path");
+var path = __importStar(require("../src/path"));
 var diagnostics_1 = require("./utils/diagnostics");
@@ -385,3 +393,3 @@ var generate_test_util_1 = require("./utils/generate-test-util");
                 diagnostics_1.expectWarningsFromTransform(config, [
-                    { message: "cannot find formatter: " + key, file: '/main.st.css' }
+                    { message: src_1.functionWarnings.UNKNOWN_FORMATTER(key), file: '/main.st.css' }
                 ]);
@@ -388,0 +396,0 @@ });

dist/tests/intellisense/intellisense.spec.js

 "use strict";
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
+    result["default"] = mod;
+    return result;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 var chai_1 = require("chai");
-var postcss = require("postcss");
+var postcss = __importStar(require("postcss"));
 var stylable_utils_1 = require("../../src/stylable-utils");
@@ -6,0 +13,0 @@ var generate_test_util_1 = require("../utils/generate-test-util");

dist/tests/stylable-optimizer.spec.js

@@ -6,5 +6,12 @@ "use strict";
 };
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
+    result["default"] = mod;
+    return result;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 var chai_1 = require("chai");
-var postcss = require("postcss");
+var postcss = __importStar(require("postcss"));
 var stylable_optimizer_1 = require("../src/optimizer/stylable-optimizer");
@@ -11,0 +18,0 @@ var generate_test_util_1 = require("./utils/generate-test-util");

dist/tests/stylable-processor.spec.js

 "use strict";
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
+    result["default"] = mod;
+    return result;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-var chai = require("chai");
+var chai = __importStar(require("chai"));
 var path_1 = require("../src/path");
@@ -23,5 +30,12 @@ var stylable_processor_1 = require("../src/stylable-processor");
             type: 'error',
-            message: 'invalid namespace'
+            message: stylable_processor_1.processorWarnings.INVALID_NAMESPACE_DEF()
         });
     });
+    it('warn on empty-ish namespace', function () {
+        var diagnostics = generate_test_util_1.processSource("@namespace '   ';", { from: '/path/to/source' }).diagnostics;
+        expect(diagnostics.reports[0]).to.include({
+            type: 'error',
+            message: stylable_processor_1.processorWarnings.EMPTY_NAMESPACE_DEF()
+        });
+    });
     it('collect namespace', function () {
@@ -28,0 +42,0 @@ var from = path_1.resolve('/path/to/style.css');

dist/tests/stylable-resolver.spec.js

@@ -203,3 +203,3 @@ "use strict";
     });
-    it('should resolve 4rd party according to context', function () {
+    it('should resolve 4th party according to context', function () {
         var stylable = generate_test_util_1.createStylableInstance({
@@ -206,0 +206,0 @@ resolve: {

dist/tests/stylable-transformer/post-process-and-hooks.spec.js

 "use strict";
-var __assign = (this && this.__assign) || Object.assign || function(t) {
-    for (var s, i = 1, n = arguments.length; i < n; i++) {
-        s = arguments[i];
-        for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-            t[p] = s[p];
-    }
-    return t;
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
 };
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
+    result["default"] = mod;
+    return result;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 var chai_1 = require("chai");
-var path = require("../../src/path");
+var path = __importStar(require("../../src/path"));
 var generate_test_util_1 = require("../utils/generate-test-util");
@@ -14,0 +24,0 @@ describe('post-process-and-hooks', function () {

dist/tests/stylable-value-parsers.spec.js

 "use strict";
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
+    result["default"] = mod;
+    return result;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 var chai_1 = require("chai");
-var postcss = require("postcss");
+var postcss = __importStar(require("postcss"));
 var stylable_value_parsers_1 = require("../src/stylable-value-parsers");
@@ -6,0 +13,0 @@ var parseMixin = function (mixinValue) {

dist/tests/utils/generate-test-util.js

 "use strict";
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
+    result["default"] = mod;
+    return result;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-var postcss = require("postcss");
+var postcss = __importStar(require("postcss"));
 var cached_process_file_1 = require("../../src/cached-process-file");
@@ -5,0 +12,0 @@ var diagnostics_1 = require("../../src/diagnostics");

dist/tests/utils/test-utils.d.ts

@@ -0,4 +1,3 @@
+export * from './ast-matchers';
 export * from './generate-test-util';
-export * from './stylable-dom-util';
-export * from './ast-matchers';
 //# sourceMappingURL=test-utils.d.ts.map

dist/tests/utils/test-utils.js

@@ -6,5 +6,4 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+__export(require("./ast-matchers"));
 __export(require("./generate-test-util"));
-__export(require("./stylable-dom-util"));
-__export(require("./ast-matchers"));
 //# sourceMappingURL=test-utils.js.map

package.json

 {
   "name": "@stylable/core",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "description": "CSS for Components",
@@ -17,13 +17,13 @@ "main": "./dist/src/index.js",
   "dependencies": {
-    "clean-css": "^4.1.11",
+    "clean-css": "^4.2.1",
     "css-selector-tokenizer": "^0.7.0",
     "deindent": "^0.1.0",
-    "enhanced-resolve": "^4.0.0",
+    "enhanced-resolve": "^4.1.0",
     "is-vendor-prefixed": "^1.0.0",
     "lodash.clonedeep": "^4.5.0",
     "murmurhash": "^0.0.2",
-    "postcss": "^6.0.23",
-    "postcss-js": "^1.0.1",
+    "postcss": "^7.0.2",
+    "postcss-js": "^2.0.0",
     "postcss-nested": "^3.0.0",
-    "postcss-safe-parser": "^3.0.1",
+    "postcss-safe-parser": "^4.0.1",
     "postcss-selector-matches": "^3.0.1",
@@ -53,3 +53,3 @@ "postcss-value-parser": "^3.3.0",
   "license": "BSD-3-Clause",
-  "gitHead": "5dbe803f24fc6f14273ef678d0fa581a15d48469"
+  "gitHead": "1d8950a51e77383751ecc10d9b75375a8f0817b9"
 }

README.md

@@ -21,3 +21,3 @@ # @stylable/core
 - `stylable-processor` - Parses each `stylesheet` separately into its own AST ([abstract syntax tree](https://en.wikipedia.org/wiki/Abstract_syntax_tree), extracting the required data without any resolution of dependencies in other files.
-- `stylable-transformer` - Processes each stylesheeet using the previously created data including other file dependencies. Transforms our Stylable CSS into vanilla CSS.
+- `stylable-transformer` - Processes each stylesheet using the previously created data including other file dependencies. Transforms our Stylable CSS into vanilla CSS.
 
@@ -24,0 +24,0 @@ ## License

src/functions.ts

@@ -16,3 +16,3 @@ import * as postcss from 'postcss';
 /* tslint:disable:max-line-length */
-const errors = {
+export const functionWarnings = {
     FAIL_TO_EXECUTE_FORMATTER: (resolvedValue: string, message: string) => `failed to execute formatter "${resolvedValue}" with error: "${message}"`,
@@ -22,5 +22,5 @@ CYCLIC_VALUE: (cyclicChain: string[]) => `Cyclic value definition detected: "${cyclicChain.map((s, i) => (i === cyclicChain.length - 1 ? '↻ ' : i === 0 ? '→ ' : '↪ ') + s).join('\n')}"`,
     CANNOT_USE_JS_AS_VALUE: (varName: string) => `JavaScript import "${varName}" cannot be used as a variable`,
-    CANNOT_FIND_IMPORTED_VAR: (varName: string, path: string) => `cannot find export '${varName}' in '${path}'`,
+    CANNOT_FIND_IMPORTED_VAR: (varName: string) => `cannot use unknown imported "${varName}"`,
     MULTI_ARGS_IN_VALUE: (args: string) => `value function accepts only a single argument: "value(${args})"`,
-    UNKNOWN_FORMATTER: (name: string) => `cannot find formatter: ${name}`,
+    UNKNOWN_FORMATTER: (name: string) => `cannot find native function or custom formatter called ${name}`,
     UNKNOWN_VAR: (name: string) => `unknown var "${name}"`
@@ -34,2 +34,4 @@ };
     meta: StylableMeta,
+    diagnostics: Diagnostics,
+    node: postcss.Node,
     variableOverride?: Pojo<string>,
@@ -44,6 +46,6 @@ path?: string[]
             meta,
-            postcss.decl(),
+            node,
             variableOverride,
             transformer.replaceValueHook,
-            undefined,
+            diagnostics,
             path
@@ -83,3 +85,3 @@ );
                             if (diagnostics) {
-                                diagnostics.warn(node, errors.CYCLIC_VALUE(cyclicChain), {
+                                diagnostics.warn(node, functionWarnings.CYCLIC_VALUE(cyclicChain), {
                                     word: refUniqID
@@ -142,3 +144,3 @@ });
                                                 node,
-                                                errors.CANNOT_USE_AS_VALUE(errorKind, varName),
+                                                functionWarnings.CANNOT_USE_AS_VALUE(errorKind, varName),
                                                 { word: varName }
@@ -150,3 +152,3 @@ );
                                     // ToDo: provide actual exported id (default/named as x)
-                                    diagnostics.warn(node, errors.CANNOT_USE_JS_AS_VALUE(varName), {
+                                    diagnostics.warn(node, functionWarnings.CANNOT_USE_JS_AS_VALUE(varName), {
                                         word: varName
@@ -163,7 +165,4 @@ });
                                     diagnostics.error(
-                                        namedDecl,
-                                        errors.CANNOT_FIND_IMPORTED_VAR(
-                                            varName,
-                                            varSymbol.import.fromRelative
-                                        ),
+                                        node,
+                                        functionWarnings.CANNOT_FIND_IMPORTED_VAR(varName),
                                         { word: varName }
@@ -174,7 +173,7 @@ );
                         } else if (diagnostics) {
-                            diagnostics.warn(node, errors.UNKNOWN_VAR(varName), { word: varName });
+                            diagnostics.warn(node, functionWarnings.UNKNOWN_VAR(varName), { word: varName });
                         }
                     } else if (diagnostics) {
                         const argsAsString = args.filter((arg: string) => arg !== ', ').join(', ');
-                        diagnostics.warn(node, errors.MULTI_ARGS_IN_VALUE(argsAsString), {
+                        diagnostics.warn(node, functionWarnings.MULTI_ARGS_IN_VALUE(argsAsString), {
                             word: argsAsString
@@ -212,3 +211,3 @@ });
                                     node,
-                                    errors.FAIL_TO_EXECUTE_FORMATTER(
+                                    functionWarnings.FAIL_TO_EXECUTE_FORMATTER(
                                         parsedNode.resolvedValue,
@@ -224,3 +223,3 @@ error.message
                     } else if (diagnostics) {
-                        diagnostics.warn(node, errors.UNKNOWN_FORMATTER(value), { word: value });
+                        diagnostics.warn(node, functionWarnings.UNKNOWN_FORMATTER(value), { word: value });
                     }
@@ -227,0 +226,0 @@ }

src/parser.ts

@@ -1,2 +0,2 @@
-import * as postcss from 'postcss';
+import postcss from 'postcss';
 import { CSSObject } from './types';
@@ -3,0 +3,0 @@ const postcssJS = require('postcss-js');

src/stylable-meta.ts

@@ -58,2 +58,3 @@ import * as postcss from 'postcss';
     fromRelative: string;
+    context: string;
 }
@@ -60,0 +61,0 @@

src/stylable-mixins.ts

@@ -1,2 +0,2 @@
-import * as  postcss from 'postcss';
+import postcss from 'postcss';
 import { resolveArgumentsValue } from './functions';
@@ -12,2 +12,11 @@ import { cssObjectToAst } from './parser';
 
+/* tslint:disable:max-line-length */
+export const mixinWarnings = {
+    FAILED_TO_APPLY_MIXIN(error: string) { return `could not apply mixin: ${error}`; },
+    JS_MIXIN_NOT_A_FUNC() { return `js mixin must be a function`; },
+    CIRCULAR_MIXIN(circularPaths: string[]) { return `circular mixin found: ${circularPaths.join(' --> ')}`; },
+    UNKNOWN_MIXIN_SYMBOL(name: string) { return `cannot mixin unknown symbol "${name}"`; }
+};
+/* tslint:enable:max-line-length */
+
 export function appendMixins(
@@ -49,7 +58,10 @@ transformer: StylableTransformer,
                     } catch (e) {
-                        transformer.diagnostics.error(rule, 'could not apply mixin: ' + e, { word: mix.mixin.type });
+                        transformer.diagnostics.error(
+                            rule,
+                            mixinWarnings.FAILED_TO_APPLY_MIXIN(e),
+                            { word: mix.mixin.type });
                         return;
                     }
                 } else {
-                    transformer.diagnostics.error(rule, 'js mixin must be a function', { word: mix.mixin.type });
+                    transformer.diagnostics.error(rule, mixinWarnings.JS_MIXIN_NOT_A_FUNC(), { word: mix.mixin.type });
                 }
@@ -81,4 +93,3 @@ } else {
     if (isRecursive) {
-        transformer.diagnostics.warn(rule, `circular mixin found: ${path.join(' --> ')}`, { word: mix.ref.name });
-        // TODO: add warn
+        transformer.diagnostics.warn(rule, mixinWarnings.CIRCULAR_MIXIN(path), { word: mix.ref.name });
         return true;
@@ -125,2 +136,3 @@ }
     path: string[],
+    decl: postcss.Declaration,
     variableOverride?: Pojo<string>) {
@@ -137,3 +149,11 @@
     const namedArgs = mix.mixin.options as Pojo<string>;
-    const resolvedArgs = resolveArgumentsValue(namedArgs, transformer, meta, variableOverride, path);
+    const resolvedArgs = resolveArgumentsValue(
+        namedArgs,
+        transformer,
+        meta,
+        transformer.diagnostics,
+        decl,
+        variableOverride,
+        path
+    );
 
@@ -167,2 +187,3 @@ const mixinMeta: StylableMeta = isRootMixin ? resolvedClass.meta : createInheritedMeta(resolvedClass);
     while (resolvedClass && resolvedClass.symbol && resolvedClass._kind === 'css') {
+        const mixinDecl = getMixinDeclaration(rule) || postcss.decl();
         roots.push(createMixinRootFromCSSResolve(
@@ -174,2 +195,3 @@ transformer,
             path,
+            mixinDecl,
             variableOverride));
@@ -191,11 +213,11 @@ if (
     } else {
-        const importNode = findDeclaration(
-            (mix.ref as ImportSymbol).import,
-            (node: any) => node.prop === valueMapping.named
-        );
-        transformer.diagnostics.error(
-            importNode,
-            'import mixin does not exist',
-            { word: importNode.value }
-        );
+        const mixinDecl = getMixinDeclaration(rule);
+
+        if (mixinDecl) {
+            transformer.diagnostics.error(
+                mixinDecl,
+                mixinWarnings.UNKNOWN_MIXIN_SYMBOL(mixinDecl.value),
+                { word: mixinDecl.value }
+            );
+        }
     }
@@ -214,4 +236,14 @@ }
     const namedArgs = mix.mixin.options as Pojo<string>;
-    const resolvedArgs = resolveArgumentsValue(namedArgs, transformer, meta, variableOverride, path);
+    const mixinDecl = getMixinDeclaration(rule) || postcss.decl();
+    const resolvedArgs = resolveArgumentsValue(namedArgs,
+        transformer,
+        meta,
+        transformer.diagnostics,
+        mixinDecl,
+        variableOverride,
+        path
+    );
+
     const mixinRoot = createSubsetAst<postcss.Root>(meta.ast, '.' + mix.ref.name, undefined, isRootMixin);
+
     transformer.transformAst(
@@ -234,1 +266,7 @@ mixinRoot,
 }
+
+function getMixinDeclaration(rule: postcss.Rule): postcss.Declaration | undefined {
+    return (rule.nodes && rule.nodes.find(node => {
+        return node.type === 'decl' && node.prop === valueMapping.mixin;
+    }) as postcss.Declaration);
+}

src/stylable-processor.ts

@@ -44,3 +44,2 @@ import * as postcss from 'postcss';
     ILLEGAL_PROP_IN_IMPORT(propName: string) { return `"${propName}" css attribute cannot be used inside :import block`; },
-    FROM_PROP_MISSING_IN_IMPORT() { return `"${valueMapping.from}" is missing in :import block`; },
     STATE_DEFINITION_IN_ELEMENT() { return 'cannot define pseudo states inside element selectors'; },
@@ -53,3 +52,8 @@ STATE_DEFINITION_IN_COMPLEX() { return 'cannot define pseudo states inside complex selectors'; },
     OVERRIDE_MIXIN() { return `override mixin on same rule`; },
-    OVERRIDE_TYPED_RULE(key: string, name: string) { return `override "${key}" on typed rule "${name}"`; }
+    OVERRIDE_TYPED_RULE(key: string, name: string) { return `override "${key}" on typed rule "${name}"`; },
+    FROM_PROP_MISSING_IN_IMPORT() { return `"${valueMapping.from}" is missing in :import block`; },
+    INVALID_NAMESPACE_DEF() { return 'invalid @namespace'; },
+    EMPTY_NAMESPACE_DEF() { return '@namespace must contain at least one character or digit'; },
+    EMPTY_IMPORT_FROM() { return '"-st-from" cannot be empty'; },
+    MULTIPLE_FROM_IN_IMPORT() { return `cannot define multiple "${valueMapping.from}" declarations in a single import`; }
 };
@@ -113,4 +117,12 @@ /* tslint:enable:max-line-length */
                     const match = atRule.params.match(/["'](.*?)['"]/);
-                    match ? (namespace = match[1]) : this.diagnostics.error(atRule, 'invalid namespace');
-                    toRemove.push(atRule);
+                    if (match) {
+                        if (!!match[1].trim()) {
+                            namespace = match[1];
+                        } else {
+                            this.diagnostics.error(atRule, processorWarnings.EMPTY_NAMESPACE_DEF());
+                        }
+                        toRemove.push(atRule);
+                    } else {
+                        this.diagnostics.error(atRule, processorWarnings.INVALID_NAMESPACE_DEF());
+                    }
                     break;
@@ -386,5 +398,5 @@ case 'keyframes':
     protected handleImport(rule: postcss.Rule) {
-
+        let fromExists = false;
         const importObj: Imported = {
-            defaultExport: '', from: '', fromRelative: '', named: {}, rule
+            defaultExport: '', from: '', fromRelative: '', named: {}, rule, context: path.dirname(this.meta.source)
         };
@@ -396,2 +408,10 @@
                     const importPath = stripQuotation(decl.value);
+                    if (!importPath.trim()) {
+                        this.diagnostics.error(decl, processorWarnings.EMPTY_IMPORT_FROM());
+                    }
+
+                    if (fromExists) {
+                        this.diagnostics.warn(rule, processorWarnings.MULTIPLE_FROM_IN_IMPORT());
+                    }
+
                     if (!path.isAbsolute(importPath) && !importPath.startsWith('.')) {
@@ -404,2 +424,3 @@ importObj.fromRelative = importPath;
                     }
+                    fromExists = true;
                     break;
@@ -439,3 +460,2 @@ case valueMapping.default:
         return importObj;
-
     }
@@ -442,0 +462,0 @@ }

src/stylable-resolver.ts

 import { FileProcessor } from './cached-process-file';
+import { Diagnostics } from './diagnostics';
+import { Imported } from './stylable-meta';
 import { ImportSymbol, StylableMeta, StylableSymbol } from './stylable-processor';
@@ -6,2 +8,9 @@ import { StylableTransformer } from './stylable-transformer';
 
+/* tslint:disable:max-line-length */
+export const resolverWarnings = {
+    UNKNOWN_IMPORTED_FILE(path: string) { return `cannot resolve imported file: "${path}"`; },
+    UNKNOWN_IMPORTED_SYMBOL(name: string, path: string) { return `cannot resolve imported symbol "${name}" in stylesheet "${path}"`; }
+};
+/* tslint:enable:max-line-length */
+
 export interface CSSResolve {
@@ -24,6 +33,4 @@ _kind: 'css';
     ) {}
-    public resolveImport(importSymbol: ImportSymbol) {
-        const { context } = importSymbol;
-        const { from } = importSymbol.import;
-
+    public resolveImported(imported: Imported, name: string) {
+        const { context, from } = imported;
         let symbol: StylableSymbol;
@@ -34,2 +41,3 @@ if (from.match(/\.css$/)) {
                 meta = this.fileProcessor.process(from, false, context);
+                symbol = !name ? meta.mappedSymbols[meta.root] : meta.mappedSymbols[name];
             } catch (e) {
@@ -39,21 +47,18 @@ return null;
 
-            if (importSymbol.type === 'default') {
-                symbol = meta.mappedSymbols[meta.root];
-            } else {
-                symbol = meta.mappedSymbols[importSymbol.name];
-            }
-
             return { _kind: 'css', symbol, meta } as CSSResolve;
         } else {
             const _module = this.requireModule(from);
+            symbol = !name ?
+                _module.default || _module :
+                _module[name];
 
-            if (importSymbol.type === 'default') {
-                symbol = _module.default || _module;
-            } else {
-                symbol = _module[importSymbol.name];
-            }
-
             return { _kind: 'js', symbol, meta: null } as JSResolve;
         }
     }
+    public resolveImport(importSymbol: ImportSymbol) {
+        const name = importSymbol.type === 'named' ?
+            importSymbol.name :
+            '';
+        return this.resolveImported(importSymbol.import, name);
+    }
     public resolve(maybeImport: StylableSymbol | undefined): CSSResolve | JSResolve | null {
@@ -236,2 +241,36 @@ if (!maybeImport || maybeImport._kind !== 'import') {
     }
+    public validateImports(meta: StylableMeta, diagnostics: Diagnostics) {
+        for (const importObj of meta.imports) {
+            const resolvedImport = this.resolveImported(importObj, '');
+
+            if (!resolvedImport) {
+                // warn about unknown imported files
+                const fromDecl = importObj.rule.nodes &&
+                    importObj.rule.nodes.find(decl => decl.type === 'decl' && decl.prop === valueMapping.from);
+
+                if (fromDecl) {
+                    diagnostics.warn(
+                        fromDecl,
+                        resolverWarnings.UNKNOWN_IMPORTED_FILE(importObj.fromRelative),
+                        { word: importObj.fromRelative });
+                }
+
+            } else if (resolvedImport._kind === 'css') {
+                // warn about unknown named imported symbols
+                for (const name in importObj.named) {
+                    const origName = importObj.named[name];
+                    const resolvedSymbol = this.resolveImported(importObj, origName);
+                    const namedDecl = importObj.rule.nodes &&
+                        importObj.rule.nodes.find(decl => decl.type === 'decl' && decl.prop === valueMapping.named);
+
+                    if (!resolvedSymbol!.symbol && namedDecl) {
+                        diagnostics.warn(
+                            namedDecl,
+                            resolverWarnings.UNKNOWN_IMPORTED_SYMBOL(origName, importObj.fromRelative),
+                            { word: origName });
+                    }
+                }
+            }
+        }
+    }
 }

src/stylable-transformer.ts

@@ -0,1 +1,2 @@
+import cloneDeep from 'lodash.clonedeep';
 import * as postcss from 'postcss';
@@ -34,6 +35,4 @@ import { FileProcessor } from './cached-process-file';
 import { Pojo } from './types';
-import { deprecated } from './utils';
 
 const isVendorPrefixed = require('is-vendor-prefixed');
-const cloneDeep = require('lodash.clonedeep');
 const valueParser = require('postcss-value-parser');
@@ -100,2 +99,14 @@
 
+/* tslint:disable:max-line-length */
+export const transformerWarnings = {
+    SYMBOL_IN_USE(name: string) { return `symbol '${name}' is already in use`; },
+    UNKNOWN_PSEUDO_ELEMENT(name: string) { return `unknown pseudo element "${name}"`; },
+    IMPORT_ISNT_EXTENDABLE() { return 'import is not extendable'; },
+    CANNOT_EXTEND_UNKNOWN_SYMBOL(name: string) { return `cannot extend unknown symbol "${name}"`; },
+    CANNOT_EXTEND_JS() { return 'JS import is not extendable'; },
+    KEYFRAME_NAME_RESERVED(name: string) { return `keyframes "${name}" is reserved`; },
+    UNKNOWN_IMPORT_ALIAS(name: string) { return `cannot use alias for unknown import "${name}"`; }
+};
+/* tslint:enable:max-line-length */
+
 export class StylableTransformer {
@@ -138,2 +149,3 @@ public fileProcessor: FileProcessor<StylableMeta>;
         const keyframeMapping = this.scopeKeyframes(ast, meta);
+        this.resolver.validateImports(meta, this.diagnostics);
 
@@ -161,3 +173,2 @@ ast.walkRules((rule: SRule) => {
 
-            // TODO: filter out all irrelevant directives
             switch (decl.prop) {
@@ -196,3 +207,3 @@ case valueMapping.mixin:
                     varSymbol.node,
-                    `symbol '${varSymbol.name}' is already in use`,
+                    transformerWarnings.SYMBOL_IN_USE(varSymbol.name),
                     { word: varSymbol.name }
@@ -214,3 +225,6 @@ );
             if (metaExports[name] === keyframeMapping[name].value) {
-                this.diagnostics.warn(keyframeMapping[name].node, `symbol ${name} is already in use`, { word: name });
+                this.diagnostics.warn(
+                    keyframeMapping[name].node,
+                    transformerWarnings.SYMBOL_IN_USE(name),
+                    { word: name });
             } else {
@@ -251,2 +265,3 @@ metaExports[name] = keyframeMapping[name].value;
                     const resolved = this.resolver.deepResolve(extend);
+                    const found = findRule(meta.ast, '.' + classSymbol.name);
                     if (resolved && resolved._kind === 'css' && resolved.symbol) {
@@ -258,31 +273,24 @@ if (resolved.symbol._kind === 'class') {
                         } else {
-                            const found = findRule(meta.ast, '.' + classSymbol.name);
                             if (!!found) {
-                                this.diagnostics.error(found, 'import is not extendable', { word: found.value });
+                                this.diagnostics.error(
+                                    found,
+                                    transformerWarnings.IMPORT_ISNT_EXTENDABLE(),
+                                    { word: found.value });
                             }
                         }
-                    } else {
-                        const found = findRule(meta.ast, '.' + classSymbol.name);
-                        if (found && resolved) {
-                            if (!resolved.symbol) {
-                                const importNode = findDeclaration(
-                                    extend.import, (node: any) => node.prop === valueMapping.named
-                                );
-                                this.diagnostics.error(
-                                    importNode,
-                                    `Could not resolve '${found.value}'`,
-                                    { word: found.value }
-                                );
-                            } else {
-                                this.diagnostics.error(found, 'JS import is not extendable', { word: found.value });
-                            }
-                        } else {
+                    } else if (found && resolved) {
+                        if (!resolved.symbol) {
                             const importNode = findDeclaration(
-                                extend.import, (node: any) => node.prop === valueMapping.from
+                                extend.import, (node: any) => node.prop === valueMapping.named
                             );
                             this.diagnostics.error(
-                                importNode,
-                                `Imported file '${extend.import.from}' not found`,
-                                { word: importNode.value }
+                                found,
+                                transformerWarnings.CANNOT_EXTEND_UNKNOWN_SYMBOL(found.value),
+                                { word: found.value }
                             );
+                        } else {
+                            this.diagnostics.error(
+                                found,
+                                transformerWarnings.CANNOT_EXTEND_JS(),
+                                { word: found.value });
                         }
@@ -318,3 +326,3 @@ }
             if (!!~reservedKeyFrames.indexOf(name)) {
-                this.diagnostics.error(atRule, `keyframes ${name} is reserved`, { word: name });
+                this.diagnostics.error(atRule, transformerWarnings.KEYFRAME_NAME_RESERVED(name), { word: name });
             }
@@ -526,6 +534,6 @@ if (!keyframesExports[name]) {
                 }
-            } else {
+            } else if (rule) {
                 this.diagnostics.error(
-                    symbol.alias.import.rule,
-                    'Trying to import unknown alias',
+                    rule,
+                    transformerWarnings.UNKNOWN_IMPORT_ALIAS(name),
                     { word: symbol.alias.name }
@@ -686,3 +694,3 @@ );
                 this.diagnostics.warn(rule,
-                    `unknown pseudo element "${name}"`,
+                    transformerWarnings.UNKNOWN_PSEUDO_ELEMENT(name),
                     { word: name });
@@ -689,0 +697,0 @@ }

src/stylable-utils.ts

@@ -0,1 +1,2 @@
+import cloneDeep from 'lodash.clonedeep';
 import * as postcss from 'postcss';
@@ -25,3 +26,2 @@ import { Diagnostics } from './diagnostics';
 const replaceRuleSelector = require('postcss-selector-matches/dist/replaceRuleSelector');
-const cloneDeep = require('lodash.clonedeep');
 
@@ -74,3 +74,3 @@ export const CUSTOM_SELECTOR_RE = /:--[\w-]+/g;
         scopingSelectorAst.nodes.forEach(scopingSelector => {
-            const outputSelector = cloneDeep(targetSelector);
+            const outputSelector: any = cloneDeep(targetSelector);
 
@@ -102,3 +102,3 @@ outputSelector.before = scopingSelector.before || outputSelector.before;
             ) {
-                outputSelector.nodes.unshift(...cloneDeep(scopingSelector.nodes, true), {
+                outputSelector.nodes.unshift(...cloneDeep(scopingSelector.nodes), {
                     type: 'spacing',
@@ -111,3 +111,3 @@ value: ' '
                 if (node.type === 'invalid' && node.value === '&') {
-                    nodes.splice(i, 1, ...cloneDeep(scopingSelector.nodes, true));
+                    nodes.splice(i, 1, ...cloneDeep(scopingSelector.nodes));
                 }
@@ -114,0 +114,0 @@ });

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1083977

increased by1.9%

Lines of code

14996

increased by2%

Worsened metrics

Number of package files

269

decreased by-4.27%

Dependency changes

• + Addedcamelcase-css@2.0.1(transitive)

• + Addedpicocolors@0.2.1(transitive)

• + Addedpostcss@7.0.39(transitive)

• + Addedpostcss-js@2.0.3(transitive)

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

• - Removedcamelcase-css@1.0.1(transitive)

• - Removedpostcss-js@1.0.1(transitive)

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

• Updatedclean-css@^4.2.1

• Updatedenhanced-resolve@^4.1.0

• Updatedpostcss@^7.0.2

• Updatedpostcss-js@^2.0.0

• Updatedpostcss-safe-parser@^4.0.1