Input error you must pass a valid list of files to parse - Исправление ошибок и поиск оптимальных решений проблем

here I got this error when adding the tailwind CSS.screenshot is attached herewith

  [https://i.stack.imgur.com/UC8NS.png][1]
package.json file
  "scripts": {
    "start": "npm run watch:css && react-scripts start",
    "build": "npm run watch:css && react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "buid:css": "postcss src/assets/tailwind.css -o src/assets/main.css",
    "watch:css": "postcss src/assets/tailwind.css -o src/assets/main.css"
  },

when I creating react app here I got an error. for CSS I used tailwind CSS. I did several changes .but the error was the same. How do I fix this error?

Vadim Kotov

7,9548 gold badges48 silver badges62 bronze badges

asked Jun 8, 2021 at 9:37

Hei, I have the same problem, the problem is simple because a folder like assets does not exist, make sure the part

src/assets/tailwind.css

is exist in

watch:css": "postcss src/assets/tailwind.css -o src/assets/main.css

you can try to search part src/assets/tailwind.css in your directory folder

hope my answer is helpful

answered Jun 20, 2021 at 6:21

zer0signzer0sign

1132 silver badges12 bronze badges

you have some syntax error try this instead

"scripts": { "start": "npm run watch:css && react-scripts start", "build": "npm run watch:css && react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject", "build:css": "postcss src/assets/tailwind.css -o src/assets/main.css", "watch:css": "postcss src/assets/tailwind.css -o src/assets/main.css" },

answered Oct 15, 2022 at 10:50

Источник

Intro

For example, when I use table elements, I only can select horizontally.

Index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" type="text/css" href="../css/home_page.css" >
    </head>
    <body>
        <div>First element</div>
        <table id="table_area">
            <tr class="table_row">
                <td class="table_cell">1.Hello</td>
                <td class="table_cell">1.World</td>
                <td class="table_cell"></td>
                <td class="table_cell"></td>
                <td class="table_cell"></td>
                <td class="table_cell">1.!!!</td>
            </tr>
            <tr class="table_row">
                <td class="table_cell">2.Hello</td>
                <td class="table_cell">2.World</td>
                <td class="table_cell"></td>
                <td class="table_cell"></td>
                <td class="table_cell"></td>
                <td class="table_cell">2.!!!</td>
            </tr>
        </table>
    </body>
</html>

Enter fullscreen mode

Exit fullscreen mode

home_page.css

#table_area{
    margin: 1%;
    width: 10vw;
    height: 5vh;
    border: 1px solid black;
    border-collapse: collapse;
}
.table_cell{
    border: 1px solid black;
    border-collapse: collapse;
    min-width: 2vw;
}

Enter fullscreen mode

Exit fullscreen mode

But in this time, I want to select each column.

Environments

Node.js ver.15.0.0

package.json

{
    "browserslist": [
        "last 2 version"
    ],
    "scripts": {
        "css": "npx postcss postcss -c postcss.config.js -d wwwroot/css -w"
    },
    "dependencies": {
        "autoprefixer": "^10.0.1",
        "postcss": "^8.1.2",
        "postcss-cli": "^8.1.0",
        "postcss-import": "^13.0.0",
        "precss": "^4.0.0",
        "ts-loader": "^8.0.6",
        "tsc": "^1.20150623.0",
        "typescript": "^4.0.3",
        "webpack": "^5.2.0",
        "webpack-cli": "^4.1.0"
    }
}

Enter fullscreen mode

Exit fullscreen mode

[PostCSS] Input Error: You must pass a valid list of files to parse

