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

@cloudflare/style-provider

Package Overview
Dependencies
Maintainers
25
Versions
520
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@cloudflare/style-provider - npm Package Compare versions

Comparing version 1.1.0 to 1.1.1

8

CHANGELOG.md

@@ -6,2 +6,10 @@ # Change Log

<a name="1.1.1"></a>
## [1.1.1](http://stash.cfops.it:7999/fe/stratus/compare/@cloudflare/style-provider@1.1.0...@cloudflare/style-provider@1.1.1) (2018-06-05)
**Note:** Version bump only for package @cloudflare/style-provider
<a name="1.1.0"></a>

@@ -8,0 +16,0 @@ # [1.1.0](http://stash.cfops.it:7999/www/cf-ux/compare/@cloudflare/style-provider@1.0.7...@cloudflare/style-provider@1.1.0) (2018-06-04)

68

es/createRenderer.js

@@ -1,23 +0,51 @@

import { createRenderer as createFelaRenderer } from 'fela'; // eslint-disable-line behance/no-deprecated
import prefixer from 'fela-plugin-prefixer';
import fallbackValue from 'fela-plugin-fallback-value';
import unit from 'fela-plugin-unit';
import lvha from 'fela-plugin-lvha';
import embedded from 'fela-plugin-embedded';
import namedMediaQuery from 'fela-plugin-named-media-query';
import { variables } from '@cloudflare/style-const'; // eslint-disable-line behance/no-deprecated
Object.defineProperty(exports, "__esModule", {
value: true
});
var _fela = require('fela');
var _felaPluginPrefixer = require('fela-plugin-prefixer');
var _felaPluginPrefixer2 = _interopRequireDefault(_felaPluginPrefixer);
var _felaPluginFallbackValue = require('fela-plugin-fallback-value');
var _felaPluginFallbackValue2 = _interopRequireDefault(_felaPluginFallbackValue);
var _felaPluginUnit = require('fela-plugin-unit');
var _felaPluginUnit2 = _interopRequireDefault(_felaPluginUnit);
var _felaPluginLvha = require('fela-plugin-lvha');
var _felaPluginLvha2 = _interopRequireDefault(_felaPluginLvha);
var _felaPluginEmbedded = require('fela-plugin-embedded');
var _felaPluginEmbedded2 = _interopRequireDefault(_felaPluginEmbedded);
var _felaPluginNamedMediaQuery = require('fela-plugin-named-media-query');
var _felaPluginNamedMediaQuery2 = _interopRequireDefault(_felaPluginNamedMediaQuery);
var _index = require('@cloudflare/style-const/src/index.js');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
// eslint-disable-line behance/no-deprecated
var defaultOpts = {
dev: false
};
}; // eslint-disable-line behance/no-deprecated
var mediaQueries = {
mobile: '@media (min-width: ' + variables.breakpoints.mobile + ')',
mobileWide: '@media (min-width: ' + variables.breakpoints.mobileWide + ')',
tablet: '@media (min-width: ' + variables.breakpoints.tablet + ')',
tabletLegacy: '@media (min-width: ' + variables.breakpoints.tabletLegacy + ')',
tabletWide: '@media (min-width: ' + variables.breakpoints.tabletWide + ')',
desktop: '@media (min-width: ' + variables.breakpoints.desktop + ')',
desktopLegacy: '@media (min-width: ' + variables.breakpoints.desktopLegacy + ')',
desktopLarge: '@media (min-width: ' + variables.breakpoints.desktopLarge + ')',
mobile: '@media (min-width: ' + _index.variables.breakpoints.mobile + ')',
mobileWide: '@media (min-width: ' + _index.variables.breakpoints.mobileWide + ')',
tablet: '@media (min-width: ' + _index.variables.breakpoints.tablet + ')',
tabletLegacy: '@media (min-width: ' + _index.variables.breakpoints.tabletLegacy + ')',
tabletWide: '@media (min-width: ' + _index.variables.breakpoints.tabletWide + ')',
desktop: '@media (min-width: ' + _index.variables.breakpoints.desktop + ')',
desktopLegacy: '@media (min-width: ' + _index.variables.breakpoints.desktopLegacy + ')',
desktopLarge: '@media (min-width: ' + _index.variables.breakpoints.desktopLarge + ')',
hover: '@media (hover)'

@@ -32,3 +60,3 @@ };

