Skip to content

Commit

Permalink
Use PostCSS 8
Browse files Browse the repository at this point in the history
  • Loading branch information
ai committed Aug 21, 2020
1 parent df8d46c commit 4c92d3b
Show file tree
Hide file tree
Showing 8 changed files with 4,133 additions and 2,269 deletions.
4 changes: 2 additions & 2 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
coverage/
node_modules/
npm-debug.log
yarn-error.log

coverage/
7 changes: 1 addition & 6 deletions .npmignore
Original file line number Diff line number Diff line change
@@ -1,10 +1,5 @@
.editorconfig

node_modules/
npm-debug.log
yarn-error.log
yarn.lock

coverage/
*.test.js
.travis.yml
coverage/
6 changes: 2 additions & 4 deletions .travis.yml
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,5 @@ language: node_js
cache: yarn
node_js:
- node
- "8"
- "6"
git:
depth: 5
- "12"
- "10"
34 changes: 26 additions & 8 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
# PostCSS Will Change [![Build Status][ci-img]][ci]
# PostCSS Will Change

<img align="right" width="95" height="95"
<img align="right" width="135" height="95"
title="Philosopher’s stone, logo of PostCSS"
src="http://postcss.github.io/postcss/logo.svg">
src="https://postcss.org/logo-leftp.svg">

[PostCSS] plugin to insert 3D hack before [will-change] property.

Expand All @@ -20,8 +20,6 @@ to `backface-visibility`.
[Autoprefixer]: https://github.com/postcss/autoprefixer
[will-change]: https://dev.opera.com/articles/css-will-change-property/
[PostCSS]: https://github.com/postcss/postcss
[ci-img]: https://travis-ci.org/postcss/postcss-will-change.svg
[ci]: https://travis-ci.org/postcss/postcss-will-change

```css
.foo {
Expand All @@ -36,10 +34,30 @@ to `backface-visibility`.
}
```

<a href="https://evilmartians.com/?utm_source=postcss-will-change">
<img src="https://evilmartians.com/badges/sponsored-by-evil-martians.svg"
alt="Sponsored by Evil Martians" width="236" height="54">
</a>


## Usage

