@stylable/core - npm Package Compare versions

Comparing version 3.11.8 to 4.0.0-alpha.0

cjs/index.d.ts

@@ -23,4 +23,6 @@ export { safeParse } from './parser';
 export * from './module-resolver';
+export * from './report-diagnostic';
+export * from './visit-meta-css-dependencies';
 import * as pseudoStates from './pseudo-states';
 export { pseudoStates };
 //# sourceMappingURL=index.d.ts.map

cjs/index.js

@@ -49,4 +49,6 @@ "use strict";
 __exportStar(require("./module-resolver"), exports);
+__exportStar(require("./report-diagnostic"), exports);
+__exportStar(require("./visit-meta-css-dependencies"), exports);
 const pseudoStates = __importStar(require("./pseudo-states"));
 exports.pseudoStates = pseudoStates;
 //# sourceMappingURL=index.js.map

cjs/module-resolver.js

@@ -13,5 +13,6 @@ "use strict";
     const eResolver = ResolverFactory_1.default.createResolver({
+        ...resolveOptions,
         useSyncFileSystemCalls: true,
+        cache: false,
         fileSystem,
-        ...resolveOptions,
     });
@@ -18,0 +19,0 @@ return (directoryPath, request) => eResolver.resolveSync(resolverContext, directoryPath, request);

cjs/stylable-meta.d.ts

@@ -29,2 +29,3 @@ import * as postcss from 'postcss';
     mixins: RefedMixin[];
+    hasOwnGlobalSideEffects: boolean;
     outputAst?: postcss.Root;
@@ -31,0 +32,0 @@ globals: Record<string, boolean>;

cjs/stylable-meta.js

@@ -40,2 +40,3 @@ "use strict";
         this.transformedScopes = null;
+        this.hasOwnGlobalSideEffects = false;
     }
@@ -42,0 +43,0 @@ }

cjs/stylable-processor.d.ts

@@ -50,2 +50,3 @@ import * as postcss from 'postcss';
     protected checkRedeclareKeyframes(symbolName: string, node: postcss.Node): import("./stylable-meta").KeyframesSymbol;
+    protected checkForScopedNodeAfter(rule: postcss.Rule, nodes: SelectorAstNode[], index: number): boolean;
     protected addElementSymbolOnce(name: string, rule: postcss.Rule): void;
@@ -52,0 +53,0 @@ protected addClassSymbolOnce(name: string, rule: postcss.Rule): void;

cjs/stylable-processor.js

@@ -300,5 +300,7 @@ "use strict";
         const checker = selector_utils_1.createSimpleSelectorChecker();
-        const validRoot = selector_utils_1.isRootValid(rule.selectorAst, 'root');
         let locallyScoped = false;
         selector_utils_1.traverseNode(rule.selectorAst, (node, _index, _nodes) => {
+            if (node.type === 'selector') {
+                locallyScoped = false;
+            }
             if (!checker(node)) {
@@ -347,5 +349,11 @@ rule.isSimpleSelector = false;
                     else if (locallyScoped === false && !inStScope) {
-                        this.diagnostics.warn(rule, exports.processorWarnings.UNSCOPED_CLASS(name), {
-                            word: name,
-                        });
+                        if (this.checkForScopedNodeAfter(rule, _nodes, _index) === false) {
+                            this.meta.hasOwnGlobalSideEffects = true;
+                            this.diagnostics.warn(rule, exports.processorWarnings.UNSCOPED_CLASS(name), {
+                                word: name,
+                            });
+                        }
+                        else {
+                            locallyScoped = true;
+                        }
                     }
@@ -357,8 +365,19 @@ }
                 if (locallyScoped === false && !inStScope) {
-                    this.diagnostics.warn(rule, exports.processorWarnings.UNSCOPED_ELEMENT(name), {
-                        word: name,
-                    });
+                    if (this.checkForScopedNodeAfter(rule, _nodes, _index) === false) {
+                        this.meta.hasOwnGlobalSideEffects = true;
+                        this.diagnostics.warn(rule, exports.processorWarnings.UNSCOPED_ELEMENT(name), {
+                            word: name,
+                        });
+                    }
+                    else {
+                        locallyScoped = true;
+                    }
                 }
             }
             else if (type === 'nested-pseudo-class' && name === 'global') {
+                if (locallyScoped === false &&
+                    !inStScope &&
+                    this.checkForScopedNodeAfter(rule, _nodes, _index) === false) {
+                    this.meta.hasOwnGlobalSideEffects = true;
+                }
                 return true;
@@ -375,3 +394,3 @@ }
         }
