Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

postcss-grid-system

Package Overview
Dependencies
Maintainers
1
Versions
33
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

postcss-grid-system - npm Package Compare versions

Comparing version 0.4.16 to 0.5.0

.babelrc

49

lib/index.js

@@ -11,3 +11,3 @@ "use strict";

module.exports = _postcss.default.plugin('postcss-grid-system', opts => {
module.exports = opts => {
const options = {

@@ -80,26 +80,31 @@ width: 20.5,

return root => {
root.walkAtRules('gs', gsAtRule => {
gsAtRule.walkDecls(decl => {
if (decl.prop.match(/^width/) || decl.prop.match(/^gutter/) || decl.prop.match(/^padding/) || decl.prop.match(/^max/) || decl.prop.match(/^min/)) {
options[decl.prop] = parseFloat(decl.value);
} else if (decl.prop.match(/^align/) || decl.prop.match(/^display/)) {
options[decl.prop] = decl.value;
}
});
root.walkAtRules('gs-media', gridMediaAtRule => {
walkDecls(gridMediaAtRule, gridMediaAtRule.params);
gridMediaAtRule.each(rule => {
e.rules[gridMediaAtRule.params] = e.rules[gridMediaAtRule.params] || [];
e.rules[gridMediaAtRule.params].push(rule);
(0, _utils.nodeClean)(rule, true);
return {
postcssPlugin: 'postcss-grid-system',
Once(root) {
root.walkAtRules('gs', gsAtRule => {
gsAtRule.walkDecls(decl => {
if (decl.prop.match(/^width/) || decl.prop.match(/^gutter/) || decl.prop.match(/^padding/) || decl.prop.match(/^max/) || decl.prop.match(/^min/)) {
options[decl.prop] = parseFloat(decl.value);
} else if (decl.prop.match(/^align/) || decl.prop.match(/^display/)) {
options[decl.prop] = decl.value;
}
});
(0, _utils.nodeClean)(gridMediaAtRule);
root.walkAtRules('gs-media', gridMediaAtRule => {
walkDecls(gridMediaAtRule, gridMediaAtRule.params);
gridMediaAtRule.each(rule => {
e.rules[gridMediaAtRule.params] = e.rules[gridMediaAtRule.params] || [];
e.rules[gridMediaAtRule.params].push(rule);
(0, _utils.nodeClean)(rule, true);
});
(0, _utils.nodeClean)(gridMediaAtRule);
});
walkDecls(root, 0); // console.log(util.inspect(e.blocs, false, null))
(0, _gridSystem.default)(e, rootCss, options);
gsAtRule.replaceWith(rootCss);
});
walkDecls(root, 0); // console.log(util.inspect(e.blocs, false, null))
}
(0, _gridSystem.default)(e, rootCss, options);
gsAtRule.replaceWith(rootCss);
});
};
});
};

51

package.json
{
"name": "postcss-grid-system",
"version": "0.4.16",
"version": "0.5.0",
"description": "A PostCSS plugin to create grids based on a fixed column width.",

@@ -31,19 +31,30 @@ "keywords": [

},
"dependencies": {
"postcss": "^7.0.17"
"peerDependencies": {
"postcss": "^8.2.2"
},
"devDependencies": {
"@babel/cli": "^7.4.4",
"@babel/core": "^7.4.5",
"@babel/preset-env": "^7.4.5",
"@babel/register": "^7.4.4",
"ava": "^2.0.0",
"eslint": "^5.16.0",
"eslint-config-airbnb": "^17.1.0",
"eslint-plugin-import": "^2.17.3",
"eslint-plugin-jsx-a11y": "^6.2.1",
"eslint-plugin-react": "^7.13.0"
"@babel/cli": "^7.12.10",
"@babel/core": "^7.12.10",
"@babel/preset-env": "^7.12.11",
"@babel/register": "^7.12.10",
"ava": "^3.15.0",
"eslint": "^7.17.0",
"eslint-config-airbnb": "^18.2.1",
"eslint-config-prettier": "^7.1.0",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-prettier": "^3.3.1",
"eslint-plugin-react": "^7.22.0"
},
"prettier": {
"singleQuote": true
},
"eslintConfig": {
"extends": "airbnb",
"extends": [
"airbnb",
"prettier"
],
"plugins": [
"prettier"
],
"rules": {

@@ -65,15 +76,3 @@ "no-param-reassign": [

]
},
"babel": {
"presets": [
[
"@babel/preset-env",
{
"targets": {
"node": "current"
}
}
]
]
}
}

69

README.md

@@ -1,2 +0,2 @@

# postcss-grid-system
# postcss-grid-system

@@ -10,11 +10,11 @@ [![npm version][npm-img]][npm] [![Build Status][ci-img]][ci] [![Dependency Status][dep-img]][dep]

[github.io]: http://francoisromain.github.io/postcss-grid-system
[PostCSS]: https://github.com/postcss/postcss
[ci-img]: https://travis-ci.org/francoisromain/postcss-grid-system.svg
[ci]: https://travis-ci.org/francoisromain/postcss-grid-system
[npm-img]: https://badge.fury.io/js/postcss-grid-system.svg
[npm]: https://badge.fury.io/js/postcss-grid-system
[dep-img]: https://david-dm.org/francoisromain/postcss-grid-system.svg
[dep]: https://david-dm.org/francoisromain/postcss-grid-system
[postcss]: https://github.com/postcss/postcss
[ci-img]: https://travis-ci.org/francoisromain/postcss-grid-system.svg
[ci]: https://travis-ci.org/francoisromain/postcss-grid-system
[npm-img]: https://badge.fury.io/js/postcss-grid-system.svg
[npm]: https://badge.fury.io/js/postcss-grid-system
[dep-img]: https://david-dm.org/francoisromain/postcss-grid-system.svg
[dep]: https://david-dm.org/francoisromain/postcss-grid-system
* * *
---

@@ -25,13 +25,15 @@ ## Installation

$ npm install postcss-grid-system --save-dev
```bash
npm install postcss postcss-grid-system --save-dev
```
Require with PostCSS:
``` js
postcss([ require('postcss-grid-system') ])
```js
postcss([require('postcss-grid-system')]);
```
See [PostCSS docs](https://github.com/postcss/postcss#usage) to setup with Gulp, Grunt, Webpack, npm scripts…
See [PostCSS docs](https://github.com/postcss/postcss#usage) to setup with Gulp, Grunt, Webpack, npm scripts…
* * *
---

@@ -42,11 +44,11 @@ ## Configuration

``` javascript
```javascript
{
width: '20.5rem';/* width of a single column */
gutter: '1.5rem'; /* width of the gutter */
width: '20.5rem'; /* width of a single column */
gutter: '1.5rem'; /* width of the gutter */
padding: '1.5rem'; /* padding of the main container */
max: 8; /* maximum number of blocs (wide screens) */
min: 2; /* minimum number of blocs (mobile) */
align: 'center'; /* center or left */
display: 'flex'; /* float or flex */
max: 8; /* maximum number of blocs (wide screens) */
min: 2; /* minimum number of blocs (mobile) */
align: 'center'; /* center or left */
display: 'flex'; /* float or flex */
}

@@ -57,12 +59,11 @@ ```

``` css
```css
@gs {
width: 20.5rem; /* width of a single column */
gutter: 1.5rem; /* width of the gutter */
padding: 1.5rem; /* padding of the main container */
max: 8; /* maximum number of blocs (wide screens) */
min: 2; /* minimum number of blocs (mobile) */
align: center; /* center or left */
display: flex; /* float or flex */
width: 20.5rem; /* width of a single column */
gutter: 1.5rem; /* width of the gutter */
padding: 1.5rem; /* padding of the main container */
max: 8; /* maximum number of blocs (wide screens) */
min: 2; /* minimum number of blocs (mobile) */
align: center; /* center or left */
display: flex; /* float or flex */
}

@@ -73,5 +74,5 @@ ```

A **breakpoint** is created for each value from _min_ to _max_. When the screen is narrower than _min_ * _width_, elements are fluids.
A **breakpoint** is created for each value from _min_ to _max_. When the screen is narrower than _min_ \* _width_, elements are fluids.
* * *
---

@@ -82,3 +83,3 @@ ## Usage

``` css
```css
@gs-media [breakpoint] {

@@ -131,3 +132,2 @@ .my-class {

### Columns

@@ -140,2 +140,1 @@

Example: [input](https://github.com/francoisromain/postcss-grid-system/blob/gh-pages/test/src/06.css), [output](https://github.com/francoisromain/postcss-grid-system/blob/gh-pages/test/dist/06.css), [markup](https://github.com/francoisromain/postcss-grid-system/blob/gh-pages/test/06.html), [demo](http://francoisromain.github.io/postcss-grid-system/test/06.html)
.DS_Store
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc