@stylable/core - npm Package Compare versions

Comparing version 5.2.1 to 5.3.0-rc.1

dist/features/css-class.d.ts

@@ -1,2 +0,2 @@
-import { FeatureContext } from './feature';
+import { FeatureContext, FeatureTransformContext } from './feature';
 import type { StylableDirectives } from './types';
@@ -8,3 +8,3 @@ import type { StylableSymbol } from './st-symbol';
 import { ImmutableClass, Class, SelectorNode, ImmutableSelectorNode } from '@tokey/css-selector-parser';
-import type * as postcss from 'postcss';
+import * as postcss from 'postcss';
 export interface ClassSymbol extends StylableDirectives {
@@ -73,2 +73,4 @@ _kind: 'class';
 originMeta: StylableMeta): void;
+export declare function addDevRules({ getResolvedSymbols, meta }: FeatureTransformContext): void;
+export declare function createWarningRule(extendedNode: string, scopedExtendedNode: string, extendedFile: string, extendingNode: string, scopedExtendingNode: string, extendingFile: string): postcss.Rule;
 export declare function validateClassScoping({ context, classSymbol, locallyScoped, reportUnscoped, node, nodes, index, rule, }: {
@@ -75,0 +77,0 @@ context: FeatureContext;

dist/features/css-class.js

@@ -26,3 +26,3 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.checkForScopedNodeAfter = exports.validateClassScoping = exports.namespaceClass = exports.addClass = exports.getAll = exports.get = exports.StylablePublicApi = exports.hooks = exports.diagnostics = void 0;
+exports.checkForScopedNodeAfter = exports.validateClassScoping = exports.createWarningRule = exports.addDevRules = exports.namespaceClass = exports.addClass = exports.getAll = exports.get = exports.StylablePublicApi = exports.hooks = exports.diagnostics = void 0;
 const feature_1 = require("./feature");
@@ -38,2 +38,4 @@ const diagnostics_1 = require("./diagnostics");
 const css_selector_parser_1 = require("@tokey/css-selector-parser");
+const postcss = __importStar(require("postcss"));
+const path_1 = require("path");
 const diagnostics_2 = require("../diagnostics");
@@ -84,2 +86,3 @@ exports.diagnostics = {
                             globalClasses.push(node.value);
+                            context.meta.globals[node.value] = true;
                         }
@@ -199,2 +202,51 @@ else {
 exports.namespaceClass = namespaceClass;
+function getNamespacedClass(meta, symbol) {
+    if (`-st-global` in symbol && symbol[`-st-global`]) {
+        const selector = symbol[`-st-global`];
+        return (0, css_selector_parser_1.stringifySelectorAst)(selector);
+    }
+    else {
+        return '.' + (0, escape_1.namespaceEscape)(symbol.name, meta.namespace);
+    }
+}
+function addDevRules({ getResolvedSymbols, meta }) {
+    const resolvedSymbols = getResolvedSymbols(meta);
+    for (const resolved of Object.values(resolvedSymbols.class)) {
+        const a = resolved[0];
+        if (resolved.length > 1 && a.symbol['-st-extends']) {
+            const b = resolved[resolved.length - 1];
+            meta.targetAst.append(createWarningRule('.' + b.symbol.name, getNamespacedClass(b.meta, b.symbol), (0, path_1.basename)(b.meta.source), '.' + a.symbol.name, getNamespacedClass(a.meta, a.symbol), (0, path_1.basename)(a.meta.source)));
+        }
+    }
+}
+exports.addDevRules = addDevRules;
+function createWarningRule(extendedNode, scopedExtendedNode, extendedFile, extendingNode, scopedExtendingNode, extendingFile) {
+    const message = `"class extending component '${extendingNode} => ${scopedExtendingNode}' in stylesheet '${extendingFile}' was set on a node that does not extend '${extendedNode} => ${scopedExtendedNode}' from stylesheet '${extendedFile}'" !important`;
+    return postcss.rule({
+        selector: `${scopedExtendingNode}:not(${scopedExtendedNode})::before`,
+        nodes: [
+            postcss.decl({
+                prop: 'content',
+                value: message,
+            }),
+            postcss.decl({
+                prop: 'display',
+                value: `block !important`,
+            }),
+            postcss.decl({
+                prop: 'font-family',
+                value: `monospace !important`,
+            }),
+            postcss.decl({
+                prop: 'background-color',
+                value: `red !important`,
+            }),
+            postcss.decl({
+                prop: 'color',
+                value: `white !important`,
+            }),
+        ],
+    });
+}
+exports.createWarningRule = createWarningRule;
 function validateClassScoping({ context, classSymbol, locallyScoped, reportUnscoped, node, nodes, index, rule, }) {
@@ -201,0 +253,0 @@ if (!classSymbol.alias) {

dist/features/css-custom-property.js

@@ -142,4 +142,5 @@ "use strict";
         if ((_a = atRule.nodes) === null || _a === void 0 ? void 0 : _a.length) {
-            if (resolved[atRule.params]) {
-                atRule.params = resolved[atRule.params] || atRule.params;
+            const propName = (0, global_1.globalValue)(atRule.params) || atRule.params;
+            if (resolved[propName]) {
+                atRule.params = resolved[propName] || atRule.params;
             }
@@ -146,0 +147,0 @@ }

dist/helpers/import.d.ts

@@ -93,4 +93,10 @@ import { Diagnostics } from '../diagnostics';
 declare type ImportPatch = Partial<Pick<Imported, 'defaultExport' | 'named' | 'keyframes'>> & Pick<Imported, 'request'>;
-export declare function tryCollectImportsDeep(stylable: Stylable, meta: StylableMeta, imports?: Set<string>): Set<string>;
+declare type ImportEvent = {
+    context: string;
+    request: string;
+    resolved: string;
+    depth: number;
+};
+export declare function tryCollectImportsDeep(stylable: Stylable, meta: StylableMeta, imports?: Set<string>, onImport?: undefined | ((e: ImportEvent) => void), depth?: number): Set<string>;
 export {};
 //# sourceMappingURL=import.d.ts.map

dist/helpers/import.js

@@ -434,9 +434,10 @@ "use strict";
 }
-function tryCollectImportsDeep(stylable, meta, imports = new Set()) {
+function tryCollectImportsDeep(stylable, meta, imports = new Set(), onImport = undefined, depth = 0) {
     for (const { context, request } of meta.getImportStatements()) {
         try {
             const resolved = stylable.resolver.resolvePath(context, request);
+            onImport === null || onImport === void 0 ? void 0 : onImport({ context, request, resolved, depth });
             if (!imports.has(resolved)) {
                 imports.add(resolved);
-                tryCollectImportsDeep(stylable, stylable.analyze(resolved), imports);
+                tryCollectImportsDeep(stylable, stylable.analyze(resolved), imports, onImport, depth + 1);
             }
@@ -443,0 +444,0 @@ }

dist/helpers/rule.d.ts

@@ -5,3 +5,2 @@ import { SelectorList } from '@tokey/css-selector-parser';
 export declare function isInConditionalGroup(node: postcss.Rule | postcss.AtRule, includeRoot?: boolean): any;
-export declare function createWarningRule(extendedNode: string, scopedExtendedNode: string, extendedFile: string, extendingNode: string, scopedExtendingNode: string, extendingFile: string, useScoped?: boolean): postcss.Rule;
 export declare function createSubsetAst<T extends postcss.Root | postcss.AtRule>(root: postcss.Root | postcss.AtRule, selectorPrefix: string, mixinTarget?: T, isRoot?: boolean, getCustomSelector?: (name: string) => SelectorList | undefined, scopeSelector?: string): T;
@@ -8,0 +7,0 @@ /** @deprecated internal for transformer  */

dist/helpers/rule.js

@@ -26,3 +26,3 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.findRule = exports.createSubsetAst = exports.createWarningRule = exports.isInConditionalGroup = exports.isChildOfAtRule = void 0;
+exports.findRule = exports.createSubsetAst = exports.isInConditionalGroup = exports.isChildOfAtRule = void 0;
 const selector_1 = require("./selector");
@@ -46,31 +46,2 @@ const css_selector_parser_1 = require("@tokey/css-selector-parser");
 exports.isInConditionalGroup = isInConditionalGroup;
-function createWarningRule(extendedNode, scopedExtendedNode, extendedFile, extendingNode, scopedExtendingNode, extendingFile, useScoped = false) {
-    const message = `"class extending component '.${extendingNode} => ${scopedExtendingNode}' in stylesheet '${extendingFile}' was set on a node that does not extend '.${extendedNode} => ${scopedExtendedNode}' from stylesheet '${extendedFile}'" !important`;
-    return postcss.rule({
-        selector: `.${useScoped ? scopedExtendingNode : extendingNode}:not(.${useScoped ? scopedExtendedNode : extendedNode})::before`,
-        nodes: [
-            postcss.decl({
-                prop: 'content',
-                value: message,
-            }),
-            postcss.decl({
-                prop: 'display',
-                value: `block !important`,
-            }),
-            postcss.decl({
-                prop: 'font-family',
-                value: `monospace !important`,
-            }),
-            postcss.decl({
-                prop: 'background-color',
-                value: `red !important`,
-            }),
-            postcss.decl({
-                prop: 'color',
-                value: `white !important`,
-            }),
-        ],
-    });
-}
-exports.createWarningRule = createWarningRule;
 function createSubsetAst(root, selectorPrefix, mixinTarget, isRoot = false, getCustomSelector, scopeSelector = '') {
@@ -77,0 +48,0 @@ // keyframes on class mixin?

dist/stylable-transformer.d.ts

@@ -82,3 +82,2 @@ import * as postcss from 'postcss';
     private handleCustomSelector;
-    private addDevRules;
 }
@@ -85,0 +84,0 @@ interface ScopeAnchor {

dist/stylable-transformer.js

@@ -32,3 +32,2 @@ "use strict";
 const lodash_clonedeep_1 = __importDefault(require("lodash.clonedeep"));
-const path_1 = require("path");
 const postcss = __importStar(require("postcss"));
@@ -47,3 +46,2 @@ const diagnostics_1 = require("./diagnostics");
 const css_custom_property_1 = require("./helpers/css-custom-property");
-const escape_1 = require("./helpers/escape");
 const postcss_ast_extension_1 = require("./deprecated/postcss-ast-extension");
@@ -190,3 +188,3 @@ const { hasOwnProperty } = Object.prototype;
         if (!mixinTransform && meta.targetAst && this.mode === 'development') {
-            this.addDevRules(meta);
+            features_2.CSSClass.addDevRules(transformContext);
         }
@@ -492,14 +490,2 @@ const lastPassParams = {
     }
-    addDevRules(meta) {
-        const resolvedSymbols = this.getResolvedSymbols(meta);
-        for (const [className, resolved] of Object.entries(resolvedSymbols.class)) {
-            if (resolved.length > 1) {
-                meta.targetAst.walkRules('.' + (0, escape_1.namespaceEscape)(className, meta.namespace), (rule) => {
-                    const a = resolved[0];
-                    const b = resolved[resolved.length - 1];
-                    rule.after((0, rule_1.createWarningRule)(b.symbol.name, (0, escape_1.namespaceEscape)(b.symbol.name, b.meta.namespace), (0, path_1.basename)(b.meta.source), a.symbol.name, (0, escape_1.namespaceEscape)(a.symbol.name, a.meta.namespace), (0, path_1.basename)(a.meta.source), true));
-                });
-            }
-        }
-    }
 }
@@ -506,0 +492,0 @@ exports.StylableTransformer = StylableTransformer;

package.json

 {
   "name": "@stylable/core",
-  "version": "5.2.1",
+  "version": "5.3.0-rc.1",
   "description": "CSS for Components",
@@ -24,5 +24,5 @@ "main": "dist/index.js",
     "lodash.clonedeepwith": "^4.5.0",
-    "postcss": "^8.4.16",
+    "postcss": "^8.4.18",
     "postcss-js": "^4.0.0",
-    "postcss-nested": "^5.0.6",
+    "postcss-nested": "^6.0.0",
     "postcss-safe-parser": "^6.0.0",
@@ -29,0 +29,0 @@ "postcss-value-parser": "^4.2.0"

src/features/css-class.ts

@@ -1,2 +0,2 @@
-import { createFeature, FeatureContext } from './feature';
+import { createFeature, FeatureContext, FeatureTransformContext } from './feature';
 import type { StylableDirectives } from './types';
@@ -22,3 +22,4 @@ import { generalDiagnostics } from './diagnostics';
 } from '@tokey/css-selector-parser';
-import type * as postcss from 'postcss';
+import * as postcss from 'postcss';
+import { basename } from 'path';
 import { createDiagnosticReporter } from '../diagnostics';
@@ -116,2 +117,3 @@
                                 globalClasses.push(node.value);
+                                context.meta.globals[node.value] = true;
                             } else {
@@ -241,3 +243,67 @@ isOnlyClasses = false;
 }
+function getNamespacedClass(meta: StylableMeta, symbol: StylableSymbol) {
+    if (`-st-global` in symbol && symbol[`-st-global`]) {
+        const selector = symbol[`-st-global`];
+        return stringifySelectorAst(selector as any);
+    } else {
+        return '.' + namespaceEscape(symbol.name, meta.namespace);
+    }
+}
 
+export function addDevRules({ getResolvedSymbols, meta }: FeatureTransformContext) {
+    const resolvedSymbols = getResolvedSymbols(meta);
+    for (const resolved of Object.values(resolvedSymbols.class)) {
+        const a = resolved[0];
+        if (resolved.length > 1 && a.symbol['-st-extends']) {
+            const b = resolved[resolved.length - 1];
+            meta.targetAst!.append(
+                createWarningRule(
+                    '.' + b.symbol.name,
+                    getNamespacedClass(b.meta, b.symbol),
+                    basename(b.meta.source),
+                    '.' + a.symbol.name,
+                    getNamespacedClass(a.meta, a.symbol),
+                    basename(a.meta.source)
+                )
+            );
+        }
+    }
+}
+
+export function createWarningRule(
+    extendedNode: string,
+    scopedExtendedNode: string,
+    extendedFile: string,
+    extendingNode: string,
+    scopedExtendingNode: string,
+    extendingFile: string
+) {
+    const message = `"class extending component '${extendingNode} => ${scopedExtendingNode}' in stylesheet '${extendingFile}' was set on a node that does not extend '${extendedNode} => ${scopedExtendedNode}' from stylesheet '${extendedFile}'" !important`;
+    return postcss.rule({
+        selector: `${scopedExtendingNode}:not(${scopedExtendedNode})::before`,
+        nodes: [
+            postcss.decl({
+                prop: 'content',
+                value: message,
+            }),
+            postcss.decl({
+                prop: 'display',
+                value: `block !important`,
+            }),
+            postcss.decl({
+                prop: 'font-family',
+                value: `monospace !important`,
+            }),
+            postcss.decl({
+                prop: 'background-color',
+                value: `red !important`,
+            }),
+            postcss.decl({
+                prop: 'color',
+                value: `white !important`,
+            }),
+        ],
+    });
+}
+
 export function validateClassScoping({
@@ -244,0 +310,0 @@ context,

src/features/css-custom-property.ts

@@ -171,4 +171,5 @@ import { createFeature, FeatureContext } from './feature';
         if (atRule.nodes?.length) {
-            if (resolved[atRule.params]) {
-                atRule.params = resolved[atRule.params] || atRule.params;
+            const propName = globalValue(atRule.params) || atRule.params;
+            if (resolved[propName]) {
+                atRule.params = resolved[propName] || atRule.params;
             }
@@ -175,0 +176,0 @@ } else {

src/helpers/import.ts

@@ -583,6 +583,15 @@ import path from 'path';
 
+type ImportEvent = {
+    context: string;
+    request: string;
+    resolved: string;
+    depth: number;
+};
+
 export function tryCollectImportsDeep(
     stylable: Stylable,
     meta: StylableMeta,
-    imports = new Set<string>()
+    imports = new Set<string>(),
+    onImport: undefined | ((e: ImportEvent) => void) = undefined,
+    depth = 0
 ) {
@@ -592,6 +601,13 @@ for (const { context, request } of meta.getImportStatements()) {
             const resolved = stylable.resolver.resolvePath(context, request);
+            onImport?.({ context, request, resolved, depth });
 
             if (!imports.has(resolved)) {
                 imports.add(resolved);
-                tryCollectImportsDeep(stylable, stylable.analyze(resolved), imports);
+                tryCollectImportsDeep(
+                    stylable,
+                    stylable.analyze(resolved),
+                    imports,
+                    onImport,
+                    depth + 1
+                );
             }
@@ -598,0 +614,0 @@ } catch (e) {

src/helpers/rule.ts

@@ -37,41 +37,2 @@ import {
 
-export function createWarningRule(
-    extendedNode: string,
-    scopedExtendedNode: string,
-    extendedFile: string,
-    extendingNode: string,
-    scopedExtendingNode: string,
-    extendingFile: string,
-    useScoped = false
-) {
-    const message = `"class extending component '.${extendingNode} => ${scopedExtendingNode}' in stylesheet '${extendingFile}' was set on a node that does not extend '.${extendedNode} => ${scopedExtendedNode}' from stylesheet '${extendedFile}'" !important`;
-    return postcss.rule({
-        selector: `.${useScoped ? scopedExtendingNode : extendingNode}:not(.${
-            useScoped ? scopedExtendedNode : extendedNode
-        })::before`,
-        nodes: [
-            postcss.decl({
-                prop: 'content',
-                value: message,
-            }),
-            postcss.decl({
-                prop: 'display',
-                value: `block !important`,
-            }),
-            postcss.decl({
-                prop: 'font-family',
-                value: `monospace !important`,
-            }),
-            postcss.decl({
-                prop: 'background-color',
-                value: `red !important`,
-            }),
-            postcss.decl({
-                prop: 'color',
-                value: `white !important`,
-            }),
-        ],
-    });
-}
-
 export function createSubsetAst<T extends postcss.Root | postcss.AtRule>(
@@ -78,0 +39,0 @@ root: postcss.Root | postcss.AtRule,

src/stylable-transformer.ts

 import isVendorPrefixed from 'is-vendor-prefixed';
 import cloneDeep from 'lodash.clonedeep';
-import { basename } from 'path';
 import * as postcss from 'postcss';
@@ -19,3 +18,3 @@ import type { FileProcessor } from './cached-process-file';
 } from '@tokey/css-selector-parser';
-import { createWarningRule, isChildOfAtRule } from './helpers/rule';
+import { isChildOfAtRule } from './helpers/rule';
 import { getOriginDefinition } from './helpers/resolve';
@@ -45,3 +44,2 @@ import { ClassSymbol, ElementSymbol, FeatureTransformContext, STNamespace } from './features';
 import { validateCustomPropertyName } from './helpers/css-custom-property';
-import { namespaceEscape } from './helpers/escape';
 import type { ModuleResolver } from './types';
@@ -273,3 +271,3 @@ import { getRuleScopeSelector } from './deprecated/postcss-ast-extension';
         if (!mixinTransform && meta.targetAst && this.mode === 'development') {
-            this.addDevRules(meta);
+            CSSClass.addDevRules(transformContext);
         }
@@ -641,27 +639,2 @@
     }
-    private addDevRules(meta: StylableMeta) {
-        const resolvedSymbols = this.getResolvedSymbols(meta);
-        for (const [className, resolved] of Object.entries(resolvedSymbols.class)) {
-            if (resolved.length > 1) {
-                meta.targetAst!.walkRules(
-                    '.' + namespaceEscape(className, meta.namespace),
-                    (rule) => {
-                        const a = resolved[0];
-                        const b = resolved[resolved.length - 1];
-                        rule.after(
-                            createWarningRule(
-                                b.symbol.name,
-                                namespaceEscape(b.symbol.name, b.meta.namespace),
-                                basename(b.meta.source),
-                                a.symbol.name,
-                                namespaceEscape(a.symbol.name, a.meta.namespace),
-                                basename(a.meta.source),
-                                true
-                            )
-                        );
-                    }
-                );
-            }
-        }
-    }
 }
@@ -668,0 +641,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

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

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

1100181

increased by0.15%

Lines of code

19691

increased by0.16%

Worsened metrics

Number of low quality alerts

1

increased byInfinity%

Dependency changes

• + Addedpostcss-nested@6.2.0(transitive)

• - Removedpostcss-nested@5.0.6(transitive)

• Updatedpostcss@^8.4.18

• Updatedpostcss-nested@^6.0.0