On my Surface 6, when I tried executing compiling PostCSS command «npx postcss postcss/*.css -c postcss.config.js -d wwwroot/css», I got an error.

Input Error: You must pass a valid list of files to parse

Enter fullscreen mode

Exit fullscreen mode

But on my another PC didn’t occurr.
Though I haven’t know why, I could avoid this error by changing the command to «npx postcss postcss -c postcss.config.js -d wwwroot/css»
(«postcss» was a directory name).

Arrange elements vertically

Because I want to make elements select vertically, I have to arrange them vertically.
This time, I use Flexbox.

Index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" type="text/css" href="../css/home_page.css" >
    </head>
    <body>
...
        <div id="item_area">
            <div class="item_column">
                <div class="item_cell">1. hello</div>
                <div class="item_cell">1. world</div>
                <div class="item_cell"></div>
                <div class="item_cell"></div>
                <div class="item_cell"></div>
                <div class="item_cell">1. !!!</div>
            </div>
            <div class="item_column">
                <div class="item_cell">2. hello</div>
                <div class="item_cell"></div>
                <div class="item_cell"></div>
                <div class="item_cell"></div>
                <div class="item_cell">2. world</div>
                <div class="item_cell">2. !!!</div>
            </div>            
        </div>
    </body>
</html>

Enter fullscreen mode

Exit fullscreen mode

home_page.css

...
#item_area{
    display: flex;
    flex-direction: row;
}
.item_column{
    display: flex;
    flex-direction: column;
}
.item_cell{
    border: 1px solid black;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 10vw;
    height: 5vh;
}

Enter fullscreen mode

Exit fullscreen mode

To compile PostCSS, I execute «npm run css» or «npx postcss postcss -c postcss.config.js -d wwwroot/css».
Now I can select vertically.

Copy & paste

One problem is occurred when I try copying the elements and pasting another place(For example on an Excel sheet).
The copied values are like below.

The empty values and columns are ignored.
Now I try to edit copied values by TypeScript.

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "lib": ["DOM", "ES2015"],
    "outDir": "./wwwroot/js",
    "strict": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "alwaysStrict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  }
}

Enter fullscreen mode

Exit fullscreen mode

webpack.config.js

var path = require('path');
module.exports = {
    mode: 'development',
    entry: {
        'homePage': './ts/home.page.ts',
    },
    module: {
        rules: [
            {
                test: /.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/
            }
        ]
    },
    resolve: {
        extensions: [ '.tsx', '.ts', '.js' ]
    },
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, './wwwroot/js'),
        library: 'Page',
        libraryTarget: 'umd'
    }
};

Enter fullscreen mode

Exit fullscreen mode

Index.html

...
        <script src="../js/homePage.bundle.js"></script>
        <script>
            (function() {
                Page.init();
            })();
        </script>
    </body>
</html>

Enter fullscreen mode

Exit fullscreen mode

home.page.ts

import { CopyCellValues } from "./copy-cell-values";

var ctrlActive: boolean = false;
export function init()
{
    // track Ctrl + C
    document.body.addEventListener('keydown', e => handleKeyDownEvents(e));
    document.body.addEventListener('keyup', e => handleKeyUpEvents(e));
}
function handleKeyDownEvents(e: KeyboardEvent)
{
    switch(e.key)
    {
        case 'Control':
            ctrlActive = true;
            break;
    }
}
function handleKeyUpEvents(e: KeyboardEvent)
{
    switch(e.key)
    {
        case 'c':
            copyToClipboard();
            break;
        case 'Control':
            ctrlActive = false;
            break;
    }
}
function copyToClipboard()
{
    if (ctrlActive === false)
    {
        return;
    }
    const copyCellValues = new CopyCellValues();
    copyCellValues.copyToClipboard();
}

Enter fullscreen mode

Exit fullscreen mode

copy-cell-values.ts

export class CopyCellValues {
    public copyToClipboard() {
        const selection = window.getSelection();

        if(selection == null ||
            selection.rangeCount <= 0) {
            console.warn("no selection");
            return;
        }
        const targetTexts = this.getSelectedTexts(selection.getRangeAt(0).cloneContents());
        this.copy(targetTexts);
    }
    private getSelectedTexts(selectedDom: DocumentFragment): Array<Array<string>> {
        let parent: HTMLElement|null = null;
        for(let i = 0; i < selectedDom.childNodes.length; i++) {
            const targetElement = selectedDom.childNodes[i] as HTMLElement;
            if (targetElement?.id === 'item_area') {
                parent = targetElement;
                break;
            }
        }
        if(parent == null) {
            // when select inside "item_area"
            return this.getTexts(selectedDom.childNodes);
        }
        // when select outside "item_area"
        return this.getTexts(parent.childNodes);
    }
    private getTexts(parentNodes: NodeListOf<ChildNode>): Array<Array<string>> {
        let results = new Array<Array<string>>();
        for(let i = 0; i < parentNodes.length; i++) {
            const targetElement = parentNodes[i] as HTMLElement;
            if (targetElement.className !== 'item_column') {
                continue;
            }
            let gotTexts: Array<string>| null = null;
            for(let j = 0; j < targetElement.childNodes.length; j++) {
                let child = targetElement.childNodes[j] as HTMLElement;
                if (child.className !== 'item_cell' ||
                        child.textContent == null) {
                    continue;
                }
                if (gotTexts == null) {
                    gotTexts = new Array<string>();
                }
                gotTexts.push(child.textContent);
            }
            if(gotTexts == null) {
                continue;
            }
            results.push(gotTexts);
        }
        return this.addEmptyRows(results, this.getMaxRowCount(results));
    }
    private getMaxRowCount(texts: Array<Array<string>>): number {
        let result = 0;
        for(const columnItems of texts) {
            const rowCount = columnItems.length;
            if (result < rowCount) {
                result = rowCount;
            }
        }
        return result;
    }
    private addEmptyRows(texts: Array<Array<string>>, rowCount: number): Array<Array<string>> {
        if(texts.length <= 0) {
            return texts;
        }
        if (texts[0].length < rowCount) {
            const addedFirstTexts = new Array<string>();
            const addEmptyCount = rowCount - texts[0].length;
            for(let i = 0; i < addEmptyCount; i++) {
                addedFirstTexts.push('');
            }
            for(const t of texts[0]) {
                addedFirstTexts.push(t);
            }
            texts[0] = addedFirstTexts;
        }
        if(texts.length > 1) {
            const targetIndex = texts.length - 1;
            if (texts[targetIndex].length < rowCount) {
                const addedLastTexts = new Array<string>();
                const addEmptyCount = rowCount - texts[targetIndex].length;
                for(const t of texts[0]) {
                    addedLastTexts.push(t);
                }
                for(let i = 0; i < addEmptyCount; i++) {
                    addedLastTexts.push('');
                }
                texts[targetIndex] = addedLastTexts;
            }
        }
        return texts;
    }
    private copy(texts: Array<Array<string>>) {
        let result = '';
        const rowCount = texts[0].length;
        for(let i = 0; i < rowCount; i++) {
            let rowText = '';
            for(const columnItem of texts) {
                if (rowText !== '') {
                    rowText += 't';
                }
                rowText += columnItem[i];
            }
            result += rowText;
            result += 'n';
        }
        navigator.clipboard.writeText(result);
    }
}

Enter fullscreen mode

Exit fullscreen mode

The result like below.

I can get selected elements by «getSelection».

Window.getSelection() — Web APIs | MDN

And I can rewrite the clipboard values by «navigator.clipboard.writeText».

Clipboard.writeText() — Web APIs | MDN

Editable elements

Now I try making the elements editable.
I can use «contentEditable» to do this.

Making content editable — Developer guides | MDN

But when I make the elements editable, I get another problem.
When I focus the editable element, I can’t select other elements.

So I have to distinguish edit and select operations.

I decide when I double click an element, the editing mode is started.
After that, if I click other elements, the editing mode is stopped, and the selecting mode is started.

Maybe I can write more simpler codes with jQuery plugin or RxJs or other libraries.
But in this time, I try using only TypeScript.

home.page.ts

import { ClickEventHandler } from "./click-event-handler";
import { CopyCellValues } from "./copy-cell-values";

var ctrlActive: boolean = false;
export function init()
{
...
    const clickEvent = new ClickEventHandler();
    clickEvent.init();
}
...

Enter fullscreen mode

Exit fullscreen mode

click-event-handler.ts

export class ClickEventHandler {
    private clickedElement: HTMLElement|null = null;
    private lastClickeTime: number = 0;
    private editing: boolean = false;
    public init() {
        document.onclick = e => this.handleClickEvent(e);
    }
    private handleClickEvent(e: MouseEvent){
        const target = e.target as HTMLElement;
        if(target.className !== 'item_cell') {
            if (this.clickedElement != null) {
                this.clickedElement.contentEditable = 'false';
            }
            this.clickedElement = null;
            this.editing = false;
            this.lastClickeTime = 0;
            return;
        }
        const clickedTime = (new Date()).getTime();
        if (this.editing === false &&
            this.clickedElement != null) {    
            if ((clickedTime - this.lastClickeTime) > 1000) {
                this.clickedElement.contentEditable = 'false';
                this.clickedElement = null;
            }
        }
        this.lastClickeTime = clickedTime;
        if (target === this.clickedElement) {
            target.contentEditable = 'true';
            target.focus();
            this.editing = true;
            return;
        } else {
            if (this.clickedElement != null) {
                this.clickedElement.contentEditable = 'false';
            }
            target.contentEditable = 'false';
            this.editing = false;
        }
        this.clickedElement = e.target as HTMLElement;    
    }
}

Enter fullscreen mode

Exit fullscreen mode

Источник

Recommend Projects

React

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

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

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

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
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.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

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

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.

Источник

Intro

Index.html

home_page.css

Environments

package.json

[PostCSS] Input Error: You must pass a valid list of files to parse

Arrange elements vertically

Index.html

home_page.css

Copy & paste

tsconfig.json

webpack.config.js

Index.html

home.page.ts

copy-cell-values.ts

Editable elements

home.page.ts

click-event-handler.ts

Recommend Projects

<img decoding="async" onError="javascript: wp_broken_images = window.wp_broken_images || function(){}; wp_broken_images(this);" loading="lazy" width="24" height="24" src="https://www.typescriptlang.org/favicon-32x32.png" alt="Typescript photo" /> Typescript

<img decoding="async" onError="javascript: wp_broken_images = window.wp_broken_images || function(){}; wp_broken_images(this);" loading="lazy" width="24" height="24" src="https://avatars2.githubusercontent.com/u/27804?s=200&amp;v=4" alt="Django photo" /> Django

<img decoding="async" onError="javascript: wp_broken_images = window.wp_broken_images || function(){}; wp_broken_images(this);" loading="lazy" width="24" height="24" src="https://laravel.com/img/logomark.min.svg" alt="Laravel photo" /> Laravel

Recommend Topics

web

server

Machine learning

Visualization

Recommend Org

<img decoding="async" onError="javascript: wp_broken_images = window.wp_broken_images || function(){}; wp_broken_images(this);" loading="lazy" width="24" height="24" src="https://avatars.githubusercontent.com/u/69631?v=4" alt="Facebook photo" /> Facebook

<img decoding="async" onError="javascript: wp_broken_images = window.wp_broken_images || function(){}; wp_broken_images(this);" loading="lazy" width="24" height="24" src="https://avatars.githubusercontent.com/u/6154722?v=4" alt="Microsoft photo" /> Microsoft

<img decoding="async" onError="javascript: wp_broken_images = window.wp_broken_images || function(){}; wp_broken_images(this);" loading="lazy" width="24" height="24" src="https://avatars.githubusercontent.com/u/1342004?v=4" alt="Google photo" /> Google

<img decoding="async" onError="javascript: wp_broken_images = window.wp_broken_images || function(){}; wp_broken_images(this);" loading="lazy" width="24" height="24" src="https://avatars.githubusercontent.com/u/1961952?v=4" alt="Alibaba photo" /> Alibaba

<img decoding="async" onError="javascript: wp_broken_images = window.wp_broken_images || function(){}; wp_broken_images(this);" loading="lazy" width="24" height="24" src="https://avatars.githubusercontent.com/u/1562726?v=4" alt="D3 photo" /> D3

<img decoding="async" onError="javascript: wp_broken_images = window.wp_broken_images || function(){}; wp_broken_images(this);" loading="lazy" width="24" height="24" src="https://avatars.githubusercontent.com/u/18461506?v=4" alt="Tencent photo" /> Tencent

Typescript

Django

Laravel

Facebook

Microsoft

Google

Alibaba

D3

Tencent