https://github.com/vinpac/postcss-modular

PostCSS plugin to modularize classnames
https://github.com/vinpac/postcss-modular

css javascript modular postcss

Last synced: 5 days ago
JSON representation

PostCSS plugin to modularize classnames

• Host: GitHub
• URL: https://github.com/vinpac/postcss-modular
• Owner: vinpac
• License: mit
• Created: 2017-10-17T21:18:02.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2018-01-31T01:02:06.000Z (almost 7 years ago)
• Last Synced: 2024-01-26T08:04:15.174Z (10 months ago)
• Topics: css, javascript, modular, postcss
• Language: JavaScript
• Size: 65.4 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# postcss-modular

PostCSS plugin to modularize classnames

## Installation

```

# yarn

yarn add --dev postcss-modular

# npm

npm install --dev postcss-modular

```

## Examples

```

// foo.css ====================

:local(.className) { background: red; }

:local .className { color: green; }

:local(.className .subClass) { color: green; }

:local .className .subClass :global(.global-class-name) { color: blue; }

// bar.css ====================

@use .className as .basicClassName from './foo';

.basicClassName { color: red; }

.className { color: blue; }

```

Becomes

```

// foo.css ====================

._className_wo9uw_1 { background: red; }

 ._className_wo9uw_1 { color: green; }

._className_wo9uw_1 ._subClass_wo9uw_3 { color: green; }

 ._className_wo9uw_1 ._subClass_wo9uw_3 .global-class-name { color: blue; }

// bar.css ====================

._className_wo9uw_1 { color: red; }

._className_c6lnr_1 { color: blue; }

```

Note that this `postcss-modular` plugin can use classNames from different files with the rule `@use`, even if they are localized. This makes theming possible and reduces code.

## Features

### @use

`@use .className[ as .label][, ...] from ''`

Points to the same className from other file, thus using the same hashed name.

**Note**: If the option `useNoImported` is equals `'error'` the referenced file must be proccessed before the referencer. With `ignore` value, it will just work fine.

### :global

`:global .className` or `:global(.className .subClassName)`

Creates a global scope so the classNames won't be hashed

### :local

Creates a local scope so the classNames will be hashed

**Note**: The option modules defines the default scope of the file. `true` = local, `false` = global

## Options

|Name|Type|Default|Description|

|:--|:--|:-----|:----------|

|**`modules`**|`{Boolean}`|`true`|Enable/Disable CSS Modules|

|**`camelCase`**|`{Boolean}`|`false`|Export Classnames in CamelCase|

|**`useNoImported`**|`{error\|warn\|ignore}`|`error`|Handle no imported css files in @use |

|**`extension`**|`{String}`|`.css`|File extension when omitted in @use |

|**`generateScopedName`**|`{Function}`|`_[name]_[hash:5]_[lineNumber]`|Arguments: className, cssBody|