Skip to content
This repository has been archived by the owner on Jun 6, 2022. It is now read-only.

Commit

Permalink
4.0.0
Browse files Browse the repository at this point in the history
  • Loading branch information
MoOx committed Jun 17, 2015
1 parent 084eeca commit 2c8f253
Show file tree
Hide file tree
Showing 6 changed files with 121 additions and 73 deletions.
28 changes: 17 additions & 11 deletions .eslintrc
Original file line number Diff line number Diff line change
Expand Up @@ -7,20 +7,26 @@ env:
browser: true
node: true

# 0: off, 1: warning, 2: error
rules:
# semicolons are useless
semi: [2, "never"]

indent: [2, 2] # 2 spaces indentation
max-len: [2, 80, 4]
quotes: [2, "double"]
semi: [2, "never"]
no-multiple-empty-lines: [2, {"max": 1}]

# 2 spaces indentation
indent: [2, 2]

# trailing coma are cool for diff
brace-style: [2, "stroustrup"]
comma-dangle: [2, "always-multiline"]

# enforce comma at eol (never before)
comma-style: [2, "last"]
computed-property-spacing: [2, "never"]
dot-location: [2, "property"]

one-var: [2, "never"]
no-bitwise: [2]

valid-jsdoc: 2
object-shorthand: [2, "methods"]
space-after-keywords: [2, "always"]
space-before-blocks: [2, "always"]
space-before-function-paren: [2, "never"]
space-in-brackets: [2, "never"]
space-in-parens: [2, "never"]
spaced-line-comment: [2, "always"]
6 changes: 4 additions & 2 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
# 4.0.0 - Unrelease
# 4.0.0 - 2015-05-17

- Changed: warning messages are not sent via postcss API (^4.1.0)
- Changed: warning messages are now sent via postcss messages api (^4.1.0)
- Added: automatic custom media `--` prefixing
([#11](https://github.com/postcss/postcss-custom-media/issues/11))
- Added: `preserve` allows you to preserve custom media query defintions
- Added: `appendExtensions` allows you (when `preserve` is truthy) to append your extensions as media queries

Expand Down
29 changes: 15 additions & 14 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,9 @@
## Installation

$ npm install postcss-custom-media
```console
$ npm install postcss-custom-media
```

## Usage

Expand Down Expand Up @@ -45,28 +47,27 @@ Checkout [tests](test) for more examples.

### Options

#### `extensions` (default: `{}`)
#### `extensions`

Allows you to pass an object to define the `<media-query-list>` for each `<extension-name>`. These definitions will override any that exist in the CSS.
(default: `{}`)

#### `preserve` (default: `false`)
Allows you to pass an object to define the `<media-query-list>` for each
`<extension-name>`. These definitions will override any that exist in the CSS.

Allows you to preserve custom media query definitions in output.
#### `preserve`

#### `appendExtensions` (default: `false`)
(default: `false`)

If `preserve` is set to `true`, allows you to append your extensions at end of your CSS.
Allows you to preserve custom media query definitions in output.

---
#### `appendExtensions`

## Contributing
(default: `false`)

Work on a branch, install dev-dependencies, respect coding style & run tests before submitting a bug fix or a feature.
**This option only works if `preserve` is truthy**.
Allows you to append your extensions at end of your CSS.

$ git clone https://github.com/postcss/postcss-custom-media.git
$ git checkout -b patch-1
$ npm install
$ npm test
---

## [Changelog](CHANGELOG.md)

Expand Down
23 changes: 10 additions & 13 deletions index.js
Original file line number Diff line number Diff line change
@@ -1,18 +1,7 @@
/**
* Module dependencies
*/
var postcss = require("postcss")

/**
* Constants.
*/
var EXTENSION_RE = /\(\s*(--[\w-]+)\s*\)/g

/**
* Expose the plugin.
*/
module.exports = postcss.plugin("postcss-custom-media", customMedia)

/*
* read & replace custom media queries by standard media queries
*/
Expand Down Expand Up @@ -66,7 +55,11 @@ function customMedia(options) {
return map[name]
}

result.warn("Missing @custom-media definition for '" + name + "'. The entire rule has been removed from the output.", {node: rule})
result.warn(
"Missing @custom-media definition for '" + name +
"'. The entire rule has been removed from the output.",
{node: rule}
)
toRemove.push(rule)
})
})
Expand All @@ -88,6 +81,10 @@ function customMedia(options) {
}

