Socket
Socket
Sign inDemoInstall

svelte-preprocess-cssmodules

Package Overview
Dependencies
Maintainers
1
Versions
29
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

svelte-preprocess-cssmodules - npm Package Compare versions

Comparing version 1.3.2 to 2.0.0-rc.1

dist/lib/requirement.d.ts
dist/lib/requirement.js
dist/parsers/importDeclaration.d.ts
dist/parsers/importDeclaration.js
dist/parsers/index.d.ts
dist/parsers/index.js
dist/parsers/template.d.ts
dist/parsers/template.js
dist/processors/mixed.d.ts
dist/processors/mixed.js
dist/processors/native.d.ts
dist/processors/native.js
dist/processors/processor.d.ts
dist/processors/processor.js
dist/processors/scoped.d.ts
dist/processors/scoped.js

11

CHANGELOG.md
# Svelte preprocess CSS Modules, changelog
## 2.0.0-rc.1 (April 11, 2021)
New main release of the preprocessor including
- Drop of the prefixes `$style.` & `$.` [issue #13](https://github.com/micantoine/svelte-preprocess-cssmodules/issues/13)
- Introduction of three mode `native`, `mixed`, `scoped` (default being `native` following cssModules philosophy)
- Requirement of the `module` attribute on the `<style>` tag to preprocess the component
- Option to locally change the preprocessing mode per component by setting a value to the `module` attribute
- External stylesheets' imports following the convention `.module.css`
- No more IDE unused CSS selector warning [issue #5](https://github.com/micantoine/svelte-preprocess-cssmodules/issues/5)
## 1.3.2 (Jan 4, 2021)

@@ -4,0 +15,0 @@ 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)

3

dist/index.d.ts

@@ -1,6 +0,5 @@

import { PluginOptions, PreprocessorOptions, PreprocessorResult } from './types';
import type { PluginOptions, PreprocessorOptions, PreprocessorResult } from './types';
declare const _default: (options: Partial<PluginOptions>) => {
markup: ({ content, filename }: PreprocessorOptions) => Promise<PreprocessorResult>;
style: ({ content, filename }: PreprocessorOptions) => Promise<PreprocessorResult>;
};
export default _default;

42

dist/index.js

@@ -12,11 +12,11 @@ "use strict";

Object.defineProperty(exports, "__esModule", { value: true });
const compiler_1 = require("svelte/compiler");
const processors_1 = require("./processors");
const lib_1 = require("./lib");
let pluginOptions = {
mode: 'native',
includePaths: [],
localIdentName: '[local]-[hash:base64:6]',
getLocalIdent: lib_1.getLocalIdent,
strict: false,
};
const cssModuleDirectory = {};
const markup = ({ content, filename }) => __awaiter(void 0, void 0, void 0, function* () {

@@ -27,18 +27,33 @@ const isIncluded = yield lib_1.isFileIncluded(pluginOptions.includePaths, filename);

}
if (!lib_1.PATTERN_MODULE.test(content) && !lib_1.PATTERN_IMPORT.test(content)) {
const ast = compiler_1.parse(content, { filename });
if (!lib_1.hasModuleAttribute(ast) && !lib_1.hasModuleImports(content)) {
return { code: content };
}
const parsedMarkup = yield processors_1.parseMarkup(content, filename, pluginOptions);
cssModuleDirectory[filename] = parsedMarkup.cssModuleList;
let { mode } = pluginOptions;
if (lib_1.hasModuleAttribute(ast)) {
const moduleAttribute = ast.css.attributes.find((item) => item.name === 'module');
mode = moduleAttribute.value !== true ? moduleAttribute.value[0].data : mode;
}
if (!['native', 'mixed', 'scoped'].includes(mode)) {
throw new Error(`Module only accepts 'native', 'mixed' or 'scoped': '${mode}' was passed.`);
}
let parsedContent;
switch (mode) {
case 'scoped': {
parsedContent = yield processors_1.scopedProcessor(ast, content, filename, pluginOptions);
break;
}
case 'mixed': {
parsedContent = yield processors_1.mixedProcessor(ast, content, filename, pluginOptions);
break;
}
default: {
parsedContent = yield processors_1.nativeProcessor(ast, content, filename, pluginOptions);
break;
}
}
return {
code: parsedMarkup.content,
code: parsedContent,
};
});
const style = ({ content, filename }) => __awaiter(void 0, void 0, void 0, function* () {
if (!Object.prototype.hasOwnProperty.call(cssModuleDirectory, filename)) {
return { code: content };
}
const parsedStyle = processors_1.parseStyle(content, filename, cssModuleDirectory[filename]);
return { code: parsedStyle.content };
});
// eslint-disable-next-line no-multi-assign

@@ -49,4 +64,3 @@ exports.default = exports = module.exports = (options) => {

markup,
style,
};
};

