@stylable/core - npm Package Compare versions

Comparing version 4.5.1 to 4.6.0

dist/stylable-meta.d.ts

@@ -79,2 +79,3 @@ import type * as postcss from 'postcss';
     import?: Imported;
+    global?: boolean;
 }
@@ -81,0 +82,0 @@ export interface CSSVarSymbol {

dist/stylable-processor.d.ts

@@ -17,2 +17,3 @@ import * as postcss from 'postcss';
     REDECLARE_SYMBOL_KEYFRAMES(name: string): string;
+    KEYFRAME_NAME_RESERVED(name: string): string;
     CANNOT_RESOLVE_EXTEND(name: string): string;
@@ -37,2 +38,4 @@ CANNOT_EXTEND_IN_COMPLEX(): string;
     MISSING_SCOPING_PARAM(): string;
+    MISSING_KEYFRAMES_NAME(): string;
+    MISSING_KEYFRAMES_NAME_INSIDE_GLOBAL(): string;
     ILLEGAL_GLOBAL_CSS_VAR(name: string): string;
@@ -39,0 +42,0 @@ GLOBAL_CSS_VAR_MISSING_COMMA(name: string): string;

dist/stylable-processor.js

@@ -29,3 +29,2 @@ "use strict";
 exports.process = exports.processNamespace = exports.createEmptyMeta = exports.validateScopingSelector = exports.StylableProcessor = exports.processorWarnings = void 0;
-const murmurhash_1 = require("./murmurhash");
 const path_1 = __importDefault(require("path"));
@@ -36,2 +35,4 @@ const postcss = __importStar(require("postcss"));
 const diagnostics_1 = require("./diagnostics");
+const murmurhash_1 = require("./murmurhash");
+const native_reserved_lists_1 = require("./native-reserved-lists");
 const selector_utils_1 = require("./selector-utils");
@@ -79,2 +80,5 @@ const stylable_assets_1 = require("./stylable-assets");
     },
+    KEYFRAME_NAME_RESERVED(name) {
+        return `keyframes "${name}" is reserved`;
+    },
     CANNOT_RESOLVE_EXTEND(name) {
@@ -137,2 +141,8 @@ return `cannot resolve '${stylable_value_parsers_1.valueMapping.extends}' type for '${name}'`;
     },
+    MISSING_KEYFRAMES_NAME() {
+        return '"@keyframes" missing parameter';
+    },
+    MISSING_KEYFRAMES_NAME_INSIDE_GLOBAL() {
+        return `"@keyframes" missing parameter inside "${stylable_value_parsers_1.paramMapping.global}()"`;
+    },
     ILLEGAL_GLOBAL_CSS_VAR(name) {
@@ -241,9 +251,29 @@ return `"@st-global-custom-property" received the value "${name}", but it must begin with "--" (double-dash)`;
                         this.meta.keyframes.push(atRule);
-                        const { params: name } = atRule;
-                        this.checkRedeclareKeyframes(name, atRule);
-                        this.meta.mappedKeyframes[name] = {
-                            _kind: 'keyframes',
-                            alias: name,
-                            name: name,
-                        };
+                        let { params: name } = atRule;
+                        if (name) {
+                            let global;
+                            const globalName = utils_1.globalValue(name);
+                            if (globalName !== undefined) {
+                                name = globalName;
+                                global = true;
+                            }
+                            if (name === '') {
+                                this.diagnostics.warn(atRule, exports.processorWarnings.MISSING_KEYFRAMES_NAME_INSIDE_GLOBAL());
+                            }
+                            if (native_reserved_lists_1.reservedKeyFrames.includes(name)) {
+                                this.diagnostics.error(atRule, exports.processorWarnings.KEYFRAME_NAME_RESERVED(name), {
+                                    word: name,
+                                });
+                            }
+                            this.checkRedeclareKeyframes(name, atRule);
+                            this.meta.mappedKeyframes[name] = {
+                                _kind: 'keyframes',
+                                alias: name,
+                                name,
+                                global,
+                            };
+                        }
+                        else {
+                            this.diagnostics.warn(atRule, exports.processorWarnings.MISSING_KEYFRAMES_NAME());
+                        }
                     }
