svelte-preprocess-cssmodules - npm Package Compare versions

Comparing version 1.3.1 to 1.3.2

CHANGELOG.md

 # Svelte preprocess CSS Modules, changelog
 
+## 1.3.2 (Jan 4, 2021)
+Fix attempting import from `node_modules` packages [issue #10](https://github.com/micantoine/svelte-preprocess-cssmodules/issues/10) - [pull request #11](https://github.com/micantoine/svelte-preprocess-cssmodules/pull/11)
+
 ## 1.3.1 (Nov 22, 2020)
@@ -4,0 +7,0 @@ Add support for old version of nodes (node 8 & node 10 tested)

dist/processors/parseMarkup.js

 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
@@ -16,3 +35,3 @@ function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
 const path_1 = __importDefault(require("path"));
-const fs_1 = __importDefault(require("fs"));
+const fs_1 = __importStar(require("fs"));
 const string_prototype_matchall_1 = __importDefault(require("string.prototype.matchall"));
@@ -64,4 +83,5 @@ const object_fromentries_1 = __importDefault(require("object.fromentries"));
         const directives = new Map();
-        parsedContent = parsedContent.replace(patterns_1.PATTERN_IMPORT, (_match, varName, relativePath, extension) => {
+        parsedContent = parsedContent.replace(patterns_1.PATTERN_IMPORT, (match, varName, relativePath, extension) => {
             const absolutePath = path_1.default.resolve(path_1.default.dirname(filename), relativePath);
+            const nodeModulesPath = path_1.default.resolve(`${path_1.default.resolve()}/node_modules`, relativePath);
             try {
@@ -108,3 +128,8 @@ const fileContent = fs_1.default.readFileSync(absolutePath, 'utf8');
             catch (err) {
-                throw new Error(err);
+                fs_1.default.access(nodeModulesPath, fs_1.constants.F_OK, (error) => {
+                    if (error) {
+                        throw new Error(err); // not found in node_modules packages either, throw orignal error
+                    }
+                });
+                return match;
             }
@@ -111,0 +136,0 @@ });

package.json

 {
   "name": "svelte-preprocess-cssmodules",
-  "version": "1.3.1",
+  "version": "1.3.2",
   "description": "Svelte preprocessor to generate CSS Modules classname on Svelte components",
@@ -5,0 +5,0 @@ "keywords": [

README.md

@@ -9,6 +9,2 @@ # Svelte preprocess CSS Modules
 
-- [Configuration](#configuration)
-  - [Rollup](#rollup)
-  - [Webpack](#webpack)
-  - [Options](#options)
 - [Use of the *style* tag](#use-of-the-style-tag)
@@ -26,143 +22,9 @@ - [Process required class](#process-required-class)
   - [Directive and dynamic class](#directive-and-dynamic-class)
+- [Configuration](#configuration)
+  - [Rollup](#rollup)
+  - [Webpack](#webpack)
+  - [Options](#options)
 - [Code example](#code-example)
 - [Why CSS Modules on Svelte](#why-css-modules-on-svelte)
 
-## Configuration
-
-### Rollup
-
-To be used with the plugin [`rollup-plugin-svelte`](https://github.com/sveltejs/rollup-plugin-svelte).
-
-```js
-import svelte from 'rollup-plugin-svelte';
-import cssModules from 'svelte-preprocess-cssmodules';
-
-export default {
-  ...
-  plugins: [
-    svelte({
-      preprocess: [
-        cssModules(),
-      ]
-    }),
-  ]
-  ...
-}
-```
-
-### Webpack
-
-To be used with the loader [`svelte-loader`](https://github.com/sveltejs/svelte-loader).
-
-```js
-const cssModules = require('svelte-preprocess-cssmodules');
-
-module.exports = {
-  ...
-  module: {
-    rules: [
-      {
-        test: /\.svelte$/,
-        exclude: /node_modules/,
-        use: [
-          {
-            loader: 'svelte-loader',
-            options: {
-              preprocess: [
-                cssModules(),
-              ]
-            }
-          }
-        ]
-      }
-    ]
-  }
-  ...
-}
-```
-
-### Options
-Pass an object of the following properties
-
-| Name | Type | Default | Description |
-| ------------- | ------------- | ------------- | ------------- |
-| `localIdentName` | `{String}` | `"[local]-[hash:base64:6]"` |  A rule using any available token |
-| `includePaths` | `{Array}` | `[]` (Any) | An array of paths to be processed |
-| `getLocalIdent` | `Function` | `undefined`  | Generate the classname by specifying a function instead of using the built-in interpolation |
-| `strict`  | `{Boolean}` | `false` | When true, an exception is raised when a class is used while not being defined in `<style>`
-   
-
-**`localIdentName`**
-
-Inspired by [webpack interpolateName](https://github.com/webpack/loader-utils#interpolatename), here is the list of tokens:
-
-- `[local]` the targeted classname
-- `[ext]` the extension of the resource
-- `[name]` the basename of the resource
-- `[path]` the path of the resource
-- `[folder]` the folder the resource is in
-- `[contenthash]` or `[hash]` *(they are the same)* the hash of the resource content (by default it's the hex digest of the md4 hash)
-- `[<hashType>:contenthash:<digestType>:<length>]` optionally one can configure
-  - other hashTypes, i. e. `sha1`, `md4`, `md5`, `sha256`, `sha512`
-  - other digestTypes, i. e. `hex`, `base26`, `base32`, `base36`, `base49`, `base52`, `base58`, `base62`, `base64`
-  - and `length` the length in chars
-
-**`getLocalIdent`**
-
-Customize the creation of the classname instead of relying on the built-in function.
-
-```ts
-function getLocalIdent(
-  context: {
-    context: string, // the context path
-    resourcePath: string, // path + filename
-  },
-  localIdentName: {
-    template: string, // the template rule
-    interpolatedName: string, // the built-in generated classname
-  },
-  className: string, // the classname string
-  content: { 
-    markup: string, // the markup content
-    style: string,  // the style content
-  }
-): string {
-  return `your_generated_classname`;
-}
-```
-
-*Example of use*
-
-```bash
-# Directory
-SvelteApp
-└─ src
-   ├─ App.svelte
-   └─ components
-      └─ Button.svelte
-```
-```html
-<!-- Button.svelte -->
-<button class="$style.red">Ok</button>
-
-<style>
-  .red { background-color: red; }
-</style>
-```
-
-```js
-// Preprocess config
-...
-preprocess: [
-  cssModules({
-    localIdentName: '[path][name]__[local]',
-    getLocalIdent: (context, { interpolatedName }) => {
-      return interpolatedName.toLowerCase().replace('src_', '');
-      // svelteapp_components_button__red;
-    }
-  })
-],
-...
-```
-
 ## Use of the *style* tag
@@ -330,4 +192,6 @@
 
-Alternatively, styles can be created into an external file and imported onto a svelte component from the `<script>` tag. The  name referring to the import can then be used in the markup targetting any existing classname of the stylesheet. 
+Alternatively, styles can be created into an external file and imported onto a svelte component from the `<script>` tag. The  name referring to the import can then be used in the markup targetting any existing classname of the stylesheet.
 
+**Note:** *The import option is only meant for stylesheets relative to the component. You will have to set your own bundler in order to import *node_modules* packages css files.*
+
 ```css
@@ -538,2 +402,140 @@ /** style.css **/
 
+## Configuration
+
+### Rollup
+
+To be used with the plugin [`rollup-plugin-svelte`](https://github.com/sveltejs/rollup-plugin-svelte).
+
+```js
+import svelte from 'rollup-plugin-svelte';
+import cssModules from 'svelte-preprocess-cssmodules';
+
+export default {
+  ...
+  plugins: [
+    svelte({
+      preprocess: [
+        cssModules(),
+      ]
+    }),
+  ]
+  ...
+}
+```
+
+### Webpack
+
+To be used with the loader [`svelte-loader`](https://github.com/sveltejs/svelte-loader).
+
+```js
+const cssModules = require('svelte-preprocess-cssmodules');
+
+module.exports = {
+  ...
+  module: {
+    rules: [
+      {
+        test: /\.svelte$/,
+        exclude: /node_modules/,
+        use: [
+          {
+            loader: 'svelte-loader',
+            options: {
+              preprocess: [
+                cssModules(),
+              ]
+            }
+          }
+        ]
+      }
+    ]
+  }
+  ...
+}
+```
+
+### Options
+Pass an object of the following properties
+
+| Name | Type | Default | Description |
+| ------------- | ------------- | ------------- | ------------- |
+| `localIdentName` | `{String}` | `"[local]-[hash:base64:6]"` |  A rule using any available token |
+| `includePaths` | `{Array}` | `[]` (Any) | An array of paths to be processed |
+| `getLocalIdent` | `Function` | `undefined`  | Generate the classname by specifying a function instead of using the built-in interpolation |
+| `strict`  | `{Boolean}` | `false` | When true, an exception is raised when a class is used while not being defined in `<style>`
+   
+
+**`localIdentName`**
+
+Inspired by [webpack interpolateName](https://github.com/webpack/loader-utils#interpolatename), here is the list of tokens:
+
+- `[local]` the targeted classname
+- `[ext]` the extension of the resource
+- `[name]` the basename of the resource
+- `[path]` the path of the resource
+- `[folder]` the folder the resource is in
+- `[contenthash]` or `[hash]` *(they are the same)* the hash of the resource content (by default it's the hex digest of the md4 hash)
+- `[<hashType>:contenthash:<digestType>:<length>]` optionally one can configure
+  - other hashTypes, i. e. `sha1`, `md4`, `md5`, `sha256`, `sha512`
+  - other digestTypes, i. e. `hex`, `base26`, `base32`, `base36`, `base49`, `base52`, `base58`, `base62`, `base64`
+  - and `length` the length in chars
+
+**`getLocalIdent`**
+
+Customize the creation of the classname instead of relying on the built-in function.
+
+```ts
+function getLocalIdent(
+  context: {
+    context: string, // the context path
+    resourcePath: string, // path + filename
+  },
+  localIdentName: {
+    template: string, // the template rule
+    interpolatedName: string, // the built-in generated classname
+  },
+  className: string, // the classname string
+  content: { 
+    markup: string, // the markup content
+    style: string,  // the style content
+  }
+): string {
+  return `your_generated_classname`;
+}
+```
+
+*Example of use*
+
+```bash
+# Directory
+SvelteApp
+└─ src
+   ├─ App.svelte
+   └─ components
+      └─ Button.svelte
+```
+```html
+<!-- Button.svelte -->
+<button class="$style.red">Ok</button>
+
+<style>
+  .red { background-color: red; }
+</style>
+```
+
+```js
+// Preprocess config
+...
+preprocess: [
+  cssModules({
+    localIdentName: '[path][name]__[local]',
+    getLocalIdent: (context, { interpolatedName }) => {
+      return interpolatedName.toLowerCase().replace('src_', '');
+      // svelteapp_components_button__red;
+    }
+  })
+],
+...
+```
+
 ## Code Example
@@ -540,0 +542,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

45629

increased by3.78%

Lines of code

531

increased by4.94%

Number of lines in readme file

714

increased by0.28%

No dependency changes