whitneyit / postcss-strip-units Goto Github PK
View Code? Open in Web Editor NEWLicense: MIT License
License: MIT License
Got the error below when trying out this plugin for the first time, in a PostCSS plugin stack that looks like this:
postcss-easy-import
postcss-nesting
postcss-strip-units
postcss-cssnext
postcss-normalize
postcss-reporter
Your current PostCSS version is 6.0.2, but postcss-strip uses 5.2.17. Perhaps this is the source of the error below.
events.js:160
throw er; // Unhandled 'error' event
^
TypeError: Could not parse `strip(var(--column))`. Got `NaN`
at /project-directory/node_modules/postcss-strip-units/lib/transformStrip.js:27:19
at evalFunctionCall (/project-directory/node_modules/reduce-function-call/index.js:73:10)
at /project-directory/node_modules/reduce-function-call/index.js:23:82
at Array.reduce (native)
at reduceFunctionCall (/project-directory/node_modules/reduce-function-call/index.js:22:47)
at transformStrip (/project-directory/node_modules/postcss-strip-units/lib/transformStrip.js:4:12)
at transformStripValue (/project-directory/node_modules/postcss-strip-units/index.js:15:34)
at Object.tryCatch [as try] (/project-directory/node_modules/postcss-message-helpers/index.js:53:12)
at transformValue (/project-directory/node_modules/postcss-strip-units/index.js:14:24)
at /project-directory/node_modules/postcss-strip-units/index.js:23:24
I was trying this plugin for the first time, and I ran into an error. Even if I don't call the strip()
function in my code, I still receive the same error messages (3 times to be precise):
Unknown error from PostCSS plugin. Your current PostCSS version is 7.0.14, but postcss-strip uses 4.1.16. Perhaps this is the source of the error below.
css.eachDecl is not a function
This is how I'm calling it in my gulpfile.js
:
var stripe = require('postcss-strip');
.pipe( plugin.postcss( [
cssvariables(),
colormod(),
stripe( {
functionName : 'removeUnit'
} ),
rem( {
fallback: true,
} ),
] ) )
When I put calc()
function inside strip()
, I get an error saying Couldn't parse strip(calc(24px * 2)). Got NaN
.
I think this error occurs because postcss-strip-units
is added before postcss-calc
.
So I added postcss-calc twice before and after postcss-strip-units
, but unfortunately it didn't work at all.
Any idea to achieve this or workaround?
The code is something like below.
variables.css
:root {
--a-size: 24px;
--b-size: calc(var(--a-size) * 2);
}
type.css
h1 {
font-size: calc(strip(var(--b-size)) * 1 rem); /* => Couldn't parse strip(calc(24px * 2)) => NaN */
}
main.css
@import 'variables.css';
@import 'type.css';
PostCSS plugins order
require('postcss-devtools')(),
require('postcss-easy-import')({addDependencyTo: webpack,prefix: '_'}),
require('postcss-url')(),
require('postcss-mixins')(),
require('postcss-extend')(),
require('postcss-each')(),
require('postcss-for')(),
require('postcss-nth-list')(),
require('postcss-simple-vars')(),
require('postcss-custom-properties')(),
require('postcss-strip-units')(),
require('postcss-conditionals')(),
require('postcss-calc')({warnWhenCannotResolve: true}),
require('postcss-cssnext')({browsers: 'last 2 versions'}),
require('css-mqpacker')(),
require('postcss-utilities')(),
require('postcss-browser-reporter')(),
require('postcss-reporter')()
Hey! I need to be able to put calc()
inside the strip()
function. I'm requesting this because it's something that the plugin is not able to do so far. This is my situation example:
--space-xl: calc( var(--space-unit) * 3.25 );
.class-name {
margin-left: calc((strip(var(--space-xl)) * 16) / 100);
}
As you might imagine, I need to keep the --space-xl
variable value as a dynamic one in order to allow a lot of other different elements to work dynamically too.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.