How to use postcss

2020-06-02-how-to-load-local-postcss-plugins.md?plain=1

GitHub: alexpeattie/alexpeattie.com

59
60
61
62
63
64
65
66
67
68
}
```

```js
---
filename: postcss.config.js
---
module.exports = {
  plugins: {
    'postcss-import': {},

7

37

3

See more examples

critters.js

GitHub: thiagobong22/PortfolioWeb_Thiagobongiovanni

300
301
302
303
304
305
306
307
308
309
310
311
 * @param {Boolean} [options.compress]  Compress CSS output (removes comments, whitespace, etc)
 */


function serializeStylesheet(ast, options) {
  let cssStr = '';
  postcss.stringify(ast, (result, node, type) => {
    var _node$raws;


    if (!options.compress) {
      cssStr += result;

0

0

1

See more examples

scss-parse.js

GitHub: postcss/postcss-scss

0
1
2
3
4
5
6
7
8
let { Input } = require('postcss')

let ScssParser = require('./scss-parser')

module.exports = function scssParse (scss, opts) {
  let input = new Input(scss, opts)

  let parser = new ScssParser(input)
  parser.parse()

37

623

16

See more examples

grid-utils.js

GitHub: thiagobong22/PortfolioWeb_Thiagobongiovanni

322
323
324
325
326
327
328
329
330
331
332
 * @return {Array<Rule>} rules with changed selectors
 */
function changeDuplicateAreaSelectors(ruleSelectors, templateSelectors) {
  ruleSelectors = ruleSelectors.map(selector => {
    let selectorBySpace = list.space(selector)
    let selectorByComma = list.comma(selector)


    if (selectorBySpace.length > selectorByComma.length) {
      selector = selectorBySpace.slice(-1).join('')
    }

0

0

1

See more examples

prefixes.js

GitHub: leechipang/grpc007

388
389
390
391
392
393
394
395
396
397
 * Return prefixed version of property
 */
;

_proto.prefixed = function prefixed(prop, prefix) {
  prop = vendor.unprefixed(prop);
  return this.decl(prop).prefixed(prop, prefix);
}
/**
 * Return values, which must be prefixed in selected property

0

0

1

See more examples

index.js

GitHub: leechipang/grpc007

154
155
156
157
158
159
160
161
162
importsOrder.forEach(function (path) {
  var importedSymbols = imports[path];
  var rule = existingImports[path];

  if (!rule && importedSymbols) {
    rule = postcss.rule({
      selector: `:import("${path}")`,
      raws: { after: '\n' }
    });

0

0

1

See more examples

combine-media-queries.js

GitHub: htmlburger/wpemerge-theme

13
14
15
16
17
18
19
20
21
22

root.walkAtRules('media', (rule) => {
  const id = rule.params;

  if (rules[id] === undefined) {
    rules[id] = postcss.atRule({
      name: rule.name,
      params: rule.params,
    });
  }

30

283

17

See more examples

grid-utils.js

GitHub: thiagobong22/PortfolioWeb_Thiagobongiovanni

321
322
323
324
325
326
327
328
329
330
331
 * @param  {Array<String>} templateSelectors
 * @return {Array<Rule>} rules with changed selectors
 */
function changeDuplicateAreaSelectors(ruleSelectors, templateSelectors) {
  ruleSelectors = ruleSelectors.map(selector => {
    let selectorBySpace = list.space(selector)
    let selectorByComma = list.comma(selector)


    if (selectorBySpace.length > selectorByComma.length) {
      selector = selectorBySpace.slice(-1).join('')

0

0

1

See more examples

value.js

GitHub: leechipang/grpc007

33
34
35
36
37
38
39
40
41
42
if (value === decl.value) {
  return "continue";
}

var item = void 0;
var propPrefix = vendor.prefix(prop);

if (propPrefix === '-pie-') {
  return "continue";
}

0

0

1

See more examples

index.js

GitHub: jrcostes/personaldatasheet-proposal

290
291
292
293
294
295
296
297
298
299
    normalizeRootRule(node)
    root[hasRootRule] = true
  })
},

Rule(rule) {
  let unwrapped = false
  let after = rule
  let copyDeclarations = false
  let declarations = []

0

1

0

See more examples

cssValidate.js

GitHub: pinterest/gestalt

10
11
12
13
14
15
16
17
18
19

const combined = (
  await Promise.all(files.map(async (file) => await fs.promises.readFile(file, 'utf8')))
).join('');

const astRoot = postcss.parse(combined);

const lookup = {};
astRoot.walkDecls(/^--g/, ({ prop, value }) => {
  if (lookup[prop] && lookup[prop] !== value) {

340

0

62

See more examples

3.postcss.md?plain=1

GitHub: antgod/blog

222
223
224
225
226
227
228
229
230
231
```
const texts = ['label', 'a', 'span']
if(texts.includes(rule.selector)) {
        // 插入样式属性: color, background-color
        const color = postcss.decl({ prop: 'color', value: 'black' })
        const bgColor = postcss.decl({ prop: 'background-color', value: 'white' })
        rule.prepend(color, bgColor)
}
console.log(`${rowIndex + 1 }.处理选择器：`, rule.selector)
```

25

70

12

See more examples

wholePixel.js

GitHub: barry-ai-fork/chat-app

71
72
73
74
75
76
77
78
79
80
    }
  };

  root.walkDecls((decl) => {
    if (!decl.value || ignoreList.includes(decl.prop)) return;
    const values = postcss.list.space(decl.value);
    if (!values?.length) return;
    values.forEach((value) => handleValue(decl, value));
  });
};

0

0

1

See more examples

index.js

GitHub: ictrobot/esbuild-scss-modules-plugin

48
49
50
51
52
53
54
55
56
57
    }, (err, result) => err ? reject(err) : resolve(result)));
}
async function buildScssModulesJS(scssFullPath, options) {
    const css = (await buildScss(scssFullPath, options.scssOptions)).css;
    let cssModulesJSON = {};
    const result = await postcss_1.default([
        postcssModules.default({
            localsConvention: options.localsConvention,
            generateScopedName: options.generateScopedName,
            getJSON(cssSourceFile, json) {

4

3

0

See more examples

type-scale.js

GitHub: ConciseCSS/concise.css

3
4
5
6
7
8
9
10
11
12
    rootSelector: ':root',
    typeRatio: 1.2,
    ratioProperty: '--type-ratio'
}

module.exports = postcss.plugin('type-scale', (opts = defaults) => {
    const options = Object.assign(defaults, opts)

    return css => {
        const typeRatio = getTypeRatio(css, options)

73

940

36

See more examples