Skip to content

Commit

Permalink
fix: built-in base styles not work without sira directives.
Browse files Browse the repository at this point in the history 
perf: update plugin addBase logic.
refactor: rename dist js dir to plugin.
chore: upgrade postcss deps.
  • Loading branch information
@riccox
riccox committed Aug 4, 2023
1 parent 7b4001c commit 9d4f02f
Show file tree
Hide file tree
Showing 21 changed files with 261 additions and 319 deletions.
26 changes: 13 additions & 13 deletions packages/tailwind/package.json
View file
Expand Up @@ -25,11 +25,11 @@
"ui",
"modern"
],
"main": "dist/js/index.js",
"types": "dist/js/types/config.types.d.ts",
"typings": "dist/js/types/config.types.d.ts",
"main": "dist/plugin/index.js",
"types": "dist/plugin/types/config.types.d.ts",
"typings": "dist/plugin/types/config.types.d.ts",
"files": [
"dist/js",
"dist/plugin",
"dist/css",
"LICENSE",
"README.md"
Expand All @@ -45,23 +45,22 @@
},
"scripts": {
"clean": "rimraf ./dist",
"create:paths": "npm run create:folders && npm run create:files",
"create:folders": "mkdirp -p ./dist/css ./dist/js",
"create:folders": "mkdirp -p ./dist/css ./dist/plugin",
"create:files": "touch ./dist/css/styles.css && touch ./dist/css/base.css && touch ./dist/css/components.css && touch ./dist/css/utilities.css",
"create:paths": "npm run create:folders && npm run create:files",
"js": "tsc -b",
"js:minify": "node ./scripts/minify.js",
"styles": "tailwindcss --postcss -i src/style/styles.css -o ./dist/css/styles.css",
"base": "npx tailwindcss -c src/style/base/tailwind.config.js -i src/style/base/base.css -o ./dist/css/base.css",
"utilities": "npx tailwindcss -c src/style/utilities/tailwind.config.js -i src/style/utilities/utilities.css -o ./dist/css/utilities.css",
"components": "tailwindcss --postcss -i src/style/components.css -o ./dist/css/components.css",
"build": "cross-env NODE_ENV=production npm run clean && npm run create:paths && npm run js && npm run js:minify && npm run styles -- --minify && npm run base -- --minify && npm run components -- --minify && npm run utilities -- --minify ",
"utilities": "npx tailwindcss -c src/style/utilities/tailwind.config.js -i src/style/utilities/utilities.css -o ./dist/css/utilities.css",
"css": "npm run create:paths & npm run js & npm run styles",
"plugin": "npm run create:paths & npm run js & npm run base & npm run components & npm run utilities",
"dev": "npm run create:paths && npm run js & npm run styles & npm run base & npm run components & npm run utilities",
"npm:publish": "npm run build && git push --follow-tags origin main && npm publish"
"build": "cross-env NODE_ENV=production npm run clean && npm run create:paths && npm run js && npm run js:minify && npm run styles -- --minify && npm run base -- --minify && npm run components -- --minify && npm run utilities -- --minify "
},
"devDependencies": {
"@types/postcss-js": "4.0.0",
"@types/postcss-js": "4.0.1",
"autoprefixer": "^10.4.14",
"concurrently": "^8.2.0",
"cross-env": "^7.0.3",
Expand All @@ -80,12 +79,13 @@
},
"dependencies": {
"@riccox/colorify": "^0.2.2",
"postcss": "8.4.19",
"postcss-js": "4.0.0",
"postcss": "8.4.27",
"postcss-js": "4.0.1",
"postcss-selector-parser": "^6.0.13",
"tailwindcss": "^3.3.3"
},
"peerDependencies": {
"tailwindcss": "^3"
"tailwindcss": "^3",
"lodash": "^4.17.21"
}
}
2 changes: 1 addition & 1 deletion packages/tailwind/scripts/minify.js
View file
Expand Up @@ -26,6 +26,6 @@ async function minifyFiles(filePaths) {
);
}

const files = getAllFiles('./dist/js');
const files = getAllFiles('./dist/plugin');

minifyFiles(files).then((r) => r);
30 changes: 14 additions & 16 deletions packages/tailwind/src/config/index.ts → packages/tailwind/src/plugin/index.ts
View file
Expand Up @@ -13,10 +13,10 @@ import { createTheme, excludeThemesByName } from './utils/theme';
import _ from 'lodash';
import { getSelectorsWithPrefix } from './utils/prefix';