// remove @custom-media
toRemove.forEach(function(rule) { rule.removeSelf() })
toRemove.forEach(function(rule) {
rule.removeSelf()
})
}
}

module.exports = postcss.plugin("postcss-custom-media", customMedia)
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
"postcss": "^4.1.4"
},
"devDependencies": {
"eslint": "^0.18.0",
"eslint": "^0.23.0",
"tape": "^4.0.0"
},
"scripts": {
Expand Down
106 changes: 74 additions & 32 deletions test/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,20 @@ var test = require("tape")
var postcss = require("postcss")
var plugin = require("..")

function filename(name) { return "test/" + name + ".css" }
function read(name) { return fs.readFileSync(name, "utf8") }
function filename(name) {
return "test/" + name + ".css"
}
function read(name) {
return fs.readFileSync(name, "utf8")
}

function compareFixtures(t, name, msg, opts, postcssOpts) {
postcssOpts = postcssOpts || {}
postcssOpts.from = filename("fixtures/" + name)
opts = opts || {}
var result = postcss().use(plugin(opts)).process(read(postcssOpts.from), postcssOpts)
var result = postcss()
.use(plugin(opts))
.process(read(postcssOpts.from), postcssOpts)
var actual = result.css
var expected = read(filename("fixtures/" + name + ".expected"))
fs.writeFile(filename("fixtures/" + name + ".actual"), actual)
Expand All @@ -22,35 +28,71 @@ function compareFixtures(t, name, msg, opts, postcssOpts) {
}

test("@custom-media", function(t) {
compareFixtures(t, "transform", "should transform custom media")

compareFixtures(t, "transform-all", "should replaces all extension names")

var undefinedRes = compareFixtures(t, "undefined", "should remove undefined @media")
t.ok(undefinedRes.warnings()[0].text.match(/Missing @custom-media/), "should send warning to postcss")

compareFixtures(t, "js-defined", "should transform custom media and override local extensions", {
extensions: {
"--viewport-max-s": "(max-width: 30em)",
"--viewport-min-s": "(min-width: 30.01em)",
},
})

compareFixtures(t, "js-defined", "should transform custom media and override local unprefixed extensions", {
extensions: {
"viewport-max-s": "(max-width: 30em)",
"viewport-min-s": "(min-width: 30.01em)",
},
})

compareFixtures(t, "preserve", "should preserve custom media", {preserve: true})

compareFixtures(t, "append", "should append custom media", {
extensions: {
"--viewport-max-s": "(max-width: 30em)",
},
appendExtensions: true,
})
compareFixtures(
t,
"transform",
"should transform custom media"
)

compareFixtures(
t,
"transform-all",
"should replaces all extension names"
)

var undefinedRes = compareFixtures(
t,
"undefined",
"should remove undefined @media"
)

t.ok(
undefinedRes.warnings()[0].text.match(/Missing @custom-media/),
"should send warning to postcss"
)

compareFixtures(
t,
"js-defined",
"should transform custom media and override local extensions",
{
extensions: {
"--viewport-max-s": "(max-width: 30em)",
"--viewport-min-s": "(min-width: 30.01em)",
},
}
)

compareFixtures(
t,
"js-defined",
"should transform custom media and override local unprefixed extensions",
{
extensions: {
"viewport-max-s": "(max-width: 30em)",
"viewport-min-s": "(min-width: 30.01em)",
},
}
)

compareFixtures(
t,
"preserve",
"should preserve custom media",
{preserve: true}
)

compareFixtures(
t,
"append",
"should append custom media",
{
extensions: {
"--viewport-max-s": "(max-width: 30em)",
},
appendExtensions: true,
}
)

t.end()
})

0 comments on commit 2c8f253

Please sign in to comment.