Skip to content
This repository has been archived by the owner on Dec 27, 2024. It is now read-only.

feat: upgrade to PostCSS 8 #2

Merged
merged 7 commits into from
Nov 8, 2021
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 21 additions & 0 deletions .github/workflows/ci.yaml
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
name: Node.js CI

on:
push:
branches: master
pull_request:

jobs:
test:
runs-on: ubuntu-latest
strategy:
matrix:
node-version: [10.x, 12.x, 14.x, 16.x, 17.x]
armano2 marked this conversation as resolved.
Show resolved Hide resolved
steps:
- uses: actions/checkout@v2
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v2
with:
node-version: ${{ matrix.node-version }}
- run: npm install
- run: npm test
3 changes: 2 additions & 1 deletion .gitignore
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
node_modules
package-lock.json
yarn.lock
.*
!.appveyor.yml
!.editorconfig
!.gitignore
!.tape.js
!.travis.yml
!.github
*.log*
*.result.css
6 changes: 2 additions & 4 deletions .tape.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,5 @@
module.exports = {
'postcss-media-fn': {
'basic': {
message: 'supports basic usage'
}
'basic': {
message: 'supports basic usage'
}
};
9 changes: 0 additions & 9 deletions .travis.yml

This file was deleted.

7 changes: 2 additions & 5 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
# Media() [<img src="https://postcss.github.io/postcss/logo.svg" alt="PostCSS Logo" width="90" height="90" align="right">][postcss]

[![CSS Standard Status][css-img]][css-url]
[![NPM Version][npm-img]][npm-url]
[![Build Status][cli-img]][cli-url]
[![Licensing][lic-img]][lic-url]
Expand Down Expand Up @@ -127,10 +126,8 @@ grunt.initConfig({
});
```

[cli-url]: https://travis-ci.org/jonathantneal/postcss-media-fn
[cli-img]: https://img.shields.io/travis/jonathantneal/postcss-media-fn.svg
[css-img]: https://jonathantneal.github.io/css-db/badge/media-expressions.svg
[css-url]: https://jonathantneal.github.io/css-db/#media-expressions
[cli-url]: https://github.com/csstools/postcss-media-fn/actions/workflows/ci.yaml/badge.svg
[cli-img]: https://github.com/csstools/postcss-media-fn/actions/workflows/ci.yaml
[git-url]: https://gitter.im/postcss/postcss
[git-img]: https://img.shields.io/badge/chat-gitter-blue.svg
[lic-url]: LICENSE.md
Expand Down
55 changes: 34 additions & 21 deletions index.js
Original file line number Diff line number Diff line change
@@ -1,22 +1,30 @@
// tooling
const postcss = require('postcss');
const parser = require('postcss-value-parser');
const { parse } = require('postcss-values-parser');

// local tooling
const isLikelyMediaFn = (node) => node.type === 'decl' && (/media\([^\)]+\)/).test(node.value);
const isMediaFn = (node) => node.type === 'function' && node.value === 'media';
const mediaFnRegExp = /media\([^)]+\)/i;
const isMediaFn = (node) => node.name === 'media';
const isResponsiveValue = (value) => value.length > 1;
const isNonResponsiveValue = (value) => value.length === 1;

// plugin
module.exports = postcss.plugin('postcss-media-fn', () => (css) => {
css.walkRules(
(rule) => {
/**
* Use `media()` to assign responsive values.
* @returns {import('postcss').Plugin}
*/
module.exports = function creator() {
return {
postcssPlugin: 'postcss-media-fn',
Rule(rule) {
const newAtRules = [];

Array.prototype.filter.call(rule.nodes, isLikelyMediaFn).forEach(
rule.walkDecls(
(decl) => {
const newValue = parser(decl.value).walk(
if (!mediaFnRegExp.test(decl.value)) {
return;
}

const valueAST = parse(decl.value);
valueAST.walkFuncs(
(node) => {
if (isMediaFn(node)) {
// all values
Expand All @@ -28,9 +36,8 @@ module.exports = postcss.plugin('postcss-media-fn', () => (css) => {
values.push([]);
} else {
// otherwise, assign the stringified node to the last values sub-group
values[values.length - 1].push(parser.stringify(childNode));
values[values.length - 1].push(childNode.raws.before + childNode.toString() + childNode.raws.after);
}

return values;
},
[[]]
Expand All @@ -45,11 +52,14 @@ module.exports = postcss.plugin('postcss-media-fn', () => (css) => {
// for each responsive value
responsiveValues.forEach(
(value) => {
const prop = value.pop().trim()
const media = value.join('').trim()

// add new @media at-rule, rule, and declaration to list
newAtRules.push(
postcss.atRule({
name: 'media',
params: value.shift().trim(),
params: media,
source: decl.source
}).append(
rule.clone({
Expand All @@ -58,7 +68,7 @@ module.exports = postcss.plugin('postcss-media-fn', () => (css) => {
}
}).removeAll().append(
decl.clone({
value: value.join('').trim(),
value: prop,
raws: {}
})
)
Expand All @@ -71,15 +81,16 @@ module.exports = postcss.plugin('postcss-media-fn', () => (css) => {
if (nonResponsiveValues.length) {
// re-assign the first non-responsive value to the declaration
node.type = 'word';
node.value = nonResponsiveValues.shift().join('');
node.value = nonResponsiveValues.join('');
} else {
// otherwise, remove the node
node.type = 'word';
node.value = '';
node.remove()
}
}
}
).toString();
);

const newValue = valueAST.toString()

// if the value has changed
if (decl.value !== newValue) {
Expand All @@ -89,7 +100,7 @@ module.exports = postcss.plugin('postcss-media-fn', () => (css) => {
decl.remove();
} else {
// otherwise, update the declaration value
decl.value = newValue;
decl.value = newValue.trim();
}
}
}
Expand All @@ -103,5 +114,7 @@ module.exports = postcss.plugin('postcss-media-fn', () => (css) => {
}
}
}
);
});
}
}

module.exports.postcss = true;
38 changes: 21 additions & 17 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -4,38 +4,42 @@
"description": "Use `media()` to assign responsive values",
"author": "Jonathan Neal <jonathantneal@hotmail.com>",
"license": "CC0-1.0",
"repository": "jonathantneal/postcss-media-fn",
"homepage": "https://github.com/jonathantneal/postcss-media-fn#readme",
"bugs": "https://github.com/jonathantneal/postcss-media-fn/issues",
"repository": "csstools/postcss-media-fn",
"homepage": "https://github.com/csstools/postcss-media-fn#readme",
"bugs": "https://github.com/csstools/postcss-media-fn/issues",
"main": "index.js",
"files": [
"example.js",
"index.js"
],
"scripts": {
"clean": "git clean -X -d -f",
"prepublish": "npm test",
"test": "echo 'Running tests...'; npm run test:js && npm run test:tape",
"test:js": "eslint *.js --cache --ignore-pattern .gitignore",
"test:tape": "postcss-tape"
"lint:js": "eslint . --cache",
"lint": "npm run lint:js",
"pretest": "npm run lint",
"test": "postcss-tape",
"prepublishOnly": "npm test"
},
"engines": {
"node": ">=4.0.0"
"node": "^10 || ^12 || >=14"
},
"peerDependencies": {
"postcss": "^8.3"
},
"dependencies": {
"postcss": "^6.0.11",
"postcss-value-parser": "^3.3.0"
"postcss-values-parser": "^6.0.1"
},
"devDependencies": {
"eslint": "^4.6.1",
"eslint-config-dev": "2.0.0",
"postcss-tape": "2.0.1",
"pre-commit": "^1.2.2"
"eslint": "7.32.0",
"postcss": "8.3.11",
"postcss-tape": "6.0.1"
},
"eslintConfig": {
"extends": "dev"
"env": {
"es6": true,
"node": true
},
"extends": "eslint:recommended"
},
"runkitExampleFilename": "example.js",
"keywords": [
"postcss",
"css",
Expand Down