var usedOpts = Object.assign({}, defaultOpts, opts);
var plugins = [prefixer(), fallbackValue(), unit(), lvha(), embedded(), namedMediaQuery(mediaQueries)];
var plugins = [(0, _felaPluginPrefixer2.default)(), (0, _felaPluginFallbackValue2.default)(), (0, _felaPluginUnit2.default)(), (0, _felaPluginLvha2.default)(), (0, _felaPluginEmbedded2.default)(), (0, _felaPluginNamedMediaQuery2.default)(mediaQueries)];
var enhancers = [];

@@ -45,3 +73,3 @@

return createFelaRenderer({
return (0, _fela.createRenderer)({
plugins: plugins,

@@ -54,2 +82,2 @@ enhancers: enhancers,

export default createRenderer;
exports.default = createRenderer;

@@ -1,7 +0,25 @@

import renderer from 'react-test-renderer';
import { renderToString } from 'fela-tools';
import felaTestContext from './felaTestContext';
import createRenderer from './createRenderer';
import cssbeautify from 'cssbeautify';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _reactTestRenderer = require('react-test-renderer');
var _reactTestRenderer2 = _interopRequireDefault(_reactTestRenderer);
var _felaTools = require('fela-tools');
var _felaTestContext = require('./felaTestContext');
var _felaTestContext2 = _interopRequireDefault(_felaTestContext);
var _createRenderer = require('./createRenderer');
var _createRenderer2 = _interopRequireDefault(_createRenderer);
var _cssbeautify = require('cssbeautify');
var _cssbeautify2 = _interopRequireDefault(_cssbeautify);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var options = {

@@ -13,6 +31,6 @@ indent: ' ',

export default (function (component) {
exports.default = function (component) {
var renderOptions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
var felaRenderer = createRenderer({
var felaRenderer = (0, _createRenderer2.default)({
dev: true

@@ -22,5 +40,5 @@ });

return {
component: renderer.create(felaTestContext(component, felaRenderer), renderOptions).toJSON(),
styles: '\n' + cssbeautify(renderToString(felaRenderer), options) + '\n'
component: _reactTestRenderer2.default.create((0, _felaTestContext2.default)(component, felaRenderer), renderOptions).toJSON(),
styles: '\n' + (0, _cssbeautify2.default)((0, _felaTools.renderToString)(felaRenderer), options) + '\n'
};
});
};

@@ -0,10 +1,21 @@

Object.defineProperty(exports, "__esModule", {
value: true
});
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _StyleProvider = require('./StyleProvider');
var _StyleProvider2 = _interopRequireDefault(_StyleProvider);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
// this is a wrapper for testing, it passes fela based
// components fela's renderer and global theme
import React from 'react';
import StyleProvider from './StyleProvider';
var felaTestContext = function felaTestContext(component, renderer) {
return React.createElement(
StyleProvider,
return _react2.default.createElement(
_StyleProvider2.default,
{ renderer: renderer, dev: true },

@@ -15,2 +26,2 @@ component

export default felaTestContext;
exports.default = felaTestContext;

@@ -1,4 +0,16 @@

import createRenderer from './createRenderer';
import StyleProvider from './StyleProvider';
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.felaSnapshot = exports.felaTestContext = exports.StyleProvider = exports.createRenderer = undefined;
var _createRenderer = require('./createRenderer');
var _createRenderer2 = _interopRequireDefault(_createRenderer);
var _StyleProvider = require('./StyleProvider');
var _StyleProvider2 = _interopRequireDefault(_StyleProvider);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var isProd = process.env.NODE_ENV === 'production';

@@ -8,2 +20,5 @@ var felaSnapshot = isProd ? null : require('./felaSnapshot').default;

export { createRenderer, StyleProvider, felaTestContext, felaSnapshot };
exports.createRenderer = _createRenderer2.default;
exports.StyleProvider = _StyleProvider2.default;
exports.felaTestContext = felaTestContext;
exports.felaSnapshot = felaSnapshot;

@@ -0,12 +1,31 @@

Object.defineProperty(exports, "__esModule", {
value: true
});
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
var _react = require('react');
import React, { Children, isValidElement, cloneElement } from 'react';
import PropTypes from 'prop-types';
import createRenderer from './createRenderer';
import { Provider } from 'react-fela'; // eslint-disable-line behance/no-deprecated
import { variables } from '@cloudflare/style-const'; // eslint-disable-line behance/no-deprecated
import { ThemeProvider } from '@cloudflare/style-container';
var _react2 = _interopRequireDefault(_react);
var _propTypes = require('prop-types');
var _propTypes2 = _interopRequireDefault(_propTypes);
var _createRenderer = require('./createRenderer');
var _createRenderer2 = _interopRequireDefault(_createRenderer);
var _reactFela = require('react-fela');
var _index = require('@cloudflare/style-const/src/index.js');
var _index2 = require('@cloudflare/style-container/src/index.js');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; } // eslint-disable-line behance/no-deprecated
// eslint-disable-line behance/no-deprecated
var StyleProvider = function StyleProvider(_ref) {

@@ -19,13 +38,13 @@ var dev = _ref.dev,

var providerRenderer = renderer || createRenderer({
var providerRenderer = renderer || (0, _createRenderer2.default)({
dev: dev
});
var child = Children.only(children);
return React.createElement(
Provider,
var child = _react.Children.only(children);
return _react2.default.createElement(
_reactFela.Provider,
{ renderer: providerRenderer, rehydrate: rehydrate },
React.createElement(
ThemeProvider,
{ theme: variables },
isValidElement(child) ? cloneElement(child, _extends({}, restProps)) : child
_react2.default.createElement(
_index2.ThemeProvider,
{ theme: _index.variables },
(0, _react.isValidElement)(child) ? (0, _react.cloneElement)(child, _extends({}, restProps)) : child
)

@@ -36,8 +55,8 @@ );

StyleProvider.propTypes = {
children: PropTypes.node,
dev: PropTypes.bool,
renderer: PropTypes.object,
rehydrate: PropTypes.bool
children: _propTypes2.default.node,
dev: _propTypes2.default.bool,
renderer: _propTypes2.default.object,
rehydrate: _propTypes2.default.bool
};
export default StyleProvider;
exports.default = StyleProvider;

@@ -0,1 +1,5 @@

Object.defineProperty(exports, "__esModule", {
value: true
});
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

@@ -5,2 +9,4 @@

exports.default = whitelistMediaQuery;
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

@@ -34,3 +40,3 @@

export default function whitelistMediaQuery(mediaQueryMap) {
function whitelistMediaQuery(mediaQueryMap) {
return function (style) {

@@ -37,0 +43,0 @@ return checkMediaQuery(style, flipKeysAndValues(mediaQueryMap), Object.keys(mediaQueryMap));

@@ -33,3 +33,3 @@ 'use strict';

var _styleConst = require('@cloudflare/style-const');
var _index = require('@cloudflare/style-const/src/index.js');

@@ -40,3 +40,3 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

const defaultOpts = {
var defaultOpts = {
dev: false

@@ -46,25 +46,27 @@ }; // eslint-disable-line behance/no-deprecated

const mediaQueries = {
mobile: `@media (min-width: ${_styleConst.variables.breakpoints.mobile})`,
mobileWide: `@media (min-width: ${_styleConst.variables.breakpoints.mobileWide})`,
tablet: `@media (min-width: ${_styleConst.variables.breakpoints.tablet})`,
tabletLegacy: `@media (min-width: ${_styleConst.variables.breakpoints.tabletLegacy})`,
tabletWide: `@media (min-width: ${_styleConst.variables.breakpoints.tabletWide})`,
desktop: `@media (min-width: ${_styleConst.variables.breakpoints.desktop})`,
desktopLegacy: `@media (min-width: ${_styleConst.variables.breakpoints.desktopLegacy})`,
desktopLarge: `@media (min-width: ${_styleConst.variables.breakpoints.desktopLarge})`,
hover: `@media (hover)`
var mediaQueries = {
mobile: '@media (min-width: ' + _index.variables.breakpoints.mobile + ')',
mobileWide: '@media (min-width: ' + _index.variables.breakpoints.mobileWide + ')',
tablet: '@media (min-width: ' + _index.variables.breakpoints.tablet + ')',
tabletLegacy: '@media (min-width: ' + _index.variables.breakpoints.tabletLegacy + ')',
tabletWide: '@media (min-width: ' + _index.variables.breakpoints.tabletWide + ')',
desktop: '@media (min-width: ' + _index.variables.breakpoints.desktop + ')',
desktopLegacy: '@media (min-width: ' + _index.variables.breakpoints.desktopLegacy + ')',
desktopLarge: '@media (min-width: ' + _index.variables.breakpoints.desktopLarge + ')',
hover: '@media (hover)'
};
const removePrefix = query => query.replace('@media ', '');
var removePrefix = function removePrefix(query) {
return query.replace('@media ', '');
};
const createRenderer = opts => {
const usedOpts = Object.assign({}, defaultOpts, opts);
const plugins = [(0, _felaPluginPrefixer2.default)(), (0, _felaPluginFallbackValue2.default)(), (0, _felaPluginUnit2.default)(), (0, _felaPluginLvha2.default)(), (0, _felaPluginEmbedded2.default)(), (0, _felaPluginNamedMediaQuery2.default)(mediaQueries)];
const enhancers = [];
var createRenderer = function createRenderer(opts) {
var usedOpts = Object.assign({}, defaultOpts, opts);
var plugins = [(0, _felaPluginPrefixer2.default)(), (0, _felaPluginFallbackValue2.default)(), (0, _felaPluginUnit2.default)(), (0, _felaPluginLvha2.default)(), (0, _felaPluginEmbedded2.default)(), (0, _felaPluginNamedMediaQuery2.default)(mediaQueries)];
var enhancers = [];
if (usedOpts.dev === true) {
const validator = require('fela-plugin-validator').default;
const whitelistMediaQuery = require('./whitelistMediaQuery').default;
const beautifier = require('fela-beautifier').default;
var validator = require('fela-plugin-validator').default;
var whitelistMediaQuery = require('./whitelistMediaQuery').default;
var beautifier = require('fela-beautifier').default;
plugins.push(validator());

@@ -76,4 +78,4 @@ plugins.push(whitelistMediaQuery(mediaQueries));

return (0, _fela.createRenderer)({
plugins,
enhancers,
plugins: plugins,
enhancers: enhancers,
selectorPrefix: usedOpts.selectorPrefix,

@@ -80,0 +82,0 @@ mediaQueryOrder: [removePrefix(mediaQueries.hover), removePrefix(mediaQueries.mobile), removePrefix(mediaQueries.mobileWide), removePrefix(mediaQueries.tablet), removePrefix(mediaQueries.tabletLegacy), removePrefix(mediaQueries.tabletWide), removePrefix(mediaQueries.desktop), removePrefix(mediaQueries.desktopLegacy), removePrefix(mediaQueries.desktopLarge)]

@@ -27,3 +27,3 @@ 'use strict';

const options = {
var options = {
indent: ' ',

@@ -34,4 +34,6 @@ openbrace: 'end-of-line',

exports.default = (component, renderOptions = {}) => {
const felaRenderer = (0, _createRenderer2.default)({
exports.default = function (component) {
var renderOptions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
var felaRenderer = (0, _createRenderer2.default)({
dev: true

@@ -42,4 +44,4 @@ });

component: _reactTestRenderer2.default.create((0, _felaTestContext2.default)(component, felaRenderer), renderOptions).toJSON(),
styles: `\n${(0, _cssbeautify2.default)((0, _felaTools.renderToString)(felaRenderer), options)}\n`
styles: '\n' + (0, _cssbeautify2.default)((0, _felaTools.renderToString)(felaRenderer), options) + '\n'
};
};

@@ -20,8 +20,10 @@ 'use strict';

const felaTestContext = (component, renderer) => _react2.default.createElement(
_StyleProvider2.default,
{ renderer: renderer, dev: true },
component
);
var felaTestContext = function felaTestContext(component, renderer) {
return _react2.default.createElement(
_StyleProvider2.default,
{ renderer: renderer, dev: true },
component
);
};
exports.default = felaTestContext;

@@ -18,5 +18,5 @@ 'use strict';

const isProd = process.env.NODE_ENV === 'production';
const felaSnapshot = isProd ? null : require('./felaSnapshot').default;
const felaTestContext = isProd ? null : require('./felaTestContext').default;
var isProd = process.env.NODE_ENV === 'production';
var felaSnapshot = isProd ? null : require('./felaSnapshot').default;
var felaTestContext = isProd ? null : require('./felaTestContext').default;

@@ -23,0 +23,0 @@ exports.createRenderer = _createRenderer2.default;

@@ -23,5 +23,5 @@ 'use strict';

var _styleConst = require('@cloudflare/style-const');
var _index = require('@cloudflare/style-const/src/index.js');
var _styleContainer = require('@cloudflare/style-container');
var _index2 = require('@cloudflare/style-container/src/index.js');

@@ -34,15 +34,13 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

const StyleProvider = (_ref) => {
let {
dev,
children,
renderer,
rehydrate
} = _ref,
var StyleProvider = function StyleProvider(_ref) {
var dev = _ref.dev,
children = _ref.children,
renderer = _ref.renderer,
rehydrate = _ref.rehydrate,
restProps = _objectWithoutProperties(_ref, ['dev', 'children', 'renderer', 'rehydrate']);
const providerRenderer = renderer || (0, _createRenderer2.default)({
dev
var providerRenderer = renderer || (0, _createRenderer2.default)({
dev: dev
});
const child = _react.Children.only(children);
var child = _react.Children.only(children);
return _react2.default.createElement(

@@ -52,4 +50,4 @@ _reactFela.Provider,

_react2.default.createElement(
_styleContainer.ThemeProvider,
{ theme: _styleConst.variables },
_index2.ThemeProvider,
{ theme: _index.variables },
(0, _react.isValidElement)(child) ? (0, _react.cloneElement)(child, _extends({}, restProps)) : child

@@ -56,0 +54,0 @@ )

@@ -9,11 +9,22 @@ 'use strict';

var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
exports.default = whitelistMediaQuery;
const isObject = value => typeof value === 'object' && !Array.isArray(value);
const flipKeysAndValues = input => Object.keys(input).reduce((obj, key) => _extends({}, obj, { [input[key]]: key }), {});
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
var isObject = function isObject(value) {
return (typeof value === 'undefined' ? 'undefined' : _typeof(value)) === 'object' && !Array.isArray(value);
};
var flipKeysAndValues = function flipKeysAndValues(input) {
return Object.keys(input).reduce(function (obj, key) {
return _extends({}, obj, _defineProperty({}, input[key], key));
}, {});
};
function checkMediaQuery(style, mediaQueryMap, aliases) {
for (const property in style) {
for (var property in style) {
if (style.hasOwnProperty(property)) {
const value = style[property];
var value = style[property];

@@ -23,4 +34,3 @@ if (isObject(value)) {

if (property.substring(0, 6) === '@media' && !mediaQueryMap.hasOwnProperty(property)) {
console.warn(`Please don't use "${property}". Use one of the aliases: ${aliases.join(', ')}.
More info: https://github.com/cloudflare/cf-ui/tree/master/packages/cf-style-provider#named-media-query`);
console.warn('Please don\'t use "' + property + '". Use one of the aliases: ' + aliases.join(', ') + '.\nMore info: https://github.com/cloudflare/cf-ui/tree/master/packages/cf-style-provider#named-media-query');
}

@@ -34,3 +44,5 @@ }

function whitelistMediaQuery(mediaQueryMap) {
return style => checkMediaQuery(style, flipKeysAndValues(mediaQueryMap), Object.keys(mediaQueryMap));
return function (style) {
return checkMediaQuery(style, flipKeysAndValues(mediaQueryMap), Object.keys(mediaQueryMap));
};
}
{
"name": "@cloudflare/style-provider",
"description": "Cloudflare Style Provider",
"version": "1.1.0",
"version": "1.1.1",
"main": "lib/index.js",

@@ -15,4 +15,4 @@ "module": "es/index.js",

"dependencies": {
"@cloudflare/style-const": "^1.0.5",
"@cloudflare/style-container": "^1.0.6",
"@cloudflare/style-const": "^1.0.6",
"@cloudflare/style-container": "^1.0.7",
"cssbeautify": "^0.3.1",

@@ -19,0 +19,0 @@ "fela": "^6.0.5",

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