https://github.com/kimulaco/postcss-amp-custom

PostCSS plugin to optimize CSS source for AMP HTML.
https://github.com/kimulaco/postcss-amp-custom

amp amp-html postcss

Last synced: 4 days ago
JSON representation

PostCSS plugin to optimize CSS source for AMP HTML.

• Host: GitHub
• URL: https://github.com/kimulaco/postcss-amp-custom
• Owner: kimulaco
• License: mit
• Created: 2018-06-03T15:19:30.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2023-01-07T10:26:30.000Z (almost 2 years ago)
• Last Synced: 2024-12-01T09:53:18.787Z (about 1 month ago)
• Topics: amp, amp-html, postcss
• Language: JavaScript
• Size: 987 KB
• Stars: 1
• Watchers: 2
• Forks: 3
• Open Issues: 14
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# postcss-amp-custom

[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](https://opensource.org/licenses/MIT)

[![npm version](https://badge.fury.io/js/postcss-amp-custom.svg)](https://badge.fury.io/js/postcss-amp-custom)

[![Build Status](https://github.com/kimulaco/postcss-amp-custom/workflows/Test/badge.svg)](https://github.com/kimulaco/postcss-amp-custom/actions)

PostCSS plugin to optimize CSS source for AMP HTML. Removes styles that are prohibited by AMP HTML.

Supports PostCSS v7 and v8.

[amp-custom](https://github.com/kimulaco/amp-custom) is the core library. However, [amp-custom](https://github.com/kimulaco/amp-custom) will be deprecated in the future, and postcss-amp-custom will be mainly developed.

## Install

```shell

npm install --save-dev postcss-amp-custom

```

## Use

```js

// postcss.config.js

const postcssAmpCustom = require('postcss-amp-custom')

module.exports = () => ({

  plugins: [

    postcssAmpCustom({

      enableByteLimit: true

    })

  ]

})

```

```css

/* ./src/test.css */

@charset "UTF-8";

body {

  font-size: 16px;

}

@page {

  margin: 15mm;

}

@page hoge {

  size: portrait;

  margin: 15mm;

}

a {

  color: #39c !important;

  text-decoration: none;

}

@viewport {

  min-width: 640px;

  max-width: 800px;

}

@supports not (display: flex) {

  .flexbox {

    overflow: hidden;

  }

  .flexbox div {

    float: left;

  }

}

/* ./dist/test.css */

body{font-size:16px}a{color:#39c;text-decoration:none}

```

## Options

- enableByteLimit `Boolean` - If the CSS source exceeds 75KB, it issues an error.(Default: `false`)

## License

[MIT License](https://github.com/kimulaco/postcss-amp-custom/blob/master/LICENSE).