-        if (!validRoot) {
+        if (!selector_utils_1.isRootValid(rule.selectorAst, 'root')) {
             this.diagnostics.warn(rule, exports.processorWarnings.ROOT_AFTER_SPACING());
@@ -397,2 +416,22 @@ }
     }
+    checkForScopedNodeAfter(rule, nodes, index) {
+        for (let i = index + 1; i < nodes.length; i++) {
+            const element = nodes[i];
+            if (!element) {
+                break;
+            }
+            if (element.type === 'spacing' || element.type === 'operator') {
+                break;
+            }
+            if (element.type === 'class') {
+                this.addClassSymbolOnce(element.name, rule);
+                if (this.meta.classes[element.name]) {
+                    if (!this.meta.classes[element.name].alias) {
+                        return true;
+                    }
+                }
+            }
+        }
+        return false;
+    }
     addElementSymbolOnce(name, rule) {
@@ -399,0 +438,0 @@ if (selector_utils_1.isCompRoot(name) && !this.meta.elements[name]) {

cjs/types.d.ts

 import * as postcss from 'postcss';
 import { Box } from './custom-values';
 import { StylableMeta } from './stylable-meta';
-import { StylableResults } from './stylable-transformer';
+import { StylableExports, StylableResults } from './stylable-transformer';
 export declare type PartialObject<T> = Partial<T> & object;
@@ -24,7 +24,15 @@ export declare type CSSObject = any & object;
 }
+export interface OptimizeConfig {
+    removeComments?: boolean;
+    removeStylableDirectives?: boolean;
+    removeUnusedComponents?: boolean;
+    classNameOptimizations?: boolean;
+    removeEmptyNodes?: boolean;
+    shortNamespaces?: boolean;
+}
 export interface IStylableOptimizer {
-    classNameOptimizer: IStylableClassNameOptimizer;
-    namespaceOptimizer: IStylableNamespaceOptimizer;
     minifyCSS(css: string): string;
-    optimize(config: object, stylableResult: StylableResults, usageMapping: Record<string, boolean>, delimiter?: string): void;
+    optimize(config: OptimizeConfig, stylableResult: StylableResults, usageMapping: Record<string, boolean>, delimiter?: string): void;
+    getNamespace(namespace: string): string;
+    optimizeAst(config: OptimizeConfig, outputAst: postcss.Root, usageMapping: Record<string, boolean>, delimiter: string | undefined, jsExports: StylableExports, globals: Record<string, boolean>): void;
     removeStylableDirectives(root: postcss.Root, shouldComment: boolean): void;
@@ -31,0 +39,0 @@ }

package.json

 {
   "name": "@stylable/core",
-  "version": "3.11.8",
+  "version": "4.0.0-alpha.0",
   "description": "CSS for Components",
@@ -11,3 +11,4 @@ "main": "./cjs/index.js",
     "test": "mocha \"./test/**/*.spec.ts\"",
-    "start": "webpack-dev-server --hot --inline"
+    "start": "webpack serve",
+    "prepack": "yarn build"
   },
@@ -18,3 +19,3 @@ "dependencies": {
     "enhanced-resolve": "^4.3.0",
-    "is-url-superb": "^4.0.0",
+    "is-url-superb": "^5.0.0",
     "is-vendor-prefixed": "^3.5.0",
@@ -24,3 +25,3 @@ "jest-docblock": "^26.0.0",
     "lodash.clonedeepwith": "^4.5.0",
-    "murmurhash": "^1.0.0",
+    "murmurhash": "^2.0.0",
     "postcss": "^8.1.10",
@@ -37,6 +38,7 @@ "postcss-js": "^3.0.3",
     "test-utils.js",
-    "test-utils.d.ts"
+    "test-utils.d.ts",
+    "webpack5.d.ts"
   ],
   "engines": {
-    "node": ">=10"
+    "node": ">=12"
   },
@@ -49,3 +51,4 @@ "publishConfig": {
   "author": "Wix.com",
-  "license": "BSD-3-Clause"
+  "license": "BSD-3-Clause",
+  "gitHead": "f794574e154eb415e0dc41bd6c459543704d952f"
 }

README.md

@@ -0,0 +0,0 @@ # @stylable/core

src/cached-process-file.ts

@@ -0,0 +0,0 @@ export type processFn<T> = (fullpath: string, content: string) => T;

src/create-infra-structure.ts

@@ -0,0 +0,0 @@ import path from 'path';

src/cssdocs.ts

@@ -0,0 +0,0 @@ import { extract, parseWithComments } from 'jest-docblock';

src/custom-values.ts

@@ -0,0 +0,0 @@ import cloneDeepWith from 'lodash.clonedeepwith';

src/diagnostics.ts

@@ -0,0 +0,0 @@ import * as postcss from 'postcss';

src/functions.ts

@@ -0,0 +0,0 @@ import { dirname, relative } from 'path';

src/index.ts

@@ -23,4 +23,6 @@ export { safeParse } from './parser';
 export * from './module-resolver';
+export * from './report-diagnostic';
+export * from './visit-meta-css-dependencies';
 
 import * as pseudoStates from './pseudo-states';
 export { pseudoStates };

src/memory-minimal-fs.ts

@@ -0,0 +0,0 @@ import { dirname } from 'path';

src/module-resolver.ts

@@ -12,5 +12,6 @@ // importing the factory directly, as we feed it our own fs, and don't want graceful-fs to be implicitly imported
     const eResolver = ResolverFactory.createResolver({
+        ...resolveOptions,
         useSyncFileSystemCalls: true,
+        cache: false,
         fileSystem,
-        ...resolveOptions,
     });
@@ -17,0 +18,0 @@

src/native-reserved-lists.ts

@@ -0,0 +0,0 @@ // MDN reference: https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes

src/parser.ts

@@ -0,0 +0,0 @@ import postcss, { ProcessOptions, Root } from 'postcss';

src/pseudo-states.ts

@@ -0,0 +0,0 @@ import * as postcss from 'postcss';

src/resolve-namespace-factories.ts

@@ -0,0 +0,0 @@ import hash from 'murmurhash';

src/selector-utils.ts

@@ -0,0 +0,0 @@ import * as postcss from 'postcss';

src/state-validators.ts

@@ -0,0 +0,0 @@ import { StateArguments } from './types';

src/stylable-assets.ts

@@ -0,0 +0,0 @@ import path from 'path';

src/stylable-meta.ts

@@ -29,2 +29,3 @@ import * as postcss from 'postcss';
     public mixins: RefedMixin[];
+    public hasOwnGlobalSideEffects: boolean;
     // Generated during transform
@@ -63,2 +64,3 @@ public outputAst?: postcss.Root;
         this.transformedScopes = null;
+        this.hasOwnGlobalSideEffects = false;
     }
