Merge b8f4f06 into c9a1b42

postcss · Feb 14, 2018 · 5e6b2b2 · 5e6b2b2
2 parents c9a1b42 + b8f4f06
commit 5e6b2b2
Show file tree

Hide file tree

Showing 7 changed files with 231 additions and 177 deletions.
diff --git a/.babelrc b/.babelrc
@@ -1,5 +1,5 @@
 {
-  "presets": ["es2015-loose", "stage-0"],
+  "presets": ["env"],
   "plugins": ["add-module-exports"],
   "env": {
     "development": {

diff --git a/.travis.yml b/.travis.yml
@@ -1,14 +1,11 @@
-sudo: false
+# https://docs.travis-ci.com/user/travis-lint
 
 language: node_js
-matrix:
-  include:
-    - node_js: '5'
-    - node_js: '4'
-    - node_js: '0.12'
-      env: NO_ESLINT=true
 
-script: "[[ $NO_ESLINT == true ]] && npm run test-012 || npm test"
+node_js:
+  - 4
+  - 6
+  - 8
 
 after_success:
   - './node_modules/.bin/nyc report --reporter=text-lcov | ./node_modules/.bin/coveralls'
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,11 @@
+# 3.0.0
+
+* postcss-use now uses commas instead of semicolons to separate options in
+  order to support PostCSS 6.
+* Removed: Dependencies on `balanced-match` and `lodash.isplainobject`.
+* Updated: `postcss` from 5 to 6.
+* Updated: `resolve-from` from 2 to 4.
+
 # 2.3.0
 
 * postcss-use now accepts an object of default options to supply to plugins

diff --git a/README.md b/README.md
@@ -12,11 +12,9 @@ npm install postcss-use --save
 
 ## Example
 
-Both hash maps and arrays are supported; note that functions are not, for
-security reasons. A hash map uses the CSS format of
-`option: value; option2: value2`, but please note that *values* must be valid
-JSON syntax. For example if a module takes a string option, it must be wrapped
-in quotation marks.
+Options may be passed into plugins as a JSON object, an array, a hash map, or
+as declarations. Hash maps will follow the format of
+`option: value, option2: value2`.
 
 ### Input
 
@@ -34,8 +32,8 @@ h1 {
 
 #### Alternative syntax
 
-You may also use configuration blocks that are more *CSS-like*. Note that array
-options cannot be parsed by this method.
+You may also use configuration blocks that are more *CSS-like*. Note that root
+array options cannot be parsed by this method.
 
 ```css
 @use postcss-discard-comments {
@@ -62,46 +60,63 @@ h1 {
 Type: `array|string`
 *Required option*.
 
-You must specify this array of postcss plugins to use, for security purposes.
-This prevents malicious usage of postcss-use in browser environments.
+The `modules` option specifies a list of allowable PostCSS Plugins, expressed
+as a `String`, `Array`, or `RegExp`. By default, all plugins are disabled in
+order to prevent malicious usage in browser environments.
 
 ```js
-postcss([ use({ modules: ['autoprefixer', 'cssnano', 'cssnext']}) ]);
+use({
+  // allow plugins starting with autoprefixer, postcss, precss, and cssnano
+  modules: [
+    /^autoprefixer/,
+    /^postcss/,
+    /^precss/,
+    /^cssnano/
+  ]
+})
 ```
 
-Note that you may also set this option to `'*'` to disable whitelisting of
-modules. This is not recommended for environments where you may be accepting
-arbitrary user input; use at your own risk.
+```js
+use({
+  // allow autoprefixer, postcss-preset-env, and postcss-flexbugs-fixes
+  modules: [ 'autoprefixer', 'postcss-preset-env', 'postcss-flexbugs-fixes' ]
+})
+```
+
+Setting the option to `"*"` will allow PostCSS Use to require any plugins. This
+is not recommended for environments where you may be accepting arbitrary user
+input; use at your own risk.
 
 ##### resolveFromFile
 
 Type: `boolean` (default: `false`)
 
-Set this to true in order to resolve plugins relative to the file that
-referenced them. This enables the usage of different versions of the same
-plugin, for instance.
+The `resolveFromFile` option specifies whether plugins should be resolved
+relative to the file that referenced them. This may be used to enable the usage
+of different versions of the same plugin. By default, it is disabled.
 
 ```js
-postcss([ use({ resolveFromFile: true, modules: '*' }) ]);
+use({
+  resolveFromFile: true
+})
 ```
 
 ##### options
 
 Type: `object` (default: `{}`)
 
-Default options for plugins, keyed by plugin name. If both the default and the specified options are objects, they are merged. Otherwise, the options specified in the CSS are used.
+The `options` option specifies individual options for specific plugins by
+plugin name.
 
 ```js
-postcss([
-    use({
-        modules: '*',
-        options: {
-            autoprefixer: {
-                browsers: ['> 1%', 'IE 7']
-            }
-        }
-    })
-]);
+use({
+  options: {
+    'postcss-preset-env': {
+      stage: 0,
+      browsers: 'last two versions'
+    }
+  }
+})
 ```
 
 ## Usage

diff --git a/package.json b/package.json
@@ -13,8 +13,7 @@
     "pretest": "eslint src/*.js src/__test__/*.js",
     "prepublish": "del-cli dist && cross-env BABEL_ENV=publish babel src --out-dir dist --ignore /__tests__/",
     "report": "nyc report --reporter=html",
-    "test": "nyc ava src/__tests__/*.js",
-    "test-012": "nyc ava src/__tests__/*.js"
+    "test": "nyc ava src/__tests__/*.js"
   },
   "keywords": [
     "css",
@@ -23,26 +22,26 @@
   ],
   "license": "MIT",
   "devDependencies": {
-    "all-contributors-cli": "^3.0.4",
-    "autoprefixer": "^6.2.3",
-    "ava": "^0.17.0",
-    "babel-cli": "^6.5.1",
-    "babel-core": "^6.5.1",
-    "babel-plugin-add-module-exports": "^0.2.0",
-    "babel-preset-es2015-loose": "^7.0.0",
-    "babel-preset-stage-0": "^6.5.0",
-    "babel-register": "^6.9.0",
-    "coveralls": "^2.11.6",
-    "cross-env": "^2.0.0",
-    "del-cli": "^0.2.0",
+    "all-contributors-cli": "^4.10.1",
+    "autoprefixer": "^8.0.0",
+    "ava": "^0.25.0",
+    "babel-cli": "^6.26.0",
+    "babel-core": "^6.26.0",
+    "babel-eslint": "^8.2.1",
+    "babel-plugin-add-module-exports": "^0.2.1",
+    "babel-preset-env": "^1.6.1",
+    "babel-register": "^6.26.0",
+    "coveralls": "^3.0.0",
+    "cross-env": "^5.1.3",
+    "del-cli": "^1.1.0",
     "eslint": "^3.1.0",
-    "eslint-config-cssnano": "^3.1.2",
-    "eslint-plugin-babel": "^3.3.0",
-    "eslint-plugin-import": "^1.10.3",
-    "nyc": "^10.0.0",
-    "postcss-cssnext": "^2.6.0",
-    "postcss-discard-comments": "^2.0.3",
-    "postcss-discard-font-face": "^3.0.0"
+    "eslint-config-cssnano": "^3.1.3",
+    "eslint-plugin-babel": "^4.1.2",
+    "eslint-plugin-import": "^2.8.0",
+    "nyc": "^11.4.1",
+    "postcss-discard-comments": "^2.0.4",
+    "postcss-discard-font-face": "^3.0.0",
+    "postcss-nesting": "^4.2.1"
   },
   "homepage": "https://github.com/postcss/postcss-use",
   "author": {
@@ -52,10 +51,8 @@
   },
   "repository": "postcss/postcss-use",
   "dependencies": {
-    "balanced-match": "^0.4.1",
-    "lodash.isplainobject": "^4.0.6",
-    "postcss": "^5.0.21",
-    "resolve-from": "^2.0.0"
+    "postcss": "^6.0.17",
+    "resolve-from": "^4.0.0"
   },
   "ava": {
     "require": "babel-register"

diff --git a/src/__tests__/index.js b/src/__tests__/index.js
@@ -27,13 +27,8 @@ const tests = [{
     options: {modules: ['postcss-discard-font-face']},
 }, {
     message: 'should enable autoprefixer from css',
-    fixture: '@use autoprefixer (remove: false; browsers: "> 1%, firefox 32");main{-webkit-border-radius:10px;border-radius:10px;display:flex;}',
-    expected: 'main{-webkit-border-radius:10px;border-radius:10px;display:-webkit-box;display:flex;}',
-    options: {modules: ['autoprefixer']},
-}, {
-    message: 'should enable autoprefixer from css, with nested options',
-    fixture: '@use autoprefixer { remove: false; browsers: > 0%, firefox 32 };main{-webkit-border-radius:10px;border-radius:10px;display:flex;}',
-    expected: 'main{-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;}',
+    fixture: '@use autoprefixer(remove: false, browsers: "> 1%, firefox 32");main{-webkit-border-radius:10px;border-radius:10px;display:flex;}',
+    expected: 'main{-webkit-border-radius:10px;border-radius:10px;display:flex;}',
     options: {modules: ['autoprefixer']},
 }, {
     message: 'should enable autoprefixer from css, with nested stringy options',
@@ -46,10 +41,10 @@ const tests = [{
     expected: 'main{-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;}',
     options: {modules: ['autoprefixer']},
 }, {
-    message: 'should enable postcss-cssnext',
-    fixture: '@use postcss-cssnext;:root{--a: red}h1{color: var(--a)}',
-    expected: 'h1{color: red}',
-    options: {modules: ['postcss-cssnext']},
+    message: 'should enable postcss-nesting',
+    fixture: '@use postcss-nesting;h1{&{color: red}}',
+    expected: 'h1{\n    color: red\n}',
+    options: {modules: ['postcss-nesting']},
 }];
 
 function process (css, options) {
@@ -65,15 +60,19 @@ tests.forEach(({message, fixture, expected, options}) => {
 test('multiple runs', t => {
     const processor = postcss(plugin({modules: ['postcss-discard-comments']}));
 
-    return processor.process('@use postcss-discard-comments;/*test*/').then(({css}) => {
+    return processor.process('@use postcss-discard-comments;/*test*/', {
+        from: `${__dirname}/index.css`,
+    }).then(({css}) => {
         t.deepEqual(css, '');
-    }).then(processor.process('/*test*/').then(({css}) => {
+    }).then(processor.process('/*test*/', {
+        from: `${__dirname}/index.css`,
+    }).then(({css}) => {
         t.deepEqual(css, '/*test*/');
     }));
 });
 
 function shouldThrow (t, css, opts = {}) {
-    t.throws(() => process(css, opts));
+    t.throws(() => process(css, opts, { from: __dirname }));
 }
 
 test('should not support arrows', shouldThrow, '@use postcss-discard-comments(foo => bar)', {modules: ['postcss-discard-comments']});
@@ -85,6 +84,26 @@ test('should not support null', shouldThrow, '@use postcss-discard-comments;', {
 test('should not support false', shouldThrow, '@use postcss-discard-comments;', {modules: false});
 test('should not support strings that are not "*"', shouldThrow, '@use postcss-discard-comments;', {modules: 'all'});
 
+test('should ignore unknown options', t => {
+    return postcss(
+        plugin({modules: ['postcss-discard-comments']})
+    ).process('@use postcss-discard-comments(removeAll:something)', {
+        from: `${__dirname}/index.css`,
+    }).then(({css}) => {
+        t.deepEqual(css, '');
+    });
+});
+
+test('should ignore unknown options', t => {
+    return postcss(
+        plugin({modules: ['postcss-discard-comments']})
+    ).process('@use postcss-discard-comments{removeAll:something}', {
+        from: `${__dirname}/index.css`,
+    }).then(({css}) => {
+        t.deepEqual(css, '');
+    });
+});
+
 test('should use the postcss plugin api', t => {
     t.truthy(plugin().postcssVersion, 'should be able to access version');
     t.deepEqual(plugin().postcssPlugin, name, 'should be able to access name');
@@ -131,7 +150,7 @@ test('should be able to specify default options for plugins', t => {
     const outputFile = path.join(__dirname, 'fixtures', 'test.out.css');
     const inputCss = fs.readFileSync(inputFile);
     const options = {
-        nobg: {onlyImages: true},
+        'postcss-nobg': {onlyImages: true},
     };
     return postcss(plugin({modules: '*', resolveFromFile: true, options})).process(inputCss, {
         from: inputFile,