```js
postcss([ require('postcss-will-change') ])
**Step 1:** Check you project for existed PostCSS config: `postcss.config.js`
in the project root, `"postcss"` section in `package.json`
or `postcss` in bundle config.

If you do not use PostCSS, add it according to [official docs]
and set this plugin in settings.

**Step 2:** Add the plugin to plugins list:

```diff
module.exports = {
plugins: [
+ require('postcss-will-change'),
require('autoprefixer')
]
}
```

See [PostCSS] docs for examples for your environment.
[official docs]: https://github.com/postcss/postcss#usage
27 changes: 15 additions & 12 deletions index.js
Original file line number Diff line number Diff line change
@@ -1,13 +1,16 @@
var postcss = require('postcss')

module.exports = postcss.plugin('postcss-will-change', function () {
return function (css) {
css.walkDecls('will-change', function (decl) {
var already = decl.parent.some(function (i) {
return i.type === 'decl' && i.prop === 'backface-visibility'
})
if (already) return
decl.cloneBefore({ prop: 'backface-visibility', value: 'hidden' })
})
module.exports = () => {
return {
postcssPlugin: 'postcss-will-change',
Declaration: {
'will-change': decl => {
let already = decl.parent.some(i => {
return i.type === 'decl' && i.prop === 'backface-visibility'
})
if (!already) {
decl.cloneBefore({ prop: 'backface-visibility', value: 'hidden' })
}
}
}
}
})
}
module.exports.postcss = true
34 changes: 16 additions & 18 deletions index.test.js
Original file line number Diff line number Diff line change
@@ -1,33 +1,31 @@
var postcss = require('postcss')
let postcss = require('postcss')

var plugin = require('./')
let plugin = require('./')

function run (input, output) {
return postcss([plugin]).process(input, { from: undefined })
.then(function (result) {
expect(result.css).toEqual(output)
expect(result.warnings()).toHaveLength(0)
})
async function run (input, output) {
let result = await postcss([plugin]).process(input, { from: undefined })
expect(result.css).toEqual(output)
expect(result.warnings()).toHaveLength(0)
}

it('adds 3D hacks', function () {
return run(
it('adds 3D hacks', async () => {
await run(
'a{ will-change: transform; }',
'a{ backface-visibility: hidden; will-change: transform; }'
)
})

it('does not override existing properties', function () {
return run(
it('does not override existing properties', async () => {
await run(
'a{ backface-visibility: visible; will-change: transform; }',
'a{ backface-visibility: visible; will-change: transform; }'
)
})

it('does not get confused by other selectors', function () {
var input = 'a{ backface-visibility: visible; } ' +
'b { will-change: transform; }'
var output = 'a{ backface-visibility: visible; } ' +
'b { backface-visibility: hidden; will-change: transform; }'
return run(input, output)
it('does not get confused by other selectors', async () => {
await run(
'a{ backface-visibility: visible; } b { will-change: transform; }',
'a{ backface-visibility: visible; } ' +
'b { backface-visibility: hidden; will-change: transform; }'
)
})
77 changes: 39 additions & 38 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -12,54 +12,55 @@
"author": "Andrey Sitnik <andrey@sitnik.ru>",
"license": "MIT",
"repository": "postcss/postcss-will-change",
"dependencies": {
"postcss": "^7.0.2"
"scripts": {
"test": "jest-ci --coverage && eslint-ci *.js"
},
"peerDependencies": {
"postcss": "postcss/postcss#ose"
},
"devDependencies": {
"clean-publish": "^1.0.10",
"eslint": "^5.5.0",
"eslint-config-logux": "^25.0.1",
"eslint-config-postcss": "^3.0.6",
"eslint-config-standard": "^12.0.0",
"eslint-plugin-es5": "^1.3.1",
"eslint-plugin-import": "^2.14.0",
"eslint-plugin-jest": "^21.22.0",
"eslint-plugin-node": "^7.0.1",
"eslint-plugin-promise": "^4.0.1",
"@logux/eslint-config": "^40.0.3",
"clean-publish": "^1.1.8",
"eslint": "^7.7.0",
"eslint-ci": "^1.0.0",
"eslint-config-standard": "^14.1.1",
"eslint-plugin-import": "^2.22.0",
"eslint-plugin-jest": "^23.20.0",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-prefer-let": "^1.0.2",
"eslint-plugin-prettierx": "^0.14.0",
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-security": "^1.4.0",
"eslint-plugin-standard": "^4.0.0",
"jest": "^23.5.0",
"lint-staged": "^7.2.2",
"pre-commit": "^1.2.2"
"eslint-plugin-standard": "^4.0.1",
"eslint-plugin-unicorn": "^21.0.0",
"husky": "^4.2.5",
"jest": "^26.4.1",
"jest-ci": "^0.1.1",
"lint-staged": "^10.2.11",
"postcss": "postcss/postcss#ose",
"postcss-sharec-config": "^0.1.1"
},
"scripts": {
"lint-staged": "lint-staged",
"test": "jest --coverage && eslint *.js"
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"*.js": "eslint --fix"
},
"eslintConfig": {
"extends": "@logux/eslint-config"
},
"jest": {
"testEnvironment": "node",
"coverageThreshold": {
"global": {
"statements": 100
}
}
},
"eslintConfig": {
"extends": "eslint-config-postcss/es5",
"overrides": [
{
"files": [
"*.test.js"
],
"rules": {
"jest/expect-expect": "off"
}
}
]
},
"lint-staged": {
"*.js": "eslint"
},
"pre-commit": [
"lint-staged"
]
"sharec": {
"config": "postcss-sharec-config",
"version": "0.1.1"
}
}
Loading

0 comments on commit 4c92d3b

Please sign in to comment.