Socket
Socket
Sign inDemoInstall

styled-components

Package Overview
Dependencies
Maintainers
2
Versions
358
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

styled-components - npm Package Compare versions

Comparing version 1.0.6 to 1.0.7

docs/existing-css.md
lib/test/basic.test.js
lib/test/css.test.js
lib/test/extending.test.js
lib/test/props.test.js
lib/test/styles.test.js
lib/test/theme.test.js
lib/test/utils.js
src/test/basic.test.js
src/test/css.test.js
src/test/extending.test.js
src/test/props.test.js
src/test/styles.test.js
src/test/theme.test.js
src/test/utils.js

15

CHANGELOG.md

@@ -17,6 +17,19 @@ # Change Log

## [v1.0.6] - 2016-10-16
## [v1.0.7] – 2016-10-18
### Added
- Documentation about integrating with an existing CSS codebase
- Support for CSS custom variables
### Changed
- Move react from dependencies to `peer–` & `devDependencies`, thanks to [@sheepsteak](https://github.com/sheepsteak)! (see [#93](https://github.com/styled-components/styled-components/pull/93))
- Fix cyclical dependency deadlock in `.es.js` bundle that forced us to revert v1.0.6, thanks to [@Rich-Harris](https://github.com/Rich-Harris)! (see [#100](https://github.com/styled-components/styled-components/pull/100))
- Refactored and added to e2e test suite
## [v1.0.6] - 2016-10-16 REVERTED
### Added
- `CHANGELOG.md` for tracking changes between versions

@@ -23,0 +36,0 @@ - Support for Internet Explorer by removing `Symbol` from the transpiled output

6

docs/css-we-support.md
# CSS We Support
Within a styled component, we support quite a lot of CSS: (including nesting)
Within a styled component, we support all of CSS, including nesting – since we generate an actual stylesheet and not inline styles, whatever works in CSS works in a styled component!

@@ -25,5 +25,5 @@ ```js

> **Note:** Essentially, all ampersands (`&`) get replaced by our generated, unique classname
> **Note:** Ampersands (`&`) get replaced by our generated, unique classname for that styled component, making it easy to have complex logic
On top of that you can always use `injectGlobal` for actually global things like `@font-face`:
On top of that you can always use `injectGlobal` for actually global things, like `@font-face`:

@@ -30,0 +30,0 @@ ```js

2

docs/README.md

@@ -10,4 +10,4 @@ # Documentation

- [Tagged Template Literals](./tagged-template-literals.md): How do they work?
- [Using `styled-components` with existing CSS](./existing-css.md): Some edge cases you should be aware of when using `styled-components` with an existing CSS codebase
- [What CSS we support](./css-we-support.md): What parts & extensions of CSS can you use within a component?
- [Theming](./theming.md): How to work with themes

2

lib/constructors/styled.js

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

/* Shorthands for all valid HTML properties */
/* Shorthands for all valid HTML Elements */
// Thanks to ReactDOMFactories for this handy list!

@@ -27,0 +27,0 @@ styled.a = styled('a');

3

lib/utils/autoprefix.js

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

root.walkDecls(function (decl) {
/* No point even checking custom props */
if (decl.prop.startsWith('--')) return;
var objStyle = _defineProperty({}, (0, _camelizeStyleName2.default)(decl.prop), decl.value);

@@ -25,0 +28,0 @@ var prefixed = (0, _autoprefix.autoprefix)(objStyle);

443

lib/utils/validAttr.js

@@ -6,14 +6,2 @@ 'use strict';

});
var _HTMLDOMPropertyConfig = require('react/lib/HTMLDOMPropertyConfig');
var _HTMLDOMPropertyConfig2 = _interopRequireDefault(_HTMLDOMPropertyConfig);
var _SVGDOMPropertyConfig = require('react/lib/SVGDOMPropertyConfig');
var _SVGDOMPropertyConfig2 = _interopRequireDefault(_SVGDOMPropertyConfig);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
/* Logic copied from ReactDOMUnknownPropertyHook */
/* Trying to avoid the unknown-prop errors on styled components

@@ -23,2 +11,3 @@ by filtering by React's attribute whitelist.

/* Logic copied from ReactDOMUnknownPropertyHook */
var reactProps = {

@@ -178,8 +167,436 @@ children: true,

/* From HTMLDOMPropertyConfig */
var htmlProps = {
/**
* Standard Properties
*/
accept: true,
acceptCharset: true,
accessKey: true,
action: true,
allowFullScreen: true,
allowTransparency: true,
alt: true,
// specifies target context for links with `preload` type
as: true,
async: true,
autoComplete: true,
// autoFocus is polyfilled/normalized by AutoFocusUtils
// autoFocus: true,
autoPlay: true,
capture: true,
cellPadding: true,
cellSpacing: true,
charSet: true,
challenge: true,
checked: true,
cite: true,
classID: true,
className: true,
cols: true,
colSpan: true,
content: true,
contentEditable: true,
contextMenu: true,
controls: true,
coords: true,
crossOrigin: true,
data: true, // For `<object />` acts as `src`.
dateTime: true,
default: true,
defer: true,
dir: true,
disabled: true,
download: true,
draggable: true,
encType: true,
form: true,
formAction: true,
formEncType: true,
formMethod: true,
formNoValidate: true,
formTarget: true,
frameBorder: true,
headers: true,
height: true,
hidden: true,
high: true,
href: true,
hrefLang: true,
htmlFor: true,
httpEquiv: true,
icon: true,
id: true,
inputMode: true,
integrity: true,
is: true,
keyParams: true,
keyType: true,
kind: true,
label: true,
lang: true,
list: true,
loop: true,
low: true,
manifest: true,
marginHeight: true,
marginWidth: true,
max: true,
maxLength: true,
media: true,
mediaGroup: true,
method: true,
min: true,
minLength: true,
// Caution; `option.selected` is not updated if `select.multiple` is
// disabled with `removeAttribute`.
multiple: true,
muted: true,
name: true,
nonce: true,
noValidate: true,
open: true,
optimum: true,
pattern: true,
placeholder: true,
playsInline: true,
poster: true,
preload: true,
profile: true,
radioGroup: true,
readOnly: true,
referrerPolicy: true,
rel: true,
required: true,
reversed: true,
role: true,
rows: true,
rowSpan: true,
sandbox: true,
scope: true,
scoped: true,
scrolling: true,
seamless: true,
selected: true,
shape: true,
size: true,
sizes: true,
span: true,
spellCheck: true,
src: true,
srcDoc: true,
srcLang: true,
srcSet: true,
start: true,
step: true,
style: true,
summary: true,
tabIndex: true,
target: true,
title: true,
// Setting .type throws on non-<input> tags
type: true,
useMap: true,
value: true,
width: true,
wmode: true,
wrap: true,
/**
* RDFa Properties
*/
about: true,
datatype: true,
inlist: true,
prefix: true,
// property is also supported for OpenGraph in meta tags.
property: true,
resource: true,
typeof: true,
vocab: true,
/**
* Non-standard Properties
*/
// autoCapitalize and autoCorrect are supported in Mobile Safari for
// keyboard hints.
autoCapitalize: true,
autoCorrect: true,
// autoSave allows WebKit/Blink to persist values of input fields on page reloads
autoSave: true,
// color is for Safari mask-icon link
color: true,
// itemProp, itemScope, itemType are for
// Microdata support. See http://schema.org/docs/gs.html
itemProp: true,
itemScope: true,
itemType: true,
// itemID and itemRef are for Microdata support as well but
// only specified in the WHATWG spec document. See
// https://html.spec.whatwg.org/multipage/microdata.html#microdata-dom-api
itemID: true,
itemRef: true,
// results show looking glass icon and recent searches on input
// search fields in WebKit/Blink
results: true,
// IE-only attribute that specifies security restrictions on an iframe
// as an alternative to the sandbox attribute on IE<10
security: true,
// IE-only attribute that controls focus behavior
unselectable: 0
};
var svgProps = {
accentHeight: true,
accumulate: true,
additive: true,
alignmentBaseline: true,
allowReorder: true,
alphabetic: true,
amplitude: true,
arabicForm: true,
ascent: true,
attributeName: true,
attributeType: true,
autoReverse: true,
azimuth: true,
baseFrequency: true,
baseProfile: true,
baselineShift: true,
bbox: true,
begin: true,
bias: true,
by: true,
calcMode: true,
capHeight: true,
clip: true,
clipPath: true,
clipRule: true,
clipPathUnits: true,
colorInterpolation: true,
colorInterpolationFilters: true,
colorProfile: true,
colorRendering: true,
contentScriptType: true,
contentStyleType: true,
cursor: true,
cx: true,
cy: true,
d: true,
decelerate: true,
descent: true,
diffuseConstant: true,
direction: true,
display: true,
divisor: true,
dominantBaseline: true,
dur: true,
dx: true,
dy: true,
edgeMode: true,
elevation: true,
enableBackground: true,
end: true,
exponent: true,
externalResourcesRequired: true,
fill: true,
fillOpacity: true,
fillRule: true,
filter: true,
filterRes: true,
filterUnits: true,
floodColor: true,
floodOpacity: true,
focusable: true,
fontFamily: true,
fontSize: true,
fontSizeAdjust: true,
fontStretch: true,
fontStyle: true,
fontVariant: true,
fontWeight: true,
format: true,
from: true,
fx: true,
fy: true,
g1: true,
g2: true,
glyphName: true,
glyphOrientationHorizontal: true,
glyphOrientationVertical: true,
glyphRef: true,
gradientTransform: true,
gradientUnits: true,
hanging: true,
horizAdvX: true,
horizOriginX: true,
ideographic: true,
imageRendering: true,
in: true,
in2: true,
intercept: true,
k: true,
k1: true,
k2: true,
k3: true,
k4: true,
kernelMatrix: true,
kernelUnitLength: true,
kerning: true,
keyPoints: true,
keySplines: true,
keyTimes: true,
lengthAdjust: true,
letterSpacing: true,
lightingColor: true,
limitingConeAngle: true,
local: true,
markerEnd: true,
markerMid: true,
markerStart: true,
markerHeight: true,
markerUnits: true,
markerWidth: true,
mask: true,
maskContentUnits: true,
maskUnits: true,
mathematical: true,
mode: true,
numOctaves: true,
offset: true,
opacity: true,
operator: true,
order: true,
orient: true,
orientation: true,
origin: true,
overflow: true,
overlinePosition: true,
overlineThickness: true,
paintOrder: true,
panose1: true,
pathLength: true,
patternContentUnits: true,
patternTransform: true,
patternUnits: true,
pointerEvents: true,
points: true,
pointsAtX: true,
pointsAtY: true,
pointsAtZ: true,
preserveAlpha: true,
preserveAspectRatio: true,
primitiveUnits: true,
r: true,
radius: true,
refX: true,
refY: true,
renderingIntent: true,
repeatCount: true,
repeatDur: true,
requiredExtensions: true,
requiredFeatures: true,
restart: true,
result: true,
rotate: true,
rx: true,
ry: true,
scale: true,
seed: true,
shapeRendering: true,
slope: true,
spacing: true,
specularConstant: true,
specularExponent: true,
speed: true,
spreadMethod: true,
startOffset: true,
stdDeviation: true,
stemh: true,
stemv: true,
stitchTiles: true,
stopColor: true,
stopOpacity: true,
strikethroughPosition: true,
strikethroughThickness: true,
string: true,
stroke: true,
strokeDasharray: true,
strokeDashoffset: true,
strokeLinecap: true,
strokeLinejoin: true,
strokeMiterlimit: true,
strokeOpacity: true,
strokeWidth: true,
surfaceScale: true,
systemLanguage: true,
tableValues: true,
targetX: true,
targetY: true,
textAnchor: true,
textDecoration: true,
textRendering: true,
textLength: true,
to: true,
transform: true,
u1: true,
u2: true,
underlinePosition: true,
underlineThickness: true,
unicode: true,
unicodeBidi: true,
unicodeRange: true,
unitsPerEm: true,
vAlphabetic: true,
vHanging: true,
vIdeographic: true,
vMathematical: true,
values: true,
vectorEffect: true,
version: true,
vertAdvY: true,
vertOriginX: true,
vertOriginY: true,
viewBox: true,
viewTarget: true,
visibility: true,
widths: true,
wordSpacing: true,
writingMode: true,
x: true,
xHeight: true,
x1: true,
x2: true,
xChannelSelector: true,
xlinkActuate: true,
xlinkArcrole: true,
xlinkHref: true,
xlinkRole: true,
xlinkShow: true,
xlinkTitle: true,
xlinkType: true,
xmlBase: true,
xmlns: true,
xmlnsXlink: true,
xmlLang: true,
xmlSpace: true,
y: true,
y1: true,
y2: true,
yChannelSelector: true,
z: true,
zoomAndPan: true
};
/* From DOMProperty */
var ATTRIBUTE_NAME_START_CHAR = ':A-Z_a-z\\u00C0-\\u00D6\\u00D8-\\u00F6\\u00F8-\\u02FF\\u0370-\\u037D\\u037F-\\u1FFF\\u200C-\\u200D\\u2070-\\u218F\\u2C00-\\u2FEF\\u3001-\\uD7FF\\uF900-\\uFDCF\\uFDF0-\\uFFFD';
var ATTRIBUTE_NAME_CHAR = ATTRIBUTE_NAME_START_CHAR + '\\-.0-9\\u00B7\\u0300-\\u036F\\u203F-\\u2040';
var isCustomAttribute = RegExp.prototype.test.bind(new RegExp('^(data|aria)-[' + ATTRIBUTE_NAME_CHAR + ']*$'));
var hasOwnProperty = {}.hasOwnProperty;
exports.default = function (name) {
return hasOwnProperty.call(_HTMLDOMPropertyConfig2.default.Properties, name) || hasOwnProperty.call(_SVGDOMPropertyConfig2.default.Properties, name) || _HTMLDOMPropertyConfig2.default.isCustomAttribute(name.toLowerCase()) || hasOwnProperty.call(reactProps, name);
return hasOwnProperty.call(htmlProps, name) || hasOwnProperty.call(svgProps, name) || isCustomAttribute(name.toLowerCase()) || hasOwnProperty.call(reactProps, name);
};
module.exports = exports['default'];

34

lib/vendor/postcss/container.js

@@ -11,2 +11,18 @@ 'use strict';

var _parse = require('./parse');
var _parse2 = _interopRequireDefault(_parse);
var _root = require('./root');
var _root2 = _interopRequireDefault(_root);
var _rule = require('./rule');
var _rule2 = _interopRequireDefault(_rule);
var _atRule = require('./at-rule');
var _atRule2 = _interopRequireDefault(_atRule);
var _declaration = require('./declaration');

@@ -713,4 +729,3 @@

if (typeof nodes === 'string') {
var parse = require('./parse');
nodes = cleanSource(parse(nodes).nodes);
nodes = cleanSource((0, _parse2.default)(nodes).nodes);
} else if (!Array.isArray(nodes)) {

@@ -729,7 +744,5 @@ if (nodes.type === 'root') {

} else if (nodes.selector) {
var Rule = require('./rule');
nodes = [new Rule(nodes)];
nodes = [new _rule2.default(nodes)];
} else if (nodes.name) {
var AtRule = require('./at-rule');
nodes = [new AtRule(nodes)];
nodes = [new _atRule2.default(nodes)];
} else if (nodes.text) {

@@ -764,10 +777,7 @@ nodes = [new _comment2.default(nodes)];

if (node.type === 'root') {
var Root = require('./root');
fix = new Root();
fix = new _root2.default();
} else if (node.type === 'atrule') {
var AtRule = require('./at-rule');
fix = new AtRule();
fix = new _atRule2.default();
} else if (node.type === 'rule') {
var Rule = require('./rule');
fix = new Rule();
fix = new _rule2.default();
} else if (node.type === 'decl') {

@@ -774,0 +784,0 @@ fix = new _declaration2.default();

4

lib/vendor/postcss/input.js

@@ -7,4 +7,6 @@ 'use strict';

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); // break cyclical dependency deadlock – #87
require('./root');
var _cssSyntaxError = require('./css-syntax-error');

@@ -11,0 +13,0 @@

17

lib/vendor/postcss/root.js

@@ -11,2 +11,4 @@ 'use strict';

require('./rule');
var _container = require('./container');

@@ -16,2 +18,10 @@

var _lazyResult = require('./lazy-result');
var _lazyResult2 = _interopRequireDefault(_lazyResult);
var _processor = require('./processor');
var _processor2 = _interopRequireDefault(_processor);
var _warnOnce = require('./warn-once');

@@ -27,3 +37,3 @@

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } // break cyclical dependency deadlock – #87

@@ -105,6 +115,3 @@ /**

var LazyResult = require('./lazy-result');
var Processor = require('./processor');
var lazy = new LazyResult(new Processor(), this, opts);
var lazy = new _lazyResult2.default(new _processor2.default(), this, opts);
return lazy.stringify();

@@ -111,0 +118,0 @@ }

4

lib/vendor/postcss/rule.js

@@ -9,2 +9,4 @@ 'use strict';

require('./at-rule');
var _container = require('./container');

@@ -28,3 +30,3 @@

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } // break cyclical dependency deadlock – #87

@@ -31,0 +33,0 @@ /**

7

package.json
{
"name": "styled-components",
"version": "1.0.6",
"version": "1.0.7",
"description": "Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅",

@@ -43,3 +43,2 @@ "main": "lib/index.js",

"lodash": "^4.15.0",
"react": "^15.3.2",
"supports-color": "^3.1.2"

@@ -70,2 +69,3 @@ },

"pre-commit": "^1.1.3",
"react": "^15.3.2",
"react-addons-test-utils": "^15.3.2",

@@ -83,2 +83,5 @@ "react-dom": "^15.3.2",

},
"peerDependencies": {
"react": "^0.14.0 || ^15.0.0-0"
},
"lint-staged": {

@@ -85,0 +88,0 @@ "*.js": [

17

README.md

@@ -20,2 +20,4 @@ <a href="https://github.com/styled-components/styled-components">

*Made by [Glen Maddern](https://twitter.com/glenmaddern) and [Max Stoiber](https://twitter.com/mxstbr), supported by [Front End Center](https://frontend.center) and [Thinkmill](http://thinkmill.com.au/). Thank you for making this project possible!*
## Usage

@@ -225,2 +227,4 @@

> **Note:** `styled-components` generate a real stylesheet with classes. The class names are then passed to the react component (including third party components) via the `className` prop. For the styles to be applied, third-party components must attach the passed-in `className` prop to a DOM node. See [Using `styled-components` with existing CSS](./docs/existing-css.md) for more information!
### Animations

@@ -373,3 +377,4 @@

- [Tagged Template Literals](./docs/tagged-template-literals.md): How do they work?
- [What CSS we support](./docs/css-we-support.md): What parts & extensions of CSS can you use within a component?
- [Using `styled-components` with existing CSS](./docs/existing-css.md): Some edge cases you should be aware of when using `styled-components` with an existing CSS codebase
- [What CSS we support](./docs/css-we-support.md): What parts & extensions of CSS can you use within a component? *(Spoiler: all of CSS plus even more)*
- [Theming](./docs/theming.md): How to work with themes

@@ -379,3 +384,3 @@

The one thing you lose when writing CSS in template literals is syntax highlighting. We're working hard on making proper syntax highlighting happening in all editors. We currently have support for Atom.
The one thing you lose when writing CSS in template literals is syntax highlighting. We're working hard on making proper syntax highlighting happening in all editors. We currently have support for Atom, and soon Sublime Text.

@@ -392,2 +397,8 @@ This is what it looks like when properly highlighted:

### Sublime Text
There is an [open PR](https://github.com/babel/babel-sublime/pull/289) by [@garetmckinley](https://github.com/garetmckinley) to add support for `styled-components` to `babel-sublime`! (if you want the PR to land, feel free to 👍 the initial comment to let the maintainers know there's a need for this!)
As soon as that PR is merged and a new version released, all you'll have to do is install and use `babel-sublime` to highlight your JavaScript files!
### Other Editors

@@ -442,3 +453,1 @@

Special thanks to [@okonet](https://github.com/okonet) for the fantastic logo.
Development supported by [Front End Center](https://frontend.center) and [Thinkmill](http://thinkmill.com.au/)

2

src/constructors/styled.js

@@ -10,3 +10,3 @@ // @flow

/* Shorthands for all valid HTML properties */
/* Shorthands for all valid HTML Elements */
// Thanks to ReactDOMFactories for this handy list!

@@ -13,0 +13,0 @@ styled.a = styled('a')

3

src/utils/autoprefix.js

@@ -7,2 +7,5 @@ import camelizeStyleName from 'fbjs/lib/camelizeStyleName'

root.walkDecls(decl => {
/* No point even checking custom props */
if (decl.prop.startsWith('--')) return
const objStyle = { [camelizeStyleName(decl.prop)]: decl.value }

@@ -9,0 +12,0 @@ const prefixed = autoprefix(objStyle)

439

src/utils/validAttr.js

@@ -5,5 +5,2 @@ /* Trying to avoid the unknown-prop errors on styled components

import HTMLDOMPropertyConfig from 'react/lib/HTMLDOMPropertyConfig'
import SVGDOMPropertyConfig from 'react/lib/SVGDOMPropertyConfig'
/* Logic copied from ReactDOMUnknownPropertyHook */

@@ -164,8 +161,438 @@ const reactProps = {

/* From HTMLDOMPropertyConfig */
const htmlProps = {
/**
* Standard Properties
*/
accept: true,
acceptCharset: true,
accessKey: true,
action: true,
allowFullScreen: true,
allowTransparency: true,
alt: true,
// specifies target context for links with `preload` type
as: true,
async: true,
autoComplete: true,
// autoFocus is polyfilled/normalized by AutoFocusUtils
// autoFocus: true,
autoPlay: true,
capture: true,
cellPadding: true,
cellSpacing: true,
charSet: true,
challenge: true,
checked: true,
cite: true,
classID: true,
className: true,
cols: true,
colSpan: true,
content: true,
contentEditable: true,
contextMenu: true,
controls: true,
coords: true,
crossOrigin: true,
data: true, // For `<object />` acts as `src`.
dateTime: true,
default: true,
defer: true,
dir: true,
disabled: true,
download: true,
draggable: true,
encType: true,
form: true,
formAction: true,
formEncType: true,
formMethod: true,
formNoValidate: true,
formTarget: true,
frameBorder: true,
headers: true,
height: true,
hidden: true,
high: true,
href: true,
hrefLang: true,
htmlFor: true,
httpEquiv: true,
icon: true,
id: true,
inputMode: true,
integrity: true,
is: true,
keyParams: true,
keyType: true,
kind: true,
label: true,
lang: true,
list: true,
loop: true,
low: true,
manifest: true,
marginHeight: true,
marginWidth: true,
max: true,
maxLength: true,
media: true,
mediaGroup: true,
method: true,
min: true,
minLength: true,
// Caution; `option.selected` is not updated if `select.multiple` is
// disabled with `removeAttribute`.
multiple: true,
muted: true,
name: true,
nonce: true,
noValidate: true,
open: true,
optimum: true,
pattern: true,
placeholder: true,
playsInline: true,
poster: true,
preload: true,
profile: true,
radioGroup: true,
readOnly: true,
referrerPolicy: true,
rel: true,
required: true,
reversed: true,
role: true,
rows: true,
rowSpan: true,
sandbox: true,
scope: true,
scoped: true,
scrolling: true,
seamless: true,
selected: true,
shape: true,
size: true,
sizes: true,
span: true,
spellCheck: true,
src: true,
srcDoc: true,
srcLang: true,
srcSet: true,
start: true,
step: true,
style: true,
summary: true,
tabIndex: true,
target: true,
title: true,
// Setting .type throws on non-<input> tags
type: true,
useMap: true,
value: true,
width: true,
wmode: true,
wrap: true,
/**
* RDFa Properties
*/
about: true,
datatype: true,
inlist: true,
prefix: true,
// property is also supported for OpenGraph in meta tags.
property: true,
resource: true,
typeof: true,
vocab: true,
/**
* Non-standard Properties
*/
// autoCapitalize and autoCorrect are supported in Mobile Safari for
// keyboard hints.
autoCapitalize: true,
autoCorrect: true,
// autoSave allows WebKit/Blink to persist values of input fields on page reloads
autoSave: true,
// color is for Safari mask-icon link
color: true,
// itemProp, itemScope, itemType are for
// Microdata support. See http://schema.org/docs/gs.html
itemProp: true,
itemScope: true,
itemType: true,
// itemID and itemRef are for Microdata support as well but
// only specified in the WHATWG spec document. See
// https://html.spec.whatwg.org/multipage/microdata.html#microdata-dom-api
itemID: true,
itemRef: true,
// results show looking glass icon and recent searches on input
// search fields in WebKit/Blink
results: true,
// IE-only attribute that specifies security restrictions on an iframe
// as an alternative to the sandbox attribute on IE<10
security: true,
// IE-only attribute that controls focus behavior
unselectable: 0,
}
const svgProps = {
accentHeight: true,
accumulate: true,
additive: true,
alignmentBaseline: true,
allowReorder: true,
alphabetic: true,
amplitude: true,
arabicForm: true,
ascent: true,
attributeName: true,
attributeType: true,
autoReverse: true,
azimuth: true,
baseFrequency: true,
baseProfile: true,
baselineShift: true,
bbox: true,
begin: true,
bias: true,
by: true,
calcMode: true,
capHeight: true,
clip: true,
clipPath: true,
clipRule: true,
clipPathUnits: true,
colorInterpolation: true,
colorInterpolationFilters: true,
colorProfile: true,
colorRendering: true,
contentScriptType: true,
contentStyleType: true,
cursor: true,
cx: true,
cy: true,
d: true,
decelerate: true,
descent: true,
diffuseConstant: true,
direction: true,
display: true,
divisor: true,
dominantBaseline: true,
dur: true,
dx: true,
dy: true,
edgeMode: true,
elevation: true,
enableBackground: true,
end: true,
exponent: true,
externalResourcesRequired: true,
fill: true,
fillOpacity: true,
fillRule: true,
filter: true,
filterRes: true,
filterUnits: true,
floodColor: true,
floodOpacity: true,
focusable: true,
fontFamily: true,
fontSize: true,
fontSizeAdjust: true,
fontStretch: true,
fontStyle: true,
fontVariant: true,
fontWeight: true,
format: true,
from: true,
fx: true,
fy: true,
g1: true,
g2: true,
glyphName: true,
glyphOrientationHorizontal: true,
glyphOrientationVertical: true,
glyphRef: true,
gradientTransform: true,
gradientUnits: true,
hanging: true,
horizAdvX: true,
horizOriginX: true,
ideographic: true,
imageRendering: true,
in: true,
in2: true,
intercept: true,
k: true,
k1: true,
k2: true,
k3: true,
k4: true,
kernelMatrix: true,
kernelUnitLength: true,
kerning: true,
keyPoints: true,
keySplines: true,
keyTimes: true,
lengthAdjust: true,
letterSpacing: true,
lightingColor: true,
limitingConeAngle: true,
local: true,
markerEnd: true,
markerMid: true,
markerStart: true,
markerHeight: true,
markerUnits: true,
markerWidth: true,
mask: true,
maskContentUnits: true,
maskUnits: true,
mathematical: true,
mode: true,
numOctaves: true,
offset: true,
opacity: true,
operator: true,
order: true,
orient: true,
orientation: true,
origin: true,
overflow: true,
overlinePosition: true,
overlineThickness: true,
paintOrder: true,
panose1: true,
pathLength: true,
patternContentUnits: true,
patternTransform: true,
patternUnits: true,
pointerEvents: true,
points: true,
pointsAtX: true,
pointsAtY: true,
pointsAtZ: true,
preserveAlpha: true,
preserveAspectRatio: true,
primitiveUnits: true,
r: true,
radius: true,
refX: true,
refY: true,
renderingIntent: true,
repeatCount: true,
repeatDur: true,
requiredExtensions: true,
requiredFeatures: true,
restart: true,
result: true,
rotate: true,
rx: true,
ry: true,
scale: true,
seed: true,
shapeRendering: true,
slope: true,
spacing: true,
specularConstant: true,
specularExponent: true,
speed: true,
spreadMethod: true,
startOffset: true,
stdDeviation: true,
stemh: true,
stemv: true,
stitchTiles: true,
stopColor: true,
stopOpacity: true,
strikethroughPosition: true,
strikethroughThickness: true,
string: true,
stroke: true,
strokeDasharray: true,
strokeDashoffset: true,
strokeLinecap: true,
strokeLinejoin: true,
strokeMiterlimit: true,
strokeOpacity: true,
strokeWidth: true,
surfaceScale: true,
systemLanguage: true,
tableValues: true,
targetX: true,
targetY: true,
textAnchor: true,
textDecoration: true,
textRendering: true,
textLength: true,
to: true,
transform: true,
u1: true,
u2: true,
underlinePosition: true,
underlineThickness: true,
unicode: true,
unicodeBidi: true,
unicodeRange: true,
unitsPerEm: true,
vAlphabetic: true,
vHanging: true,
vIdeographic: true,
vMathematical: true,
values: true,
vectorEffect: true,
version: true,
vertAdvY: true,
vertOriginX: true,
vertOriginY: true,
viewBox: true,
viewTarget: true,
visibility: true,
widths: true,
wordSpacing: true,
writingMode: true,
x: true,
xHeight: true,
x1: true,
x2: true,
xChannelSelector: true,
xlinkActuate: true,
xlinkArcrole: true,
xlinkHref: true,
xlinkRole: true,
xlinkShow: true,
xlinkTitle: true,
xlinkType: true,
xmlBase: true,
xmlns: true,
xmlnsXlink: true,
xmlLang: true,
xmlSpace: true,
y: true,
y1: true,
y2: true,
yChannelSelector: true,
z: true,
zoomAndPan: true,
}
/* From DOMProperty */
const ATTRIBUTE_NAME_START_CHAR = ':A-Z_a-z\\u00C0-\\u00D6\\u00D8-\\u00F6\\u00F8-\\u02FF\\u0370-\\u037D\\u037F-\\u1FFF\\u200C-\\u200D\\u2070-\\u218F\\u2C00-\\u2FEF\\u3001-\\uD7FF\\uF900-\\uFDCF\\uFDF0-\\uFFFD'
const ATTRIBUTE_NAME_CHAR = `${ATTRIBUTE_NAME_START_CHAR}\\-.0-9\\u00B7\\u0300-\\u036F\\u203F-\\u2040`
const isCustomAttribute = RegExp.prototype.test.bind(
new RegExp(`^(data|aria)-[${ATTRIBUTE_NAME_CHAR}]*$`)
)
const hasOwnProperty = {}.hasOwnProperty
export default name => (
hasOwnProperty.call(HTMLDOMPropertyConfig.Properties, name) ||
hasOwnProperty.call(SVGDOMPropertyConfig.Properties, name) ||
HTMLDOMPropertyConfig.isCustomAttribute(name.toLowerCase()) ||
hasOwnProperty.call(htmlProps, name) ||
hasOwnProperty.call(svgProps, name) ||
isCustomAttribute(name.toLowerCase()) ||
hasOwnProperty.call(reactProps, name)
)

10

src/vendor/postcss/container.js

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

import parse from './parse';
import Root from './root';
import Rule from './rule';
import AtRule from './at-rule';
import Declaration from './declaration';

@@ -608,3 +612,2 @@ import warnOnce from './warn-once';

if ( typeof nodes === 'string' ) {
let parse = require('./parse');
nodes = cleanSource(parse(nodes).nodes);

@@ -624,6 +627,4 @@ } else if ( !Array.isArray(nodes) ) {

} else if ( nodes.selector ) {
let Rule = require('./rule');
nodes = [new Rule(nodes)];
} else if ( nodes.name ) {
let AtRule = require('./at-rule');
nodes = [new AtRule(nodes)];

@@ -656,9 +657,6 @@ } else if ( nodes.text ) {

if ( node.type === 'root' ) {
let Root = require('./root');
fix = new Root();
} else if ( node.type === 'atrule' ) {
let AtRule = require('./at-rule');
fix = new AtRule();
} else if ( node.type === 'rule' ) {
let Rule = require('./rule');
fix = new Rule();

@@ -665,0 +663,0 @@ } else if ( node.type === 'decl' ) {

2

src/vendor/postcss/input.js

@@ -0,1 +1,3 @@

import './root' // break cyclical dependency deadlock – #87
import CssSyntaxError from './css-syntax-error';

@@ -2,0 +4,0 @@ // import PreviousMap from './previous-map';

7

src/vendor/postcss/root.js

@@ -0,2 +1,6 @@

import './rule'; // break cyclical dependency deadlock – #87
import Container from './container';
import LazyResult from './lazy-result';
import Processor from './processor';
import warnOnce from './warn-once';

@@ -66,5 +70,2 @@

toResult(opts = { }) {
let LazyResult = require('./lazy-result');
let Processor = require('./processor');
let lazy = new LazyResult(new Processor(), this, opts);

@@ -71,0 +72,0 @@ return lazy.stringify();

2

src/vendor/postcss/rule.js

@@ -0,1 +1,3 @@

import './at-rule'; // break cyclical dependency deadlock – #87
import Container from './container';

@@ -2,0 +4,0 @@ import warnOnce from './warn-once';

1

src/vendor/README.md

@@ -12,1 +12,2 @@ Vendored postcss source as of [31ae472](https://github.com/postcss/postcss/tree/31ae4724afbc02e103711fec6517ba485177d827) (latest release 5.2.0)

* Made `StyleSheet.insert()` return something with an `update()` method
* Replaced nested `require` statements with `import` declarations for the sake of a leaner bundle. This entails adding empty imports to three files to guarantee correct ordering – see https://github.com/styled-components/styled-components/pull/100
lib/test/e2e.test.js
src/test/e2e.test.js
dist/styled-components.es.js

Sorry, the diff of this file is too big to display

dist/styled-components.js

Sorry, the diff of this file is too big to display

dist/styled-components.min.js

Sorry, the diff of this file is too big to display

SocketSocket SOC 2 Logo

Product

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

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc