@stylable/core - npm Package Compare versions

Comparing version 5.13.0 to 5.14.0

dist/features/st-mixin.d.ts

@@ -92,3 +92,3 @@ import * as STSymbol from './st-symbol';
     UNSUPPORTED_MIXIN_SYMBOL: {
-        (name: string, symbolType: "element" | "var" | "class" | "layer" | "container" | "import" | "cssVar" | "keyframes"): import("../diagnostics").DiagnosticBase;
+        (name: string, symbolType: "element" | "container" | "var" | "class" | "layer" | "import" | "cssVar" | "keyframes"): import("../diagnostics").DiagnosticBase;
         code: string;
@@ -95,0 +95,0 @@ severity: import("../diagnostics").DiagnosticSeverity;

dist/features/st-mixin.js

@@ -358,4 +358,5 @@ "use strict";
 function collectOptionalArgs(context, mixinRoot, optionalArgs = new Set()) {
-    mixinRoot.walkDecls((decl) => {
-        const varNames = STVar.parseVarsFromExpr(decl.value);
+    mixinRoot.walk((node) => {
+        const value = node.type === 'decl' ? node.value : node.type === 'atrule' ? node.params : '';
+        const varNames = STVar.parseVarsFromExpr(value);
         for (const name of varNames) {
@@ -362,0 +363,0 @@ for (const refName of STVar.resolveReferencedVarNames(context, name)) {

dist/features/st-scope.d.ts

 import type { Stylable } from '../stylable';
 import type { ImmutablePseudoClass } from '@tokey/css-selector-parser';
 import * as postcss from 'postcss';
-export declare const diagnostics: {
-    MISSING_SCOPING_PARAM: {
-        (): import("../diagnostics").DiagnosticBase;
-        code: string;
-        severity: import("../diagnostics").DiagnosticSeverity;
-    };
-};
+export declare const diagnostics: {};
 export declare const hooks: import("./feature").FeatureHooks<{
@@ -12,0 +6,0 @@ IMMUTABLE_SELECTOR: ImmutablePseudoClass;

dist/features/st-scope.js

@@ -30,5 +30,8 @@ "use strict";
 const postcss = __importStar(require("postcss"));
-const diagnostics_1 = require("../diagnostics");
 exports.diagnostics = {
-    MISSING_SCOPING_PARAM: (0, diagnostics_1.createDiagnosticReporter)('11009', 'error', () => '"@st-scope" missing scoping selector parameter'),
+// INVALID_SCOPING: createDiagnosticReporter(
+//     '11009',
+//     'error',
+//     () => '"@st-scope" requires a valid selector or empty value'
+// ),
 };
@@ -41,5 +44,4 @@ // HOOKS
         }
-        if (!atRule.params) {
-            context.diagnostics.report(exports.diagnostics.MISSING_SCOPING_PARAM(), { node: atRule });
-        }
+        // notice: any value from params would be taken as a scoping
+        // selector to be prepended to nested selectors
         analyzeRule(postcss.rule({
@@ -46,0 +48,0 @@ selector: atRule.params,

dist/features/st-symbol.d.ts

@@ -72,5 +72,5 @@ import { FeatureContext } from './feature';
 export declare function getAll<NS extends keyof NamespaceToSymbolType = `main`>(meta: StylableMeta, ns?: NS): {
+    container: Record<string, ContainerSymbol>;
     main: Record<string, filterSymbols<"element" | "var" | "class" | "import" | "cssVar">>;
     layer: Record<string, LayerSymbol>;
-    container: Record<string, ContainerSymbol>;
     keyframes: Record<string, KeyframesSymbol>;
@@ -77,0 +77,0 @@ }[NS];

dist/functions.js

@@ -91,3 +91,3 @@ "use strict";
             else if (value === 'format') {
-                // preserve native format function quotation
+                // preserve native format function arg quotation
                 parsedNode.resolvedValue = (0, value_1.stringifyFunction)(value, parsedNode, true);
@@ -137,4 +137,5 @@ }
             }
-            else if ((0, native_reserved_lists_1.isCssNativeFunction)(value)) {
-                parsedNode.resolvedValue = (0, value_1.stringifyFunction)(value, parsedNode);
+            else if (native_reserved_lists_1.nativeFunctionsDic[value]) {
+                const { preserveQuotes } = native_reserved_lists_1.nativeFunctionsDic[value];
+                parsedNode.resolvedValue = (0, value_1.stringifyFunction)(value, parsedNode, preserveQuotes);
             }
@@ -141,0 +142,0 @@ else if (node) {

dist/native-reserved-lists.d.ts

@@ -11,82 +11,5 @@ export declare const nativePseudoClasses: string[];
 export declare const nativePseudoElements: string[];
-export declare const nativeFunctionsDic: {
-    annotation: boolean;
-    attr: boolean;
-    blur: boolean;
-    brightness: boolean;
-    calc: boolean;
-    'character-variant': boolean;
-    circle: boolean;
-    clamp: boolean;
-    'conic-gradient': boolean;
-    constant: boolean;
-    contrast: boolean;
-    counter: boolean;
-    counters: boolean;
-    'cubic-bezier': boolean;
-    'drop-shadow': boolean;
-    ellipse: boolean;
-    env: boolean;
-    'fit-content': boolean;
-    format: boolean;
-    grayscale: boolean;
-    hsl: boolean;
-    hsla: boolean;
-    'hue-rotate': boolean;
-    hwb: boolean;
-    image: boolean;
-    inset: boolean;
-    invert: boolean;
-    leader: boolean;
-    'linear-gradient': boolean;
-    local: boolean;
-    matrix: boolean;
-    matrix3d: boolean;
-    max: boolean;
-    min: boolean;
-    minmax: boolean;
-    opacity: boolean;
-    ornaments: boolean;
-    paint: boolean;
-    path: boolean;
-    perspective: boolean;
-    polygon: boolean;
-    'radial-gradient': boolean;
-    rect: boolean;
-    repeat: boolean;
-    'repeating-linear-gradient': boolean;
-    'repeating-radial-gradient': boolean;
-    'repeating-conic-gradient': boolean;
-    rgb: boolean;
-    rgba: boolean;
-    rotate: boolean;
-    rotate3d: boolean;
-    rotateX: boolean;
-    rotateY: boolean;
-    rotateZ: boolean;
-    saturate: boolean;
-    scale: boolean;
-    scale3d: boolean;
-    scaleX: boolean;
-    scaleY: boolean;
-    scaleZ: boolean;
-    sepia: boolean;
-    skew: boolean;
-    skewX: boolean;
-    skewY: boolean;
-    steps: boolean;
-    styleset: boolean;
-    stylistic: boolean;
-    swash: boolean;
-    symbols: boolean;
-    translate: boolean;
-    translate3d: boolean;
-    translateX: boolean;
-    translateY: boolean;
-    translateZ: boolean;
-    url: boolean;
-    var: boolean;
-};
-export type nativeFunctions = keyof typeof nativeFunctionsDic;
-export declare function isCssNativeFunction(name: string): name is nativeFunctions;
+export declare const nativeFunctionsDic: Record<string, {
+    preserveQuotes: boolean;
+}>;
 //# sourceMappingURL=native-reserved-lists.d.ts.map

dist/native-reserved-lists.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isCssNativeFunction = exports.nativeFunctionsDic = exports.nativePseudoElements = exports.knownPseudoClassesWithNestedSelectors = exports.reservedFunctionalPseudoClasses = exports.CSSWideKeywords = exports.nativePseudoClasses = void 0;
+exports.nativeFunctionsDic = exports.nativePseudoElements = exports.knownPseudoClassesWithNestedSelectors = exports.reservedFunctionalPseudoClasses = exports.CSSWideKeywords = exports.nativePseudoClasses = void 0;
 // MDN reference: https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes
@@ -103,83 +103,79 @@ exports.nativePseudoClasses = [
 exports.nativeFunctionsDic = {
-    annotation: true,
-    attr: true,
-    blur: true,
-    brightness: true,
-    calc: true,
-    'character-variant': true,
-    circle: true,
-    clamp: true,
-    'conic-gradient': true,
-    constant: true,
-    contrast: true,
-    counter: true,
-    counters: true,
-    'cubic-bezier': true,
-    'drop-shadow': true,
-    ellipse: true,
-    env: true,
-    'fit-content': true,
-    format: true,
-    grayscale: true,
-    hsl: true,
-    hsla: true,
-    'hue-rotate': true,
-    hwb: true,
-    image: true,
-    inset: true,
-    invert: true,
-    leader: true,
-    'linear-gradient': true,
-    local: true,
-    matrix: true,
-    matrix3d: true,
-    max: true,
-    min: true,
-    minmax: true,
-    opacity: true,
-    ornaments: true,
-    paint: true,
-    path: true,
-    perspective: true,
-    polygon: true,
-    'radial-gradient': true,
-    rect: true,
-    repeat: true,
-    'repeating-linear-gradient': true,
-    'repeating-radial-gradient': true,
-    'repeating-conic-gradient': true,
-    rgb: true,
-    rgba: true,
-    rotate: true,
-    rotate3d: true,
-    rotateX: true,
-    rotateY: true,
-    rotateZ: true,
-    saturate: true,
-    scale: true,
-    scale3d: true,
-    scaleX: true,
-    scaleY: true,
-    scaleZ: true,
-    sepia: true,
-    skew: true,
-    skewX: true,
-    skewY: true,
-    steps: true,
-    styleset: true,
-    stylistic: true,
-    swash: true,
-    symbols: true,
-    translate: true,
-    translate3d: true,
-    translateX: true,
-    translateY: true,
-    translateZ: true,
-    url: true,
-    var: true,
+    annotation: { preserveQuotes: false },
+    attr: { preserveQuotes: false },
+    blur: { preserveQuotes: false },
+    brightness: { preserveQuotes: false },
+    calc: { preserveQuotes: false },
+    'character-variant': { preserveQuotes: false },
+    circle: { preserveQuotes: false },
+    clamp: { preserveQuotes: false },
+    'conic-gradient': { preserveQuotes: false },
+    constant: { preserveQuotes: false },
+    contrast: { preserveQuotes: false },
+    counter: { preserveQuotes: false },
+    counters: { preserveQuotes: false },
+    'cubic-bezier': { preserveQuotes: false },
+    'drop-shadow': { preserveQuotes: false },
+    ellipse: { preserveQuotes: false },
+    env: { preserveQuotes: false },
+    'fit-content': { preserveQuotes: false },
+    format: { preserveQuotes: false },
+    grayscale: { preserveQuotes: false },
+    hsl: { preserveQuotes: false },
+    hsla: { preserveQuotes: false },
+    'hue-rotate': { preserveQuotes: false },
+    hwb: { preserveQuotes: false },
+    image: { preserveQuotes: false },
+    inset: { preserveQuotes: false },
+    invert: { preserveQuotes: false },
+    leader: { preserveQuotes: false },
+    'linear-gradient': { preserveQuotes: false },
+    local: { preserveQuotes: false },
+    matrix: { preserveQuotes: false },
+    matrix3d: { preserveQuotes: false },
+    max: { preserveQuotes: false },
+    min: { preserveQuotes: false },
+    minmax: { preserveQuotes: false },
+    opacity: { preserveQuotes: false },
+    ornaments: { preserveQuotes: false },
+    paint: { preserveQuotes: false },
+    path: { preserveQuotes: true },
+    perspective: { preserveQuotes: false },
+    polygon: { preserveQuotes: false },
+    'radial-gradient': { preserveQuotes: false },
+    rect: { preserveQuotes: false },
+    repeat: { preserveQuotes: false },
+    'repeating-linear-gradient': { preserveQuotes: false },
+    'repeating-radial-gradient': { preserveQuotes: false },
+    'repeating-conic-gradient': { preserveQuotes: false },
+    rgb: { preserveQuotes: false },
+    rgba: { preserveQuotes: false },
+    rotate: { preserveQuotes: false },
+    rotate3d: { preserveQuotes: false },
+    rotateX: { preserveQuotes: false },
+    rotateY: { preserveQuotes: false },
+    rotateZ: { preserveQuotes: false },
+    saturate: { preserveQuotes: false },
+    scale: { preserveQuotes: false },
+    scale3d: { preserveQuotes: false },
+    scaleX: { preserveQuotes: false },
+    scaleY: { preserveQuotes: false },
+    scaleZ: { preserveQuotes: false },
+    sepia: { preserveQuotes: false },
+    skew: { preserveQuotes: false },
+    skewX: { preserveQuotes: false },
+    skewY: { preserveQuotes: false },
+    steps: { preserveQuotes: false },
+    styleset: { preserveQuotes: false },
+    stylistic: { preserveQuotes: false },
+    swash: { preserveQuotes: false },
+    symbols: { preserveQuotes: false },
+    translate: { preserveQuotes: false },
+    translate3d: { preserveQuotes: false },
+    translateX: { preserveQuotes: false },
+    translateY: { preserveQuotes: false },
+    translateZ: { preserveQuotes: false },
+    url: { preserveQuotes: false },
+    var: { preserveQuotes: false },
 };
-function isCssNativeFunction(name) {
-    return exports.nativeFunctionsDic[name];
-}
-exports.isCssNativeFunction = isCssNativeFunction;
 //# sourceMappingURL=native-reserved-lists.js.map

dist/stylable-transformer.js

@@ -208,20 +208,14 @@ "use strict";
             }
-            if (this.mode === 'production') {
-                if (decl.prop.startsWith('-st-')) {
+            if (decl.prop.startsWith('-st-')) {
+                if (this.mode === 'production') {
                     this.directiveNodes.push(decl);
                 }
+                return;
             }
-            switch (decl.prop) {
-                case `-st-partial-mixin`:
-                case `-st-mixin`:
-                case `-st-states`:
-                    break;
-                default:
-                    decl.value = this.evaluator.evaluateValue(transformContext, {
-                        value: decl.value,
-                        meta,
-                        node: decl,
-                        cssVarsMapping,
-                    }).outputValue;
-            }
+            decl.value = this.evaluator.evaluateValue(transformContext, {
+                value: decl.value,
+                meta,
+                node: decl,
+                cssVarsMapping,
+            }).outputValue;
         };
@@ -228,0 +222,0 @@ ast.walk((node) => {

package.json

 {
   "name": "@stylable/core",
-  "version": "5.13.0",
+  "version": "5.14.0",
   "description": "CSS for Components",
@@ -14,3 +14,3 @@ "main": "dist/index.js",
     "@tokey/css-selector-parser": "^0.6.1",
-    "@tokey/css-value-parser": "^0.1.2",
+    "@tokey/css-value-parser": "^0.1.3",
     "@tokey/imports-parser": "^1.0.0",
@@ -17,0 +17,0 @@ "balanced-match": "^2.0.0",

src/features/st-mixin.ts

@@ -540,4 +540,5 @@ import { createFeature, FeatureTransformContext } from './feature';
 ) {
-    mixinRoot.walkDecls((decl) => {
-        const varNames = STVar.parseVarsFromExpr(decl.value);
+    mixinRoot.walk((node) => {
+        const value = node.type === 'decl' ? node.value : node.type === 'atrule' ? node.params : '';
+        const varNames = STVar.parseVarsFromExpr(value);
         for (const name of varNames) {
@@ -544,0 +545,0 @@ for (const refName of STVar.resolveReferencedVarNames(context, name)) {

src/features/st-scope.ts

@@ -7,10 +7,9 @@ import { createFeature } from './feature';
 import type { SRule } from '../deprecated/postcss-ast-extension';
-import { createDiagnosticReporter } from '../diagnostics';
 
 export const diagnostics = {
-    MISSING_SCOPING_PARAM: createDiagnosticReporter(
-        '11009',
-        'error',
-        () => '"@st-scope" missing scoping selector parameter'
-    ),
+    // INVALID_SCOPING: createDiagnosticReporter(
+    //     '11009',
+    //     'error',
+    //     () => '"@st-scope" requires a valid selector or empty value'
+    // ),
 };
@@ -25,5 +24,4 @@
         }
-        if (!atRule.params) {
-            context.diagnostics.report(diagnostics.MISSING_SCOPING_PARAM(), { node: atRule });
-        }
+        // notice: any value from params would be taken as a scoping
+        // selector to be prepended to nested selectors
         analyzeRule(
@@ -30,0 +28,0 @@ postcss.rule({

src/functions.ts

@@ -5,3 +5,3 @@ import { dirname, relative } from 'path';
 import { createDiagnosticReporter, Diagnostics } from './diagnostics';
-import { isCssNativeFunction } from './native-reserved-lists';
+import { nativeFunctionsDic } from './native-reserved-lists';
 import { assureRelativeUrlPrefix } from './stylable-assets';
@@ -184,3 +184,3 @@ import type { StylableMeta } from './stylable-meta';
             } else if (value === 'format') {
-                // preserve native format function quotation
+                // preserve native format function arg quotation
                 parsedNode.resolvedValue = stringifyFunction(value, parsedNode, true);
@@ -237,4 +237,5 @@ } else if (resolvedSymbols.js[value]) {
                 });
-            } else if (isCssNativeFunction(value)) {
-                parsedNode.resolvedValue = stringifyFunction(value, parsedNode);
+            } else if (nativeFunctionsDic[value]) {
+                const { preserveQuotes } = nativeFunctionsDic[value];
+                parsedNode.resolvedValue = stringifyFunction(value, parsedNode, preserveQuotes);
             } else if (node) {
@@ -241,0 +242,0 @@ parsedNode.resolvedValue = stringifyFunction(value, parsedNode);

src/native-reserved-lists.ts

@@ -105,84 +105,79 @@ // MDN reference: https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes
 
-export const nativeFunctionsDic = {
-    annotation: true,
-    attr: true,
-    blur: true,
-    brightness: true,
-    calc: true,
-    'character-variant': true,
-    circle: true,
-    clamp: true,
-    'conic-gradient': true,
-    constant: true,
-    contrast: true,
-    counter: true,
-    counters: true,
-    'cubic-bezier': true,
-    'drop-shadow': true,
-    ellipse: true,
-    env: true,
-    'fit-content': true,
-    format: true,
-    grayscale: true,
-    hsl: true,
-    hsla: true,
-    'hue-rotate': true,
-    hwb: true,
-    image: true,
-    inset: true,
-    invert: true,
-    leader: true,
-    'linear-gradient': true,
-    local: true,
-    matrix: true,
-    matrix3d: true,
-    max: true,
-    min: true,
-    minmax: true,
-    opacity: true,
-    ornaments: true,
-    paint: true,
-    path: true,
-    perspective: true,
-    polygon: true,
-    'radial-gradient': true,
-    rect: true,
-    repeat: true,
-    'repeating-linear-gradient': true,
-    'repeating-radial-gradient': true,
-    'repeating-conic-gradient': true,
-    rgb: true,
-    rgba: true,
-    rotate: true,
-    rotate3d: true,
-    rotateX: true,
-    rotateY: true,
-    rotateZ: true,
-    saturate: true,
-    scale: true,
-    scale3d: true,
-    scaleX: true,
-    scaleY: true,
-    scaleZ: true,
-    sepia: true,
-    skew: true,
-    skewX: true,
-    skewY: true,
-    steps: true,
-    styleset: true,
-    stylistic: true,
-    swash: true,
-    symbols: true,
-    translate: true,
-    translate3d: true,
-    translateX: true,
-    translateY: true,
-    translateZ: true,
-    url: true,
-    var: true,
+export const nativeFunctionsDic: Record<string, { preserveQuotes: boolean }> = {
+    annotation: { preserveQuotes: false },
+    attr: { preserveQuotes: false },
+    blur: { preserveQuotes: false },
+    brightness: { preserveQuotes: false },
+    calc: { preserveQuotes: false },
+    'character-variant': { preserveQuotes: false },
+    circle: { preserveQuotes: false },
+    clamp: { preserveQuotes: false },
+    'conic-gradient': { preserveQuotes: false },
+    constant: { preserveQuotes: false },
+    contrast: { preserveQuotes: false },
+    counter: { preserveQuotes: false },
+    counters: { preserveQuotes: false },
+    'cubic-bezier': { preserveQuotes: false },
+    'drop-shadow': { preserveQuotes: false },
+    ellipse: { preserveQuotes: false },
+    env: { preserveQuotes: false },
+    'fit-content': { preserveQuotes: false },
+    format: { preserveQuotes: false },
+    grayscale: { preserveQuotes: false },
+    hsl: { preserveQuotes: false },
+    hsla: { preserveQuotes: false },
+    'hue-rotate': { preserveQuotes: false },
+    hwb: { preserveQuotes: false },
+    image: { preserveQuotes: false },
+    inset: { preserveQuotes: false },
+    invert: { preserveQuotes: false },
+    leader: { preserveQuotes: false },
+    'linear-gradient': { preserveQuotes: false },
+    local: { preserveQuotes: false },
+    matrix: { preserveQuotes: false },
+    matrix3d: { preserveQuotes: false },
+    max: { preserveQuotes: false },
+    min: { preserveQuotes: false },
+    minmax: { preserveQuotes: false },
+    opacity: { preserveQuotes: false },
+    ornaments: { preserveQuotes: false },
+    paint: { preserveQuotes: false },
+    path: { preserveQuotes: true },
+    perspective: { preserveQuotes: false },
+    polygon: { preserveQuotes: false },
+    'radial-gradient': { preserveQuotes: false },
+    rect: { preserveQuotes: false },
+    repeat: { preserveQuotes: false },
+    'repeating-linear-gradient': { preserveQuotes: false },
+    'repeating-radial-gradient': { preserveQuotes: false },
+    'repeating-conic-gradient': { preserveQuotes: false },
+    rgb: { preserveQuotes: false },
+    rgba: { preserveQuotes: false },
+    rotate: { preserveQuotes: false },
+    rotate3d: { preserveQuotes: false },
+    rotateX: { preserveQuotes: false },
+    rotateY: { preserveQuotes: false },
+    rotateZ: { preserveQuotes: false },
+    saturate: { preserveQuotes: false },
+    scale: { preserveQuotes: false },
+    scale3d: { preserveQuotes: false },
+    scaleX: { preserveQuotes: false },
+    scaleY: { preserveQuotes: false },
+    scaleZ: { preserveQuotes: false },
+    sepia: { preserveQuotes: false },
+    skew: { preserveQuotes: false },
+    skewX: { preserveQuotes: false },
+    skewY: { preserveQuotes: false },
+    steps: { preserveQuotes: false },
+    styleset: { preserveQuotes: false },
+    stylistic: { preserveQuotes: false },
+    swash: { preserveQuotes: false },
+    symbols: { preserveQuotes: false },
+    translate: { preserveQuotes: false },
+    translate3d: { preserveQuotes: false },
+    translateX: { preserveQuotes: false },
+    translateY: { preserveQuotes: false },
+    translateZ: { preserveQuotes: false },
+    url: { preserveQuotes: false },
+    var: { preserveQuotes: false },
 };
-
-export type nativeFunctions = keyof typeof nativeFunctionsDic;
-export function isCssNativeFunction(name: string): name is nativeFunctions {
-    return nativeFunctionsDic[name as nativeFunctions];
-}

src/stylable-transformer.ts

@@ -305,21 +305,15 @@ import isVendorPrefixed from 'is-vendor-prefixed';
 
-            if (this.mode === 'production') {
-                if (decl.prop.startsWith('-st-')) {
+            if (decl.prop.startsWith('-st-')) {
+                if (this.mode === 'production') {
                     this.directiveNodes.push(decl);
                 }
+                return;
             }
 
-            switch (decl.prop) {
-                case `-st-partial-mixin`:
-                case `-st-mixin`:
-                case `-st-states`:
-                    break;
-                default:
-                    decl.value = this.evaluator.evaluateValue(transformContext, {
-                        value: decl.value,
-                        meta,
-                        node: decl,
-                        cssVarsMapping,
-                    }).outputValue;
-            }
+            decl.value = this.evaluator.evaluateValue(transformContext, {
+                value: decl.value,
+                meta,
+                node: decl,
+                cssVarsMapping,
+            }).outputValue;
         };
@@ -326,0 +320,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

1412999

increased by0.14%

Worsened metrics

Lines of code

25318

decreased by-0.39%

Dependency changes

• Updated@tokey/css-value-parser@^0.1.3