Giter Club home page Giter Club logo

postcss-property-lookup's Introduction

postcss-property-lookup Build Status

PostCSS plugin that allows referencing property values without a variable, similar to Stylus.

.Test {
  margin-left: 20px;
  margin-right: @margin-left;
  color: red;
  background: @color url('test.png');
  line-height: 1.5;
  font-size: @(line-height)em;
}
.Test {
  margin-left: 20px;
  margin-right: 20px;
  color: red;
  background: red url('test.png');
  line-height: 1.5;
  font-size: 1.5em;
}

Check the test fixtures for more examples.

Usage

postcss([ require('postcss-property-lookup') ])

See PostCSS docs for examples for your environment.

Installation

$ yarn add postcss-property-lookup

Usage

JavaScript

postcss([
  require('postcss-property-lookup')(/* options */),
  // more plugins...
])

TypeScript

///<reference path="node_modules/postcss-property-lookup/.d.ts" />
import postcssPropertyLookup from 'postcss-property-lookup';

postcss([
  postcssPropertyLookup(/* options */),
  // more plugins...
])

Options

logLevel

Type: string: <error|warn>
Required: false
Default: warn

When a lookup cannot be resolved, this specifies whether to throw an error or log a warning. In the case of a warning, the invalid lookup value will be replaced with an empty string.

postcss-property-lookup's People

Contributors

alecrust avatar avanes avatar jedmao avatar jednano avatar onigoetz avatar ser-gen avatar simonsmith avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar

postcss-property-lookup's Issues

Error on lookup of same property

We can make this plugin more foolproof.
If I refer to same property, I need to get proper error.

.elem {
  color: @color;
}

Now I get meaningless Maximum call stack size exceeded.

Not working with nested media queries

Seeing this issue in codebases that were using the old version with no problem:

.Logo {
  text-align: center;
  display: block;
  color: inherit;
  font-family: "Yanone Kaffeesatz", "Helvetica Neue", Helvetica, Arial, sans-serif;

  @media (--md-viewport) {
    background-color: var(--color-gray-faint);
    border-right: 1px solid var(--color-gray-lighter);
    border-left: @border-right;
    padding: 5px;
  }
}

In the output CSS the @border-right value remains. I will add a test case for this tomorrow, this is just so I remember.

Publish fixes on PostCSS 4.x path

For those, like me, who are still "stuck" on the PostCSS 4.x path, because of certain plugins not yet supporting PostCSS 5.x, I could really use the 4.x version of this plugin (for now); however, there have been some fixes of recent that are not on the 4.x path.

Would you consider creating a postcss-4.0 branch, to which I can submit a PR that has all the new fixes?

Basically, I would just take the existing master branch, change the PostCSS dependency to 4.x and replace root.walkRules() with root.eachRule(). Perhaps it can be pushed as postcss-property-lookup version 0.4.0.

How does that sound?

Invalid log level

/node_modules/postcss-property-lookup/build/index.js:38
    throw new Error('Invalid logLevel: ' + options.logLevel);
          ^
Error: Invalid logLevel: undefined
    at propertyLookup (/node_modules/postcss-property-lookup/build/index.js:38:11)
    at Object.creator [as plugin] (/node_modules/postcss/lib/postcss.js:60:39)
    at /index.js:97:27
    at Array.forEach (native)
    at /index.js:84:13
    at creator (/node_modules/postcss/lib/postcss.js:60:39)
    at Function.postcss.plugin (/node_modules/postcss/lib/postcss.js:66:23)
    at Object.<anonymous> (/index.js:78:26)
    at Module._compile (module.js:460:26)
    at Object.Module._extensions..js (module.js:478:10)

I believe the issue may be related to passing an empty object as options to the plugin.

Memory leak on watching

I'm using the plugin with sass-loader and webpack. After watching for 30 minutes or more it results in a memory leak - the node server crashes. Also, the watch compile time becomes very slow (maybe 1.2 - 1.5 times slower).

New release breaks precss

I am getting this error on the new release:

/home/jiayu/iffedu/node_modules/precss/index.js:104
            instance.use(processor.plugin(processorOptions));
                                   ^

TypeError: processor.plugin is not a function
    at /home/jiayu/iffedu/node_modules/precss/index.js:104:27
    at Array.forEach (native)
    at /home/jiayu/iffedu/node_modules/precss/index.js:91:13
    at creator (/home/jiayu/iffedu/node_modules/postcss/lib/postcss.js:60:39)
    at Function.postcss.plugin (/home/jiayu/iffedu/node_modules/postcss/lib/postcss.js:66:23)
    at Object.<anonymous> (/home/jiayu/iffedu/node_modules/precss/index.js:85:26)
    at Module._compile (module.js:425:26)
    at Object.Module._extensions..js (module.js:432:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:313:12)

and everything works fine when i switch back to 1.1.3.

Interpolation of value

Some lookupped values may be unitless.
But others must use units:

/* input */

.body {
    line-height: 1.5;
    font-size: @line-height;
}
/* output */

.body {
    line-height: 1.5;
    font-size: 1.5;
}

I need to get:

/* output */

.body {
    line-height: 1.5;
    font-size: 1.5em;
}

For example, we can use this syntax font-size: @(line-height)em;

Feature request: @parent

What do you think about supporting @parent like so?

.foo {
    color: red;
}

.bar {
    color: @parent.foo.color; /* yields red */
}

Theoretically, this would only go up one level with nesting:

.foo {
    color: white;
    &:hover {
        color: red;
    }
    .baz {
        color: @parent.color;       /* yields white */
        color: @parent:hover.color; /* yields red   */
    }
}

I suppose it would make sense to support @root as well:

.foo {
    color: white;
}

.bar {
    &:hover {
        color: @root.foo.color; /* yields white */
    }
}

Issue With Nesting

It seems if you use this plugin in a .Parent selector then also use it in a nested .Child selector, the value in .Parent gets incorrectly taken from the equivalent in .Child.

In this case should use the padding-left value from .Parent not the one from .Child.

Instead this input:

.Parent {
  padding-left: 5px;
  padding-right: @padding-left;

  .Child {
    padding-left: 10px;
    padding-right: @padding-left;
  }
}

Produces this output:

.Parent {
  padding-left: 5px;
  padding-right: 10px;

  .Child {
    padding-left: 10px;
    padding-right: 10px;
  }
}

I've opened a PR (#2) which adds a test to reveal this issue.

Prevent not-valid values in output CSS

In test/fixtures/out/default.css invalid property is going to output. Maybe better option is not include invalid property and show warning in terminal? Plugin for console warnings.

.Test2 {
  margin-left: 400px;
  margin-right: 400px;
}

Disable in precss not working

https://github.com/jonathantneal/precss/wiki/Options

precss({"lookup": { disable: true }})

precss: base.css:26:1: Unable to find property @font-family in body
precss: base.css:26:1: Unable to find property @font-color in body
precss: base.css:92:1: Unable to find property @code-color in .loading__wrapper
precss: typography.css:18:1: Unable to find property @header-color in h2
precss: typography.css:18:1: Unable to find property @header-color in h2
precss: typography.css:18:1: Unable to find property @code-color in h2
precss: typography.css:30:1: Unable to find property @sheader-color in h3
precss: typography.css:37:1: Unable to find property @sheader-color in h4
precss: typography.css:44:1: Unable to find property @sheader-color in h5
precss: typography.css:51:1: Unable to find property @sheader-color in h6

How to disable this plugin?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.