const basePath = path.resolve(__dirname, path.join('..', 'css'));
const baseCSS = fs.readFileSync(path.join(basePath, 'base.css'), 'utf-8');
const componentsCSS = fs.readFileSync(path.join(basePath, 'components.css'), 'utf-8');
const utilitiesCSS = fs.readFileSync(path.join(basePath, 'utilities.css'), 'utf-8');
const cssPath = path.resolve(__dirname, path.join('..', 'css'));
const baseCSS = fs.readFileSync(path.join(cssPath, 'base.css'), 'utf-8');
const componentsCSS = fs.readFileSync(path.join(cssPath, 'components.css'), 'utf-8');
const utilitiesCSS = fs.readFileSync(path.join(cssPath, 'utilities.css'), 'utf-8');

const config = plugin.withOptions<PluginConfig>(
(options: PluginConfig) =>
Expand All @@ -26,12 +26,9 @@ const config = plugin.withOptions<PluginConfig>(
const utilities = postcss.parse(utilitiesCSS);

// objectify css styles
// @ts-ignore
const baseObj = postcssJs.objectify(base);
// @ts-ignore
const componentsObj = postcssJs.objectify(components);
// @ts-ignore
const utilitiesObj = postcssJs.objectify(utilities);
const baseCSSObj = postcssJs.objectify(base);
const componentsCSSObj = postcssJs.objectify(components);
const utilitiesCSSObj = postcssJs.objectify(utilities);

// get sira-ui config
const configValue: PluginConfig = { ...options } || {};
Expand Down Expand Up @@ -62,6 +59,7 @@ const config = plugin.withOptions<PluginConfig>(
],
};

const baseRules = [baseCSSObj];
// validate config
if (isValidObject(siraConfig)) {
// remove excluded themes
Expand All @@ -80,20 +78,20 @@ const config = plugin.withOptions<PluginConfig>(
mergedTheme = _.merge(lightTheme, theme);
}

addBase([
baseRules.push(
// inject some basic depended css variables
...createTheme(mergedTheme),
]);
createTheme(mergedTheme)
);
});
}
}

