svelte-preprocess-cssmodules - npm Package Compare versions

Comparing version 2.0.2 to 2.1.0-rc.1

CHANGELOG.md

 # Svelte preprocess CSS Modules, changelog
 
+## 2.1.0-rc.1 (Oct 6, 2021)
+- Add ESM distribution
+
 ## 2.0.2 (May 26, 2021)
@@ -4,0 +7,0 @@ - Fix Readme

dist/index.js

@@ -64,3 +64,3 @@ "use strict";
 });
-exports.default = exports = module.exports = (options) => {
+exports.default = module.exports = (options) => {
     pluginOptions = Object.assign(Object.assign({}, pluginOptions), options);
@@ -67,0 +67,0 @@ return {

dist/lib/createClassName.d.ts

@@ -1,3 +0,3 @@
-import { PluginOptions } from '../types';
+import type { PluginOptions } from '../types';
 declare function createCssModulesClassName(filename: string, markup: string, style: string, className: string, pluginOptions: PluginOptions): string;
 export default createCssModulesClassName;

dist/lib/createClassName.js

@@ -7,3 +7,3 @@ "use strict";
 const path_1 = __importDefault(require("path"));
-const loader_utils_1 = require("loader-utils");
+const getHashDijest_1 = __importDefault(require("./getHashDijest"));
 const PATTERN_PATH_UNALLOWED = /[<>:"/\\|?*]/g;
@@ -34,3 +34,3 @@ function interpolateName(resourcePath, localName, content) {
     if (content) {
-        url = url.replace(/\[(?:([^:\]]+):)?(?:hash|contenthash)(?::([a-z]+\d*))?(?::(\d+))?\]/gi, (all, hashType, digestType, maxLength) => loader_utils_1.getHashDigest(content, hashType, digestType, parseInt(maxLength, 10)));
+        url = url.replace(/\[(?:([^:\]]+):)?(?:hash|contenthash)(?::([a-z]+\d*))?(?::(\d+))?\]/gi, (all, hashType, digestType, maxLength) => getHashDijest_1.default(content, hashType, digestType, parseInt(maxLength, 10)));
     }
@@ -37,0 +37,0 @@ return url

dist/parsers/importDeclaration.d.ts

@@ -1,3 +0,3 @@
-import Processor from '../processors/processor';
+import type Processor from '../processors/processor';
 declare const _default: (processor: Processor) => void;
 export default _default;

dist/parsers/importDeclaration.js

@@ -25,7 +25,8 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const compiler_1 = require("svelte/compiler");
 const path_1 = __importDefault(require("path"));
 const fs_1 = __importStar(require("fs"));
 const magic_string_1 = __importDefault(require("magic-string"));
+const compiler_1 = require("svelte/compiler");
 exports.default = (processor) => {
+    const ast = processor.ast;
     const backup = {
@@ -36,4 +37,5 @@ ast: processor.ast,
     let importedContent = '';
-    compiler_1.walk(processor.ast, {
-        enter(node) {
+    compiler_1.walk(ast, {
+        enter(baseNode) {
+            const node = baseNode;
             if (node.type === 'Style' || node.type === 'Fragment') {
@@ -40,0 +42,0 @@ this.skip();

dist/parsers/template.d.ts

@@ -1,3 +0,3 @@
-import Processor from '../processors/processor';
+import type Processor from '../processors/processor';
 declare const _default: (processor: Processor) => void;
 export default _default;

dist/parsers/template.js

@@ -27,4 +27,5 @@ "use strict";
     const allowedAttributes = ['class', ...processor.options.allowedAttributes];
-    compiler_1.walk(processor.ast, {
-        enter(node) {
+    compiler_1.walk(processor.ast.html, {
+        enter(baseNode) {
+            const node = baseNode;
             if (node.type === 'Script' || node.type === 'Style') {
@@ -31,0 +32,0 @@ this.skip();

dist/processors/mixed.js

@@ -29,4 +29,6 @@ "use strict";
 const parser = (processor) => {
-    compiler_1.walk(processor.ast, {
-        enter(node) {
+    const ast = processor.ast;
+    compiler_1.walk(ast, {
+        enter(baseNode) {
+            const node = baseNode;
             if (node.type === 'Script' || node.type === 'Fragment') {
@@ -36,3 +38,5 @@ this.skip();
             if (node.type === 'Selector') {
-                const classSelectors = node.children.filter((item) => item.type === 'ClassSelector');
+                const classSelectors = node.children
+                    ? node.children.filter((item) => item.type === 'ClassSelector')
+                    : [];
                 if (classSelectors.length > 0) {
@@ -42,25 +46,27 @@ let selectorBoundaries = [];
                     let end = 0;
-                    node.children.forEach((item, index) => {
-                        if (!item.start && start > 0) {
-                            selectorBoundaries = updateSelectorBoundaries(selectorBoundaries, start, end);
-                            start = 0;
-                            end = 0;
-                        }
-                        else {
-                            let hasPushed = false;
-                            if (end !== item.start) {
-                                start = item.start;
-                                end = item.end;
-                            }
-                            else {
-                                selectorBoundaries = updateSelectorBoundaries(selectorBoundaries, start, item.end);
-                                hasPushed = true;
+                    if (node.children) {
+                        node.children.forEach((item, index) => {
+                            if (!item.start && start > 0) {
+                                selectorBoundaries = updateSelectorBoundaries(selectorBoundaries, start, end);
                                 start = 0;
                                 end = 0;
                             }
-                            if (hasPushed === false && index === node.children.length - 1) {
-                                selectorBoundaries = updateSelectorBoundaries(selectorBoundaries, start, end);
+                            else {
+                                let hasPushed = false;
+                                if (end !== item.start) {
+                                    start = item.start;
+                                    end = item.end;
+                                }
+                                else {
+                                    selectorBoundaries = updateSelectorBoundaries(selectorBoundaries, start, item.end);
+                                    hasPushed = true;
+                                    start = 0;
+                                    end = 0;
+                                }
+                                if (hasPushed === false && node.children && index === node.children.length - 1) {
+                                    selectorBoundaries = updateSelectorBoundaries(selectorBoundaries, start, end);
+                                }
                             }
-                        }
-                    });
+                        });
+                    }
                     selectorBoundaries.forEach((boundary) => {
@@ -67,0 +73,0 @@ const hasClassSelector = classSelectors.filter((item) => boundary.start <= item.start && boundary.end >= item.end);

dist/processors/native.js

@@ -30,5 +30,7 @@ "use strict";
 const parser = (processor) => {
+    const ast = processor.ast;
     let selectorBoundaries = [];
-    compiler_1.walk(processor.ast, {
-        enter(node) {
+    compiler_1.walk(ast, {
+        enter(baseNode) {
+            const node = baseNode;
             if (node.type === 'Script' || node.type === 'Fragment') {
@@ -40,23 +42,25 @@ this.skip();
                 let end = 0;
-                node.children.forEach((item, index) => {
-                    let hasPushed = false;
-                    if ((item.name === 'global' || item.name === 'local') &&
-                        item.type === 'PseudoClassSelector') {
-                        if (start > 0 && end > 0) {
+                if (node.children) {
+                    node.children.forEach((item, index) => {
+                        let hasPushed = false;
+                        if ((item.name === 'global' || item.name === 'local') &&
+                            item.type === 'PseudoClassSelector') {
+                            if (start > 0 && end > 0) {
+                                selectorBoundaries = updateSelectorBoundaries(selectorBoundaries, start, end);
+                                hasPushed = true;
+                            }
+                            start = item.end + 1;
+                            end = 0;
+                        }
+                        else if (item.start && item.end) {
+                            if (start === 0) {
+                                start = item.start;
+                            }
+                            end = item.end;
+                        }
+                        if (!hasPushed && node.children && index === node.children.length - 1 && end > 0) {
                             selectorBoundaries = updateSelectorBoundaries(selectorBoundaries, start, end);
-                            hasPushed = true;
                         }
-                        start = item.end + 1;
-                        end = 0;
-                    }
-                    else if (item.start && item.end) {
-                        if (start === 0) {
-                            start = item.start;
-                        }
-                        end = item.end;
-                    }
-                    if (!hasPushed && index === node.children.length - 1 && end > 0) {
-                        selectorBoundaries = updateSelectorBoundaries(selectorBoundaries, start, end);
-                    }
-                });
+                    });
+                }
                 processor.parsePseudoLocalSelectors(node);
@@ -63,0 +67,0 @@ }

dist/processors/processor.js

@@ -13,3 +13,2 @@ "use strict";
         this.importedCssModuleList = {};
-        this.style = { ast: null, openTag: '<style module>', closeTag: '</style>' };
         this.isParsingImports = false;
@@ -27,3 +26,4 @@ this.createModuleClassname = (name) => {
         this.parsePseudoLocalSelectors = (node) => {
-            const pseudoLocalSelectors = node.children.filter((item) => item.type === 'PseudoClassSelector' && item.name === 'local');
+            var _a, _b;
+            const pseudoLocalSelectors = (_b = (_a = node.children) === null || _a === void 0 ? void 0 : _a.filter((item) => item.type === 'PseudoClassSelector' && item.name === 'local')) !== null && _b !== void 0 ? _b : [];
             if (pseudoLocalSelectors.length > 0) {
@@ -56,8 +56,9 @@ pseudoLocalSelectors.forEach((item) => {
         this.styleParser = parser.bind(this);
-        if (ast.css) {
-            this.style.ast = ast.css;
-            this.style.openTag = content.substring(this.style.ast.start, this.style.ast.content.start);
-        }
+        this.style = {
+            ast: ast.css,
+            openTag: ast.css ? content.substring(ast.css.start, ast.css.content.start) : '<style module>',
+            closeTag: '</style>',
+        };
     }
 }
 exports.default = Processor;

dist/processors/scoped.js

@@ -18,4 +18,6 @@ "use strict";
 const parser = (processor) => {
-    compiler_1.walk(processor.ast, {
-        enter(node) {
+    const ast = processor.ast;
+    compiler_1.walk(ast, {
+        enter(baseNode) {
+            const node = baseNode;
             if (node.type === 'Script' || node.type === 'Fragment') {
@@ -22,0 +24,0 @@ this.skip();

package.json

 {
   "name": "svelte-preprocess-cssmodules",
-  "version": "2.0.2",
+  "version": "2.1.0-rc.1",
   "description": "Svelte preprocessor to generate CSS Modules classname on Svelte components",
@@ -19,3 +19,5 @@ "keywords": [
     "prebuild": "rm -rf dist/",
-    "build": "tsc",
+    "build": "npm run build:cjs && npm run build:esm",
+    "build:cjs": "tsc --module commonjs --target es6 --outDir dist --declaration true",
+    "build:esm": "tsc --module esnext --target esnext --outDir dist/esm && node tasks/parser.mjs && rm -rf dist/esm/",
     "dev": "npm run build -- -w",
@@ -28,4 +30,11 @@ "lint": "eslint --ext .ts --fix ./src",
   "license": "MIT",
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
   "directories": {
@@ -50,8 +59,9 @@ "example": "example"
   "dependencies": {
-    "loader-utils": "^2.0.0",
+    "acorn": "^8.5.0",
+    "big.js": "^6.1.1",
     "magic-string": "^0.25.7"
   },
   "devDependencies": {
+    "@types/big.js": "^6.1.2",
     "@types/estree": "0.0.47",
-    "@types/loader-utils": "^2.0.1",
     "@typescript-eslint/eslint-plugin": "^4.4.0",
@@ -58,0 +68,0 @@ "@typescript-eslint/parser": "^4.4.0",

README.md

@@ -21,2 +21,3 @@ # Svelte preprocess CSS Modules
   - [Webpack](#webpack)
+  - [SvelteKit](#sveltekit)
   - [Svelte Preprocess](#svelte-preprocess)
@@ -444,2 +445,22 @@ - [Options](#options)
 
+### SvelteKit
+
+As the module distribution is targetting `esnext`, `Node.js 14` or above is required 
+in order to work. 
+
+```js
+// svelte.config.js
+
+import cssModules from 'svelte-preprocess-cssmodules';
+
+const config = {
+  ...
+  preprocess: [
+    cssModules(),
+  ]
+};
+
+export default config;
+```
+
 ### Svelte Preprocess
@@ -686,32 +707,16 @@
     position: fixed;
-    top: 50%;
-    left: 50%;
-    z-index: 10;
-    width: 400px;
-    height: 80%;
-    background-color: #fff;
-    transform: translateX(-50%) translateY(-50%);
+    ...
   }
-  section {
-    flex: 0 1 auto;
-    flex-direction: column;
-    display: flex;
-    height: 100%;
-  }
   header {
-    padding: 1rem;
-    border-bottom: 1px solid #d9d9d9;
+    ...
   }
   .body {
-    padding: 1rem;
     flex: 1 0 0;
+    ...
   }
   footer {
-    padding: 1rem;
-    border-top: 1px solid #d9d9d9;
+    ...
   }
   button {
-    background: #fff;
-    border: 1px solid #ccc;
-    border-radius: 5px;
+    ...
   }
@@ -723,14 +728,12 @@ .cancel {
 
-<div class="modal">
-  <section>
-    <header>My Modal Title</header>
-    <div class="body">
-      <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</p>
-    </div>
-    <footer>
-      <button>Ok</button>
-      <button class="cancel">Cancel</button>
-    </footer>
-  </section>
-</div>
+<section class="modal">
+  <header>My Modal Title</header>
+  <div class="body">
+    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</p>
+  </div>
+  <footer>
+    <button>Ok</button>
+    <button class="cancel">Cancel</button>
+  </footer>
+</section>
 ```
@@ -744,9 +747,3 @@
   position: fixed;
-  top: 50%;
-  left: 50%;
-  z-index: 10;
-  width: 400px;
-  height: 80%;
-  background-color: #fff;
-  transform: translateX(-50%) translateY(-50%);
+  ...
 }
@@ -761,14 +758,12 @@
 
-<div class={style.modal}>
-  <section>
-    <header>My Modal Title</header>
-    <div class={style.body}>
-      <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</p>
-    </div>
-    <footer>
-      <button>Ok</button>
-      <button class={style.cancel}>Cancel</button>
-    </footer>
-  </section>
-</div>
+<section class={style.modal}>
+  <header>My Modal Title</header>
+  <div class={style.body}>
+    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</p>
+  </div>
+  <footer>
+    <button>Ok</button>
+    <button class={style.cancel}>Cancel</button>
+  </footer>
+</section>
 ```
@@ -782,32 +777,16 @@
     position: fixed;
-    top: 50%;
-    left: 50%;
-    z-index: 10;
-    width: 400px;
-    height: 80%;
-    background-color: #fff;
-    transform: translateX(-50%) translateY(-50%);
+    ...
   }
-  section {
-    flex: 0 1 auto;
-    flex-direction: column;
-    display: flex;
-    height: 100%;
-  }
   header {
-    padding: 1rem;
-    border-bottom: 1px solid #d9d9d9;
+    ...
   }
   ._1HPUBXtzNG {
-    padding: 1rem;
     flex: 1 0 0;
+    ...
   }
   footer {
-    padding: 1rem;
-    border-top: 1px solid #d9d9d9;
+    ...
   }
   button {
-    background: #fff;
-    border: 1px solid #ccc;
-    border-radius: 5px;
+    ...
   }
@@ -819,14 +798,12 @@ ._1xhJxRwWs7 {
 
-<div class="_329TyLUs9c">
-  <section>
-    <header>My Modal Title</header>
-    <div class="_1HPUBXtzNG">
-      <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</p>
-    </div>
-    <footer>
-      <button>Ok</button>
-      <button class="_1xhJxRwWs7">Cancel</button>
-    </footer>
-  </section>
-</div>
+<section class="_329TyLUs9c">
+  <header>My Modal Title</header>
+  <div class="_1HPUBXtzNG">
+    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</p>
+  </div>
+  <footer>
+    <button>Ok</button>
+    <button class="_1xhJxRwWs7">Cancel</button>
+  </footer>
+</section>
 ```
@@ -833,0 +810,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

Filesystem access

Supply chain risk

Accesses the file system, and could potentially read sensitive data.

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

88320

increased by46.52%

Number of package files

52

increased by52.94%

Lines of code

1428

increased by86.42%

Worsened metrics

Dependency count

5

increased by25%

Number of low quality alerts

1

increased byInfinity%

Number of lines in readme file

810

decreased by-2.76%

Number of low supply chain risk alerts

2

increased by100%

Dependency changes

• + Addedacorn@^8.5.0

• + Addedbig.js@^6.1.1

• + Addedacorn@8.14.0(transitive)

• + Addedbig.js@6.2.2(transitive)

• - Removedloader-utils@^2.0.0

• - Removedbig.js@5.2.2(transitive)

• - Removedemojis-list@3.0.0(transitive)

• - Removedjson5@2.2.3(transitive)

• - Removedloader-utils@2.0.4(transitive)