@@ -65,0 +67,0 @@ }

src/stylable-mixins.ts

@@ -0,0 +0,0 @@ import { dirname } from 'path';

src/stylable-processor.ts

@@ -337,6 +337,9 @@ import hash from 'murmurhash';
         const checker = createSimpleSelectorChecker();
-        const validRoot = isRootValid(rule.selectorAst, 'root');
+
         let locallyScoped = false;
 
         traverseNode(rule.selectorAst, (node, _index, _nodes) => {
+            if (node.type === 'selector') {
+                locallyScoped = false;
+            }
             if (!checker(node)) {
@@ -396,5 +399,10 @@ rule.isSimpleSelector = false;
                     } else if (locallyScoped === false && !inStScope) {
-                        this.diagnostics.warn(rule, processorWarnings.UNSCOPED_CLASS(name), {
-                            word: name,
-                        });
+                        if (this.checkForScopedNodeAfter(rule, _nodes, _index) === false) {
+                            this.meta.hasOwnGlobalSideEffects = true;
+                            this.diagnostics.warn(rule, processorWarnings.UNSCOPED_CLASS(name), {
+                                word: name,
+                            });
+                        } else {
+                            locallyScoped = true;
+                        }
                     }
@@ -406,7 +414,19 @@ }
                 if (locallyScoped === false && !inStScope) {
-                    this.diagnostics.warn(rule, processorWarnings.UNSCOPED_ELEMENT(name), {
-                        word: name,
-                    });
+                    if (this.checkForScopedNodeAfter(rule, _nodes, _index) === false) {
+                        this.meta.hasOwnGlobalSideEffects = true;
+                        this.diagnostics.warn(rule, processorWarnings.UNSCOPED_ELEMENT(name), {
+                            word: name,
+                        });
+                    } else {
+                        locallyScoped = true;
+                    }
                 }
             } else if (type === 'nested-pseudo-class' && name === 'global') {
+                if (
+                    locallyScoped === false &&
+                    !inStScope &&
+                    this.checkForScopedNodeAfter(rule, _nodes, _index) === false
+                ) {
+                    this.meta.hasOwnGlobalSideEffects = true;
+                }
                 return true;
@@ -424,3 +444,3 @@ }
 