6

dist/lib/createClassName.js

@@ -8,3 +8,3 @@ "use strict";

const loader_utils_1 = require("loader-utils");
const patterns_1 = require("./patterns");
const PATTERN_PATH_UNALLOWED = /[<>:"/\\|?*]/g;
/**

@@ -64,4 +64,4 @@ * interpolateName, adjusted version of loader-utils/interpolateName

// replace unwanted characters from [path]
if (patterns_1.PATTERN_PATH_UNALLOWED.test(interpolatedName)) {
interpolatedName = interpolatedName.replace(patterns_1.PATTERN_PATH_UNALLOWED, '_');
if (PATTERN_PATH_UNALLOWED.test(interpolatedName)) {
interpolatedName = interpolatedName.replace(PATTERN_PATH_UNALLOWED, '_');
}

@@ -68,0 +68,0 @@ // prevent class error when the generated classname starts from a non word charater

3

dist/lib/index.d.ts
export { default as camelCase } from './camelCase';
export { default as createClassName } from './createClassName';
export { default as isFileIncluded } from './isFileIncluded';
export * from './getLocalIdent';
export * from './patterns';
export * from './requirement';

6

dist/lib/index.js

@@ -16,3 +16,3 @@ "use strict";

Object.defineProperty(exports, "__esModule", { value: true });
exports.isFileIncluded = exports.createClassName = exports.camelCase = void 0;
exports.createClassName = exports.camelCase = void 0;
var camelCase_1 = require("./camelCase");

@@ -22,5 +22,3 @@ Object.defineProperty(exports, "camelCase", { enumerable: true, get: function () { return __importDefault(camelCase_1).default; } });

Object.defineProperty(exports, "createClassName", { enumerable: true, get: function () { return __importDefault(createClassName_1).default; } });
var isFileIncluded_1 = require("./isFileIncluded");
Object.defineProperty(exports, "isFileIncluded", { enumerable: true, get: function () { return __importDefault(isFileIncluded_1).default; } });
__exportStar(require("./getLocalIdent"), exports);
__exportStar(require("./patterns"), exports);
__exportStar(require("./requirement"), exports);

5

dist/processors/index.d.ts

@@ -1,2 +0,3 @@

export { default as parseMarkup } from './parseMarkup';
export { default as parseStyle } from './parseStyle';
export { default as nativeProcessor } from './native';
export { default as mixedProcessor } from './mixed';
export { default as scopedProcessor } from './scoped';

12

dist/processors/index.js

@@ -6,6 +6,8 @@ "use strict";

Object.defineProperty(exports, "__esModule", { value: true });
exports.parseStyle = exports.parseMarkup = void 0;
var parseMarkup_1 = require("./parseMarkup");
Object.defineProperty(exports, "parseMarkup", { enumerable: true, get: function () { return __importDefault(parseMarkup_1).default; } });
var parseStyle_1 = require("./parseStyle");
Object.defineProperty(exports, "parseStyle", { enumerable: true, get: function () { return __importDefault(parseStyle_1).default; } });
exports.scopedProcessor = exports.mixedProcessor = exports.nativeProcessor = void 0;
var native_1 = require("./native");
Object.defineProperty(exports, "nativeProcessor", { enumerable: true, get: function () { return __importDefault(native_1).default; } });
var mixed_1 = require("./mixed");
Object.defineProperty(exports, "mixedProcessor", { enumerable: true, get: function () { return __importDefault(mixed_1).default; } });
var scoped_1 = require("./scoped");
Object.defineProperty(exports, "scopedProcessor", { enumerable: true, get: function () { return __importDefault(scoped_1).default; } });

2

dist/types/index.d.ts
import { GetLocalIdent } from '../lib';
export declare type PluginOptions = {
mode: 'native' | 'mixed' | 'scoped';
includePaths: string[];
localIdentName: string;
getLocalIdent: GetLocalIdent;
strict: boolean;
};

@@ -8,0 +8,0 @@ export interface PreprocessorOptions {

9

package.json
{
"name": "svelte-preprocess-cssmodules",
"version": "1.3.2",
"version": "2.0.0-rc.1",
"description": "Svelte preprocessor to generate CSS Modules classname on Svelte components",

@@ -49,9 +49,7 @@ "keywords": [

"loader-utils": "^2.0.0",
"object.fromentries": "^2.0.2",
"string.prototype.matchall": "^4.0.3"
"magic-string": "^0.25.7"
},
"devDependencies": {
"@types/estree": "0.0.47",
"@types/loader-utils": "^2.0.1",
"@types/object.fromentries": "^2.0.0",
"@types/string.prototype.matchall": "^4.0.0",
"@typescript-eslint/eslint-plugin": "^4.4.0",

@@ -63,2 +61,3 @@ "@typescript-eslint/parser": "^4.4.0",

"eslint-plugin-import": "^2.22.1",
"estree-walker": "^3.0.0",
"husky": "^4.3.0",

@@ -65,0 +64,0 @@ "jest": "^26.0.1",

215

README.md
# Svelte preprocess CSS Modules
```bash
npm install --save-dev svelte-preprocess-cssmodules
npm install --save-dev svelte-preprocess-cssmodules@next
```

@@ -9,8 +9,6 @@

- [Use of the *style* tag](#use-of-the-style-tag)
- [Process required class](#process-required-class)
- [Remove unspecified class](#remove-unspecified-class)
- [The module Attribute](#the-module-attribute)
- [Global/Local mode](#global/local-mode)
- [Target any classname format](#target-any-classname-format)
- [Work with class directive](#work-with-class-directive)
- [Shorthand](#shorthand)
- [Import styles from an external stylesheet](#import-styles-from-an-external-stylesheet)

@@ -29,12 +27,13 @@ - [Svelte scoped system on non class selectors](#svelte-scoped-system-on-non-class-selectors)

## Use of the *style* tag
## The module attribute
Write css rules inside `<style>` and prefix **on the HTML markup** any classname that require CSS Modules by `$style` => `$style.MY_CLASSNAME` .
Add the attribute `module` to the `<style>` tag to enable cssModules to the component.
```html
<style>
<style module>
p { font-size: 14px; }
.red { color: red; }
</style>
<p class="$style.red">My red text</p>
<p class="red">My red text</p>
```

@@ -46,2 +45,3 @@

<style>
p { font-size: 14px; }
.red-30_1IC { color: red; }

@@ -53,54 +53,48 @@ </style>

### Process required class
### Global/Local Mode
CSS Modules classname are generated to the html class values prefixed by `$style.` The rest is left untouched and will use the default svelte scoped class.
The component will use the `native` mode by default (following the philosophy of cssModules). Other mode `mixed` (same as the preprocessor `v1` ) or `scoped` (generating a unique class while using the svelte scoped system) can also be used depending of your preferences.
*Before*
The mode can be set globally from the preprocessor options or locally to override the global settings per component.
*Mixed mode*
```html
<style>
.blue { color: blue; }
<style module="mixed">
p { font-size: 14px; }
.red { color: red; }
.text-center { text-align: center; }
</style>
<p class="blue text-center">My blue text</p>
<p class="$style.red text-center">My red text</p>
<p class="red">My red text</p>
```
*After*
*generating*
```html
<style>
.blue.svelte-1s2ez3w { color: blue;}
.red-2iBDzf { color: red; }
.text-center.svelte-1s2ez3w { text-align: center; }
p.svelte-teyu13r { font-size: 14px; }
.red-30_1IC { color: red; }
</style>
<p class="blue text-center svelte-1s2ez3w">My blue text</p>
<p class="red-2iBDzf text-center svelte-1s2ez3w">My red text</p>
<p class="red-30_1IC svelte-teyu13r">My red text</p>
```
### Remove unspecified class
On non strict mode, if a CSS Modules class has no css style attached, it will be removed from the class attribute.
*Before*
*Scoped mode*
```html
<style>
.text-center { text-align: center; }
<style module="scoped">
p { font-size: 14px; }
.red { color: red; }
</style>
<p class="$style.blue text-center">My blue text</p>
<p class="red">My red text</p>
```
*After*
*generating*
```html
<style>
.text-center.svelte-1s2ez3w { text-align: center; }
p.svelte-teyu13r { font-size: 14px; }
.red-30_1IC.svelte-teyu13r { color: red; }
</style>
<p class="text-center svelte-1s2ez3w">My blue text</p>
<p class="red-30_1IC svelte-teyu13r">My red text</p>
```

@@ -115,3 +109,3 @@

```html
<style>
<style module>
.red { color: red; }

@@ -122,5 +116,5 @@ .red-crimson { color: crimson; }

<span class="$style.red">Red</span>
<span class="$style.red-crimson">Crimson</span>
<span class="$style.redMajenta">Majenta</span>
<span class="red">Red</span>
<span class="red-crimson">Crimson</span>
<span class="redMajenta">Majenta</span>
```

@@ -147,3 +141,3 @@

```html
<script>
<script module>
let isActive = true;

@@ -156,28 +150,6 @@ </script>

<p class:$style.bold={isActive}>My red text</p>
<p class="{isActive ? '$style.bold' : ''}">My blue text</p>
<p class:bold={isActive}>My red text</p>
<p class="{isActive ? 'bold' : ''}">My blue text</p>
```
### Shorthand
To remove verbosity the shorthand `$.MY_CLASSNAME` can be used instead of the regular `$style.MY_CLASSNAME`.
*before*
```html
<script>
let isActive = true;
</script>
<style>
.red { color: red; }
.blue { color: blue; }
.bold { font-weight: bold; }
</style>
<p
class:$.bold={isActive}
class="$.red">My red text</p>
<p class="{isActive ? '$.bold' : ''} $.blue">My blue text</p>
```
*After*

@@ -187,9 +159,7 @@

<style>
.red-en-6pb { color: red; }
.blue-oVk-n1 { color: blue; }
.bold-2jIMhI { font-weight: bold; }
</style>
<p class="red-en-6pb bold-2jIMhI">My red text</p>
<p class="bold-2jIMhI blue-oVk-n1">My blue text</p>
<p class="bold-2jIMhI">My red text</p>
<p class="bold-2jIMhI">My blue text</p>
```

@@ -201,6 +171,8 @@

The css file must follow the convention `FILENAME.module.css` in order to be processed.
**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
/** style.css **/
/** style.module.css **/
.red { color: red; }

@@ -212,3 +184,3 @@ .blue { color: blue; }

<script>
import style from './style.css';
import style from './style.module.css';
</script>

@@ -232,45 +204,6 @@

### Svelte scoped system on non class selectors
All existing rules of the imported stylesheet will apply to the component the same way `<style>` would do. All non class selectors will inherit the default svelte scoped system.
```css
/** style.css **/
section { padding: 10px; }
p > strong { font-weight: 600; }
.red { color: red; }
```
```html
<!-- Svelte component -->
<script>
import style from './style.css';
</script>
<section>
<p class={style.red}>My <strong>red</strong> text</p>
<p>My <strong>blue</strong> text</p>
</section>
```
*Generated code*
```html
<style>
section.svelte-18te3n2 { padding: 10px; }
p.svelte-18te3n2 > strong.svelte-18te3n2 { font-weight: 600; }
.red-1sPexk { color: red; }
</style>
<section class="svelte-18te3n2">
<p class="red-1sPexk svelte-18te3n2">My <strong class="svelte-18te3n2">red</strong> text</p>
<p class="svelte-18te3n2">My <strong class="svelte-18te3n2">blue</strong> text</p>
</section>
```
### Destructuring import
Only import the classnames you want to use as css modules. The rest of classes will fallback to the default svelte scoped system.
```css
/** style.css **/
/** style.module.css **/
section { padding: 10px; }

@@ -297,11 +230,11 @@ .red { color: red; }

<style>
section.svelte-18te3n2 { padding: 10px; }
section { padding: 10px; }
.red-1sPexk { color: red; }
.blue-oVkn13 { color: blue; }
.bold.svelte-18te3n2 { font-weight: bold; }
.bold-18te3n { font-weight: bold; }
</style>
<section class="svelte-18te3n2">
<p class="red-1sPexk">My <span class="bold svelte-18te3n2">red</span> text</p>
<p class="blue-oVkn13 bold svelte-18te3n2">My blue text</p>
<section>
<p class="red-1sPexk">My <span class="bold-18te3n">red</span> text</p>
<p class="blue-oVkn13 bold-18te3n">My blue text</p>
</section>

@@ -315,3 +248,3 @@ ```

```css
/** style.css **/
/** style.module.css **/
.success { color: green; }

@@ -325,3 +258,3 @@ .error-message {

<script>
import css from './style.css';
import css from './style.module.css';
</script>

@@ -335,3 +268,3 @@

<script>
import { success, errorMessage } from './style.css';
import { success, errorMessage } from './style.module.css';
</script>

@@ -360,6 +293,6 @@

If a css file is being imported without a name, all rules will use the default svelte scoped system.
If a css file is being imported without a name, the cssModules will still be applied to the classes of the stylesheet.
```css
/** style.css **/
/** style.module.css **/
p { font-size: 18px; }

@@ -381,8 +314,8 @@ .success { color: green; }

<style>
p.svelte-vg78j0 { font-size: 18px; }
.success.svelte-vg78j0 { color: green; }
p { font-size: 18px; }
.success-vg78j0 { color: green; }
</style>
<p class="success svelte-vg78j0">My success messge</p>
<p class="svelte-vg78j0">My error message</p>
<p class="success-vg78j0">My success messge</p>
<p>My error message</p>
```

@@ -397,3 +330,3 @@

<script>
import { success, error } from './styles';
import { success, error } from './styles/module.css';

@@ -480,3 +413,3 @@ let isSuccess = true;

| `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>`
| `mode` | `native\|mixed\|scoped` | `native` | The preprocess mode to use

@@ -581,3 +514,3 @@

```html
<style>
<style module>
.modal {

@@ -621,6 +554,6 @@ position: fixed;

<div class="$style.modal">
<div class="modal">
<section>
<header>My Modal Title</header>
<div class="$style.body">
<div class="body">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</p>

@@ -630,3 +563,3 @@ </div>

<button>Ok</button>
<button class="$style.cancel">Cancel</button>
<button class="cancel">Cancel</button>
</footer>

@@ -656,3 +589,3 @@ </section>

<script>
import style from './style.css';
import style from './style.module.css';
</script>

@@ -688,3 +621,3 @@

}
section.svelte-1s2ez3w {
section {
flex: 0 1 auto;

@@ -695,3 +628,3 @@ flex-direction: column;

}
header.svelte-1s2ez3w {
header {
padding: 1rem;

@@ -704,7 +637,7 @@ border-bottom: 1px solid #d9d9d9;

}
footer.svelte-1s2ez3w {
footer {
padding: 1rem;
border-top: 1px solid #d9d9d9;
}
button.svelte-1s2ez3w {
button {
background: #fff;

@@ -720,10 +653,10 @@ border: 1px solid #ccc;

<div class="_329TyLUs9c">
<section class="svelte-1s2ez3w">
<header class="svelte-1s2ez3w">My Modal Title</header>
<section>
<header>My Modal Title</header>
<div class="_1HPUBXtzNG">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</p>
</div>
<footer class="svelte-1s2ez3w">
<button class="svelte-1s2ez3w">Ok</button>
<button class="_1xhJxRwWs7 svelte-1s2ez3w">Cancel</button>
<footer>
<button>Ok</button>
<button class="_1xhJxRwWs7">Cancel</button>
</footer>

@@ -734,4 +667,2 @@ </section>

**Note:** The svelte scoped class is still being applied to the html elements with a style.
## Why CSS Modules on Svelte

@@ -738,0 +669,0 @@ 

dist/lib/isFileIncluded.d.ts
dist/lib/isFileIncluded.js
dist/lib/patterns.d.ts
dist/lib/patterns.js
dist/processors/parseMarkup.d.ts
dist/processors/parseMarkup.js
dist/processors/parseStyle.d.ts
dist/processors/parseStyle.js
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc