open-index/open-npm huggingface dataset:
npm package: @juandinella/penny-pipes
Description: Plugabble pipes for a composable gulp stream
Author: Juan Di Nella
Latest version: 1.7.8

# penny-pipes

Plugabble pipes for a composable gulp stream

```bash
npm install penny-pipes
```

## Example

```js
const gulp = require("gulp");
const styles = require("penny-pipes").styles;

gulp.task("styles", () =>
  gulp
    .src("src/styles/**/!(_)*.scss")
    .pipe(
      styles({
        modules: true,
        name: "main.css",
        production: process.env.NODE_ENV === "production"
      })()
    )
    .on("error", config.onError)
    .pipe(gulp.dest("dist/styles"))
);
```

## Contents

- critical: create critical CSS
- html: html with replace and posthtml
- minifyStyles: minimize, comb, groupCssMediaQueries and nano
- pug: pug and posthtml with modules
- purify: remove unused CSS
- styles: sourcemaps, postCss with autoprefixer

## Penny boilerplate

We use this already on our own Frontend boilerplate, don't be shy and try it out 🎩
npm package: @juandinella/penny-scripts
Description: parse javascript with webpack
Author: Juan Di Nella
Latest version: 1.3.5

# @juandinella/penny-scripts

[![npm version](https://badge.fury.io/js/%40juandinella%2Fpenny-scripts.svg)](https://badge.fury.io/js/%40juandinella%2Fpenny-scripts)
[![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

A highly shareable and customizable webpack config.

## Features

- Dynamic Imports (Code Splitting)
- ES2017+
- JSX
- Linting via `@juandinella/eslint-config`
- Parsing all js (ours and vendor, vendor is cached though)
- Sourcemaps for debugging
- Tree-Shaking
- Extend and customize the underlying config

## Getting Started FAST!

```sh
npm install --dev @juandinella/penny-scripts
```

```sh
npx penny-scripts development
```

:fire:

We have a set of opinions towards how the files should look like for it to be a zero-config situation.

```
# Your project root
.
├── dist
│   └── assets
│       └── js
│           └── main.js # Compiled file
└── src
    └── assets
        └── js
            └── index.js # Your starting point
```

That is to be compliant with the defaults we were using on our `generator-frontend` package, however this is easy to customize.

## Node

Create an `index.js` with the following:

```js
const { compiler } = require("@juandinella/penny-scripts");

// Options are development, production or debug
const mode = "development";
console.log(`Compiling in ${mode} mode...`);

compiler(mode)
  .then(() => console.log(`All done!!`))
  .catch(e => console.log(e));
```

You can now run `node index` to get your JS compiled.

## Gulp

```js
const gulp = require("gulp");
const { compiler } = require("@juandinella/penny-scripts");

gulp.task("start", () => compiler("development"));
gulp.task("build", () => compiler("production"));

gulp.task("default", gulp.series("start"));
```

## Customizing the underlying config

To customize your setup you need to create a `scripts.config.js` file at the root of your project that file will be a function that takes 2 parameters:

- config (the default config) [See Webpack Config](https://webpack.js.org/configuration/)
- webpack (a webpack instance so you can use plugins and whatever)

`scripts.config.js`

```js
module.exports = function(config, webpack) {
  // tweak away esketit

  // Always return the config
  return config;
};
```
npm package: @juandinella/stylelint-config
Description: SCSS Recommendations from Pixel2HTML
Author: Juan Di Nella
Latest version: 1.0.0

# stylelint-config-pixel2html

[Stylelint](https://stylelint.io/) SCSS config recommendations from Pixel2HTML

Your standard every day bro scss stylelint configuration:


## Installation

If you're using our [Frontend Boilerplate](https://github.com/Pixel2HTML/pixel2html-generator) or our [Shopify Boilerplate](https://github.com/Pixel2HTML/shopify-skeleton) then you don't have to do anything you're already linting like a boss.


## Manual Installation

```bash
npm install stylelint @pixel2html/stylelint-config --save-dev
```

## Usage

Just set your stylelint config to:

```json
{
  "extends": "@pixel2html/stylelint-config"
}
```

### Extending the config

Simply add a `"rules"` key to your config, then add your overrides and additions there.

For example, to turn off the `block-no-empty` rule, and add the `unit-whitelist` rule:

```json
{
  "extends": "@pixel2html/stylelint-config",
  "rules": {
    "block-no-empty": null,
    "unit-whitelist": ["em", "rem", "s"]
  }
}
```