![PyPI Now Supports iOS and Android Wheels for Mobile Python Development](https://cdn.sanity.io/images/cgdhsj6q/production/96416c872705517a6a65ad9646ce3e7caef623a0-1024x1024.webp?w=400&fit=max&auto=format)
Security News
PyPI Now Supports iOS and Android Wheels for Mobile Python Development
PyPI now supports iOS and Android wheels, making it easier for Python developers to distribute mobile packages.
css-namespacing-loader
Advanced tools
A WebPack Loader that can add namespaces to all class names in a given CSS file
A WebPack Loader dedicated to handling CSS namespaces. It is based on css-namespacing.
This loader has two functions:
This loader is mainly used to prevent global contamination of styles caused by the introduction of third-party CSS.
During development, when compiling CSS code, it will automatically add namespace to the specified classname according to the options.
To begin, you'll need to install css-namespacing-loader
:
$ npm install css-namespacing-loader --save-dev
In the entry file, you import bootstrap
entry.js
import 'bootstrap/dist/css/bootstrap.min.css'
Then add the loader to your webpack
config. For example:
webpack.config.js
module.exports = {
module: {
rules:[
{
test: /\.css$/i,
use: [
"style-loader",
"css-loader",
{
loader:"css-namespacing-loader",
options:{
namespace:[
{ value: 'bsp-', path: [/bootstrap/] }
]
}
}
]
}
]
}
}
After running webpack
via your preferred method,when you want to use bootstrap's style,use bsp-container
instead of container
,like:
<div class="bsp-container">
<div class="bsp-row">
<div class="bsp-col-sm">
One of three columns
</div>
<div class="bsp-col-sm">
One of three columns
</div>
<div class="bsp-col-sm">
One of three columns
</div>
</div>
</div>
In the options
, you can set which classnames do not need to be prefixed, or only which classnames need to be prefixed, and the value of the namespace.
In addition, in the CSS code, you can use @namespacing
flexibly set the above configuration.If you want to learn more,check here.
If you want to learn more about the result after namespacing, please check css-namespacing.
Name | Type | Default | Necessary | Description |
---|---|---|---|---|
namespace | {Array} | undefined | true | An array containing multiple configurations |
Type: Array
Default: undefined
element in namespace
is an object,and it contains the following properties.
Name | Type | Default | Necessary | Description |
---|---|---|---|---|
path | {Array<String/RegExp>} | undefined | false | An array that contains the matching path for the CSS file to add the namespace to |
value | {String} | undefined | false | the value of namespace you want to prefix |
not | {Array<RegExp>} | undefined | false | An array that contains the matching classnames that are not prefixed by specified namespace |
only | {Array<RegExp>} | undefined | false | An array that contains the matching classnames that will only be prefixed by specified namespace |
Type: {Array<String|RegExp>}
Default: undefined
1.use RegExp in Array
For example:
options:{
namespace:[
{ value: 'bsp-', path: [/bootstrap/] }
]
}
It will find matched files through Regexp.prototype.test
like path.test(filepath)
2.use String in Array
For example:
options:{
namespace:[
{ value: 'bsp-', path: [path.resolve(___dirname,'./node_modules/bootstrap/dist/css/bootstrap.min.css']) }
]
}
It will find matched files through String.prototype.includes
like filepath.includes(path)
Attention: It would be better to use path.resolve to get your path thanks to the difference of file separators between window and linux.
3.path is not defined
For example:
options:{
namespace:[
{
value: 'my-',
}
]
}
At this time,it will adds a namespace to the class names of all the scanned CSS files.
Type: {String}
Default: undefined
if value is undefined
,for example:
options:{
namespace:[
{
path:[/bootstrap/]
}
]
}
At this time,the scanned files will not be processed.
Type:{Array<RegExp>}
Default:undefined
For example:
options:{
namespace:[
{
path:[/bootstrap/],
not:[/^box$/]
}
]
}
At this time,all classnames named box
will not be prefixed with namespace in the code of the CSS file being scanned.
For example:
options:{
namespace:[
{
path:[/bootstrap/],
not:[/^box$/]
}
]
}
At this time,in the code of the CSS file being scanned,only the classname named box
will be prefixed with namespace
FAQs
A WebPack Loader that can add namespaces to all class names in a given CSS file
We found that css-namespacing-loader demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
PyPI now supports iOS and Android wheels, making it easier for Python developers to distribute mobile packages.
Security News
Create React App is officially deprecated due to React 19 issues and lack of maintenance—developers should switch to Vite or other modern alternatives.
Security News
Oracle seeks to dismiss fraud claims in the JavaScript trademark dispute, delaying the case and avoiding questions about its right to the name.