4.0.0

Author: jonathantneal

.appveyor.yml

@@ -1,12 +1,12 @@
 node_modules
-index.bundle.js
 package-lock.json
 *.log*
 *.result.css
 .*
-!.appveyor.yml
 !.editorconfig
 !.gitignore
 !.rollup.js
 !.tape.js
 !.travis.yml
+/index.js
+/index.mjs

.gitignore

@@ -1,12 +1,15 @@
 import babel from 'rollup-plugin-babel';
 
 export default {
-	input: 'index.js',
-	output: { file: 'index.bundle.js', format: 'cjs' },
+	input: 'src/index.js',
+	output: [
+		{ file: 'index.js', format: 'cjs' },
+		{ file: 'index.mjs', format: 'esm' }
+	],
 	plugins: [
 		babel({
 			presets: [
-				['env', { modules: false, targets: { node: 4 } }]
+				['@babel/env', { targets: { node: 6 } }]
 			]
 		})
 	]

.rollup.js

@@ -3,6 +3,14 @@ module.exports = {
 		'basic': {
 			message: 'supports basic usage'
 		},
+		'basic:color-mod': {
+			message: 'supports { features: { "color-mod-function": true } } usage',
+			options: {
+				features: {
+					'color-mod-function': true
+				}
+			}
+		},
 		'basic:variables': {
 			message: 'supports { variables } usage',
 			options: {

.tape.js

@@ -3,7 +3,7 @@
 language: node_js
 
 node_js:
-  - 4
+  - 6
 
 install:
   - npm install --ignore-scripts

.travis.yml

@@ -1,9 +1,17 @@
 # Changes to PreCSS
 
+### 4.0.0 (November 23, 2018)
+
+- Updated: `postcss` to 7.0.6 (major)
+- Updated: `postcss-advanced-variables` to 3.0.0 (major)
+- Updated: `postcss-extend-rule` to 2.0.0 (major)
+- Updated: `postcss-nested` to 4.1.0 (major)
+- Updated: `postcss-preset-env` to 6.4.0 (major)
+
 ### 3.1.2 (February 27, 2018)
 
-- Updated: `postcss-advanced-variables` to v2.3.3 (patch)
-- Updated: `postcss-preset-env` to v3.2.2 (patch)
+- Updated: `postcss-advanced-variables` to 2.3.3 (patch)
+- Updated: `postcss-preset-env` to 3.2.2 (patch)
 
 ### 3.1.1 (February 21, 2018)
 

CHANGELOG.md

@@ -1,9 +1,8 @@
 # PreCSS [<img src="https://postcss.github.io/postcss/logo.svg" alt="PostCSS Logo" width="90" height="90" align="right">][postcss]
 
 [![NPM Version][npm-img]][npm-url]
-[![Linux Build Status][cli-img]][cli-url]
-[![Windows Build Status][win-img]][win-url]
-[![Gitter Chat][git-img]][git-url]
+[![Build Status][cli-img]][cli-url]
+[![Support Chat][git-img]][git-url]
 
 [PreCSS] lets you use Sass-like markup and staged CSS features in CSS.
 
@@ -16,11 +15,11 @@ $column: 200px;
 }
 
 .menu_link {
-  background: color-mod($blue alpha(90%));
+  background: $blue;
   width: $column;
 }
 
-/* after */
+/* becomes */
 
 .menu {
   width: calc(4 * 200px);
@@ -33,8 +32,8 @@ $column: 200px;
 ```
 
 PreCSS combines Sass-like syntactical sugar — like variables, conditionals, and
-iterators — with emerging CSS features — like color functions, logical
-and custom properties, media query ranges, and image sets.
+iterators — with emerging CSS features — like logical and custom properties,
+media query ranges, and image sets.
 
 ## Usage
 
@@ -138,16 +137,14 @@ PreCSS is powered by the following plugins (in this order):
 - [postcss-property-lookup](https://github.com/simonsmith/postcss-property-lookup)
 - [postcss-nested](https://github.com/postcss/postcss-nested)
 
-[npm-url]: https://www.npmjs.com/package/precss
-[npm-img]: https://img.shields.io/npm/v/precss.svg
+[cli-img]: https://img.shields.io/travis/jonathantneal/precss/master.svg
 [cli-url]: https://travis-ci.org/jonathantneal/precss
-[cli-img]: https://img.shields.io/travis/jonathantneal/precss.svg
-[win-url]: https://ci.appveyor.com/project/jonathantneal/precss
-[win-img]: https://img.shields.io/appveyor/ci/jonathantneal/precss.svg
-[git-url]: https://gitter.im/postcss/postcss
 [git-img]: https://img.shields.io/badge/chat-gitter-blue.svg
+[git-url]: https://gitter.im/postcss/postcss
+[npm-img]: https://img.shields.io/npm/v/precss.svg
+[npm-url]: https://www.npmjs.com/package/precss
 
-[PreCSS]: https://github.com/jonathantneal/precss
-[PostCSS]: https://github.com/postcss/postcss
 [Gulp PostCSS]: https://github.com/postcss/gulp-postcss
 [Grunt PostCSS]: https://github.com/nDmitry/grunt-postcss
+[PostCSS]: https://github.com/postcss/postcss
+[PreCSS]: https://github.com/jonathantneal/precss

README.md

@@ -1,49 +1,47 @@
 {
   "name": "precss",
-  "version": "3.1.2",
+  "version": "4.0.0",
   "description": "Use Sass-like markup and staged CSS features in CSS",
   "author": "Jonathan Neal <jonathantneal@hotmail.com>",
   "license": "CC0-1.0",
   "repository": "jonathantneal/precss",
   "homepage": "https://github.com/jonathantneal/precss#readme",
   "bugs": "https://github.com/jonathantneal/precss/issues",
-  "main": "index.bundle.js",
-  "module": "index.js",
+  "main": "index.js",
+  "module": "index.mjs",
   "files": [
     "index.js",
-    "index.bundle.js"
+    "index.mjs"
   ],
   "scripts": {
     "prepublishOnly": "npm test",
     "pretest": "rollup -c .rollup.js --silent",
-    "test": "echo 'Running tests...'; npm run test:ec && npm run test:js && npm run test:tape",
-    "test:ec": "echint --ignore index.bundle.js test",
-    "test:js": "eslint *.js --cache --ignore-path .gitignore --quiet",
+    "test": "npm run test:js && npm run test:tape",
+    "test:js": "eslint src/*.js --cache --ignore-path .gitignore --quiet",
     "test:tape": "postcss-tape"
   },
   "engines": {
     "node": ">=4.0.0"
   },
   "dependencies": {
-    "postcss": "^6.0.23",
-    "postcss-advanced-variables": "^2.3.3",
+    "postcss": "^7.0.6",
+    "postcss-advanced-variables": "^3.0.0",
     "postcss-atroot": "^0.1.3",
     "postcss-extend-rule": "^2.0.0",
-    "postcss-nested": "^3.0.0",
-    "postcss-preset-env": "^5.1.0",
+    "postcss-nested": "^4.1.0",
+    "postcss-preset-env": "^6.4.0",
     "postcss-property-lookup": "^2.0.0"
   },
   "devDependencies": {
-    "babel-core": "^6.26.3",
-    "babel-eslint": "^8.2.3",
-    "babel-preset-env": "^1.7.0",
-    "echint": "^4.0.1",
-    "eslint": "^4.19.1",
+    "@babel/core": "^7.1.6",
+    "@babel/preset-env": "^7.1.6",
+    "babel-eslint": "^10.0.1",
+    "eslint": "^5.9.0",
     "eslint-config-dev": "^2.0.0",
     "postcss-tape": "^2.2.0",
     "pre-commit": "^1.2.2",
-    "rollup": "^0.61.1",
-    "rollup-plugin-babel": "^3.0.4"
+    "rollup": "^0.67.3",
+    "rollup-plugin-babel": "^4.0.3"
   },
   "eslintConfig": {
     "extends": "dev",

package.json

@@ -0,0 +1,25 @@
+.menu {
+	width: calc(4 * 200px);
+}
+
+.menu-link {
+	width: calc(1 * 200px);
+	background: #056ef0;
+	height: calc(1 * 200px)
+}
+
+.menu-link:link,.menu-link:visited {
+			background-color: rgba(5, 110, 240, 0.5);
+}
+
+.menu-link:-webkit-any-link {
+			background-color: rgba(5, 110, 240, 0.5);
+}
+
+.menu-link:-moz-any-link {
+			background-color: rgba(5, 110, 240, 0.5);
+}
+
+.menu-link:any-link {
+			background-color: rgba(5, 110, 240, 0.5);
+}

index.js src/index.js

@@ -9,17 +9,17 @@
 }
 
 .menu-link:link,.menu-link:visited {
-	background-color: rgba(5, 110, 240, 0.5);
+			background-color: color-mod(#056ef0 alpha(50%));
 }
 
 .menu-link:-webkit-any-link {
-	background-color: rgba(5, 110, 240, 0.5);
+			background-color: color-mod(#056ef0 alpha(50%));
 }
 
 .menu-link:-moz-any-link {
-	background-color: rgba(5, 110, 240, 0.5);
+			background-color: color-mod(#056ef0 alpha(50%));
 }
 
 .menu-link:any-link {
-	background-color: rgba(5, 110, 240, 0.5);
+			background-color: color-mod(#056ef0 alpha(50%));
 }

test/basic.color-mod.expect.css

@@ -9,33 +9,33 @@
 }
 
 :root {
-					background-color: rgba(5, 110, 240, 0.02);
+					background-color: color-mod(#056ef0 alpha(2%));
 				}
 
 .menu-link:link,.menu-link:visited {
-	background-color: #056ef0;
+			background-color: #056ef0;
 }
 
 :root {
-					background-color: rgba(5, 110, 240, 0.02);
+					background-color: color-mod(#056ef0 alpha(2%));
 				}
 
 .menu-link:-webkit-any-link {
-	background-color: #056ef0;
+			background-color: #056ef0;
 }
 
 :root {
-					background-color: rgba(5, 110, 240, 0.02);
+					background-color: color-mod(#056ef0 alpha(2%));
 				}
 
 .menu-link:-moz-any-link {
-	background-color: #056ef0;
+			background-color: #056ef0;
 }
 
 :root {
-					background-color: rgba(5, 110, 240, 0.02);
+					background-color: color-mod(#056ef0 alpha(2%));
 				}
 
 .menu-link:any-link {
-	background-color: #056ef0;
+			background-color: #056ef0;
 }