最新消息:VPS服务器又从fzhost.net换回Linode了,主题仍用朋友推荐的大前端D8

【未解决】Preact中css代码出错:Error evaluating function `color`: keyword.toLowerCase is not a function

CSS crifan 735浏览 0评论

折腾:

【部分解决】ReactJS中react-mobile-datepicker中input被设置readonly时无法滚动选择日期

期间,去把

lanjingling0510/react-mobile-datepicker: ? ? look a demo, Please imitate mobile environment.

源码放到preact项目中后,css出错了:

css代码:

:root {
  --default-bg: #f7f7f7;
  --default-color: color(var(--default-bg) contrast(50%));
  --default-disabled-color: color(var(--default-color) blend(var(--default-bg) 70%));
  --default-theme: #4eccc4;

webpack打包时,出错:

ERROR in ./~/css-loader?{"modules":true,"sourceMap":true,"importLoaders":1}!./~/postcss-loader/lib?{"sourceMap":true}!./~/less-loader/dist?{"sourceMap":true}!./src/components/react-mobile-datepicker/index.css
Module build failed:

--default-bg: #f7f7f7;
--default-color: color(var(--default-bg) contrast(50%));
^
Error evaluating function `color`: keyword.toLowerCase is not a function
in /Users/crifan/dev/xxxxxxxx/src/components/react-mobile-datepicker/index.css (line 3, column 21)
@ ./src/components/react-mobile-datepicker/index.css 4:14-208 18:2-22:4 19:20-214
@ ./src/components/react-mobile-datepicker/index.js
@ ./src/components/date-selector/index.js
@ ./src/container/breeding/breeding-process/index.js
@ ./src/container/app.js
@ ./src/index.js
@ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server babel-polyfill ./index.js

Error evaluating function `color`: keyword.toLowerCase is not a function

Error evaluating function `darken`: undefined is not a function – sage – Roots Discourse

javascript – .toLowerCase not working, replacement function? – Stack Overflow

看了下源码中,好像很多color相关的库:

  • color
  • color-convert
  • color-string
  • supports-color
  • color-name
  • colormin
  • css-color-names
  • colors

等等

估计就是用于支持上述写法的。

去搜搜这些库:

npm color-convert

color-convert

npm color-string

color-string

npm supports-color

supports-color

npm color

color

好像是的

color-name

colornames

colormin

css-color-names

colors

又看到一堆的:

"postcss-color-function": "1.3.2",
"postcss-color-gray": "2.0.0",
"postcss-color-hex-alpha": "1.3.0",
"postcss-color-hwb": "1.2.0",
"postcss-color-rebeccapurple": "1.2.0",
"postcss-color-rgba-fallback": "1.3.1",

果然就是这个:

postcss/postcss-color-function: PostCSS plugin to transform W3C CSS color function to more compatible CSS

支持这种写法:

body {
  background: color(red a(90%))
}

所以,先要去安装这个

然后搞清楚如何放到项目里生效

看到原项目中是:

cssnext的requires包括:

“postcss-color-function”: “1.3.2”,

postcss-cssnext的requires是:

“postcss-color-function”: “4.0.0”,

所以还是要先搞清楚:

cssnext 和 postcss-cssnext

cssnext – Use tomorrow’s CSS syntax, today.

-》

custom properties & var()

:root {
  --mainColor: red;
}

a {
  color: var(--mainColor);
}

MoOx/postcss-cssnext: PostCSS plugin to use tomorrow’s CSS syntax, today.

其项目中用到了:

var cssnext = require(‘cssnext’);

和:

require("postcss-url")(),
require("postcss-cssnext")(),
require("postcss-mixins"),
require("postcss-nested")(),

以及:

react-mobile-datepicker/package.json
devDependencies:
"cssnext": "^1.8.4",
"postcss-cssnext": "^3.0.2",

好像是应该放入到:

/webpack.config.babel.js

use: ExtractTextPlugin.extract({
  fallback: 'style-loader',
  use: [{
      loader: 'css-loader',
      options: {
        modules: true,
        sourceMap: CSS_MAPS,
        importLoaders: 1
      }
    },
    {
      loader: `postcss-loader`,
      options: {
        sourceMap: CSS_MAPS,
        plugins: () => {
          autoprefixer({
            browsers: ['last 2 versions']
          });
        }
      }
    },
    {
      loader: 'less-loader',
      options: {
        sourceMap: CSS_MAPS
      }
    }
  ]
})
}, {
  test: /\.(less|css)$/,
  exclude: [
    path.resolve(__dirname, 'src/components'),
    path.resolve(__dirname, 'src/container')
  ],
  use: ExtractTextPlugin.extract({
    fallback: 'style-loader',
    use: [{
        loader: 'css-loader',
        options: {
          sourceMap: CSS_MAPS,
          importLoaders: 1
        }
      },
      {
        loader: `postcss-loader`,
        options: {
          sourceMap: CSS_MAPS,
          plugins: () => {
            autoprefixer({
              browsers: ['last 2 versions']
            });
          }
        }
      },
      {
        loader: 'less-loader',
        options: {
          sourceMap: CSS_MAPS
        }
      }
    ]
  })
},

