First version

This commit is contained in:
Senad Uka
2023-07-05 11:02:15 +02:00
parent f21c24b599
commit 8eabf79994
4052 changed files with 723968 additions and 232443 deletions

40
CTOAsYouGo/node_modules/postcss-js/CHANGELOG.md generated vendored Normal file
View File

@@ -0,0 +1,40 @@
# Change Log
This project adheres to [Semantic Versioning](http://semver.org/).
## 2.0.3
* Fix `from` option warning.
## 2.0.2
* Fix `!important` support (by Adam Wathan).
## 2.0.1
* Improve objectifier performance.
* Do not change source `Root` in objectifier.
## 2.0.0
* Remove Node.js 9 and Node.js 4 support.
* Use PostCSS 7.0.
## 1.0.1
* Ignore nodes with `undefined` value.
## 1.0
* Use PostCSS 6.0.
## 0.3
* Add support for at-rules with same name (like `@font-face`).
## 0.2
* Add `!important` support (by Dan Lynch).
## 0.1.3
* Fix rules merge with at-rules.
## 0.1.2
* Add `cssFloat` alias support.
## 0.1.1
* Fix losing rules in parser on same selector (by Bogdan Chadkin).
## 0.1
* Initial release.

View File

@@ -1,22 +1,138 @@
# PostCSS JS
# PostCSS JS [![Build Status][ci-img]][ci]
<img align="right" width="135" height="95"
<img align="right" width="95" height="95"
title="Philosophers stone, logo of PostCSS"
src="https://postcss.org/logo-leftp.svg">
src="http://postcss.github.io/postcss/logo.svg">
[PostCSS] for CSS-in-JS and styles in JS objects.
[PostCSS] for React Inline Styles, Radium, JSS and other CSS-in-JS.
For example, to use [Stylelint] or [RTLCSS] plugins in your workflow.
For example, to use [Stylelint], [RTLCSS] or [postcss-write-svg] plugins
in your workflow.
<a href="https://evilmartians.com/?utm_source=postcss-js">
<img src="https://evilmartians.com/badges/sponsored-by-evil-martians.svg"
alt="Sponsored by Evil Martians" width="236" height="54">
</a>
[postcss-write-svg]: https://github.com/jonathantneal/postcss-write-svg
[Stylelint]: https://github.com/stylelint/stylelint
[PostCSS]: https://github.com/postcss/postcss
[RTLCSS]: https://github.com/MohammadYounes/rtlcss
[ci-img]: https://travis-ci.org/postcss/postcss-js.svg
[ci]: https://travis-ci.org/postcss/postcss-js
[Stylelint]: https://github.com/stylelint/stylelint
[PostCSS]: https://github.com/postcss/postcss
[RTLCSS]: https://github.com/MohammadYounes/rtlcss
## Usage
### Installation
## Docs
Read full docs **[here](https://github.com/postcss/postcss-js#readme)**.
```sh
npm i postcss-js
```
### Processing
```js
const postcssJs = require('postcss-js')
const autoprefixer = require('autoprefixer')
const prefixer = postcssJs.sync([ autoprefixer ]);
const style = prefixer({
userSelect: 'none'
});
style //=> {
// WebkitUserSelect: 'none',
// MozUserSelect: 'none',
// msUserSelect: 'none',
// userSelect: 'none'
// }
```
### Compile CSS-in-JS to CSS
```js
const postcss = require('postcss')
const postcssJs = require('postcss-js')
const style = {
top: 10,
'&:hover': {
top: 5
}
};
postcss().process(style, { parser: postcssJs }).then( (result) => {
result.css //=> top: 10px;
// &:hover { top: 5px; }
})
```
### Compile CSS to CSS-in-JS
```js
const postcss = require('postcss')
const postcssJs = require('postcss-js')
const css = '@media screen { z-index: 1 }'
const root = postcss.parse(css);
postcssJs.objectify(root) //=> { '@media screen': { zIndex: '1' } }
```
## API
### `sync(plugins): function`
Create PostCSS processor with simple API, but with only sync PostCSS plugins
support.
Processor is just a function, which takes one style object and return other.
### `async(plugins): function`
Same as `sync`, but also support async plugins.
Returned processor will return Promise.
### `parse(obj): Root`
Parse CSS-in-JS style object to PostCSS `Root` instance.
It converts numbers to pixels and parses
[Free Style] like selectors and at-rules:
```js
{
'@media screen': {
'&:hover': {
top: 10
}
}
}
```
This methods use Custom Syntax name convention, so you can use it like this:
```js
postcss().process(obj, { parser: postcssJs })
```
### `objectify(root): object`
Convert PostCSS `Root` instance to CSS-in-JS style object.
## Troubleshoot
Webpack may need some extra config for some PostCSS plugins.
### `Module parse failed`
Autoprefixer and some other plugins
need a [json-loader](https://github.com/webpack/json-loader) to import data.
So, please install this loader and add to webpack config:
```js
loaders: [
{
test: /\.json$/,
loader: "json-loader"
}
]
```

View File

@@ -1,15 +1,14 @@
let postcss = require('postcss')
var postcss = require('postcss')
let processResult = require('./process-result')
let parse = require('./parser')
var processResult = require('./process-result')
var parse = require('./parser')
module.exports = function async(plugins) {
let processor = postcss(plugins)
return async input => {
let result = await processor.process(input, {
module.exports = function (plugins) {
var processor = postcss(plugins)
return function (input) {
return processor.process(input, {
parser: parse,
from: undefined
})
return processResult(result)
}).then(processResult)
}
}

View File

@@ -1,11 +1,11 @@
let objectify = require('./objectifier')
let parse = require('./parser')
let async = require('./async')
let sync = require('./sync')
var objectify = require('./objectifier')
var parse = require('./parser')
var async = require('./async')
var sync = require('./sync')
module.exports = {
objectify,
parse,
async,
sync
objectify: objectify,
parse: parse,
async: async,
sync: sync
}

View File

@@ -1,8 +0,0 @@
import index from './index.js'
export default index
export const objectify = index.objectify
export const parse = index.parse
export const async = index.async
export const sync = index.sync

View File

@@ -1,31 +1,6 @@
let camelcase = require('camelcase-css')
var camelcase = require('camelcase-css')
let UNITLESS = {
boxFlex: true,
boxFlexGroup: true,
columnCount: true,
flex: true,
flexGrow: true,
flexPositive: true,
flexShrink: true,
flexNegative: true,
fontWeight: true,
lineClamp: true,
lineHeight: true,
opacity: true,
order: true,
orphans: true,
tabSize: true,
widows: true,
zIndex: true,
zoom: true,
fillOpacity: true,
strokeDashoffset: true,
strokeOpacity: true,
strokeWidth: true
}
function atRule(node) {
function atRule (node) {
if (typeof node.nodes === 'undefined') {
return true
} else {
@@ -33,11 +8,11 @@ function atRule(node) {
}
}
function process(node) {
let name
let result = {}
function process (node) {
var name
var result = { }
node.each(child => {
node.each(function (child) {
if (child.type === 'atrule') {
name = '@' + child.name
if (child.params) name += ' ' + child.params
@@ -49,26 +24,17 @@ function process(node) {
result[name] = [result[name], atRule(child)]
}
} else if (child.type === 'rule') {
let body = process(child)
var body = process(child)
if (result[child.selector]) {
for (let i in body) {
for (var i in body) {
result[child.selector][i] = body[i]
}
} else {
result[child.selector] = body
}
} else if (child.type === 'decl') {
if (child.prop[0] === '-' && child.prop[1] === '-') {
name = child.prop
} else if (child.parent && child.parent.selector === ':export') {
name = child.prop
} else {
name = camelcase(child.prop)
}
let value = child.value
if (!isNaN(child.value) && UNITLESS[name]) {
value = parseFloat(child.value)
}
name = camelcase(child.prop)
var value = child.value
if (child.important) value += ' !important'
if (typeof result[name] === 'undefined') {
result[name] = value

View File

@@ -1,7 +1,7 @@
{
"name": "postcss-js",
"version": "4.0.1",
"description": "PostCSS for CSS-in-JS and styles in JS objects",
"version": "2.0.3",
"description": "PostCSS for React Inline Styles, Radium, Free Style and other CSS-in-JS",
"keywords": [
"postcss",
"postcss-runner",
@@ -14,29 +14,8 @@
"author": "Andrey Sitnik <andrey@sitnik.ru>",
"license": "MIT",
"repository": "postcss/postcss-js",
"engines": {
"node": "^12 || ^14 || >= 16"
},
"exports": {
".": {
"require": "./index.js",
"import": "./index.mjs"
},
"./package.json": "./package.json",
"./async": "./async.js",
"./objectifier": "./objectifier.js",
"./parser": "./parser.js",
"./process-result": "./process-result.js",
"./sync": "./sync.js"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/postcss/"
},
"peerDependencies": {
"postcss": "^8.4.21"
},
"dependencies": {
"camelcase-css": "^2.0.1"
"camelcase-css": "^2.0.1",
"postcss": "^7.0.18"
}
}

View File

@@ -1,8 +1,8 @@
let postcss = require('postcss')
var postcss = require('postcss')
let IMPORTANT = /\s*!important\s*$/i
var IMPORTANT = /\s*!important\s*$/i
let UNITLESS = {
var unitless = {
'box-flex': true,
'box-flex-group': true,
'column-count': true,
@@ -27,22 +27,19 @@ let UNITLESS = {
'stroke-width': true
}
function dashify(str) {
function dashify (str) {
return str
.replace(/([A-Z])/g, '-$1')
.replace(/^ms-/, '-ms-')
.toLowerCase()
}
function decl(parent, name, value) {
function decl (parent, name, value) {
if (value === false || value === null) return
if (!name.startsWith('--')) {
name = dashify(name)
}
name = dashify(name)
if (typeof value === 'number') {
if (value === 0 || UNITLESS[name]) {
if (value === 0 || unitless[name]) {
value = value.toString()
} else {
value += 'px'
@@ -53,14 +50,14 @@ function decl(parent, name, value) {
if (IMPORTANT.test(value)) {
value = value.replace(IMPORTANT, '')
parent.push(postcss.decl({ prop: name, value, important: true }))
parent.push(postcss.decl({ prop: name, value: value, important: true }))
} else {
parent.push(postcss.decl({ prop: name, value }))
parent.push(postcss.decl({ prop: name, value: value }))
}
}
function atRule(parent, parts, value) {
let node = postcss.atRule({ name: parts[1], params: parts[3] || '' })
function atRule (parent, parts, value) {
var node = postcss.atRule({ name: parts[1], params: parts[3] || '' })
if (typeof value === 'object') {
node.nodes = []
parse(value, node)
@@ -68,37 +65,39 @@ function atRule(parent, parts, value) {
parent.push(node)
}
function parse(obj, parent) {
let name, value, node
function parse (obj, parent) {
var name, value, node, i
for (name in obj) {
value = obj[name]
if (value === null || typeof value === 'undefined') {
continue
} else if (name[0] === '@') {
let parts = name.match(/@(\S+)(\s+([\W\w]*)\s*)?/)
if (Array.isArray(value)) {
for (let i of value) {
atRule(parent, parts, i)
if (obj.hasOwnProperty(name)) {
value = obj[name]
if (value === null || typeof value === 'undefined') {
continue
} else if (name[0] === '@') {
var parts = name.match(/@([^\s]+)(\s+([\w\W]*)\s*)?/)
if (Array.isArray(value)) {
for (i = 0; i < value.length; i++) {
atRule(parent, parts, value[i])
}
} else {
atRule(parent, parts, value)
}
} else if (Array.isArray(value)) {
for (i = 0; i < value.length; i++) {
decl(parent, name, value[i])
}
} else if (typeof value === 'object') {
node = postcss.rule({ selector: name })
parse(value, node)
parent.push(node)
} else {
atRule(parent, parts, value)
decl(parent, name, value)
}
} else if (Array.isArray(value)) {
for (let i of value) {
decl(parent, name, i)
}
} else if (typeof value === 'object') {
node = postcss.rule({ selector: name })
parse(value, node)
parent.push(node)
} else {
decl(parent, name, value)
}
}
}
module.exports = function (obj) {
let root = postcss.root()
var root = postcss.root()
parse(obj, root)
return root
}

View File

@@ -1,9 +1,9 @@
let objectify = require('./objectifier')
var objectify = require('./objectifier')
module.exports = function processResult(result) {
module.exports = function (result) {
if (console && console.warn) {
result.warnings().forEach(warn => {
let source = warn.plugin || 'PostCSS'
result.warnings().forEach(function (warn) {
var source = warn.plugin || 'PostCSS'
console.warn(source + ': ' + warn.text)
})
}

View File

@@ -1,12 +1,12 @@
let postcss = require('postcss')
var postcss = require('postcss')
let processResult = require('./process-result')
let parse = require('./parser')
var processResult = require('./process-result')
var parse = require('./parser')
module.exports = function (plugins) {
let processor = postcss(plugins)
return input => {
let result = processor.process(input, { parser: parse, from: undefined })
var processor = postcss(plugins)
return function (input) {
var result = processor.process(input, { parser: parse, from: undefined })
return processResult(result)
}
}