@ciiri/styled-jsx

    4.2.3 • Public • Published

    @ciiri/styled-jsx

    fork 自 styled-jsxapi 可参考原来的库。改动点如下:

    • scopeId 插入到属性而不是原本的 class

      <div class="orange" jsx-302262132 jsx-175175684 />
    • 修改底层 css 编译库 stylis@vue/component-compiler-utils,fix bug -webkit-keyframes add unexpect scope id

    • 解决 import style from 'xxx.module.scss 语法无法兼容 css-loader 问题(方案:extract-loader

    • css 语法与vue保持一致(因为换了编译库),如果用scss的话,简单使用如下:

      .App::v-deep .orange {
        color: orange;
        animation: scaleIn 3s ease-in forwards;
      }
      .pic {
        background: url(./logo192.png) no-repeat left top;
        height: 192px;
      }
      @keyframes scaleIn {
        0% {
          transform: scale(0);
        }
        100% {
          transform: scale(1);
        }
      }
    • version 4.2.2 新增 optional style tag 用法

      { this.state.optional && <style jsx>{`
        .optional {
          color: green;
          font-size: ${this.state.fontSize};
        }
      `}</style> }
    • 以后README只同步新特性,bug相关修复同步在CHANGELOG

    已有项目如何接入

    目的是在不影响现有流程的情况下无缝接入

    一、配置rules

    有两种方法,各取所需

    • 新增配置

      用文件名做区分 xx.scss or xx.module.scss ,可如下配置:

      {
        test: /\.module\.(scss|sass)$/,
        use: [
          {loader: 'babel-loader'},
          {loader: require('@ciiri/styled-jsx/webpack').loader},
          {loader: 'extract-loader'},
          {loader: 'css-loader'},
          {loader: 'sass-loader'}
        ]
      }
      
      {
        test: /\.(scss|sass)$/,
        use: [
          {loader: 'style-loader'},
          {loader: 'css-loader'},
          {loader: 'sass-loader'}
        ]
      }
    • 可编程loader

      本质还是文件名做区分 xx.scss or xx.module.scss ,编程的能力来源于 pitch-loader

      // 只是举例
      function trimPitch(args, ext) {
        const isModule = ext.filename.includes('.module.');
        const loaders = this.loaders;
        const removeList = [];
        if (isModule) {
          removeList.push('style-loader/index.js');
        } else {
          removeList.push('extract-loader/index.js', 'babel-loader/index.js', '@ciiri/styled-jsx/dist/webpack.js');
        }
        this.loaders = loaders.filter(({ path }) => !removeList.some(str => path.includes(str)));
      }
      
      {
        test: /\.s(a|c)ss$/,
        use: [
          { 
            loader: 'pitch-loader', 
            options: {
              pitch: trimPitch // 在pitch阶段执行loaders顺序调整、或者删除
            }
          },
          { loader: 'babel-loader' },
          { loader: require('@ciiri/styled-jsx/webpack').loader },
          { loader: 'extract-loader' },
          { loader: 'style-loader' },
          { loader: 'css-loader' },
          { loader: 'sass-loader' }
        ]
      }

    二、配置babel

    "babel": {
      "plugins": [
        "@ciiri/styled-jsx/babel"
      ]
    },

    Install

    npm i @ciiri/styled-jsx

    DownloadsWeekly Downloads

    23

    Version

    4.2.3

    License

    MIT

    Unpacked Size

    82.8 kB

    Total Files

    26

    Last publish

    Collaborators

    • singleparty