Typo in CSS ? bottom: -100%\9

harisalipk · May 20, 2021, 7:59pm

what is \9 in css below. is this typo or valid character, Do i need modify webpack to recognize this character, build is failing due to unrecognize charactor

github.com

handsontable/handsontable/blob/master/dist/handsontable.full.css

/*!
 * Copyright (c) HANDSONCODE sp. z o. o.
 * 
 * HANDSONTABLE is a software distributed by HANDSONCODE sp. z o. o.,
 * a Polish corporation, based in Gdynia, Poland, at 96/98 Aleja Zwycięstwa,
 * registered with the National Court Register under number 538651,
 * EU tax ID number: PL5862294002, share capital: PLN 62,800.00.
 * 
 * This software is protected by applicable copyright laws, including
 * international treaties, and dual-licensed – depending on whether
 * your use is intended for or may result in commercial advantage
 * or monetary compensation (commercial purposes), or not.
 * 
 * If your use involves only such purposes as research, private study,
 * evaluation and the like, you agree to be bound by the terms included
 * in the "handsontable-non-commercial-license.pdf" file, available
 * in the main directory of this software repository.
 * 
 * By installing, copying, or otherwise using this software for
 * commercial purposes, you agree to be bound by the terms included

This file has been truncated. show original

line 513: bottom: -100%\9 ; /* Fix for IE9 to spread the “:before” pseudo element to 100% height of the parent element */

verison 8.4.0

aleksandra_budnik · May 21, 2021, 8:22am

Hi @harisalipk

That is not a typo, it’s a workaround for IE9.

Could you share your webpack.config.js and describe how do you import CSS to your project?

harisalipk · May 21, 2021, 2:09pm

Also migrating to webpack 5 and miniCSS plugin,
But as of now using Webpack 2.2.x, with ExtracTextPlugin

const ExtracTextPlugin = require(‘extract-text-webpack-plugin’)

module.export = {
…
module: {
…
rules: [
{
test: /.(css|…)$/,
use: ExtracTextPlugin({
use: [‘css-loader’, ‘less-loader’]
})
}
]
}

plugins: [
new ExtracTextPlugin(‘styles…css’)
]
}

css-loader version = 0.26.2 (will be upgraded to 5.2.5)

piotr.laszczkowski · May 24, 2021, 11:04am

Hi @harisalipk,
In Handsontable we use webpack@4 and mini-css-extract-plugin to process CSS files. At the moment, in your case, I suppose the best option is not to import handsontable/dist/handsontable.full.css (in js/css/less files) but concatenate handsontable/dist/handsontable.full.min.css with your styles.css file.