aesthetic-adapter-glamor
Advanced tools
Comparing version 1.6.2 to 2.0.0-0
@@ -0,1 +1,16 @@ | ||
# 2.0.0 | ||
#### 💥 Breaking | ||
* Rewritten to support the [core 2.0 changes](https://github.com/milesj/aesthetic/blob/master/packages/aesthetic/CHANGELOG.md). | ||
#### 🚀 New | ||
* Unified Syntax | ||
* Adds new `@supports` at-rule. | ||
* Supports the new `@font-face` structure. | ||
#### 🐞 Fixed | ||
* Fixed a bug in which wrong class names were being created. | ||
#### 🛠 Internal | ||
* Rewritten Flowtype definitions. | ||
# 1.6.2 - 11/10/17 | ||
@@ -2,0 +17,0 @@ #### 🛠 Internal |
@@ -0,1 +1,2 @@ | ||
import _toConsumableArray from 'babel-runtime/helpers/toConsumableArray'; | ||
import _classCallCheck from 'babel-runtime/helpers/classCallCheck'; | ||
@@ -13,2 +14,3 @@ import _createClass from 'babel-runtime/helpers/createClass'; | ||
import { css } from 'glamor'; | ||
import deepMerge from 'lodash.merge'; | ||
@@ -26,24 +28,8 @@ var GlamorAdapter = function (_Adapter) { | ||
key: 'transform', | ||
value: function transform(styleName, declarations) { | ||
var _this2 = this; | ||
if ("production" !== process.env.NODE_ENV) { | ||
if (this.native) { | ||
throw new Error('Glamor does not support React Native.'); | ||
} | ||
value: function transform() { | ||
for (var _len = arguments.length, styles = Array(_len), _key = 0; _key < _len; _key++) { | ||
styles[_key] = arguments[_key]; | ||
} | ||
var output = {}; | ||
Object.keys(declarations).forEach(function (setName) { | ||
var value = declarations[setName]; | ||
if (typeof value === 'string') { | ||
output[setName] = _this2.native ? {} : value; | ||
} else { | ||
output[setName] = styleName + '-' + String(css(value)); | ||
} | ||
}); | ||
return output; | ||
return String(css(deepMerge.apply(undefined, [{}].concat(_toConsumableArray(styles))))); | ||
} | ||
@@ -50,0 +36,0 @@ }]); |
@@ -13,3 +13,3 @@ import _classCallCheck from 'babel-runtime/helpers/classCallCheck'; | ||
import UnifiedSyntax from 'aesthetic/unified'; | ||
import { injectAtRules, injectFallbacks } from 'aesthetic-utils'; | ||
import formatFontFace from 'aesthetic/lib/helpers/formatFontFace'; | ||
import { css } from 'glamor'; | ||
@@ -28,26 +28,22 @@ import GlamorAdapter from './NativeAdapter'; | ||
_this.onDeclaration = function (setName, properties) { | ||
if ('animationName' in properties) { | ||
properties.animationName = _this.syntax.keyframeNames[String(properties.animationName)]; | ||
} | ||
if (_this.syntax.mediaQueries[setName]) { | ||
injectAtRules(properties, '@media', _this.syntax.mediaQueries[setName]); | ||
} | ||
if (_this.syntax.fallbacks[setName]) { | ||
injectFallbacks(properties, _this.syntax.fallbacks[setName]); | ||
} | ||
_this.handleFontFace = function (styleSheet, style, fontFamily) { | ||
style.forEach(function (face) { | ||
css.fontFace(formatFontFace(face)); | ||
}); | ||
}; | ||
_this.onFontFace = function (setName, familyName, properties) { | ||
_this.syntax.fontFaceNames[familyName] = css.fontFace(properties); | ||
_this.handleKeyframe = function (styleSheet, style, animationName) { | ||
_this.syntax.keyframesCache[animationName] = css.keyframes(animationName, style); | ||
}; | ||
_this.onKeyframe = function (setName, animationName, properties) { | ||
_this.syntax.keyframeNames[animationName] = css.keyframes(animationName, properties); | ||
_this.handleProperty = function (declaration, style, property) { | ||
if (property === 'animationName') { | ||
declaration[property] = _this.syntax.injectKeyframes(style, _this.syntax.keyframesCache).join(', '); | ||
} else { | ||
declaration[property] = style; | ||
} | ||
}; | ||
_this.syntax = new UnifiedSyntax(); | ||
_this.syntax.on('declaration', _this.onDeclaration).on('fontFace', _this.onFontFace).on('keyframe', _this.onKeyframe); | ||
_this.syntax.on('property', _this.handleProperty).on('@charset', _this.syntax.createUnsupportedHandler('@charset')).on('@font-face', _this.handleFontFace).on('@import', _this.syntax.createUnsupportedHandler('@import')).on('@keyframes', _this.handleKeyframe).on('@namespace', _this.syntax.createUnsupportedHandler('@namespace')).on('@page', _this.syntax.createUnsupportedHandler('@page')).on('@viewport', _this.syntax.createUnsupportedHandler('@viewport')); | ||
return _this; | ||
@@ -57,11 +53,6 @@ } | ||
_createClass(UnifiedGlamorAdapter, [{ | ||
key: 'convert', | ||
value: function convert(declarations) { | ||
return this.syntax.convert(declarations); | ||
key: 'create', | ||
value: function create(styleSheet) { | ||
return _get(UnifiedGlamorAdapter.prototype.__proto__ || Object.getPrototypeOf(UnifiedGlamorAdapter.prototype), 'create', this).call(this, this.syntax.convert(styleSheet)); | ||
} | ||
}, { | ||
key: 'transform', | ||
value: function transform(styleName, declarations) { | ||
return _get(UnifiedGlamorAdapter.prototype.__proto__ || Object.getPrototypeOf(UnifiedGlamorAdapter.prototype), 'transform', this).call(this, styleName, this.convert(declarations)); | ||
} | ||
}]); | ||
@@ -68,0 +59,0 @@ |
@@ -7,2 +7,6 @@ 'use strict'; | ||
var _toConsumableArray2 = require('babel-runtime/helpers/toConsumableArray'); | ||
var _toConsumableArray3 = _interopRequireDefault(_toConsumableArray2); | ||
var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck'); | ||
@@ -28,10 +32,8 @@ | ||
var _lodash = require('lodash.merge'); | ||
var _lodash2 = _interopRequireDefault(_lodash); | ||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | ||
/** | ||
* @copyright 2017, Miles Johnson | ||
* @license https://opensource.org/licenses/MIT | ||
* | ||
*/ | ||
var GlamorAdapter = function (_Adapter) { | ||
@@ -47,29 +49,17 @@ (0, _inherits3.default)(GlamorAdapter, _Adapter); | ||
key: 'transform', | ||
value: function transform(styleName, declarations) { | ||
var _this2 = this; | ||
if ("production" !== process.env.NODE_ENV) { | ||
if (this.native) { | ||
throw new Error('Glamor does not support React Native.'); | ||
} | ||
value: function transform() { | ||
for (var _len = arguments.length, styles = Array(_len), _key = 0; _key < _len; _key++) { | ||
styles[_key] = arguments[_key]; | ||
} | ||
var output = {}; | ||
Object.keys(declarations).forEach(function (setName) { | ||
var value = declarations[setName]; | ||
if (typeof value === 'string') { | ||
output[setName] = _this2.native ? {} : value; | ||
} else { | ||
output[setName] = styleName + '-' + String((0, _glamor.css)(value)); | ||
} | ||
}); | ||
return output; | ||
return String((0, _glamor.css)(_lodash2.default.apply(undefined, [{}].concat((0, _toConsumableArray3.default)(styles))))); | ||
} | ||
}]); | ||
return GlamorAdapter; | ||
}(_aesthetic.Adapter); | ||
}(_aesthetic.Adapter); /** | ||
* @copyright 2017, Miles Johnson | ||
* @license https://opensource.org/licenses/MIT | ||
* | ||
*/ | ||
exports.default = GlamorAdapter; |
@@ -31,4 +31,6 @@ 'use strict'; | ||
var _aestheticUtils = require('aesthetic-utils'); | ||
var _formatFontFace = require('aesthetic/lib/helpers/formatFontFace'); | ||
var _formatFontFace2 = _interopRequireDefault(_formatFontFace); | ||
var _glamor = require('glamor'); | ||
@@ -57,26 +59,22 @@ | ||
_this.onDeclaration = function (setName, properties) { | ||
if ('animationName' in properties) { | ||
properties.animationName = _this.syntax.keyframeNames[String(properties.animationName)]; | ||
} | ||
if (_this.syntax.mediaQueries[setName]) { | ||
(0, _aestheticUtils.injectAtRules)(properties, '@media', _this.syntax.mediaQueries[setName]); | ||
} | ||
if (_this.syntax.fallbacks[setName]) { | ||
(0, _aestheticUtils.injectFallbacks)(properties, _this.syntax.fallbacks[setName]); | ||
} | ||
_this.handleFontFace = function (styleSheet, style, fontFamily) { | ||
style.forEach(function (face) { | ||
_glamor.css.fontFace((0, _formatFontFace2.default)(face)); | ||
}); | ||
}; | ||
_this.onFontFace = function (setName, familyName, properties) { | ||
_this.syntax.fontFaceNames[familyName] = _glamor.css.fontFace(properties); | ||
_this.handleKeyframe = function (styleSheet, style, animationName) { | ||
_this.syntax.keyframesCache[animationName] = _glamor.css.keyframes(animationName, style); | ||
}; | ||
_this.onKeyframe = function (setName, animationName, properties) { | ||
_this.syntax.keyframeNames[animationName] = _glamor.css.keyframes(animationName, properties); | ||
_this.handleProperty = function (declaration, style, property) { | ||
if (property === 'animationName') { | ||
declaration[property] = _this.syntax.injectKeyframes(style, _this.syntax.keyframesCache).join(', '); | ||
} else { | ||
declaration[property] = style; | ||
} | ||
}; | ||
_this.syntax = new _unified2.default(); | ||
_this.syntax.on('declaration', _this.onDeclaration).on('fontFace', _this.onFontFace).on('keyframe', _this.onKeyframe); | ||
_this.syntax.on('property', _this.handleProperty).on('@charset', _this.syntax.createUnsupportedHandler('@charset')).on('@font-face', _this.handleFontFace).on('@import', _this.syntax.createUnsupportedHandler('@import')).on('@keyframes', _this.handleKeyframe).on('@namespace', _this.syntax.createUnsupportedHandler('@namespace')).on('@page', _this.syntax.createUnsupportedHandler('@page')).on('@viewport', _this.syntax.createUnsupportedHandler('@viewport')); | ||
return _this; | ||
@@ -86,11 +84,6 @@ } | ||
(0, _createClass3.default)(UnifiedGlamorAdapter, [{ | ||
key: 'convert', | ||
value: function convert(declarations) { | ||
return this.syntax.convert(declarations); | ||
key: 'create', | ||
value: function create(styleSheet) { | ||
return (0, _get3.default)(UnifiedGlamorAdapter.prototype.__proto__ || Object.getPrototypeOf(UnifiedGlamorAdapter.prototype), 'create', this).call(this, this.syntax.convert(styleSheet)); | ||
} | ||
}, { | ||
key: 'transform', | ||
value: function transform(styleName, declarations) { | ||
return (0, _get3.default)(UnifiedGlamorAdapter.prototype.__proto__ || Object.getPrototypeOf(UnifiedGlamorAdapter.prototype), 'transform', this).call(this, styleName, this.convert(declarations)); | ||
} | ||
}]); | ||
@@ -97,0 +90,0 @@ return UnifiedGlamorAdapter; |
{ | ||
"name": "aesthetic-adapter-glamor", | ||
"version": "1.6.2", | ||
"version": "2.0.0-0", | ||
"description": "Glamor support for Aesthetic.", | ||
@@ -17,15 +17,15 @@ "keywords": [ | ||
"dependencies": { | ||
"aesthetic-utils": "^1.6.2", | ||
"babel-runtime": "^6.26.0", | ||
"lodash.merge": "^4.6.0", | ||
"prop-types": "^15.6.0" | ||
}, | ||
"peerDependencies": { | ||
"aesthetic": "^1.7.1", | ||
"aesthetic": "^2.0.0-0", | ||
"glamor": "^2.20.40" | ||
}, | ||
"devDependencies": { | ||
"@milesj/build-tool-config": "^0.41.2", | ||
"aesthetic": "^1.7.1", | ||
"@milesj/build-tool-config": "^0.44.0", | ||
"aesthetic": "^2.0.0-0", | ||
"glamor": "^2.20.40" | ||
} | ||
} |
@@ -9,27 +9,10 @@ /** | ||
import { css } from 'glamor'; | ||
import deepMerge from 'lodash.merge'; | ||
import type { StyleDeclarationMap, TransformedStylesMap } from '../../types'; | ||
import type { ClassName, StyleDeclaration } from '../../types'; | ||
export default class GlamorAdapter extends Adapter { | ||
transform(styleName: string, declarations: StyleDeclarationMap): TransformedStylesMap { | ||
if (__DEV__) { | ||
if (this.native) { | ||
throw new Error('Glamor does not support React Native.'); | ||
} | ||
} | ||
const output = {}; | ||
Object.keys(declarations).forEach((setName: string) => { | ||
const value = declarations[setName]; | ||
if (typeof value === 'string') { | ||
output[setName] = this.native ? {} : value; | ||
} else { | ||
output[setName] = `${styleName}-${String(css(value))}`; | ||
} | ||
}); | ||
return output; | ||
transform(...styles: StyleDeclaration[]): ClassName { | ||
return String(css(deepMerge({}, ...styles))); | ||
} | ||
} |
@@ -10,7 +10,12 @@ /** | ||
import UnifiedSyntax from 'aesthetic/unified'; | ||
import { injectAtRules, injectFallbacks } from 'aesthetic-utils'; | ||
import formatFontFace from 'aesthetic/lib/helpers/formatFontFace'; | ||
import { css } from 'glamor'; | ||
import GlamorAdapter from './NativeAdapter'; | ||
import type { StyleDeclarationMap, TransformedStylesMap, CSSStyle } from '../../types'; | ||
import type { | ||
Style, | ||
StyleBlock, | ||
StyleDeclaration, | ||
StyleSheet, | ||
} from '../../types'; | ||
@@ -25,39 +30,37 @@ export default class UnifiedGlamorAdapter extends GlamorAdapter { | ||
this.syntax | ||
.on('declaration', this.onDeclaration) | ||
.on('fontFace', this.onFontFace) | ||
.on('keyframe', this.onKeyframe); | ||
.on('property', this.handleProperty) | ||
.on('@charset', this.syntax.createUnsupportedHandler('@charset')) | ||
.on('@font-face', this.handleFontFace) | ||
.on('@import', this.syntax.createUnsupportedHandler('@import')) | ||
.on('@keyframes', this.handleKeyframe) | ||
.on('@namespace', this.syntax.createUnsupportedHandler('@namespace')) | ||
.on('@page', this.syntax.createUnsupportedHandler('@page')) | ||
.on('@viewport', this.syntax.createUnsupportedHandler('@viewport')); | ||
} | ||
convert(declarations: StyleDeclarationMap): StyleDeclarationMap { | ||
return this.syntax.convert(declarations); | ||
create(styleSheet: StyleSheet): StyleSheet { | ||
return super.create(this.syntax.convert(styleSheet)); | ||
} | ||
transform(styleName: string, declarations: StyleDeclarationMap): TransformedStylesMap { | ||
return super.transform(styleName, this.convert(declarations)); | ||
} | ||
// https://github.com/threepointone/glamor/blob/master/docs/api.md#cssfontfacefont | ||
handleFontFace = (styleSheet: StyleSheet, style: StyleBlock[], fontFamily: string) => { | ||
style.forEach((face) => { | ||
css.fontFace(formatFontFace(face)); | ||
}); | ||
}; | ||
onDeclaration = (setName: string, properties: CSSStyle) => { | ||
// Animation keyframes | ||
if ('animationName' in properties) { | ||
properties.animationName = this.syntax.keyframeNames[String(properties.animationName)]; | ||
} | ||
// https://github.com/threepointone/glamor/blob/master/docs/api.md#csskeyframestimeline | ||
handleKeyframe = (styleSheet: StyleSheet, style: StyleBlock, animationName: string) => { | ||
this.syntax.keyframesCache[animationName] = css.keyframes(animationName, style); | ||
}; | ||
// Media queries | ||
if (this.syntax.mediaQueries[setName]) { | ||
injectAtRules(properties, '@media', this.syntax.mediaQueries[setName]); | ||
} | ||
handleProperty = (declaration: StyleDeclaration, style: Style, property: string) => { | ||
if (property === 'animationName') { | ||
declaration[property] = this.syntax | ||
.injectKeyframes(style, this.syntax.keyframesCache).join(', '); | ||
// Fallbacks | ||
if (this.syntax.fallbacks[setName]) { | ||
injectFallbacks(properties, this.syntax.fallbacks[setName]); | ||
} else { | ||
declaration[property] = style; | ||
} | ||
}; | ||
onFontFace = (setName: string, familyName: string, properties: CSSStyle) => { | ||
this.syntax.fontFaceNames[familyName] = css.fontFace(properties); | ||
}; | ||
onKeyframe = (setName: string, animationName: string, properties: CSSStyle) => { | ||
this.syntax.keyframeNames[animationName] = css.keyframes(animationName, properties); | ||
}; | ||
} |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
No v1
QualityPackage is not semver >=1. This means it is not stable and does not support ^ ranges.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Deprecated
MaintenanceThe maintainer of the package marked it as deprecated. This could indicate that a single version should not be used, or that the package is no longer maintained and any new vulnerabilities will not be fixed.
Found 1 instance in 1 package
Environment variable access
Supply chain riskPackage accesses environment variables, which may be a sign of credential stuffing or data theft.
Found 1 instance in 1 package
15764
0
1
258
2
+ Addedlodash.merge@^4.6.0
+ Addedaesthetic@2.6.0(transitive)
+ Addedlodash@4.17.21(transitive)
- Removedaesthetic-utils@^1.6.2
- Removedaesthetic@1.7.1(transitive)
- Removedaesthetic-utils@1.6.2(transitive)