中某个合适的位置?

找些合适的例子

webpack.config.babel.js postcss-loader postcss-cssnext

postcss/postcss-loader: PostCSS loader for webpack

Doesn’t work with webpack 2 · Issue #92 · postcss/postcss-loader

What’s new in webpack 2

webpack 2 + PostCSS + cssnext – Thinking in Code

use: ExtractTextPlugin.extract({
  use: [{
      loader: 'css-loader',
      options: {
        importLoaders: 1
      },
    },
    'postcss-loader',
  ],
}),

javascript – Using autoprefixer with postcss in webpack 2.x – Stack Overflow

然后去安装这两个:

➜  ucowsapp git:(master) ✗ npm install -S postcss-cssnext cssnext
npm WARN deprecated cssnext@1.8.4: cssnext is now postcss-cssnext. cssnext is deprecated. See postcss-cssnext migration guide http://cssnext.io/postcss/
npm WARN deprecated css-list@0.1.3: Deprecated.
npm WARN ucows-app@6.0.0 No repository field.
npm WARN ucows-app@6.0.0 No license field.

added 245 packages in 51.189s

提示:

cssnext已经改名为postcss-cssnext了。

Using postcss-cssnext

所以加到配置中:

{
  // Transform our own .(less|css) files with PostCSS and CSS-modules
  test: /\.(less|css)$/,
  include: [
    path.resolve(__dirname, 'src/components'),
    path.resolve(__dirname, 'src/container')
  ],
  use: ExtractTextPlugin.extract({
    fallback: 'style-loader',
    use: [{
        loader: 'css-loader',
        options: {
          modules: true,
          sourceMap: CSS_MAPS,
          importLoaders: 1
        }
      },
      {
        loader: `postcss-loader`,
        options: {
          sourceMap: CSS_MAPS,
          plugins: () => {
            autoprefixer({
              browsers: ['last 2 versions']
            });
          }
        }
      },
      "postcss-cssnext",
      {
        loader: 'less-loader',
        options: {
          sourceMap: CSS_MAPS
        }
      }
    ]
  })
}, {
  test: /\.(less|css)$/,
  exclude: [
    path.resolve(__dirname, 'src/components'),
    path.resolve(__dirname, 'src/container')
  ],
  use: ExtractTextPlugin.extract({
    fallback: 'style-loader',
    use: [{
        loader: 'css-loader',
        options: {
          sourceMap: CSS_MAPS,
          importLoaders: 1
        }
      },
      {
        loader: `postcss-loader`,
        options: {
          sourceMap: CSS_MAPS,
          plugins: () => {
            autoprefixer({
              browsers: ['last 2 versions']
            });
          }
        }
      },
      "postcss-cssnext",
      {
        loader: 'less-loader',
        options: {
          sourceMap: CSS_MAPS
        }
      }
    ]
  })
},

看看效果

结果会导致所有的less都无法正常解析了。

且之前的color(的写法也还是不支持:

所以放弃。。

➜  ucowsapp git:(master) ✗ npm uninstall postcss-cssnext
npm WARN ucows-app@6.0.0 No repository field.
npm WARN ucows-app@6.0.0 No license field.

removed 53 packages in 12.365s

【后记20181121】

后来别人:

(1)告诉了,库:color – npm,有了更新的版本了;

(2)推荐了相关的介绍颜色color的帖子,感兴趣的可以看看:

Color Meaning, Symbolism, And Psychology: What Do Different Colors Mean | Jen Reviews

转载请注明:在路上 » 【未解决】Preact中css代码出错:Error evaluating function `color`: keyword.toLowerCase is not a function

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
56 queries in 0.254 seconds, using 12.13MB memory