postcss-modular
v0.0.11
Published
PostCSS plugin to modularize classnames
Downloads
14
Maintainers
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 '<filepath>'
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|