Skip to content

Commit

Permalink
feat: inline styles (#67)
Browse files Browse the repository at this point in the history
  • Loading branch information
@farnabaz
farnabaz authored Nov 5, 2020
1 parent 403122c commit 6909267
Show file tree
Hide file tree
Showing 5 changed files with 68 additions and 84 deletions.
2 changes: 0 additions & 2 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@
],
"scripts": {
"build": "yarn clean && tsc && tsc -p tsconfig.runtime.json",
"postbuild": "copyfiles -u 1 src/**/*.css dist",
"clean": "rimraf dist",
"dev": "yarn nuxt-ts playground",
"lint": "eslint --ext .ts --ext .vue .",
Expand Down Expand Up @@ -41,7 +40,6 @@
"@types/jest": "latest",
"@vue/test-utils": "^1.1.0",
"babel-eslint": "latest",
"copyfiles": "latest",
"eslint": "latest",
"jest": "latest",
"jsdom": "^16.4.0",
Expand Down
28 changes: 0 additions & 28 deletions src/runtime/nuxt-image.css
View file

This file was deleted.

36 changes: 33 additions & 3 deletions src/runtime/nuxt-image.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,6 @@ import { renderTag } from './utils'

import nuxtImageMixin, { LazyState } from './nuxt-image-mixins'

import './nuxt-image.css'

// @vue/component
export default {
name: 'NuxtImage',
Expand Down Expand Up @@ -44,6 +42,18 @@ export default {
if (this.placeholder && this.meta.placeholder) {
placeholder = h('img', {
class: '__nim_p',
style: {
position: 'absolute',
left: 0,
top: 0,
margin: 0,
width: '100%',
height: '100%',
objectFit: 'cover',
objectPosition: 'center center',
filter: 'blur(15px)',
transform: 'scale(1.1)'
},
attrs: {
src: this.meta.placeholder
}
Expand All @@ -52,6 +62,21 @@ export default {

const originalImage = h('img', {
class: '__nim_o',
style: {
position: 'absolute',
left: 0,
top: 0,
margin: 0,
width: '100%',
height: '100%',
objectFit: 'cover',
objectPosition: 'center center',
transition: 'opacity 800ms ease 0ms',
opacity: 0,
...(this.lazyState === LazyState.LOADED ? {
opacity: 1
} : {})
},
attrs: {
src: this.lazyState !== LazyState.IDLE ? this.generatedSrc : undefined,
srcset: this.lazyState !== LazyState.IDLE ? this.generatedSrcset : undefined,
Expand Down Expand Up @@ -81,12 +106,17 @@ export default {
const ratioBox = h('div', {
class: '__nim_r',
style: {
width: '100%',
paddingBottom: this.imageRatio ? `${this.imageRatio}%` : undefined
}
})

const wrapper = h('div', {
class: ['__nim_w', this.lazyState === LazyState.LOADED ? 'visible' : ''].concat(this.$attrs.class || ''),
class: this.$attrs.class,
style: {
position: 'relative',
overflow: 'hidden'
},
on: {
click: event => this.$emit('click', event)
}
Expand Down
34 changes: 32 additions & 2 deletions src/runtime/nuxt-picture.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import nuxtImageMixin, { LazyState } from './nuxt-image-mixins'
import './nuxt-image.css'
import { renderTag, isModernFormat } from './utils'

// @vue/component
Expand Down Expand Up @@ -50,6 +49,21 @@ export default {

const originalImage = h('img', {
class: ['__nim_o'],
style: {
position: 'absolute',
left: 0,
top: 0,
margin: 0,
width: '100%',
height: '100%',
objectFit: 'cover',
objectPosition: 'center center',
transition: 'opacity 800ms ease 0ms',
opacity: 0,
...(this.lazyState === LazyState.LOADED ? {
opacity: 1
} : {})
},
attrs: {
src: this.lazyState !== LazyState.IDLE ? this.generatedSrc : undefined,
...this.imgAttributes
Expand All @@ -63,6 +77,18 @@ export default {
if (this.placeholder && this.meta.placeholder) {
placeholder = h('img', {
class: '__nim_p',
style: {
position: 'absolute',
left: 0,
top: 0,
margin: 0,
width: '100%',
height: '100%',
objectFit: 'cover',
objectPosition: 'center center',
filter: 'blur(15px)',
transform: 'scale(1.1)'
},
attrs: {
src: this.meta.placeholder
}
Expand Down Expand Up @@ -105,7 +131,11 @@ export default {
})

const wrapper = h('div', {
class: ['__nim_w', this.lazyState === LazyState.LOADED ? 'visible' : '']
class: this.$attrs.class,
style: {
position: 'relative',
overflow: 'hidden'
}
}, [placeholder, picture, noScript, ratioBox])

return wrapper
Expand Down
52 changes: 3 additions & 49 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3988,19 +3988,6 @@ copy-descriptor@^0.1.0:
resolved "https://registry.yarnpkg.com/copy-descriptor/-/copy-descriptor-0.1.1.tgz#676f6eb3c39997c2ee1ac3a924fd6124748f578d"
integrity sha1-Z29us8OZl8LuGsOpJP1hJHSPV40=

copyfiles@latest:
version "2.4.0"
resolved "https://registry.yarnpkg.com/copyfiles/-/copyfiles-2.4.0.tgz#fcac72a4f2b882f021dd156b4bcf6d71315487bd"
integrity sha512-yGjpR3yjQdxccW8EcJ4a7ZCA6wGER6/Q2Y+b7bXbVxGeSHBf93i9d7MzTsx+VV1CpMKQa3v4ThZfXBcltMzl0w==
dependencies:
glob "^7.0.5"
minimatch "^3.0.3"
mkdirp "^1.0.4"
noms "0.0.0"
through2 "^2.0.1"
untildify "^4.0.0"
yargs "^15.3.1"

core-js-compat@^3.6.2:
version "3.6.5"
resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.6.5.tgz#2a51d9a4e25dfd6e690251aa81f99e3c05481f1c"
Expand Down Expand Up @@ -5917,7 +5904,7 @@ glob-parent@^5.0.0, glob-parent@^5.1.0, glob-parent@~5.1.0:
dependencies:
is-glob "^4.0.1"

glob@^7.0.0, glob@^7.0.5, glob@^7.1.1, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4, glob@^7.1.6:
glob@^7.0.0, glob@^7.1.1, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4, glob@^7.1.6:
version "7.1.6"
resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.6.tgz#141f33b81a7c2492e125594307480c46679278a6"
integrity sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==
Expand Down Expand Up @@ -6920,11 +6907,6 @@ is-wsl@^2.2.0:
dependencies:
is-docker "^2.0.0"

isarray@0.0.1:
version "0.0.1"
resolved "https://registry.yarnpkg.com/isarray/-/isarray-0.0.1.tgz#8a18acfca9a8f4177e09abfc6038939b05d1eedf"
integrity sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=

isarray@1.0.0, isarray@^1.0.0, isarray@~1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
Expand Down Expand Up @@ -8151,7 +8133,7 @@ minimalistic-crypto-utils@^1.0.0, minimalistic-crypto-utils@^1.0.1:
resolved "https://registry.yarnpkg.com/minimalistic-crypto-utils/-/minimalistic-crypto-utils-1.0.1.tgz#f6c00c1c0b082246e5c4d99dfb8c7c083b2b582a"
integrity sha1-9sAMHAsIIkblxNmd+4x8CDsrWCo=

minimatch@3.0.4, minimatch@^3.0.3, minimatch@^3.0.4:
minimatch@3.0.4, minimatch@^3.0.4:
version "3.0.4"
resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.4.tgz#5166e286457f03306064be5497e8dbb0c3d32083"
integrity sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==
Expand Down Expand Up @@ -8471,14 +8453,6 @@ node-res@^5.0.1:
on-finished "^2.3.0"
vary "^1.1.2"

noms@0.0.0:
version "0.0.0"
resolved "https://registry.yarnpkg.com/noms/-/noms-0.0.0.tgz#da8ebd9f3af9d6760919b27d9cdc8092a7332859"
integrity sha1-2o69nzr51nYJGbJ9nNyAkqczKFk=
dependencies:
inherits "^2.0.1"
readable-stream "~1.0.31"

noop-logger@^0.1.1:
version "0.1.1"
resolved "https://registry.yarnpkg.com/noop-logger/-/noop-logger-0.1.1.tgz#94a2b1633c4f1317553007d8966fd0e841b6a4c2"
Expand Down Expand Up @@ -10225,16 +10199,6 @@ read-pkg@^5.2.0:
string_decoder "^1.1.1"
util-deprecate "^1.0.1"

readable-stream@~1.0.31:
version "1.0.34"
resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-1.0.34.tgz#125820e34bc842d2f2aaafafe4c2916ee32c157c"
integrity sha1-Elgg40vIQtLyqq+v5MKRbuMsFXw=
dependencies:
core-util-is "~1.0.0"
inherits "~2.0.1"
isarray "0.0.1"
string_decoder "~0.10.x"

readdirp@^2.2.1:
version "2.2.1"
resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-2.2.1.tgz#0e87622a3325aa33e892285caf8b4e846529a525"
Expand Down Expand Up @@ -11324,11 +11288,6 @@ string_decoder@^1.0.0, string_decoder@^1.1.1:
dependencies:
safe-buffer "~5.2.0"

string_decoder@~0.10.x:
version "0.10.31"
resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-0.10.31.tgz#62e203bc41766c6c28c9fc84301dab1c5310fa94"
integrity sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ=

string_decoder@~1.1.1:
version "1.1.1"
resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.1.1.tgz#9cf1611ba62685d7030ae9e4ba34149c3af03fc8"
Expand Down Expand Up @@ -11628,7 +11587,7 @@ throat@^5.0.0:
resolved "https://registry.yarnpkg.com/throat/-/throat-5.0.0.tgz#c5199235803aad18754a667d659b5e72ce16764b"
integrity sha512-fcwX4mndzpLQKBS1DVYhGAcYaYt7vsHNIvQV+WXMvnow5cgjPphq5CaayLaGsjRdSCKZFNGt7/GYAuXaNOiYCA==

through2@^2.0.0, through2@^2.0.1, through2@^2.0.2:
through2@^2.0.0, through2@^2.0.2:
version "2.0.5"
resolved "https://registry.yarnpkg.com/through2/-/through2-2.0.5.tgz#01c1e39eb31d07cb7d03a96a70823260b23132cd"
integrity sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==
Expand Down Expand Up @@ -11999,11 +11958,6 @@ unset-value@^1.0.0:
has-value "^0.3.1"
isobject "^3.0.0"

untildify@^4.0.0:
version "4.0.0"
resolved "https://registry.yarnpkg.com/untildify/-/untildify-4.0.0.tgz#2bc947b953652487e4600949fb091e3ae8cd919b"
integrity sha512-KK8xQ1mkzZeg9inewmFVDNkg3l5LUhoq9kN6iWYB/CC9YMG8HA+c1Q8HwDe6dEX7kErrEVNVBO3fWsVq5iDgtw==

upath@^1.1.1, upath@^1.2.0:
version "1.2.0"
resolved "https://registry.yarnpkg.com/upath/-/upath-1.2.0.tgz#8f66dbcd55a883acdae4408af8b035a5044c1894"
Expand Down

0 comments on commit 6909267

Please sign in to comment.