{
"manifest": {
"name": "stylis",
"version": "4.3.1",
"license": "MIT",
"description": "A Light–weight CSS Preprocessor",
"homepage": "https://github.com/thysultan/stylis.js",
"author": {
"name": "Sultan Tarimo",
"email": "sultantarimo@me.com"
},
"repository": {
"type": "git",
"url": "https://github.com/thysultan/stylis.js"
},
"bugs": {
"url": "https://github.com/thysultan/stylis.js/issues"
},
"sideEffects": false,
"type": "module",
"main": "dist/umd/stylis.js",
"module": "dist/stylis.mjs",
"react-native": "./index.js",
"exports": {
".": {
"import": "./index.js",
"require": "./dist/umd/stylis.js"
},
"./package.json": "./package.json"
},
"files": [
"index.js",
"dist/",
"src/"
],
"scripts": {
"lint": "eslint ./",
"pretest": "npm run lint && npm run build",
"test": "nyc npm run spec",
"spec": "mocha --harmony --require esm script/setup.js --recursive test",
"prebuild": "rimraf dist",
"build": "rollup --config script/build.js --configSrc ./",
"start": "npm run build -- --watch",
"prepare": "npm run build",
"postversion": "git push --follow-tags && npm publish",
"release-major": "npm version major -m '%s'",
"release-minor": "npm version minor -m '%s'",
"release-patch": "npm version patch -m '%s'"
},
"devDependencies": {
"chai": "4.3.4",
"eslint": "6.8.0",
"esm": "3.2.25",
"mocha": "9.1.1",
"nyc": "15.1.0",
"rimraf": "3.0.2",
"rollup": "1.28.0",
"rollup-plugin-size": "0.2.1",
"rollup-plugin-terser": "5.1.3",
"stylis": "./"
},
"nyc": {
"temp-dir": "./coverage/.nyc_output",
"exclude": [
"**/dist/",
"**/test/",
"**/script/"
],
"reporter": [
"lcov",
"text"
]
},
"esm": {
"cjs": true,
"cache": false
},
"eslintIgnore": [
"script/",
"test/",
"dist/",
"docs/"
],
"eslintConfig": {
"env": {
"commonjs": true,
"browser": true,
"node": true,
"es6": true
},
"extends": "eslint:recommended",
"parserOptions": {
"ecmaVersion": 7,
"sourceType": "module",
"ecmaFeatures": {
"impliedStrict": true
}
},
"rules": {
"indent": [
"error",
"tab",
{
"SwitchCase": 1
}
],
"linebreak-style": [
"error",
"unix"
],
"quotes": [
"error",
"single"
],
"semi": [
"error",
"never"
],
"no-cond-assign": [
"off"
],
"no-redeclare": [
"off"
],
"no-fallthrough": [
"off"
],
"no-console": [
"off"
],
"no-unsafe-finally": [
"off"
],
"no-shadow-restricted-names": [
"error"
],
"no-whitespace-before-property": [
"error"
],
"no-else-return": [
"error"
],
"eol-last": [
"error"
],
"func-call-spacing": [
"error",
"never"
],
"brace-style": [
"error",
"1tbs",
{
"allowSingleLine": true
}
],
"require-jsdoc": [
"error",
{
"require": {
"FunctionDeclaration": true
}
}
],
"no-trailing-spaces": [
"error",
{
"skipBlankLines": true
}
],
"no-constant-condition": [
"off"
]
}
},
"_registry": "npm",
"_loc": "/homez.1033/heliovt/.cache/yarn/v6/npm-stylis-4.3.1-ed8a9ebf9f76fe1e12d462f5cc3c4c980b23a7eb-integrity/node_modules/stylis/package.json",
"readmeFilename": "README.md",
"readme": "# STYLIS\n\n[](https://github.com/thysultan/stylis.js)\n\nA Light–weight CSS Preprocessor.\n\n[](https://coveralls.io/github/thysultan/stylis.js)\n[](https://bundlephobia.com/result?p=stylis)\n[](https://github.com/thysultan/stylis.js/blob/master/LICENSE)\n[](https://www.npmjs.com/package/stylis)\n\n## Installation\n\n* Use a Direct Download: ``\n* Use a CDN: ``\n* Use NPM: `npm install stylis --save`\n\n## Features\n\n- nesting `a { &:hover {} }`\n- selector namespacing\n- vendor prefixing (flex-box, etc...)\n- minification\n- esm module compatible\n- tree-shaking-able\n\n## Abstract Syntax Structure\n\n```js\nconst declaration = {\n\tvalue: 'color:red;',\n\ttype: 'decl',\n\tprops: 'color',\n\tchildren: 'red',\n\tline: 1, column: 1\n}\n\nconst comment = {\n\tvalue: '/*@noflip*/',\n\ttype: 'comm',\n\tprops: '/',\n\tchildren: '@noflip',\n\tline: 1, column: 1\n}\n\nconst ruleset = {\n\tvalue: 'h1,h2',\n\ttype: 'rule',\n\tprops: ['h1', 'h2'],\n\tchildren: [/* ... */],\n\tline: 1, column: 1\n}\n\nconst atruleset = {\n\tvalue: '@media (max-width:100), (min-width:100)',\n\ttype: '@media',\n\tprops: ['(max-width:100)', '(min-width:100)'],\n\tchildren: [/* ... */],\n\tline: 1, column: 1\n}\n```\n\n## Example:\n\n```js\nimport {compile, serialize, stringify} from 'stylis'\n\nserialize(compile(`h1{all:unset}`), stringify)\n```\n\n### Compile\n\n```js\ncompile('h1{all:unset}') === [{value: 'h1', type: 'rule', props: ['h1'], children: [/* ... */]}]\ncompile('--foo:unset;') === [{value: '--foo:unset;', type: 'decl', props: '--foo', children: 'unset'}]\n```\n\n### Tokenize\n\n```js\ntokenize('h1 h2 h3 [h4 h5] fn(args) \"a b c\"') === ['h1', 'h2', 'h3', '[h4 h5]', 'fn', '(args)', '\"a b c\"']\n```\n\n### Serialize\n\n```js\nserialize(compile('h1{all:unset}'), stringify)\n```\n\n### Vendor Prefixing\n\n```js\nimport {compile, serialize, stringify, middleware, prefixer } from 'stylis';\n\nserialize(compile('div{display:flex;}'), middleware([prefixer, stringify]))\n```\n\n\n## Middleware\n\nThe middleware helper is a convenient helper utility, that for all intents and purposes you can do without if you intend to implement your own traversal logic. The `stringify` middleware is one such middleware that can be used in conjunction with it.\n\nElements passed to middlewares have a `root` property that is the immediate root/parent of the current element **in the compiled output**, so it references the parent in the already expanded CSS-like structure. Elements have also `parent` property that is the immediate parent of the current element **from the input structure** (structure representing the input string).\n\n### Traversal\n\n```js\nserialize(compile('h1{all:unset}'), middleware([(element, index, children) => {\n\tassert(children === element.root.children && children[index] === element.children)\n}, stringify])) === 'h1{all:unset;}'\n```\n\nThe abstract syntax tree also includes an additional `return` property for more niche uses.\n\n### Prefixing\n\n```js\nserialize(compile('h1{all:unset}'), middleware([(element, index, children, callback) => {\n\tif (element.type === 'decl' && element.props === 'all' && element.children === 'unset')\n\t\telement.return = 'color:red;' + element.value\n}, stringify])) === 'h1{color:red;all:unset;}'\n```\n\n```js\nserialize(compile('h1{all:unset}'), middleware([(element, index, children, callback) => {\n\tif (element.type === 'rule' && element.props.indexOf('h1') > -1)\n\t\treturn serialize([{...element, props: ['h2', 'h3']}], callback)\n}, stringify])) === 'h2,h3{all:unset;}h1{all:unset;}'\n```\n\n### Reading\n\n```js\nserialize(compile('h1{all:unset}'), middleware([stringify, (element, index, children) => {\n\tassert(element.return === 'h1{all:unset;}')\n}])) === 'h1{all:unset;color:red;}'\n```\n\nThe middlewares in [src/Middleware.js](src/Middleware.js) dive into tangible examples of how you might implement a middleware, alternatively you could also create your own middleware system as `compile` returns all the nessessary structure to fork from.\n\n## Variables\n\nCSS variables are supported but a note should be made about the exotic use of css variables. The css spec mentions the following\n\n>The allowed syntax for custom properties is extremely permissive. The production matches any sequence of one or more tokens, so long as the sequence does not contain , , unmatched <)-token>, <]-token>, or <}-token>, or top-level tokens or tokens with a value of \"!\".\n\nThat is to say css variables according to the spec allows: `--foo: if(x > 5) this.width = 10;` and while this value is obviously useless as a variable, and would be invalid in any normal property, it still might be read and acted on by JavaScript and this is supported by Stylis, however things become slightly undefined when we start to include the `{` and `}` productions in our use of exotic css variables. \n\nFor example consider the following: `--foo: {};`\n\nWhile this is valid CSS and supported. It is unclear what should happen when the rule collides with the implicit block termination rule that allows i.e `h1{color:red}`(notice the omitted semicolon) to also be a valid CSS production. This results in the following contradiction in: `h1{--example: {}` is it to be treated as `h1{--foo:{;}` or `h1{--foo:{}` the later of which is an unterminated block or in the following: `h1{--foo:{} h1{color:red;}` should it be `h1 {--foo:{}h1{color:red;};` where `{}h1{color:red;` is part of the css variable `--foo` and not a new rule or should it be something else? \n\nNevertheless Stylis still supports the exotic forms highlighted in the spec, however you should consider it as a general rule to delimit such exotic uses of variables in strings or parentheses i.e: `h1{--foo:'{'}` or `h1{--foo:({)}`. \n\n## Benchmark\n\nStylis is at-least 2X faster than its predecesor.\n\n### License\n\nStylis is [MIT licensed](./LICENSE).\n",
"licenseText": "MIT License\n\nCopyright (c) 2016-present Sultan Tarimo\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n"
},
"artifacts": [],
"remote": {
"resolved": "https://registry.yarnpkg.com/stylis/-/stylis-4.3.1.tgz#ed8a9ebf9f76fe1e12d462f5cc3c4c980b23a7eb",
"type": "tarball",
"reference": "https://registry.yarnpkg.com/stylis/-/stylis-4.3.1.tgz",
"hash": "ed8a9ebf9f76fe1e12d462f5cc3c4c980b23a7eb",
"integrity": "sha512-EQepAV+wMsIaGVGX1RECzgrcqRRU/0sYOHkeLsZ3fzHaHXZy4DaOOX0vOlGQdlsjkh3mFHAIlVimpwAs4dslyQ==",
"registry": "npm",
"packageName": "stylis",
"cacheIntegrity": "sha512-EQepAV+wMsIaGVGX1RECzgrcqRRU/0sYOHkeLsZ3fzHaHXZy4DaOOX0vOlGQdlsjkh3mFHAIlVimpwAs4dslyQ== sha1-7Yqev592/h4S1GL1zDxMmAsjp+s="
},
"registry": "npm",
"hash": "ed8a9ebf9f76fe1e12d462f5cc3c4c980b23a7eb"
}