@@ -250,0 +280,0 @@ else {

dist/stylable-transformer.d.ts

@@ -6,3 +6,3 @@ import * as postcss from 'postcss';
 import type { ClassSymbol, ElementSymbol, StylableMeta, StylableSymbol } from './stylable-processor';
-import { CSSResolve, StylableResolverCache, StylableResolver } from './stylable-resolver';
+import { CSSResolve, StylableResolver, StylableResolverCache } from './stylable-resolver';
 export interface ResolvedElement {
@@ -65,3 +65,2 @@ name: string;
     CANNOT_EXTEND_JS(): string;
-    KEYFRAME_NAME_RESERVED(name: string): string;
     UNKNOWN_IMPORT_ALIAS(name: string): string;
@@ -68,0 +67,0 @@ };

dist/stylable-transformer.js

@@ -26,7 +26,7 @@ "use strict";
 exports.StylableTransformer = exports.transformerWarnings = void 0;
+const is_vendor_prefixed_1 = __importDefault(require("is-vendor-prefixed"));
+const lodash_clonedeep_1 = __importDefault(require("lodash.clonedeep"));
 const path_1 = require("path");
 const postcss = __importStar(require("postcss"));
 const postcss_value_parser_1 = __importDefault(require("postcss-value-parser"));
-const is_vendor_prefixed_1 = __importDefault(require("is-vendor-prefixed"));
-const lodash_clonedeep_1 = __importDefault(require("lodash.clonedeep"));
 const custom_values_1 = require("./custom-values");
@@ -41,2 +41,3 @@ const functions_1 = require("./functions");
 const stylable_value_parsers_1 = require("./stylable-value-parsers");
+const utils_1 = require("./utils");
 const { hasOwnProperty } = Object.prototype;
@@ -56,5 +57,2 @@ exports.transformerWarnings = {
     },
-    KEYFRAME_NAME_RESERVED(name) {
-        return `keyframes "${name}" is reserved`;
-    },
     UNKNOWN_IMPORT_ALIAS(name) {
@@ -155,8 +153,9 @@ return `cannot use alias for unknown import "${name}"`;
             const name = atRule.params;
-            if (~native_reserved_lists_1.reservedKeyFrames.indexOf(name)) {
-                this.diagnostics.error(atRule, exports.transformerWarnings.KEYFRAME_NAME_RESERVED(name), {
-                    word: name,
-                });
+            const globalName = utils_1.globalValue(name);
+            if (globalName === undefined) {
+                atRule.params = this.scope(name, meta.namespace);
             }
-            atRule.params = this.scope(name, meta.namespace);
+            else {
+                atRule.params = globalName;
+            }
         });
@@ -167,6 +166,8 @@ const keyframesExports = {};
             if (res) {
-                keyframesExports[key] = this.scope(res.symbol.alias, res.meta.namespace);
+                keyframesExports[key] = res.symbol.global
+                    ? res.symbol.alias
+                    : this.scope(res.symbol.alias, res.meta.namespace);
             }
         });
-        ast.walkDecls(/animation$|animation-name$/, (decl) => {
+        ast.walkDecls(stylable_value_parsers_1.animationPropRegExp, (decl) => {
             const parsed = postcss_value_parser_1.default(decl.value);
@@ -173,0 +174,0 @@ parsed.nodes.forEach((node) => {

dist/stylable-value-parsers.d.ts

@@ -54,5 +54,10 @@ import type * as postcss from 'postcss';
 };
+export declare const paramMapping: {
+    global: "st-global";
+};
 export declare const mixinDeclRegExp: RegExp;
 export declare type stKeys = keyof typeof valueMapping;
 export declare const stValues: string[];
+export declare const animationPropRegExp: RegExp;
+export declare const globalValueRegExp: RegExp;
 export declare const stValuesMap: Record<string, boolean>;
@@ -59,0 +64,0 @@ export declare const STYLABLE_VALUE_MATCHER: RegExp;

dist/stylable-value-parsers.js

@@ -6,3 +6,3 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.validateAllowedNodesUntil = exports.listOptions = exports.strategies = exports.groupValues = exports.getStringValue = exports.getFormatterArgs = exports.getNamedArgs = exports.SBTypesParsers = exports.STYLABLE_NAMED_MATCHER = exports.STYLABLE_VALUE_MATCHER = exports.stValuesMap = exports.stValues = exports.mixinDeclRegExp = exports.valueMapping = exports.rootValueMapping = exports.valueParserWarnings = void 0;
+exports.validateAllowedNodesUntil = exports.listOptions = exports.strategies = exports.groupValues = exports.getStringValue = exports.getFormatterArgs = exports.getNamedArgs = exports.SBTypesParsers = exports.STYLABLE_NAMED_MATCHER = exports.STYLABLE_VALUE_MATCHER = exports.stValuesMap = exports.globalValueRegExp = exports.animationPropRegExp = exports.stValues = exports.mixinDeclRegExp = exports.paramMapping = exports.valueMapping = exports.rootValueMapping = exports.valueParserWarnings = void 0;
 const postcss_value_parser_1 = __importDefault(require("postcss-value-parser"));
@@ -42,4 +42,9 @@ const pseudo_states_1 = require("./pseudo-states");
 };
+exports.paramMapping = {
+    global: 'st-global',
+};
 exports.mixinDeclRegExp = new RegExp(`(${exports.valueMapping.mixin})|(${exports.valueMapping.partialMixin})`);
 exports.stValues = Object.keys(exports.valueMapping).map((key) => exports.valueMapping[key]);
+exports.animationPropRegExp = /animation$|animation-name$/;
+exports.globalValueRegExp = new RegExp(`^${exports.paramMapping.global}\\((.*?)\\)$`);
 exports.stValuesMap = Object.keys(exports.valueMapping).reduce((acc, key) => {
@@ -46,0 +51,0 @@ acc[exports.valueMapping[key]] = true;

dist/utils.d.ts

@@ -0,1 +1,2 @@
+export declare function globalValue(str: string): string | undefined;
 export declare function stripQuotation(str: string): string;
@@ -2,0 +3,0 @@ export declare function filename2varname(filename: string): string;

dist/utils.js

 "use strict";
-// export function scope(name: string, namespace: string, separator: string = '-') {
-//     return namespace ? namespace + separator + name : name;
-// }
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.deprecated = exports.string2varname = exports.filename2varname = exports.stripQuotation = void 0;
+exports.deprecated = exports.string2varname = exports.filename2varname = exports.stripQuotation = exports.globalValue = void 0;
+const stylable_value_parsers_1 = require("./stylable-value-parsers");
+function globalValue(str) {
+    const match = str.match(stylable_value_parsers_1.globalValueRegExp);
+    return match === null || match === void 0 ? void 0 : match[1];
+}
+exports.globalValue = globalValue;
 function stripQuotation(str) {
@@ -8,0 +11,0 @@ return str.replace(/^['"](.*?)['"]$/g, '$1');

package.json

 {
   "name": "@stylable/core",
-  "version": "4.5.1",
+  "version": "4.6.0",
   "description": "CSS for Components",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

src/stylable-meta.ts

@@ -117,2 +117,3 @@ import type * as postcss from 'postcss';
     import?: Imported;
+    global?: boolean;
 }
@@ -119,0 +120,0 @@

src/stylable-processor.ts

@@ -1,2 +0,1 @@
-import { murmurhash3_32_gc } from './murmurhash';
 import path from 'path';
@@ -7,2 +6,4 @@ import * as postcss from 'postcss';
 import { Diagnostics } from './diagnostics';
+import { murmurhash3_32_gc } from './murmurhash';
+import { reservedKeyFrames } from './native-reserved-lists';
 import {
@@ -38,2 +39,3 @@ createSimpleSelectorChecker,
 import {
+    paramMapping,
     rootValueMapping,
@@ -45,3 +47,3 @@ SBTypesParsers,
 } from './stylable-value-parsers';
-import { deprecated, filename2varname, stripQuotation } from './utils';
+import { deprecated, filename2varname, globalValue, stripQuotation } from './utils';
 export * from './stylable-meta'; /* TEMP EXPORT */
@@ -85,2 +87,5 @@
     },
+    KEYFRAME_NAME_RESERVED(name: string) {
+        return `keyframes "${name}" is reserved`;
+    },
     CANNOT_RESOLVE_EXTEND(name: string) {
@@ -143,2 +148,8 @@ return `cannot resolve '${valueMapping.extends}' type for '${name}'`;
     },
+    MISSING_KEYFRAMES_NAME() {
+        return '"@keyframes" missing parameter';
+    },
+    MISSING_KEYFRAMES_NAME_INSIDE_GLOBAL() {
+        return `"@keyframes" missing parameter inside "${paramMapping.global}()"`;
+    },
     ILLEGAL_GLOBAL_CSS_VAR(name: string) {
@@ -266,9 +277,43 @@ return `"@st-global-custom-property" received the value "${name}", but it must begin with "--" (double-dash)`;
                         this.meta.keyframes.push(atRule);
-                        const { params: name } = atRule;
-                        this.checkRedeclareKeyframes(name, atRule);
-                        this.meta.mappedKeyframes[name] = {
-                            _kind: 'keyframes',
-                            alias: name,
-                            name: name,
-                        };
+                        let { params: name } = atRule;
+
+                        if (name) {
+                            let global: boolean | undefined;
+                            const globalName = globalValue(name);
+
+                            if (globalName !== undefined) {
+                                name = globalName;
+                                global = true;
+                            }
+
+                            if (name === '') {
+                                this.diagnostics.warn(
+                                    atRule,
+                                    processorWarnings.MISSING_KEYFRAMES_NAME_INSIDE_GLOBAL()
+                                );
+                            }
+
+                            if (reservedKeyFrames.includes(name)) {
+                                this.diagnostics.error(
+                                    atRule,
+                                    processorWarnings.KEYFRAME_NAME_RESERVED(name),
+                                    {
+                                        word: name,
+                                    }
+                                );
+                            }
+
+                            this.checkRedeclareKeyframes(name, atRule);
+                            this.meta.mappedKeyframes[name] = {
+                                _kind: 'keyframes',
+                                alias: name,
+                                name,
+                                global,
+                            };
+                        } else {
+                            this.diagnostics.warn(
+                                atRule,
+                                processorWarnings.MISSING_KEYFRAMES_NAME()
+                            );
+                        }
                     } else {
@@ -275,0 +320,0 @@ this.diagnostics.warn(atRule, processorWarnings.NO_KEYFRAMES_IN_ST_SCOPE());

src/stylable-transformer.ts

@@ -0,7 +1,6 @@
+import isVendorPrefixed from 'is-vendor-prefixed';
+import cloneDeep from 'lodash.clonedeep';
 import { basename } from 'path';
 import * as postcss from 'postcss';
 import postcssValueParser from 'postcss-value-parser';
-import isVendorPrefixed from 'is-vendor-prefixed';
-import cloneDeep from 'lodash.clonedeep';
-
 import type { FileProcessor } from './cached-process-file';
@@ -11,7 +10,3 @@ import { unbox } from './custom-values';
 import { evalDeclarationValue, processDeclarationValue } from './functions';
-import {
-    nativePseudoClasses,
-    nativePseudoElements,
-    reservedKeyFrames,
-} from './native-reserved-lists';
+import { nativePseudoClasses, nativePseudoElements } from './native-reserved-lists';
 import { setStateToNode, stateErrors, validateStateDefinition } from './pseudo-states';
@@ -39,5 +34,6 @@ import {
 } from './stylable-processor';
-import { CSSResolve, StylableResolverCache, StylableResolver } from './stylable-resolver';
+import { CSSResolve, StylableResolver, StylableResolverCache } from './stylable-resolver';
 import { findRule, generateScopedCSSVar, getDeclStylable, isCSSVarProp } from './stylable-utils';
-import { valueMapping } from './stylable-value-parsers';
+import { animationPropRegExp, valueMapping } from './stylable-value-parsers';
+import { globalValue } from './utils';
 
@@ -127,5 +123,2 @@ const { hasOwnProperty } = Object.prototype;
     },
-    KEYFRAME_NAME_RESERVED(name: string) {
-        return `keyframes "${name}" is reserved`;
-    },
     UNKNOWN_IMPORT_ALIAS(name: string) {
@@ -294,8 +287,9 @@ return `cannot use alias for unknown import "${name}"`;
             const name = atRule.params;
-            if (~reservedKeyFrames.indexOf(name)) {
-                this.diagnostics.error(atRule, transformerWarnings.KEYFRAME_NAME_RESERVED(name), {
-                    word: name,
-                });
+            const globalName = globalValue(name);
+
+            if (globalName === undefined) {
+                atRule.params = this.scope(name, meta.namespace);
+            } else {
+                atRule.params = globalName;
             }
-            atRule.params = this.scope(name, meta.namespace);
         });
@@ -307,8 +301,11 @@
             const res = this.resolver.resolveKeyframes(meta, key);
+
             if (res) {
-                keyframesExports[key] = this.scope(res.symbol.alias, res.meta.namespace);
+                keyframesExports[key] = res.symbol.global
+                    ? res.symbol.alias
+                    : this.scope(res.symbol.alias, res.meta.namespace);
             }
         });
 
-        ast.walkDecls(/animation$|animation-name$/, (decl: postcss.Declaration) => {
+        ast.walkDecls(animationPropRegExp, (decl: postcss.Declaration) => {
             const parsed = postcssValueParser(decl.value);
@@ -315,0 +312,0 @@ parsed.nodes.forEach((node) => {

src/stylable-value-parsers.ts

@@ -73,2 +73,6 @@ import type * as postcss from 'postcss';
 
+export const paramMapping = {
+    global: 'st-global' as const,
+};
+
 export const mixinDeclRegExp = new RegExp(`(${valueMapping.mixin})|(${valueMapping.partialMixin})`);
@@ -81,2 +85,7 @@
 );
+
+export const animationPropRegExp = /animation$|animation-name$/;
+
+export const globalValueRegExp = new RegExp(`^${paramMapping.global}\\((.*?)\\)$`);
+
 export const stValuesMap: Record<string, boolean> = Object.keys(valueMapping).reduce((acc, key) => {
@@ -83,0 +92,0 @@ acc[valueMapping[key as stKeys]] = true;

src/utils.ts

@@ -1,5 +0,8 @@
-// export function scope(name: string, namespace: string, separator: string = '-') {
-//     return namespace ? namespace + separator + name : name;
-// }
+import { globalValueRegExp } from './stylable-value-parsers';
 
+export function globalValue(str: string) {
+    const match = str.match(globalValueRegExp);
+    return match?.[1];
+}
+
 export function stripQuotation(str: string) {
@@ -6,0 +9,0 @@ return str.replace(/^['"](.*?)['"]$/g, '$1');

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

703037

increased by0.8%

Lines of code

12088

increased by0.77%

No dependency changes