@lwc/style-compiler 9.0.4-alpha.2 → 9.1.1-alpha.0

package/README.md

@@ -20,7 +20,7 @@ yarn add --dev @lwc/style-compiler
 ## Usage
 
 ```js
-const { transform } = require('@lwc/style-compiler');
+import { transform } from '@lwc/style-compiler';
 
 const source = `
     :host {

package/dist/{index.cjs.js → index.cjs}

@@ -7,7 +7,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var postcss = require('postcss');
 var shared = require('@lwc/shared');
-var postCssSelector = require('postcss-selector-parser');
+var postCssSelectorParser = require('postcss-selector-parser');
 var valueParser = require('postcss-value-parser');
 
 const PLUGIN_NAME = '@lwc/style-compiler';
@@ -404,7 +404,7 @@ function process$1(root, result, isScoped, ctx) {
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
  */
 function isDirPseudoClass(node) {
-    return postCssSelector.isPseudoClass(node) && node.value === ':dir';
+    return postCssSelectorParser.isPseudoClass(node) && node.value === ':dir';
 }
 
 function findNode(container, predicate) {
@@ -487,7 +487,7 @@ function validate(root, native, ctx) {
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
  */
 function isHostPseudoClass(node) {
-    return postCssSelector.isPseudoClass(node) && node.value === ':host';
+    return postCssSelectorParser.isPseudoClass(node) && node.value === ':host';
 }
 /**
  * Add scoping attributes to all the matching selectors:
@@ -500,7 +500,7 @@ function scopeSelector(selector) {
     // Split the selector per compound selector. Compound selectors are interleaved with combinator nodes.
     // https://drafts.csswg.org/selectors-4/#typedef-complex-selector
     selector.each((node) => {
-        if (postCssSelector.isCombinator(node)) {
+        if (postCssSelectorParser.isCombinator(node)) {
             compoundSelectors.push([]);
         }
         else {
@@ -519,11 +519,11 @@ function scopeSelector(selector) {
             let nodeToScope;
             // In each compound selector we need to locate the last selector to scope.
             for (const node of compoundSelector) {
-                if (!postCssSelector.isPseudoElement(node)) {
+                if (!postCssSelectorParser.isPseudoElement(node)) {
                     nodeToScope = node;
                 }
             }
-            const shadowAttribute = postCssSelector.attribute({
+            const shadowAttribute = postCssSelectorParser.attribute({
                 attribute: SHADOW_ATTRIBUTE,
                 value: undefined,
                 raws: {},
@@ -563,7 +563,7 @@ function transformHost(selector) {
         // Store the original location of the :host in the selector
         const hostIndex = selector.index(hostNode);
         // Swap the :host pseudo-class with the host scoping token
-        const hostAttribute = postCssSelector.attribute({
+        const hostAttribute = postCssSelectorParser.attribute({
             attribute: HOST_ATTRIBUTE,
             value: undefined,
             raws: {},
@@ -633,12 +633,12 @@ function transformDirPseudoClass (root, ctx) {
                 // I.e. we need to use a descendant selector (' ' combinator) relying on a `dir`
                 // attribute added to the host element. So we need two placeholders:
                 // `<synthetic_placeholder> .foo<native_placeholder>:not(.bar)`
-                const nativeAttribute = postCssSelector.attribute({
+                const nativeAttribute = postCssSelectorParser.attribute({
                     attribute: value === 'ltr' ? DIR_ATTRIBUTE_NATIVE_LTR : DIR_ATTRIBUTE_NATIVE_RTL,
                     value: undefined,
                     raws: {},
                 });
-                const syntheticAttribute = postCssSelector.attribute({
+                const syntheticAttribute = postCssSelectorParser.attribute({
                     attribute: value === 'ltr' ? DIR_ATTRIBUTE_SYNTHETIC_LTR : DIR_ATTRIBUTE_SYNTHETIC_RTL,
                     value: undefined,
                     raws: {},
@@ -646,9 +646,11 @@ function transformDirPseudoClass (root, ctx) {
                 node.replaceWith(nativeAttribute);
                 // If the selector is not empty and if the first node in the selector is not already a
                 // " " combinator, we need to use the descendant selector format
-                const shouldAddDescendantCombinator = selector.first && !postCssSelector.isCombinator(selector.first) && selector.first.value !== ' ';
+                const shouldAddDescendantCombinator = selector.first &&
+                    !postCssSelectorParser.isCombinator(selector.first) &&
+                    selector.first.value !== ' ';
                 if (shouldAddDescendantCombinator) {
-                    selector.insertBefore(selector.first, postCssSelector.combinator({
+                    selector.insertBefore(selector.first, postCssSelectorParser.combinator({
                         value: ' ',
                     }));
                     // Add the [dir] attribute in front of the " " combinator, i.e. as an ancestor
@@ -735,7 +737,7 @@ function shouldTransformSelector(rule) {
     return rule.parent?.type !== 'atrule' || rule.parent.name !== 'keyframes';
 }
 function selectorProcessorFactory(transformConfig, ctx) {
-    return postCssSelector((root) => {
+    return postCssSelectorParser((root) => {
         validateIdSelectors(root, ctx);
         transformSelector(root, transformConfig, ctx);
         transformDirPseudoClass(root, ctx);
@@ -843,7 +845,7 @@ class StyleCompilerCtx {
  * @param config Transformation options
  * @returns Transformed CSS
  * @example
- * const {transform} = require('@lwc/style-compiler');
+ * import { transform } from '@lwc/style-compiler';
  * const source = `
  *  :host {
  *    opacity: 0.4;
@@ -878,6 +880,7 @@ function transform(src, id, config = {}) {
     catch (error) {
         if (errorRecoveryMode && error instanceof postcss.CssSyntaxError) {
             ctx.errors.push(error);
+            // eslint-disable-next-line preserve-caught-error
             throw AggregateError(ctx.errors);
         }
         else {
@@ -891,5 +894,5 @@ function transform(src, id, config = {}) {
 }
 
 exports.transform = transform;
-/** version: 9.0.4-alpha.2 */
-//# sourceMappingURL=index.cjs.js.map
+/** version: 9.1.1-alpha.0 */
+//# sourceMappingURL=index.cjs.map

package/dist/index.js

@@ -3,7 +3,7 @@
  */
 import postcss, { CssSyntaxError } from 'postcss';
 import { LWC_VERSION_COMMENT, KEY__SCOPED_CSS, KEY__NATIVE_ONLY_CSS, getAPIVersionFromNumber } from '@lwc/shared';
-import postCssSelector, { isPseudoClass, isCombinator, isPseudoElement, attribute, combinator } from 'postcss-selector-parser';
+import postCssSelectorParser from 'postcss-selector-parser';
 import valueParser from 'postcss-value-parser';
 
 const PLUGIN_NAME = '@lwc/style-compiler';
@@ -400,7 +400,7 @@ function process$1(root, result, isScoped, ctx) {
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
  */
 function isDirPseudoClass(node) {
-    return isPseudoClass(node) && node.value === ':dir';
+    return postCssSelectorParser.isPseudoClass(node) && node.value === ':dir';
 }
 
 function findNode(container, predicate) {
@@ -483,7 +483,7 @@ function validate(root, native, ctx) {
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
  */
 function isHostPseudoClass(node) {
-    return isPseudoClass(node) && node.value === ':host';
+    return postCssSelectorParser.isPseudoClass(node) && node.value === ':host';
 }
 /**
  * Add scoping attributes to all the matching selectors:
@@ -496,7 +496,7 @@ function scopeSelector(selector) {
     // Split the selector per compound selector. Compound selectors are interleaved with combinator nodes.
     // https://drafts.csswg.org/selectors-4/#typedef-complex-selector
     selector.each((node) => {
-        if (isCombinator(node)) {
+        if (postCssSelectorParser.isCombinator(node)) {
             compoundSelectors.push([]);
         }
         else {
@@ -515,11 +515,11 @@ function scopeSelector(selector) {
             let nodeToScope;
             // In each compound selector we need to locate the last selector to scope.
             for (const node of compoundSelector) {
-                if (!isPseudoElement(node)) {
+                if (!postCssSelectorParser.isPseudoElement(node)) {
                     nodeToScope = node;
                 }
             }
-            const shadowAttribute = attribute({
+            const shadowAttribute = postCssSelectorParser.attribute({
                 attribute: SHADOW_ATTRIBUTE,
                 value: undefined,
                 raws: {},
@@ -559,7 +559,7 @@ function transformHost(selector) {
         // Store the original location of the :host in the selector
         const hostIndex = selector.index(hostNode);
         // Swap the :host pseudo-class with the host scoping token
-        const hostAttribute = attribute({
+        const hostAttribute = postCssSelectorParser.attribute({
             attribute: HOST_ATTRIBUTE,
             value: undefined,
             raws: {},
@@ -629,12 +629,12 @@ function transformDirPseudoClass (root, ctx) {
                 // I.e. we need to use a descendant selector (' ' combinator) relying on a `dir`
                 // attribute added to the host element. So we need two placeholders:
                 // `<synthetic_placeholder> .foo<native_placeholder>:not(.bar)`
-                const nativeAttribute = attribute({
+                const nativeAttribute = postCssSelectorParser.attribute({
                     attribute: value === 'ltr' ? DIR_ATTRIBUTE_NATIVE_LTR : DIR_ATTRIBUTE_NATIVE_RTL,
                     value: undefined,
                     raws: {},
                 });
-                const syntheticAttribute = attribute({
+                const syntheticAttribute = postCssSelectorParser.attribute({
                     attribute: value === 'ltr' ? DIR_ATTRIBUTE_SYNTHETIC_LTR : DIR_ATTRIBUTE_SYNTHETIC_RTL,
                     value: undefined,
                     raws: {},
@@ -642,9 +642,11 @@ function transformDirPseudoClass (root, ctx) {
                 node.replaceWith(nativeAttribute);
                 // If the selector is not empty and if the first node in the selector is not already a
                 // " " combinator, we need to use the descendant selector format
-                const shouldAddDescendantCombinator = selector.first && !isCombinator(selector.first) && selector.first.value !== ' ';
+                const shouldAddDescendantCombinator = selector.first &&
+                    !postCssSelectorParser.isCombinator(selector.first) &&
+                    selector.first.value !== ' ';
                 if (shouldAddDescendantCombinator) {
-                    selector.insertBefore(selector.first, combinator({
+                    selector.insertBefore(selector.first, postCssSelectorParser.combinator({
                         value: ' ',
                     }));
                     // Add the [dir] attribute in front of the " " combinator, i.e. as an ancestor
@@ -731,7 +733,7 @@ function shouldTransformSelector(rule) {
     return rule.parent?.type !== 'atrule' || rule.parent.name !== 'keyframes';
 }
 function selectorProcessorFactory(transformConfig, ctx) {
-    return postCssSelector((root) => {
+    return postCssSelectorParser((root) => {
         validateIdSelectors(root, ctx);
         transformSelector(root, transformConfig, ctx);
         transformDirPseudoClass(root, ctx);
@@ -839,7 +841,7 @@ class StyleCompilerCtx {
  * @param config Transformation options
  * @returns Transformed CSS
  * @example
- * const {transform} = require('@lwc/style-compiler');
+ * import { transform } from '@lwc/style-compiler';
  * const source = `
  *  :host {
  *    opacity: 0.4;
@@ -874,6 +876,7 @@ function transform(src, id, config = {}) {
     catch (error) {
         if (errorRecoveryMode && error instanceof postcss.CssSyntaxError) {
             ctx.errors.push(error);
+            // eslint-disable-next-line preserve-caught-error
             throw AggregateError(ctx.errors);
         }
         else {
@@ -887,5 +890,5 @@ function transform(src, id, config = {}) {
 }
 
 export { transform };
-/** version: 9.0.4-alpha.2 */
+/** version: 9.1.1-alpha.0 */
 //# sourceMappingURL=index.js.map

package/dist/transform.d.ts

@@ -24,7 +24,7 @@ export interface Config {
  * @param config Transformation options
  * @returns Transformed CSS
  * @example
- * const {transform} = require('@lwc/style-compiler');
+ * import { transform } from '@lwc/style-compiler';
  * const source = `
  *  :host {
  *    opacity: 0.4;

package/package.json

@@ -4,7 +4,7 @@
         "You can safely modify dependencies, devDependencies, keywords, etc., but other props will be overwritten."
     ],
     "name": "@lwc/style-compiler",
-    "version": "9.0.4-alpha.2",
+    "version": "9.1.1-alpha.0",
     "description": "Transform style sheet to be consumed by the LWC engine",
     "keywords": [
         "lwc"
@@ -19,17 +19,22 @@
         "url": "https://github.com/salesforce/lwc/issues"
     },
     "license": "MIT",
+    "type": "module",
     "publishConfig": {
         "access": "public"
     },
+    "engines": {
+        "node": ">=16.6.0"
+    },
     "volta": {
         "extends": "../../../package.json"
     },
-    "main": "dist/index.cjs.js",
+    "main": "dist/index.js",
     "module": "dist/index.js",
     "types": "dist/index.d.ts",
     "files": [
         "dist/**/*.js",
+        "dist/**/*.cjs",
         "dist/**/*.d.ts"
     ],
     "scripts": {
@@ -46,7 +51,7 @@
         }
     },
     "dependencies": {
-        "@lwc/shared": "9.0.4-alpha.2",
+        "@lwc/shared": "9.1.1-alpha.0",
         "postcss": "~8.5.8",
         "postcss-selector-parser": "~7.1.1",
         "postcss-value-parser": "~4.2.0"