Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

aesthetic-adapter-glamor

Package Overview
Dependencies
Maintainers
1
Versions
29
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

aesthetic-adapter-glamor - npm Package Compare versions

Comparing version 1.6.2 to 2.0.0-0

15

CHANGELOG.md

@@ -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

26

esm/NativeAdapter.js

@@ -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);
};
}
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc