Skip to content

Commit

Permalink
feat(styling): keep Nuxt style when css=false (#218)
Browse files Browse the repository at this point in the history
* fix: improve inline style detection

* feat: disable amp specific styles

This is useful on pure amp project. With this developer can use SFC styling.

* docs: update docs
  • Loading branch information
farnabaz authored Dec 24, 2020
1 parent 197b242 commit fdad34b
Show file tree
Hide file tree
Showing 2 changed files with 17 additions and 3 deletions.
2 changes: 1 addition & 1 deletion docs/api/options.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ General options of amp module
| Option | Default | Valid values | Description |
| ------ | ------- | ------------ | ----------- |
| cdnBase | `https://cdn.ampproject.org/v0/` | Any String | A CDN Domain to load AMP elements scripts |
| css | `undefined` | Path to CSS style | Custom styles for AMP pages, eg. `~/assets/style/amp-custom.css` |
| css | `undefined` | `false` or Path to CSS style | Custom styles for AMP pages, eg. `~/assets/style/amp-custom.css`. By setting this option to `false`, the module will not remove inline styles, instead it will try to merge all inline styles into a single style tag.|
| tags | `{}` | Object of tag options | Define new tags or modify current tags, for instance if you want to use `amp-mustache` version 0.1, tags value must be `{ 'amp-mustache': { version: '0.1' } }` |
| origin | `` | Any String | Main domain of website. Using this AMP modules tries to add missing canonical link for pages. |
| mode | `hybrid` | `only\|hybrid\|false` | Default behaviour of amp module. (`only` all pages serve in AMP mode by default, `hybrid` pages serves in both normal and AMP mode, `false` pages does not serve AMP by default ) |
Expand Down
18 changes: 16 additions & 2 deletions lib/module.js
Original file line number Diff line number Diff line change
Expand Up @@ -159,11 +159,25 @@ function registerRendererHook (options) {

params.HEAD = params.HEAD
.replace(scriptPattern, v => (v.includes('custom-element') || v.includes('application/ld+json')) ? v : '')

if (options.css !== false) {
/**
* Remove inline styles
*/
params.HEAD = params.HEAD
.replace(/<style[^>]*>[.\S\s]*?<\/style>/g, '')
} else {
/**
* Remove external styles
* Merge inline styles
*/
.replace(/<style[^>]*>.*?<\/style>/g, '')
params.HEAD = params.HEAD.replace(/<\/style>\S*<style [^>]*>/g, '')
.replace(/<style/, '<style amp-custom')
.replace('@charset "UTF-8";', '')
}

/**
* Remove external styles
*/
params.HEAD = removeExternalStyles(params.HEAD)

params.HEAD += AMPBoilerplate
Expand Down

0 comments on commit fdad34b

Please # to comment.