Light

nutboltu / postcss-wrapper-loader Goto Github PK

This plugin wraps all the cssClasses in a css file with a prefix class while webpack bundled. It helps to scope a specific css file with a prefix class

License: MIT License

JavaScript 100.00%

webpack-loader postcss-loader css-wrapper postcss-wrapper-loader

postcss-wrapper-loader's Introduction

PostCss Wrapper Loader for Webpack

Example

This plugin wraps all the cssClasses in a css file with a prefix class while webpack bundled. It helps to scope a specific css file with a prefix class

Consider a simple css file styles.css:

.css-class1 {height: auto;}.css-class2 {width: auto;}

After the postcss-wrapper-loader the file will be following

.wrapper .css-class1 {height: auto;} .wrapper .css-class2 {width: auto;}

How it works

In the webpack config file initialize the loader

const PostCssWrapper = require('postcss-wrapper-loader');

add this plugin in webpack plugins

  plugins: [
    new ExtractTextWebpackPlugin('styles.css'),
    new PostCssWrapper('styles.css', '.wrapper')
  ]

postcss-wrapper-loader's People

Contributors

Stargazers

Watchers

Forkers

3knightcz maghost jinzhan b3nk3

postcss-wrapper-loader's Issues

i found hard to use this in this scenario

I have a webpack configuration that generate multiple bundles from multiple entry point.

i use css-loader to bundle the css files into my js bundle.

I try to find a way to prefix all css files bundled with a prefix. is this possible with this plugin?

Thansk

dont wrap html tag

If there is an html rule i dont believe this should be wrapped, or better yet make it append to the html rule.
for example instead of
.wrapper html { font-size: 16px }
it would be
html.wrapper { font-size: 16px }

Webkit and Moz keyframes get the class prepended

Webkit and Moz keyframes have the class prepended which breaks the css animation.
This #4 PR fixes it.

Prevent wrapping the selector I give as parameter

If the selector I give as parameter has its own styles, I would not wrap it.

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.