-        if (!validRoot) {
+        if (!isRootValid(rule.selectorAst, 'root')) {
             this.diagnostics.warn(rule, processorWarnings.ROOT_AFTER_SPACING());
@@ -449,2 +469,24 @@ }
 
+    protected checkForScopedNodeAfter(rule: postcss.Rule, nodes: SelectorAstNode[], index: number) {
+        for (let i = index + 1; i < nodes.length; i++) {
+            const element = nodes[i];
+            if (!element) {
+                break;
+            }
+            if (element.type === 'spacing' || element.type === 'operator') {
+                break;
+            }
+            if (element.type === 'class') {
+                this.addClassSymbolOnce(element.name, rule);
+
+                if (this.meta.classes[element.name]) {
+                    if (!this.meta.classes[element.name].alias) {
+                        return true;
+                    }
+                }
+            }
+        }
+        return false;
+    }
+
     protected addElementSymbolOnce(name: string, rule: postcss.Rule) {
@@ -451,0 +493,0 @@ if (isCompRoot(name) && !this.meta.elements[name]) {

src/stylable-resolver.ts

@@ -0,0 +0,0 @@ import { FileProcessor } from './cached-process-file';

src/stylable-transformer.ts

@@ -0,0 +0,0 @@ import { basename } from 'path';

src/stylable-utils.ts

@@ -0,0 +0,0 @@ import cloneDeep from 'lodash.clonedeep';

src/stylable-value-parsers.ts

@@ -0,0 +0,0 @@ import * as postcss from 'postcss';

src/stylable.ts

@@ -0,0 +0,0 @@ import { FileProcessor, MinimalFS } from './cached-process-file';

src/timed-cache.ts

@@ -0,0 +0,0 @@ export interface TimedCacheOptions {

src/types.ts

 import * as postcss from 'postcss';
 import { Box } from './custom-values';
 import { StylableMeta } from './stylable-meta';
-import { StylableResults } from './stylable-transformer';
+import { StylableExports, StylableResults } from './stylable-transformer';
 
@@ -30,8 +30,15 @@ export type PartialObject<T> = Partial<T> & object;
 
+export interface OptimizeConfig {
+    removeComments?: boolean;
+    removeStylableDirectives?: boolean;
+    removeUnusedComponents?: boolean;
+    classNameOptimizations?: boolean;
+    removeEmptyNodes?: boolean;
+    shortNamespaces?: boolean;
+}
+
 export interface IStylableOptimizer {
-    classNameOptimizer: IStylableClassNameOptimizer;
-    namespaceOptimizer: IStylableNamespaceOptimizer;
     minifyCSS(css: string): string;
     optimize(
-        config: object,
+        config: OptimizeConfig,
         stylableResult: StylableResults,
@@ -41,2 +48,11 @@ usageMapping: Record<string, boolean>,
     ): void;
+    getNamespace(namespace: string): string;
+    optimizeAst(
+        config: OptimizeConfig,
+        outputAst: postcss.Root,
+        usageMapping: Record<string, boolean>,
+        delimiter: string | undefined,
+        jsExports: StylableExports,
+        globals: Record<string, boolean>
+    ): void;
     removeStylableDirectives(root: postcss.Root, shouldComment: boolean): void;
@@ -43,0 +59,0 @@ }

src/utils.ts

@@ -0,0 +0,0 @@ // export function scope(name: string, namespace: string, separator: string = '-') {

New alerts

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

Improved metrics

Total package byte prevSize

737270

increased by3.37%

Number of package files

148

increased by7.25%

Lines of code

12515

increased by2.26%

Worsened metrics

Number of low quality alerts

1

increased byInfinity%

Dependency changes

• + Addedis-url-superb@5.0.0(transitive)

• + Addedmurmurhash@2.0.1(transitive)

• - Removedis-url-superb@4.0.0(transitive)

• - Removedmurmurhash@1.0.0(transitive)

• Updatedis-url-superb@^5.0.0

• Updatedmurmurhash@^2.0.0