// add all style to tailwindcss
addBase(baseObj);
addBase(baseRules);
// apply prefix, must apply a string even empty like '' for normal build
const componentsPrefixed = getSelectorsWithPrefix(configValue.prefix ?? '', componentsObj);
const componentsPrefixed = getSelectorsWithPrefix(configValue.prefix ?? '', componentsCSSObj);
addComponents(componentsPrefixed);
addUtilities(utilitiesObj);
addUtilities(utilitiesCSSObj);
},
(options: PluginConfig) => {
const customColorNames: string[] = [];
Expand Down
0 ...s/tailwind/src/config/theme/dark-theme.ts → ...s/tailwind/src/plugin/theme/dark-theme.ts
View file
File renamed without changes.
0 .../tailwind/src/config/theme/light-theme.ts → .../tailwind/src/plugin/theme/light-theme.ts
View file
File renamed without changes.
0 ...es/tailwind/src/config/theme/variables.ts → ...es/tailwind/src/plugin/theme/variables.ts
View file
File renamed without changes.
0 ...tailwind/src/config/types/config.types.ts → ...tailwind/src/plugin/types/config.types.ts
View file
File renamed without changes.
0 .../tailwind/src/config/types/theme.types.ts → .../tailwind/src/plugin/types/theme.types.ts
View file
File renamed without changes.
0 ...lwind/src/config/types/variables.types.ts → ...lwind/src/plugin/types/variables.types.ts
View file
File renamed without changes.
0 ...ailwind/src/config/utils/css-variables.ts → ...ailwind/src/plugin/utils/css-variables.ts
View file
File renamed without changes.
0 packages/tailwind/src/config/utils/object.ts → packages/tailwind/src/plugin/utils/object.ts
View file
File renamed without changes.
18 changes: 5 additions & 13 deletions packages/tailwind/src/config/utils/prefix.ts → packages/tailwind/src/plugin/utils/prefix.ts
View file
@@ -1,5 +1,6 @@
import postcss, { Declaration, Root, Rule } from 'postcss';
import selectorParser from 'postcss-selector-parser';
const postcssJs = require('postcss-js');

const addPrefix = (prefix: string) => {
return (css: Root) => {
Expand All @@ -21,20 +22,11 @@ interface CSSObject {

export const getSelectorsWithPrefix = (prefix: string, cssObject: CSSObject): CSSObject => {
const prefixWithoutSpace = prefix.replace(/\s/g, '');
let cssCode = '';
for (let key in cssObject) {
cssCode += `${key}{`;
// skip keyframe code
if (key.indexOf('keyframes') === -1) {
for (let prop in cssObject[key]) {
cssCode += `${prop}:${cssObject[key][prop]};`;
}
}
cssCode += `}`;
}
const prefixedCSS = postcss([addPrefix(prefixWithoutSpace)]).process(cssCode, {
from: undefined,

const prefixedCSS = postcss([addPrefix(prefixWithoutSpace)]).process(cssObject, {
parser: postcssJs,
});

const prefixedCSSObject: CSSObject = {};
prefixedCSS.root.walkRules((rule: Rule) => {
const selector = rule.selector;
Expand Down
0 ...ges/tailwind/src/config/utils/safelist.ts → ...ges/tailwind/src/plugin/utils/safelist.ts
View file
File renamed without changes.
0 packages/tailwind/src/config/utils/theme.ts → packages/tailwind/src/plugin/utils/theme.ts
View file
File renamed without changes.
0 .../tailwind/src/config/utils/withOpacity.ts → .../tailwind/src/plugin/utils/withOpacity.ts
View file
File renamed without changes.
2 changes: 1 addition & 1 deletion packages/tailwind/src/style/base.css
View file
@@ -1,2 +1,2 @@
@import 'tailwindcss/base';
@import './base/base.css';
@import './base/preset.css';
104 changes: 1 addition & 103 deletions packages/tailwind/src/style/base/base.css
View file
@@ -1,104 +1,2 @@
@import 'tailwindcss/base';

html {
-webkit-tap-highlight-color: transparent;
}

html,
body {
@apply z-0 m-0 p-0;
color: rgb(var(--sira-colors-bw-1000));
background-color: rgb(var(--sira-colors-bw-50));

/* default bw color */
--sira-color-100: var(--sira-colors-bw-100);
--sira-color-200: var(--sira-colors-bw-200);
--sira-color-300: var(--sira-colors-bw-300);
--sira-color-400: var(--sira-colors-bw-400);
--sira-color-500: var(--sira-colors-bw-500);
--sira-color-600: var(--sira-colors-bw-600);
--sira-color-700: var(--sira-colors-bw-700);
--sira-color-800: var(--sira-colors-bw-800);
--sira-color-900: var(--sira-colors-bw-900);
--sira-color-1000: var(--sira-colors-bw-1000);
--sira-color-1100: var(--sira-colors-bw-1100);
--sira-color-100-contrast: var(--sira-colors-bw-100-contrast);
--sira-color-200-contrast: var(--sira-colors-bw-200-contrast);
--sira-color-300-contrast: var(--sira-colors-bw-300-contrast);
--sira-color-400-contrast: var(--sira-colors-bw-400-contrast);
--sira-color-500-contrast: var(--sira-colors-bw-500-contrast);
--sira-color-600-contrast: var(--sira-colors-bw-600-contrast);
--sira-color-700-contrast: var(--sira-colors-bw-700-contrast);
--sira-color-800-contrast: var(--sira-colors-bw-800-contrast);
--sira-color-900-contrast: var(--sira-colors-bw-900-contrast);
--sira-color-1000-contrast: var(--sira-colors-bw-1000-contrast);
--sira-color-1100-contrast: var(--sira-colors-bw-1100-contrast);
}

/*************************** Scrollbar */
/* Works on Firefox */
*:hover {
scrollbar-color: rgb(var(--sira-colors-bw-600)) transparent;
}

/* Works on Chrome, Edge, and Safari */
*::-webkit-scrollbar {
/* avoid div width shift from scrollbar */
width: 0.4rem;
height: 0.4rem;
background: transparent;
}

*::-webkit-scrollbar-track {
background-color: transparent;
}

*:hover::-webkit-scrollbar-thumb,
*::-webkit-scrollbar-thumb:hover {
background-color: rgb(var(--sira-colors-bw-600));
border: 0.1rem solid transparent;
border-radius: 1.4rem;
-webkit-border-radius: 1.4rem;
-moz-border-radius: 1.4rem;
-ms-border-radius: 1.4rem;
-o-border-radius: 1.4rem;
}

*::-webkit-scrollbar-thumb {
background-color: transparent;
}

*::-webkit-scrollbar-corner {
background-color: transparent;
}

kbd {
display: inline-flex;
font-weight: 600;
white-space: nowrap;
justify-content: center;
align-items: center;
border-radius: 0.375rem;
border-width: 1px;
height: fit-content;

padding-left: 0.5rem;
padding-right: 0.5rem;
padding-left: 0.5rem;
padding-right: 0.5rem;
font-size: 0.75rem;
line-height: 1rem;

--tw-shadow: 0px 1.5px 0px rgba(0, 0, 0, 0.1);
--tw-shadow-colored: 0px 1.5px 0px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);

--tw-border-opacity: 1;
border-color: rgba(var(--sira-colors-bw-600), var(--tw-border-opacity));
--tw-bg-opacity: 1;
background-color: rgba(var(--sira-colors-bw-300), var(--tw-bg-opacity));
}

img {
@apply rounded-lg;
}
@import 'preset.css';
104 changes: 104 additions & 0 deletions packages/tailwind/src/style/base/preset.css
View file
@@ -0,0 +1,104 @@
html {
-webkit-tap-highlight-color: transparent;
}

html,
body {
z-index: 0;
margin: 0;
padding: 0;
color: rgb(var(--sira-colors-bw-1000));
background-color: rgb(var(--sira-colors-bw-50));

/* default bw color */
--sira-color-100: var(--sira-colors-bw-100);
--sira-color-200: var(--sira-colors-bw-200);
--sira-color-300: var(--sira-colors-bw-300);
--sira-color-400: var(--sira-colors-bw-400);
--sira-color-500: var(--sira-colors-bw-500);
--sira-color-600: var(--sira-colors-bw-600);
--sira-color-700: var(--sira-colors-bw-700);
--sira-color-800: var(--sira-colors-bw-800);
--sira-color-900: var(--sira-colors-bw-900);
--sira-color-1000: var(--sira-colors-bw-1000);
--sira-color-1100: var(--sira-colors-bw-1100);
--sira-color-100-contrast: var(--sira-colors-bw-100-contrast);
--sira-color-200-contrast: var(--sira-colors-bw-200-contrast);
--sira-color-300-contrast: var(--sira-colors-bw-300-contrast);
--sira-color-400-contrast: var(--sira-colors-bw-400-contrast);
--sira-color-500-contrast: var(--sira-colors-bw-500-contrast);
--sira-color-600-contrast: var(--sira-colors-bw-600-contrast);
--sira-color-700-contrast: var(--sira-colors-bw-700-contrast);
--sira-color-800-contrast: var(--sira-colors-bw-800-contrast);
--sira-color-900-contrast: var(--sira-colors-bw-900-contrast);
--sira-color-1000-contrast: var(--sira-colors-bw-1000-contrast);
--sira-color-1100-contrast: var(--sira-colors-bw-1100-contrast);
}

/*************************** Scrollbar */
/* Works on Firefox */
*:hover {
scrollbar-color: rgb(var(--sira-colors-bw-600)) transparent;
}

/* Works on Chrome, Edge, and Safari */
*::-webkit-scrollbar {
/* avoid div width shift from scrollbar */
width: 0.4rem;
height: 0.4rem;
background: transparent;
}

*::-webkit-scrollbar-track {
background-color: transparent;
}

*:hover::-webkit-scrollbar-thumb,
*::-webkit-scrollbar-thumb:hover {
background-color: rgb(var(--sira-colors-bw-600));
border: 0.1rem solid transparent;
border-radius: 1.4rem;
-webkit-border-radius: 1.4rem;
-moz-border-radius: 1.4rem;
-ms-border-radius: 1.4rem;
-o-border-radius: 1.4rem;
}

*::-webkit-scrollbar-thumb {
background-color: transparent;
}

*::-webkit-scrollbar-corner {
background-color: transparent;
}

kbd {
display: inline-flex;
font-weight: 600;
white-space: nowrap;
justify-content: center;
align-items: center;
border-radius: 0.375rem;
border-width: 1px;
height: fit-content;

padding-left: 0.5rem;
padding-right: 0.5rem;
padding-left: 0.5rem;
padding-right: 0.5rem;
font-size: 0.75rem;
line-height: 1rem;

--tw-shadow: 0px 1.5px 0px rgba(0, 0, 0, 0.1);
--tw-shadow-colored: 0px 1.5px 0px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);

--tw-border-opacity: 1;
border-color: rgba(var(--sira-colors-bw-600), var(--tw-border-opacity));
--tw-bg-opacity: 1;
background-color: rgba(var(--sira-colors-bw-300), var(--tw-bg-opacity));
}

img {
border-radius: 0.5rem;
}
12 changes: 4 additions & 8 deletions packages/tailwind/tailwind.config.js
View file
@@ -1,12 +1,8 @@
const { safeList } = require('./dist/js/utils/safelist.js');
const { safeList } = require('./dist/plugin/utils/safelist.js');

/** @type {import('tailwindcss').Config} */
module.exports = {
safelist: safeList,
content: process.env.NODE_ENV === 'production' ? [{ raw: '' }] : ['../../apps/**/*.{html,js,ts,tsx,jsx}'],
darkMode: 'class',
theme: {
extend: {},
},
plugins: [require('./dist/js')],
safelist: process.env.NODE_ENV === 'production' ? safeList : [],
content: process.env.NODE_ENV === 'production' ? [{ raw: '' }] : ['../../apps/**/*.{html,js,ts,tsx,jsx,css}'],
plugins: [require('./dist/plugin')],
};

1 comment on commit 9d4f02f

@vercel
Copy link

@vercel vercel bot commented on 9d4f02f Aug 4, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

sira-website – ./

sira-website-git-main-vircx.vercel.app
sira-design.party
sira.vercel.app
sira-website-vircx.vercel.app
www.sira-design.party

Please sign in to comment.