Awesome
stylefmt-loader
Installation
npm install --save-dev stylefmt stylefmt-loader
or
yarn add --dev stylefmt stylefmt-loader
Short Description
This loader is meant to be used before pre-processing your css. It fixes stylelint issues automatically while bundling with Webpack.
During bundling, this loader will rewrite your css files with the corrections.
Usage
Inline
require("css!postcss!stylefmt!./file.css");
//or
require("css!sass!stylefmt!./file.scss");
//or any other preproccesor
In webpack.config.js
module: {
rules: [
{
test: /\.scss$/,
use: [
"css-loader",
"sass-loader",
"stylefmt-loader"
]
}
]
}
You can also specify your stylelint for stylefmt to use:
module: {
rules: [
{
test: /\.scss$/,
use: [
"css-loader",
"sass-loader",
{
loader: "stylefmt-loader",
options: {
config: ".stylelintrc"
}
}
]
}
]
}
Your css before running webpack
// mixin for clearfix
@mixin clearfix () { &:before,
&:after {
content:" ";
display : table; }
&:after {clear: both;}
}.class
{
padding:10px;@include clearfix();}
.base { color: red; }
// placeholder
%base
{
padding: 12px
}
.foo{
@extend .base;}
.bar
{ @extend %base;
}
Your css after running webpack
// mixin for clearfix
@mixin clearfix() {
&:before,
&:after {
content: " ";
display: table;
}
&:after {
clear: both;
}
}
.class {
padding: 10px;
@include clearfix();
}
.base {
color: red;
}
// placeholder
%base {
padding: 12px;
}
.foo {
@extend .base;
}
.bar {
@extend %base;
}
Want to help?
Please be specific in your issue. The code is not complex, why not proposing a PR?
Running tests
Right now there's only one test and is kind of automated, a cleaner solution would be nice.
$> npm run test